From 0c2f304b2fe29417a84f64c0619f587f6fe40372 Mon Sep 17 00:00:00 2001
From: Ryan Pandya <ryan@pandu.ski>
Date: Sun, 30 Oct 2022 00:25:34 -0700
Subject: [PATCH] Clean up forms

---
 .../templates/layout/_user_menu.html.heex     |  14 +--
 .../templates/user_session/new.html.heex      |  30 +++--
 .../templates/user_settings/edit.html.heex    | 113 +++++++++++-------
 3 files changed, 90 insertions(+), 67 deletions(-)

diff --git a/friends/lib/friends_web/templates/layout/_user_menu.html.heex b/friends/lib/friends_web/templates/layout/_user_menu.html.heex
index 222fbe2..7fe5e94 100644
--- a/friends/lib/friends_web/templates/layout/_user_menu.html.heex
+++ b/friends/lib/friends_web/templates/layout/_user_menu.html.heex
@@ -1,14 +1,8 @@
+<ul class="p-2 shadow menu menu-compact dropdown-content bg-base-100 text-neutral rounded-box w-52 flex flex-col gap-4">
 <%= if @current_user do %>
-    <label tabindex="0" class="btn btn-ghost btn-circle avatar">
-      <div class="w-10 rounded-full">
-        <img src="https://placeimg.com/80/80/people" />
-      </div>
-    </label>
-    <ul class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 text-neutral rounded-box w-52">
-    <li><%= @current_user.email %></li>
-    <li><%= link "Settings", to: Routes.user_settings_path(@conn, :edit) %></li>
-    <li><%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %></li>
-  </ul>
+  <li class="p-2 pb-4 border-b-2"><%= @current_user.email %></li>
+  <li><%= link "Settings", to: Routes.user_settings_path(@conn, :edit) %></li>
+  <li><%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %></li>
 <% else %>
   <%= link "Log in", to: Routes.user_session_path(@conn, :new), class: "btn" %>
   <%= link "Register", to: Routes.user_registration_path(@conn, :new), class: "btn btn-primary" %>
diff --git a/friends/lib/friends_web/templates/user_session/new.html.heex b/friends/lib/friends_web/templates/user_session/new.html.heex
index 49a7d79..d36ae3f 100644
--- a/friends/lib/friends_web/templates/user_session/new.html.heex
+++ b/friends/lib/friends_web/templates/user_session/new.html.heex
@@ -6,19 +6,23 @@
       <p><%= @error_message %></p>
     </div>
   <% end %>
-
-  <%= label f, :email %>
-  <%= email_input f, :email, required: true %>
-
-  <%= label f, :password %>
-  <%= password_input f, :password, required: true %>
-
-  <%= label f, :remember_me, "Keep me logged in for 60 days" %>
-  <%= checkbox f, :remember_me %>
-
-  <div>
-    <%= submit "Log in" %>
-  </div>
+  <ul class="w-1/2 pl-0 flex flex-col gap-6">
+    <li class="flex flex-row gap-4">
+      <%= label f, :email, class: "w-1/3" %>
+      <%= email_input f, :email, required: true %>
+    </li>
+    <li class="flex flex-row gap-4">
+      <%= label f, :password, class: "w-1/3"  %>
+      <%= password_input f, :password, required: true %>
+    </li>
+      <li class="flex flex-row gap-4">
+        <%= label f, :remember_me, "Keep me logged in for 60 days", class: "w-fit"  %>
+        <%= checkbox f, :remember_me %>
+      </li>
+    <li class="flex">
+      <%= submit "Log in", class: "btn btn-primary" %>
+    </li>
+  </ul>
 </.form>
 
 <p>
diff --git a/friends/lib/friends_web/templates/user_settings/edit.html.heex b/friends/lib/friends_web/templates/user_settings/edit.html.heex
index 9863bc5..64fd4dc 100644
--- a/friends/lib/friends_web/templates/user_settings/edit.html.heex
+++ b/friends/lib/friends_web/templates/user_settings/edit.html.heex
@@ -1,53 +1,78 @@
 <h1>Settings</h1>
 
-<h3>Change email</h3>
+<div class="flex gap-16 flex-col md:flex-row justify-evenly">
+  <.form 
+    let={f} 
+    for={@email_changeset} 
+    action={Routes.user_settings_path(@conn, :update)} 
+    id="update_email"
+    class="w-max"
+    >
+    <%= if @email_changeset.action do %>
+      <div class="alert alert-danger">
+        <p>Oops, something went wrong! Please check the errors below.</p>
+      </div>
+    <% end %>
 
-<.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" %>
 
-  <%= hidden_input f, :action, name: "action", value: "update_email" %>
 
-  <%= label f, :email %>
-  <%= email_input f, :email, required: true %>
-  <%= error_tag f, :email %>
+    <h3>Change email</h3>
+        <ul class="w-full pl-0 flex flex-col gap-6">
 
-  <%= 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 %>
+      <li class="flex flex-row gap-4">
+        <%= label f, :email, class: "w-1/3" %>
+        <%= email_input f, :email, required: true %>
+        <%= error_tag f, :email %>
+      </li>
+      <li class="flex flex-row gap-4">
+        <%= label f, :current_password, for: "current_password_for_email", class: "w-1/3"  %>
+        <%= password_input f, :password, required: true %>
+        <%= error_tag f, :current_password %>
+      </li>
+      <li class="flex place-self-stretch">
+        <%= submit "Change email", class: "btn btn-primary" %>
+      </li>
+    </ul>
+  </.form>
 
-  <div>
-    <%= submit "Change email" %>
-  </div>
-</.form>
+  <.form 
+  let={f} 
+  for={@password_changeset} 
+  action={Routes.user_settings_path(@conn, :update)} 
+  id="update_password"
+  class="w-max"
+  >
+  
+  <h3>Change password</h3>
+  
+    <ul class="w-full pl-0 flex flex-col gap-6 md:h-full">
+    <%= if @password_changeset.action do %>
+      <div class="alert alert-danger">
+        <p>Oops, something went wrong! Please check the errors below.</p>
+      </div>
+    <% end %>
 
-<h3>Change password</h3>
+    <%= hidden_input f, :action, name: "action", value: "update_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>
-  <% end %>
-
-  <%= hidden_input f, :action, name: "action", value: "update_password" %>
-
-  <%= label f, :password, "New password" %>
-  <%= password_input f, :password, required: true %>
-  <%= error_tag f, :password %>
-
-  <%= label f, :password_confirmation, "Confirm new password" %>
-  <%= password_input f, :password_confirmation, required: true %>
-  <%= error_tag f, :password_confirmation %>
-
-  <%= 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 %>
-
-  <div>
-    <%= submit "Change password" %>
-  </div>
-</.form>
+      <li class="flex flex-row gap-4">
+        <%= label f, :current_password, for: "current_password_for_password", class: "w-1/3" %>
+        <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password" %>
+        <%= error_tag f, :current_password %>
+      </li>
+      <li class="flex flex-row gap-4">
+        <%= label f, :password, "New password", class: "w-1/3" %>
+        <%= password_input f, :password, required: true, class: "shrink-0" %>
+        <%= error_tag f, :password %>
+      </li>
+      <li class="flex flex-row gap-4">    
+        <%= label f, :password_confirmation, "Confirm new password", class: "w-1/3" %>
+        <%= password_input f, :password_confirmation, required: true %>
+        <%= error_tag f, :password_confirmation %>
+      </li>
+      <li class="flex">
+        <%= submit "Change password", class: "btn btn-primary" %>
+      </li>
+    </ul>
+  </.form>
+</div>
\ No newline at end of file