[Task-11][Frontend] As a user, I can change password in the settings

Merge pull request #31 from rafayet-monon/feature/task-11-frontend-settings

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
 

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>

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 ""

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 ""

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"

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