From 1fc41c4b7b7a40c2e49ff18fafc86ddf5f6b55dd Mon Sep 17 00:00:00 2001
From: rafayet-monon <rafayet.monon@gmail.com>
Date: Thu, 3 Jun 2021 18:19:20 +0600
Subject: [PATCH] [task-11] Added design to settings page.

---
 .../controllers/user_settings_controller.ex   |  4 +-
 .../templates/user_settings/edit.html.eex     | 50 +++++++++++--------
 priv/gettext/auth.pot                         | 26 ++++++++++
 priv/gettext/en/LC_MESSAGES/auth.po           | 26 ++++++++++
 .../user_settings_controller_test.exs         |  4 +-
 .../settings_page/settings_page_test.exs      |  2 +-
 6 files changed, 87 insertions(+), 25 deletions(-)

diff --git a/lib/elixir_search_extractor_web/controllers/user_settings_controller.ex b/lib/elixir_search_extractor_web/controllers/user_settings_controller.ex
index d847866..25bba01 100644
--- a/lib/elixir_search_extractor_web/controllers/user_settings_controller.ex
+++ b/lib/elixir_search_extractor_web/controllers/user_settings_controller.ex
@@ -22,7 +22,9 @@ defmodule ElixirSearchExtractorWeb.UserSettingsController do
         |> UserAuth.log_in_user(user)
 
       {:error, changeset} ->
-        render(conn, "edit.html", password_changeset: changeset)
+        conn
+        |> put_flash(:error, "Oops, something went wrong! Please check the errors below.")
+        |> render("edit.html", password_changeset: changeset)
     end
   end
 
diff --git a/lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex b/lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex
index 3fe9f41..50c9973 100644
--- a/lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex
+++ b/lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex
@@ -1,29 +1,37 @@
-<h1>Settings</h1>
+<div class="card-auth">
+  <div class="card-auth__form">
+    <div class="card-auth__title">
+      <h4><%= dgettext("auth", "Change password!") %></h4>
+    </div>
 
-<h3>Change password</h3>
+    <%= form_for @password_changeset, Routes.user_settings_path(@conn, :update), [class: "form form--horizontal"], fn f -> %>
 
-<%= form_for @password_changeset, Routes.user_settings_path(@conn, :update), fn f -> %>
-  <%= if @password_changeset.action do %>
-    <div class="alert alert-danger">
-      <p>Oops, something went wrong! Please check the errors below.</p>
-    </div>
-  <% end %>
+      <%= hidden_input f, :action, name: "action", value: "update_password" %>
 
-  <%= hidden_input f, :action, name: "action", value: "update_password" %>
+      <div class="form__group required">
+        <%= label f, :password, dgettext("auth", "New password") %>
+        <%= password_input f, :password, required: true, class: "form__control" %>
+        <%= error_tag f, :password %>
+      </div>
 
-  <%= label f, :password, "New password" %>
-  <%= password_input f, :password, required: true %>
-  <%= error_tag f, :password %>
+      <div class="form__group required">
+        <%= label f, :password_confirmation, dgettext("auth", "Confirm password") %>
+        <%= password_input f, :password_confirmation, required: true, class: "form__control" %>
+        <%= error_tag f, :password_confirmation %>
+      </div>
 
-  <%= label f, :password_confirmation, "Confirm new password" %>
-  <%= password_input f, :password_confirmation, required: true %>
-  <%= error_tag f, :password_confirmation %>
+      <div class="form__group required">
+        <%= label f, :current_password, dgettext("auth", "Current password"), for: "current_password_for_password" %>
+        <%= password_input f, :current_password, required: true, name: "current_password",
+            id: "current_password_for_password", class: "form__control" %>
+        <%= error_tag f, :current_password %>
+      </div>
 
-  <%= label f, :current_password, for: "current_password_for_password" %>
-  <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password" %>
-  <%= error_tag f, :current_password %>
+      <%= submit dgettext("auth", "Change password"), class: "btn btn--primary card-auth__button" %>
+    <% end %>
 
-  <div>
-    <%= submit "Change password" %>
+    <div class="card-auth__footer">
+      <%= dgettext("auth", "Go back to") %> <%= link "Dashboard!", to: Routes.page_path(@conn, :index) %>
+    </div>
   </div>
-<% end %>
+</div>
diff --git a/priv/gettext/auth.pot b/priv/gettext/auth.pot
index bcf7c8e..e7d6515 100644
--- a/priv/gettext/auth.pot
+++ b/priv/gettext/auth.pot
@@ -17,6 +17,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/elixir_search_extractor_web/templates/user_registration/new.html.eex:27
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:18
 msgid "Confirm password"
 msgstr ""
 
@@ -71,3 +72,28 @@ msgstr ""
 #: lib/elixir_search_extractor_web/templates/shared/_app-navbar.html.eex:17
 msgid "Settings"
 msgstr ""
+
+#, elixir-format
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:30
+msgid "Change password"
+msgstr ""
+
+#, elixir-format
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:4
+msgid "Change password!"
+msgstr ""
+
+#, elixir-format
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:24
+msgid "Current password"
+msgstr ""
+
+#, elixir-format
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:12
+msgid "New password"
+msgstr ""
+
+#, elixir-format
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:34
+msgid "Go back to"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/auth.po b/priv/gettext/en/LC_MESSAGES/auth.po
index 0d4fd55..c2ca33b 100644
--- a/priv/gettext/en/LC_MESSAGES/auth.po
+++ b/priv/gettext/en/LC_MESSAGES/auth.po
@@ -18,6 +18,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/elixir_search_extractor_web/templates/user_registration/new.html.eex:27
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:18
 msgid "Confirm password"
 msgstr ""
 
@@ -72,3 +73,28 @@ msgstr ""
 #: navbar.html.eex:17
 msgid "Settings"
 msgstr ""
+
+#, elixir-format
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:30
+msgid "Change password"
+msgstr ""
+
+#, elixir-format
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:4
+msgid "Change password!"
+msgstr ""
+
+#, elixir-format
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:24
+msgid "Current password"
+msgstr ""
+
+#, elixir-format
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:12
+msgid "New password"
+msgstr ""
+
+#, elixir-format
+#: lib/elixir_search_extractor_web/templates/user_settings/edit.html.eex:34
+msgid "Go back to"
+msgstr ""
diff --git a/test/elixir_search_extractor_web/controllers/user_settings_controller_test.exs b/test/elixir_search_extractor_web/controllers/user_settings_controller_test.exs
index b2165fc..843476d 100644
--- a/test/elixir_search_extractor_web/controllers/user_settings_controller_test.exs
+++ b/test/elixir_search_extractor_web/controllers/user_settings_controller_test.exs
@@ -10,7 +10,7 @@ defmodule ElixirSearchExtractorWeb.UserSettingsControllerTest do
     test "renders settings page", %{conn: conn} do
       conn = get(conn, Routes.user_settings_path(conn, :edit))
       response = html_response(conn, 200)
-      assert response =~ "<h1>Settings</h1>"
+      assert response =~ "<h4>Change password!</h4>"
     end
 
     test "redirects if user is not logged in" do
@@ -50,7 +50,7 @@ defmodule ElixirSearchExtractorWeb.UserSettingsControllerTest do
         })
 
       response = html_response(old_password_conn, 200)
-      assert response =~ "<h1>Settings</h1>"
+      assert response =~ "<h4>Change password!</h4>"
       assert response =~ "should be at least 6 character(s)"
       assert response =~ "does not match password"
       assert response =~ "is not valid"
diff --git a/test/elixir_search_extractor_web/features/settings_page/settings_page_test.exs b/test/elixir_search_extractor_web/features/settings_page/settings_page_test.exs
index dc93d21..9c31c32 100644
--- a/test/elixir_search_extractor_web/features/settings_page/settings_page_test.exs
+++ b/test/elixir_search_extractor_web/features/settings_page/settings_page_test.exs
@@ -5,7 +5,7 @@ defmodule ElixirSearchExtractorWeb.SettingsPage.SettingsPageTest do
     session
     |> register_and_login()
     |> visit(Routes.user_settings_path(ElixirSearchExtractorWeb.Endpoint, :edit))
-    |> assert_has(Query.text("Settings"))
+    |> assert_has(Query.text("Change password!"))
   end
 
   feature "user can change password if correct current password is given", %{session: session} do