Styled password reset form

6 files changed, 46 insertions, 44 deletions

@@ -27,7 +27,7 @@ body {
     }
   }
 
-  input[type=text], input[type=password] {
+  input[type=text], input[type=password], input[type=email] {
     font-size: 24px;
     padding: 3px;
     width: 100%;
@@ -69,7 +69,7 @@ body {
   font-size: .75em;
 }
 
-#flash {
+#flash, #error_explanation li {
   color: black;
   background-color: white;
   padding: .75em;
@@ -80,7 +80,7 @@ body {
   box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
 }
 
-.flash-alert {
+.flash-alert, #error_explanation li {
   border-left: 5px solid red;
 }
 
@@ -91,3 +91,18 @@ body {
 .flash-tag {
   font-weight: bold;
 }
+
+#error_explanation {
+  h2 {
+    display: none;
+  }
+
+  ul {
+    margin-top: 0;
+    padding: 0;
+  }
+
+  li {
+    list-style-type: none;
+  }
+}
@@ -1,4 +1,5 @@
 class Users::PasswordsController < Devise::PasswordsController
+  layout "userdata"
   # GET /resource/password/new
   # def new
   #   super
@@ -1,25 +0,0 @@
-<h2>Change your password</h2>
-
-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
-  <%= devise_error_messages! %>
-  <%= f.hidden_field :reset_password_token %>
-
-  <div class="field">
-    <%= f.label :password, "New password" %><br />
-    <% if @minimum_password_length %>
-      <em>(<%= @minimum_password_length %> characters minimum)</em><br />
-    <% end %>
-    <%= f.password_field :password, autofocus: true, autocomplete: "off" %>
-  </div>
-
-  <div class="field">
-    <%= f.label :password_confirmation, "Confirm new password" %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "off" %>
-  </div>
-
-  <div class="actions">
-    <%= f.submit "Change my password" %>
-  </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
@@ -1,16 +0,0 @@
-<h2>Forgot your password?</h2>
-
-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
-  <%= devise_error_messages! %>
-
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true %>
-  </div>
-
-  <div class="actions">
-    <%= f.submit "Send me reset password instructions" %>
-  </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
@@ -0,0 +1,16 @@
+%h2 Change your password
+= devise_error_messages!
+#principal
+  = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
+    = f.hidden_field :reset_password_token
+    .field
+      = f.label :password, "New password"
+      - if @minimum_password_length
+        %em= "(#{@minimum_password_length} characters minimum)"
+      = f.password_field :password, autofocus: true, autocomplete: "off"
+    .field
+      = f.label :password_confirmation, "Confirm new password"
+      = f.password_field :password_confirmation, autocomplete: "off"
+    .submit-field
+      = f.submit "Change my password"
+.navigation= link_to "← Back to thoughts", root_url
@@ -0,0 +1,11 @@
+%h2 Forgot your password?
+= devise_error_messages!
+#principal
+  = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
+    .field
+      = f.label :email
+      = f.email_field :email, autofocus: true
+    .submit-field
+      = f.submit "Submit"
+.navigation= link_to "Log in", new_session_path(resource_name)
+.navigation= link_to "← Back to thoughts", root_url