Add users settings page

lib/atomic_web/live/organization_live/index.ex

@@ -78,8 +78,4 @@ defmodule AtomicWeb.OrganizationLive.Index do
   defp list_organizations do
     Organizations.list_organizations()
   end
-
-  def update_default_organization(user, organization) do
-    Accounts.update_user(user, %{default_organization_id: organization.id})
-  end
 end

lib/atomic_web/live/organization_live/show.ex

@@ -19,14 +19,9 @@ defmodule AtomicWeb.OrganizationLive.Show do
   @impl true
   def handle_params(%{"organization_id" => id}, _, socket) do
     organization = Organizations.get_organization!(id, [:departments])
-    user = socket.assigns.current_user
     activities = Activities.list_activities_by_organization_id(id, [])
     departments = organization.departments
 
-    if user.default_organization_id != id do
-      Accounts.update_user(user, %{"default_organization_id" => id})
-    end
-
     entries = [
       %{
         name: gettext("Organizations"),

lib/atomic_web/templates/layout/live.html.heex

@@ -1,15 +1,15 @@
 <div x-data="{ open_menu: false}" x-data="{ navbar: false }" class="lg:flex lg:relative lg:flex-col lg:min-h-screen">
   <div class="flex flex-col min-h-max">
     <div x-data="{ open: false}" @click.away="open = false" class="lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col lg:border-r lg:border-zinc-200 lg:bg-white">
-      <div class="flex flex-1 flex-col overflow-y-auto lg:space-y-4 lg:h-0 lg:space-y-16">
+      <div class="flex flex-1 flex-col overflow-y-auto lg:space-y-4 lg:h-0 lg:space-y-16 lg:bg-zinc-100">
         <div class="relative inline-blocktext-left">
           <div>
             <button
               @click="open = !open"
               @keydown.escape.stop="open = false"
               @keydown.enter.prevent="open = !open"
               type="button"
-              class="group w-full bg-zinc-100 px-5 py-3 text-left text-sm font-medium text-zinc-700 hover:bg-zinc-200 focus:bg-zinc-300"
+              class="group w-full bg-zinc-200 px-5 py-3 text-left text-sm font-medium text-zinc-700 hover:bg-zinc-200 focus:bg-zinc-300"
               id="options-menu-button"
               aria-expanded="false"
               aria-haspopup="true"

lib/atomic_web/templates/user_settings/edit.html.heex

@@ -1,53 +1,77 @@
-<h1>Settings</h1>
+<div class="flex flex-col  w-screen h-screen justify-center bg-[url('/images/atomic.png')] bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat bg-opacity-25 bg-center">
+  <div class="flex flex-col lg:flex-row items-center justify-center lg:space-x-16">
+    <div class="py-8 px-4 lg:py-0 lg:px-0  flex flex-col items-center justify-center">
+      <h2 class="mb-6 text-center text-5xl font-extrabold text-zinc-900">
+        <span><%= gettext("Change Email") %></span>
+      </h2>
+      <.form let={f} for={@email_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_email" class="flex flex-col items-center justify-center w-full h-full mx-8 sm:mx-0">
+        <%= if @email_changeset.action do %>
+          <div class="alert alert-danger">
+            <p>Oops, something went wrong! Please check the errors below.</p>
+          </div>
+        <% end %>
 
-<h3>Change email</h3>
+        <%= hidden_input(f, :action, value: "update_email") %>
 
-<.form let={f} for={@email_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_email">
-  <%= if @email_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_email") %>
-
-  <%= label(f, :email) %>
-  <%= email_input(f, :email, required: true) %>
-  <%= error_tag(f, :email) %>
-
-  <%= label(f, :current_password, for: "current_password_for_email") %>
-  <%= password_input(f, :current_password, required: true, name: "current_password", id: "current_password_for_email") %>
-  <%= error_tag(f, :current_password) %>
+        <%= label(f, :email, class: "sr-only") %>
+        <%= email_input(f, :email, placeholder: gettext("New Email"), required: true, class: "relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-indigo-400 focus:outline-none sm:text-sm") %>
+        <%= error_tag(f, :email) %>
 
-  <div>
-    <%= submit("Change email") %>
-  </div>
-</.form>
-
-<h3>Change password</h3>
+        <%= label(f, :current_password, for: "current_password_for_email", class: "sr-only") %>
+        <%= password_input(f, :current_password,
+          placeholder: gettext("Password"),
+          required: true,
+          name: "current_password",
+          id: "current_password_for_email",
+          class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-indigo-400 focus:outline-none sm:text-sm"
+        ) %>
+        <%= error_tag(f, :current_password) %>
 
-<.form let={f} for={@password_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_password">
-  <%= if @password_changeset.action do %>
-    <div class="alert alert-danger">
-      <p>Oops, something went wrong! Please check the errors below.</p>
+        <div>
+          <%= submit("Change Email", class: "mt-6 w-64 border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm") %>
+        </div>
+      </.form>
     </div>
-  <% end %>
 
-  <%= hidden_input(f, :action, name: "action", value: "update_password") %>
+    <div class="px-4 lg:px-0  flex flex-col items-center justify-center">
+      <h2 class="mb-6 text-center text-5xl font-extrabold text-zinc-900">
+        <span><%= gettext("Change Password") %></span>
+      </h2>
+      <.form let={f} for={@password_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_password" class="flex flex-col items-center justify-center w-full h-full mx-8 sm:mx-0">
+        <%= if @password_changeset.action do %>
+          <div class="alert alert-danger">
+            <p>Oops, something went wrong! Please check the errors below.</p>
+          </div>
+        <% end %>
 
-  <%= label(f, :password, "New password") %>
-  <%= password_input(f, :password, required: true) %>
-  <%= error_tag(f, :password) %>
+        <%= hidden_input(f, :action, value: "update_password") %>
 
-  <%= label(f, :password_confirmation, "Confirm new password") %>
-  <%= password_input(f, :password_confirmation, required: true) %>
-  <%= error_tag(f, :password_confirmation) %>
+        <%= label(f, :password, "New password", class: "sr-only") %>
+        <%= password_input(f, :password, placeholder: gettext("New Password"), required: true, class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-indigo-400 focus:outline-none sm:text-sm") %>
+        <%= error_tag(f, :password) %>
 
-  <%= 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) %>
+        <%= label(f, :password_confirmation, "Confirm new password", class: "sr-only") %>
+        <%= password_input(f, :password_confirmation,
+          required: true,
+          placeholder: gettext("Confirm new Password"),
+          class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-indigo-400 focus:outline-none sm:text-sm"
+        ) %>
+        <%= error_tag(f, :password_confirmation) %>
 
-  <div>
-    <%= submit("Change password") %>
+        <%= label(f, :current_password, for: "current_password_for_password", class: "sr-only") %>
+        <%= password_input(f, :current_password,
+          required: true,
+          name: "current_password",
+          placeholder: gettext("Current Password"),
+          id: "current_password_for_password",
+          class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-indigo-400 focus:outline-none sm:text-sm"
+        ) %>
+        <%= error_tag(f, :current_password) %>
+
+        <div class="flex justify-center mt-5">
+          <%= submit("Change Password", class: "mt-6 w-64 border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm") %>
+        </div>
+      </.form>
+    </div>
   </div>
-</.form>
+</div>

test/atomic_web/controllers/user_settings_controller_test.exs

@@ -10,7 +10,7 @@ defmodule AtomicWeb.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 =~ "<span>Change Password</span>"
     end
 
     test "redirects if user is not logged in" do
@@ -50,7 +50,7 @@ defmodule AtomicWeb.UserSettingsControllerTest do
         })
 
       response = html_response(old_password_conn, 200)
-      assert response =~ "<h1>Settings</h1>"
+      assert response =~ "<span>Change Password</span>"
       assert response =~ "should be at least 12 character(s)"
       assert response =~ "does not match password"
       assert response =~ "is not valid"
@@ -83,7 +83,7 @@ defmodule AtomicWeb.UserSettingsControllerTest do
         })
 
       response = html_response(conn, 200)
-      assert response =~ "<h1>Settings</h1>"
+      assert response =~ "<span>Change Password</span>"
       assert response =~ "must have the @ sign and no spaces"
       assert response =~ "is not valid"
     end