From 07ab82c28f3ab21267fc90fe5ca09fc99d4b092a Mon Sep 17 00:00:00 2001
From: huylc <conghuy1006@gmail.com>
Date: Mon, 2 Sep 2019 20:51:00 +0700
Subject: [PATCH] 175: edit-profile

---
 app/assets/javascripts/custom.js            | 11 +++
 app/assets/stylesheets/custom.scss          | 75 ++++++++++++++++++-
 app/controllers/application_controller.rb   |  2 +-
 app/helpers/application_helper.rb           | 16 -----
 app/uploaders/avatar_uploader.rb            | 11 ++-
 app/views/layouts/_footer.html.slim         | 79 +++++++++++----------
 app/views/layouts/_header.html.slim         | 14 +++-
 app/views/manager/admins/_admin.html.slim   |  5 +-
 app/views/manager/admins/_form.html.slim    |  2 +-
 app/views/manager/admins/update.js.slim     |  2 +-
 app/views/manager/members/_form.html.slim   |  2 +-
 app/views/manager/members/_member.html.slim |  5 +-
 app/views/registrations/edit.html.slim      | 58 +++++++++++++++
 app/views/shared/_view_content.html.slim    |  2 +-
 app/views/shared/manager/_top.html.slim     |  5 +-
 config/application.rb                       |  3 +
 config/locales/en.yml                       | 11 +++
 17 files changed, 219 insertions(+), 84 deletions(-)
 create mode 100644 app/views/registrations/edit.html.slim

diff --git a/app/assets/javascripts/custom.js b/app/assets/javascripts/custom.js
index aa37640..4c715cf 100644
--- a/app/assets/javascripts/custom.js
+++ b/app/assets/javascripts/custom.js
@@ -26,6 +26,17 @@ $(document).ready(function() {
   $(".preview-signup").change(function() {
     readURL(this, '#img-prev-signup');
   });
+
+  $(".preview-edit-profile").change(function() {
+    readURL(this, '.img-circle');
+  });
+
+  $(".hide-form-password").css('display', 'none');
+  $(".show-form").on('click', function(){
+    $(".hide-form-password").toggle();
+    $(this).text( $(this).text() == 'More' ? "Hide" : "More");
+  });
+
 });
 
 function readURL(f, previewId) {
diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
index ee3ccb4..bd01892 100644
--- a/app/assets/stylesheets/custom.scss
+++ b/app/assets/stylesheets/custom.scss
@@ -41,7 +41,7 @@ header {
   animation: fade-in 0.75s 0.25s ease-in forwards;
 }
 
-nav {
+.custom-nav {
   position: fixed;
   width: 100%;
   z-index: 10;
@@ -384,13 +384,13 @@ $offWhite: #e9eaea;
 }
 
 @media (min-width: 992px) {
-  .container div div {
+  .title-welcome {
     flex-basis: 58.33333%;
     max-width: 58.33333%;
   }
 }
 
-.container div div {
+.title-welcome {
   flex-basis: 100%;
   max-width: 100%;
 }
@@ -570,3 +570,72 @@ h1, h2, h3, h4, h5, h6 {
 #error_explanation {
   color: red;
 }
+
+.custom-avatar-drop {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+}
+
+#show-dropdown {
+  position: relative;
+  height: 52px;
+}
+
+#hidden-dropdown {
+  visibility: hidden;
+  position: absolute;
+  background-color: #222;
+  box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.2);
+  transition: .1s;
+  opacity: 0;
+  margin-left: 20px;
+  margin-top: 27px;
+  width: 104%
+}
+
+#hidden-dropdown a:hover {
+  color: #999;
+}
+
+#show-dropdown:hover #hidden-dropdown {
+  visibility: visible;
+  opacity: 1;
+}
+
+.custom-col-3 {
+  width: 23%;
+  float: left;
+}
+
+.personal-info {
+  float: left;
+  margin-left: 15px;
+}
+
+.img-circle {
+  margin-top: 9px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.label-profile {
+  text-align: center;
+}
+
+.form-profile {
+  width: 100%;
+}
+
+.align-attr {
+  margin-top: 18px;
+}
+
+.margin-btn .btn {
+  margin: 10px;
+}
+
+.preview-edit-profile {
+  padding: 3px;
+}
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index fe8ff94..32b32f7 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -24,6 +24,6 @@ def after_sign_out_path_for(resource_or_scope)
   def configure_permitted_parameters
     devise_parameter_sanitizer.permit(:sign_up, keys: %i[name email address password password_confirmation avatar])
     devise_parameter_sanitizer
-      .permit(:account_update, keys: %i[name email address password password_confirmation avatar])
+      .permit(:account_update, keys: %i[name email address password password_confirmation avatar current_password])
   end
 end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 6f9d73f..6bd9f49 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -5,20 +5,4 @@ def full_title(page_title = "")
     base_title = t ".title"
     page_title.empty? ? base_title : "#{page_title} | #{base_title}"
   end
-
-  def avatar_member(member)
-    if member.avatar?
-      image_tag member.avatar.url, class: "avatar-default-member", id: "img_member_prev"
-    else
-      image_tag "defaultavatar.jpeg", class: "avatar-default-member", id: "img_member_prev"
-    end
-  end
-
-  def avatar_admin(admin)
-    if admin.avatar?
-      image_tag admin.avatar.url, class: "avatar-default", id: "img_prev"
-    else
-      image_tag "defaultavatar.jpeg", class: "avatar-default", id: "img_prev"
-    end
-  end
 end
diff --git a/app/uploaders/avatar_uploader.rb b/app/uploaders/avatar_uploader.rb
index c8b37c1..033074c 100644
--- a/app/uploaders/avatar_uploader.rb
+++ b/app/uploaders/avatar_uploader.rb
@@ -16,12 +16,11 @@ def store_dir
   end
 
   # Provide a default URL as a default if there hasn't been a file uploaded:
-  # def default_url(*args)
-  #   # For Rails 3.1+ asset pipeline compatibility:
-  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
-  #
-  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
-  # end
+  def default_url
+    # For Rails 3.1+ asset pipeline compatibility:
+    "defaultavatar.jpeg"
+    # "/images/fallback/" + [version_name, "default.png"].compact.join('_')
+  end
 
   # Process files as they are uploaded:
   # process scale: [200, 300]
diff --git a/app/views/layouts/_footer.html.slim b/app/views/layouts/_footer.html.slim
index 18ce507..8aaa71a 100644
--- a/app/views/layouts/_footer.html.slim
+++ b/app/views/layouts/_footer.html.slim
@@ -1,40 +1,41 @@
 footer.fixed_footer
-  .row
-    .col-md-2
-      .logo
-    .col-md-7
-      p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    .col-md-3.social-media-links
-      ul
-        li
-          /! twitter
-          a href="#"
-            svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1") /
-            svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1") /
-        li
-          /! facebook
-          a href="#"
-            svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z") /
-            svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z") /
-        li
-          /! youtube
-          a href="#"
-            svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z") /
-            svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z") /
-        li
-          /! instagram
-          a href="#"
-            svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z") /
-              path.st0 d=("M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z") /
-              circle.st0 cx="22.9" cy="7.1" r="1.8" /
-            svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z") /
-              path.st0 d=("M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z") /
-              circle.st0 cx="22.9" cy="7.1" r="1.8" /
+  .container-fluid
+    .row
+      .col-md-2
+        .logo
+      .col-md-7
+        p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      .col-md-3.social-media-links
+        ul
+          li
+            /! twitter
+            a href="#"
+              svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1") /
+              svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1") /
+          li
+            /! facebook
+            a href="#"
+              svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z") /
+              svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z") /
+          li
+            /! youtube
+            a href="#"
+              svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z") /
+              svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z") /
+          li
+            /! instagram
+            a href="#"
+              svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z") /
+                path.st0 d=("M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z") /
+                circle.st0 cx="22.9" cy="7.1" r="1.8" /
+              svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z") /
+                path.st0 d=("M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z") /
+                circle.st0 cx="22.9" cy="7.1" r="1.8" /
diff --git a/app/views/layouts/_header.html.slim b/app/views/layouts/_header.html.slim
index 9ff7b35..a63520f 100644
--- a/app/views/layouts/_header.html.slim
+++ b/app/views/layouts/_header.html.slim
@@ -1,13 +1,21 @@
-nav
+nav.custom-nav
   = link_to "", root_path, class: "logo"
   ul
     li = link_to "item1", "#"
+    li = link_to "item4", "#"
     - if member_signed_in?
-      li = link_to t(".signout"), destroy_member_session_path, method: :delete
+      li#show-dropdown
+        = link_to("#") do
+          span
+            = image_tag current_member.avatar.url, class: "custom-avatar-drop"
+            = truncate(current_member.name, length: 10)
+        #hidden-dropdown
+          = link_to "Profile", "#"
+          = link_to t(".setting"), edit_member_registration_path
+          = link_to t(".signout"), destroy_member_session_path, method: :delete
     - else
       li = link_to t(".signup"), new_member_registration_path
       li = link_to t(".signin"), new_member_session_path
-    li = link_to "item4", "#"
 header
   .headline
     .inner
diff --git a/app/views/manager/admins/_admin.html.slim b/app/views/manager/admins/_admin.html.slim
index ffd0f83..6174be8 100644
--- a/app/views/manager/admins/_admin.html.slim
+++ b/app/views/manager/admins/_admin.html.slim
@@ -2,10 +2,7 @@ tr.data-user
   td
     = admin.id
   td
-    - if admin.avatar?
-      = image_tag admin.avatar.url, class: "show-avatar-index"
-    - else
-      = image_tag "defaultavatar.jpeg", class: "show-avatar-index"
+    = image_tag admin.avatar.url, class: "show-avatar-index"
     = admin.name
   td
     = admin.email
diff --git a/app/views/manager/admins/_form.html.slim b/app/views/manager/admins/_form.html.slim
index ae7ee67..d8ac635 100644
--- a/app/views/manager/admins/_form.html.slim
+++ b/app/views/manager/admins/_form.html.slim
@@ -7,7 +7,7 @@
         hr
         .form-group.row[style="padding: 25px"]
           .col-sm-3
-            = avatar_admin admin
+            = image_tag admin.avatar.url, class: "avatar-default", id: "img_prev"
           .prev.col-sm-9
             = f.file_field :avatar, class: "form-control preview"
         .form-group
diff --git a/app/views/manager/admins/update.js.slim b/app/views/manager/admins/update.js.slim
index 7d14a5a..c3b1e1b 100644
--- a/app/views/manager/admins/update.js.slim
+++ b/app/views/manager/admins/update.js.slim
@@ -14,4 +14,4 @@
     toastr.success("#{flash[:success]}");
   - if current_admin.id == @admin.id
     |
-      $('#load-current').attr("src","#{@admin.avatar}");
+      $('#load-current').attr("src","#{@admin.avatar.url}");
diff --git a/app/views/manager/members/_form.html.slim b/app/views/manager/members/_form.html.slim
index 34a8530..3b52bf5 100644
--- a/app/views/manager/members/_form.html.slim
+++ b/app/views/manager/members/_form.html.slim
@@ -7,7 +7,7 @@
         hr
         .form-group.row[style="padding: 25px"]
           .col-sm-3
-            = avatar_member member
+            = image_tag member.avatar.url, class: "avatar-default-member", id: "img_member_prev"
           .prev.col-sm-9
             = f.file_field :avatar, class: "form-control preview_member"
         .form-group
diff --git a/app/views/manager/members/_member.html.slim b/app/views/manager/members/_member.html.slim
index f6ca66c..294d78d 100644
--- a/app/views/manager/members/_member.html.slim
+++ b/app/views/manager/members/_member.html.slim
@@ -2,10 +2,7 @@ tr.data-user
   td
     = member.id
   td
-    - if member.avatar?
-      = image_tag member.avatar.url, class: "show-avatar-index"
-    - else
-      = image_tag "defaultavatar.jpeg", class: "show-avatar-index"
+    = image_tag member.avatar.url, class: "show-avatar-index"
     = member.name
   td
     = member.email
diff --git a/app/views/registrations/edit.html.slim b/app/views/registrations/edit.html.slim
new file mode 100644
index 0000000..4ab8303
--- /dev/null
+++ b/app/views/registrations/edit.html.slim
@@ -0,0 +1,58 @@
+.container
+  h2
+    = t ".title", name: current_member.name.to_s.humanize
+  hr
+  .row
+    = form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :patch }) do |f|
+      .error-message style="margin-left: 14px"
+        = render "shared/manager/error_messages", object: resource
+      .col-md-3.custom-col-3
+        .text-center
+          = image_tag resource.avatar.url, class: "img-circle"
+          h6
+            = t ".description_form"
+            = f.file_field :avatar, class: "form-control preview-edit-profile"
+      .col-md-9.personal-info
+        h3
+          = t ".title_form"
+        .form-group
+          .row.align-attr
+            = f.label :name, class: "control-label col-lg-3 label-profile"
+            .col-lg-9
+              = f.text_field :name, class: "form-control form-profile"
+        .form-group
+          .row.align-attr
+            = f.label :email, class: "control-label col-lg-3 label-profile"
+            .col-lg-9
+              = f.email_field :email, class: "form-control form-profile"
+        .form-group
+          .row.align-attr
+            = f.label :address, class: "control-label col-lg-3 label-profile"
+            .col-lg-9
+              = f.text_field :address, class: "form-control form-profile"
+        .hide-form-password
+          .form-group
+            .row.align-attr
+              = f.label :password, class: "control-label col-lg-3 label-profile"
+              .col-lg-9
+                i = t ".not_change_password"
+                br/
+                - if @minimum_password_length
+                  em
+                    = t ".require_password", count: "#{@minimum_password_length}"
+                = f.password_field :password, class: "form-control form-profile"
+          .form-group
+            .row.align-attr
+              = f.label :password_confirmation, "Confirmation", class: "control-label col-lg-3 label-profile"
+              .col-lg-9
+                = f.password_field :password_confirmation, class: "form-control form-profile"
+        .form-group
+          .row.align-attr
+            = f.label :current_password, class: "control-label col-lg-3 label-profile"
+            .col-lg-9
+              i = t ".require_current_password"
+              = f.password_field :current_password, class: "form-control form-profile"
+        .text-center.margin-btn
+          button.show-form.btn.btn-link type="button" = t ".more"
+          = f.submit t(".update"), class: "btn btn-primary"
+          = link_to t(".back"), root_path, class: "btn btn-secondary"
diff --git a/app/views/shared/_view_content.html.slim b/app/views/shared/_view_content.html.slim
index 802ab35..502c551 100644
--- a/app/views/shared/_view_content.html.slim
+++ b/app/views/shared/_view_content.html.slim
@@ -1,7 +1,7 @@
 .welcome
   .container.container--sm
     .row
-      .col-md-7.col-xs-12
+      .col-md-7.col-xs-12.title-welcome
         h1.welcome__title
           = t ".welcome_title"
         p.welcome__desc
diff --git a/app/views/shared/manager/_top.html.slim b/app/views/shared/manager/_top.html.slim
index 39c043a..3d1346c 100644
--- a/app/views/shared/manager/_top.html.slim
+++ b/app/views/shared/manager/_top.html.slim
@@ -8,10 +8,7 @@ nav.navbar.navbar-expand.navbar-light.bg-white.topbar.mb-4.static-top.shadow
   .custom-dropdown
     = link_to("#", class: "account", title: "#{current_admin.name}", "data-toggle": "tooltip", "data-placement": "left") do
       span = truncate(current_admin.name, length: 10)
-      - if current_admin.avatar?
-        = image_tag current_admin.avatar.url, class: "profile-circle", id: "load-current"
-      - else
-        = image_tag "defaultavatar.jpeg", class: "profile-circle"
+      = image_tag current_admin.avatar.url, class: "profile-circle", id: "load-current"
     .custom-submenu[style="display: none; "]
       ul.custom-root
         li
diff --git a/config/application.rb b/config/application.rb
index 9b9ac50..3ce1378 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -18,5 +18,8 @@ class Application < Rails::Application
     # -- all .rb files in that directory are automatically loaded after loading
     # the framework and any gems in your application.
     config.i18n.load_path += Dir[Rails.root.join("config", "locales", "**", "*.{rb,yml}")]
+    config.action_view.field_error_proc = proc { |html_tag, _instance|
+      html_tag
+    }
   end
 end
diff --git a/config/locales/en.yml b/config/locales/en.yml
index d323811..bb2b181 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -7,6 +7,7 @@ en:
       signup: "Sign Up"
       signin: "Sign In"
       signout: "Sign Out"
+      setting: "Settings"
     manager:
       title: "Booking Homestays"
   messages:
@@ -85,6 +86,16 @@ en:
       valid_pass: "(%{num} characters minimum)"
       signup_btn: "Sign up"
       login_link: "Login"
+    edit:
+      title: "Edit %{name}"
+      description_form: "Upload a photo..."
+      title_form: "Personal info"
+      not_change_password: "(leave blank if you don't want to change it)"
+      require_password: "(%{count} characters minimum)"
+      require_current_password: "(we need your current password to confirm your changes)"
+      more: "More"
+      update: "Update"
+      back: "Back"
   passwords:
     new_form:
       title: "Forgot Your Password?"