fixed edit user account page

app/assets/javascripts/src/Metamaps.js

@@ -3401,6 +3401,7 @@ Metamaps.Map.InfoBox = {
         });
 
         $('.yourMap .mapPermission').unbind().click(self.onPermissionClick);
+
     },
     createContributorList: function () {
         var self = Metamaps.Map.InfoBox;
@@ -3457,6 +3458,41 @@ Metamaps.Map.InfoBox = {
     }
 }; // end Metamaps.Map.InfoBox
 
+/*
+*
+* Account Settings
+*
+*/
+Metamaps.Account = {
+    init: function () {
+        var self = Metamaps.Account;
+         $(".changePass").click(function(){
+            $(".toHide").show();
+            $(".changePass").hide();
+        });
+    },
+
+    load: function(){
+        var self = Metamaps.Account;
+         $(".changePass").click(function(){
+            $(".toHide").show();
+            $(".changePass").hide();
+        });
+        self.attachEventListeners();
+    },
+    attachEventListeners: function () {
+        $(".changePass").click();
+        $(".noChangePass").click();
+    },
+    showPass: function(){
+        $(".toHide").show();
+        $(".changePass").hide();
+    },
+    hidePass: function(){
+        $(".toHide").hide();
+        $(".changePass").show();
+    }
+};
 
 /*
  *

app/assets/stylesheets/application.css

@@ -77,6 +77,8 @@ body,
     width: 300px;
     color: #f5f5f5;
     font-family: din-regular;
+    top: 118px;
+    position: absolute;
 }
 
 .new_user input[type="submit"] {
@@ -110,6 +112,7 @@ body,
     width: 120px;
     margin: 0 auto;
     position: relative;
+    margin-top: 40px;
 }
 .edit_user .editPhoto {
     display: none;
@@ -259,7 +262,6 @@ input[type="submit"]:active {
     margin-left:-166px;
     box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
     font-family: din-medium;
-    font-size: 18px;
     line-height: 18px;
     text-transform: uppercase;
     color:#424242;
@@ -272,21 +274,24 @@ input[type="submit"]:active {
     margin-left: -166px;
     box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
     text-transform: uppercase;
-    font-size: 18px;
     line-height: 18px;
     font-family: din-medium;
     color:#424242;
 }
 
+.toHide {
+    display:none;
+}
+
 .forgotPassword {
     height: 134px;
     font-family: din-medium;
     color:#424242;
     text-transform: uppercase;
     box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
-    font-size: 18px;
     margin-left: -166px;
     margin-top: -83px;
+    line-height: 18px;
 }
 
 .firstFieldText{
@@ -311,11 +316,12 @@ input[type="submit"]:active {
 }
 
 .smallText{
-    font: din-regular;
+    font-family: din-regular;
     font-size: 12px;
     line-height: 12px;
     color: #c04f4f;
-    margin-top: 16px;
+    margin-top: 8px;
+    text-transform: none;
 }
 
 .name {
@@ -325,6 +331,39 @@ input[type="submit"]:active {
     color:#424242;
     margin-top: 24px;
     text-transform: none;
+
+}
+
+.name:after {
+    background:url(edit.png)no-repeat;
+    content:" ";
+    position:absolute;
+    width:25px;
+    height:25px;
+    margin:5px 0px 0px 5px;
+}
+
+.changePass {
+    font-family: din-regular;
+    font-size: 14px;
+    line-height: 14px;
+    color: #4fb5c0;
+    padding-top: 16px;
+    float: left;
+    text-transform: none;
+    cursor: pointer;
+}
+
+.noChangePass {
+    font-family: din-regular;
+    font-size: 12px;
+    line-height: 12px;
+    color: #c04f4f;
+    padding-top: 16px;
+    float: left;
+    text-transform: none;
+    cursor: pointer;
+
 }
 
 .centerGreyForm input[type="text"],
@@ -357,7 +396,7 @@ input[type="submit"]:active {
     text-indent: 0px;
     text-shadow: none;
     display: inline-block;
-    font: din-medium;
+    font-family: din-medium;
     text-align: left;
 }
 

app/views/users/edit.html.erb

@@ -15,12 +15,16 @@
   <div class="name"> <%= @user.name %> </div>
   <div><%= form.label :email, "Email:", :class => "firstFieldText" %>
   <%= form.email_field :email  %></div>
+  <div class="changePass" onclick="Metamaps.Account.showPass()">Change Password</div>
+  <div class="toHide">
   <div><%= form.label :password, "Current Password:", :class => "firstFieldText" %>
   <%= form.password_field :password, :autocomplete => :off%></div>
    <div><%= form.label :password, "New Password:", :class => "firstFieldText" %>
   <%= form.password_field :password, :autocomplete => :off%></div>
    <div><%= form.label :password_confirmation, "Confirm New Password:", :class => "firstFieldText" %>
   <%= form.password_field :password_confirmation, :autocomplete => :off%></div>
+  <div class="noChangePass" onclick="Metamaps.Account.hidePass()">oops, don't change password</div>
+</div>
   <%= form.submit "Update", class: "update" %>
 <% end %>
 </div>

app/views/users/sessions/new.html.erb

@@ -6,27 +6,22 @@
   
   <div class="accountImage"></div>
   <div>
-  <%= f.email_field :email, :autofocus => true, :placeholder => "Email" %></div>
+  <%= f.email_field :email, :autofocus => true %></div>
 
   <div>
-  <%= f.password_field :password, :placeholder => "Password" %></div>
+  <%= f.password_field :password %></div>
 
-  <div class="accountSubmit"><%= f.submit "Sign in" %></div>
+  <div><%= f.submit "Sign in" %></div>
   <% if devise_mapping.rememberable? -%>
-    <div class="accountRememberMe">
+    <div><%= f.check_box :remember_me %></div>
-      <%= f.label :remember_me, "Stay signed in" %>
-      <%= f.check_box :remember_me %>
-      <div class="clearfloat"></div>
-    </div>
   <% end -%>
-  <div class="clearfloat"></div>
 
-  <div class="accountForgotPass">
+  <br />
-    <%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
+  <%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
-      <%= link_to "Forgot password?", new_password_path(resource_name), 
+    <%= link_to "Forgot your password?", new_password_path(resource_name), :class => "forgotPasswordText" , 
-          :data => { :bypass => 'true'}%><br />
+        :data => { :bypass => 'true'}%><br />
-    <% end -%>
+  <% end -%>
-  </div>
+  <br />
 <% end %>
 </div>