From a2ecb62a05d87ac786682b9ead171b3a3641b65e Mon Sep 17 00:00:00 2001
From: Paul Couture <paul@paulcouture.com>
Date: Sat, 16 Dec 2023 11:40:39 -0600
Subject: [PATCH] fix: themed manage account forms

---
 site/resources/views/auth/login.blade.php     |   2 +-
 .../views/partials/nav/head.blade.php         |   3 +-
 site/resources/views/profile/edit.blade.php   |  25 ++--
 .../partials/update-password-form.blade.php   |  88 +++++++-------
 .../update-profile-information-form.blade.php | 112 +++++++++---------
 5 files changed, 113 insertions(+), 117 deletions(-)

diff --git a/site/resources/views/auth/login.blade.php b/site/resources/views/auth/login.blade.php
index 1422fe4..2aa5269 100644
--- a/site/resources/views/auth/login.blade.php
+++ b/site/resources/views/auth/login.blade.php
@@ -35,7 +35,7 @@
                 {{ __('Remember me') }}
             </label>
         </div>
-        <div class="justify-content-end mt-4 mb-4">
+        <div class="d-flex justify-content-end mt-4 mb-4 text-end">
             @if (Route::has('password.request'))
                 <a class="" href="{{ route('password.request') }}">
                     {{ __('Forgot your password?') }}
diff --git a/site/resources/views/partials/nav/head.blade.php b/site/resources/views/partials/nav/head.blade.php
index 41fed53..9a584b5 100644
--- a/site/resources/views/partials/nav/head.blade.php
+++ b/site/resources/views/partials/nav/head.blade.php
@@ -63,8 +63,9 @@
                         alt="user avatar"></a>
                     <ul class="submenu">
                         @if (Auth::user())
-                            <li><a href="/artist/{{ Auth::user()->artists->first()->slug }}"><i class="ri-user-line"></i> Profile</a></li>
                             <li><a href="/create-artwork"><i class="ri-image-add-line"></i> Create Artwork</a></li>
+                            <li><a href="/artist/{{ Auth::user()->artists->first()->slug }}"><i class="ri-profile-line"></i> View Artist Profile</a></li>
+                            <li><a href="/profile"><i class="ri-user-line"></i> Manage Account</a></li>
                             <form method="post" action="/logout" name="logout" id="logoutForm">
                                 @csrf
                                 <li><a href="#" onclick="event.preventDefault(); document.getElementById('logoutForm').submit();"><i class="ri-logout-box-r-line"></i>Sign Out</a></li>
diff --git a/site/resources/views/profile/edit.blade.php b/site/resources/views/profile/edit.blade.php
index 4125e35..8cc3aba 100644
--- a/site/resources/views/profile/edit.blade.php
+++ b/site/resources/views/profile/edit.blade.php
@@ -1,29 +1,20 @@
 <x-app-layout>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-            {{ __('Manage') }}
+        <h2 class="">
+            {{ __('Manage Account Credentials') }}
         </h2>
     </x-slot>
 
-    <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-            <div class="p-4 sm:p-8 shadow sm:rounded-lg">
-                <div class="max-w-xl">
+    <section class="signup-wrapper signin-wrapper ptb-4">
+        <div class="container">
+            <div class="row d-flex-row d-flex align-content-stretch flex-wrap">
+                <div class="col-xl-5 col-lg-12 authbox">
                     @include('profile.partials.update-profile-information-form')
                 </div>
-            </div>
-
-            <div class="p-4 sm:p-8 shadow sm:rounded-lg">
-                <div class="max-w-xl">
+                <div class="col-xl-5 offset-xl-2 col-lg-12 authbox">
                     @include('profile.partials.update-password-form')
                 </div>
             </div>
-
-            {{--<div class="p-4 sm:p-8 shadow sm:rounded-lg">
-                <div class="max-w-xl">
-                    @include('profile.partials.delete-user-form')
-                </div>
-            </div>--}}
         </div>
-    </div>
+    </section>
 </x-app-layout>
diff --git a/site/resources/views/profile/partials/update-password-form.blade.php b/site/resources/views/profile/partials/update-password-form.blade.php
index a66e1ac..01c1aaa 100644
--- a/site/resources/views/profile/partials/update-password-form.blade.php
+++ b/site/resources/views/profile/partials/update-password-form.blade.php
@@ -1,48 +1,50 @@
-<section>
-    <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-            {{ __('Update Password') }}
-        </h2>
-
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-            {{ __('Ensure your account is using a long, random password to stay secure.') }}
-        </p>
-    </header>
-
-    <form method="post" action="{{ route('password.update') }}" class="mt-6 space-y-6">
-        @csrf
-        @method('put')
-
-        <div>
-            <x-input-label for="current_password" :value="__('Current Password')" />
-            <x-text-input id="current_password" name="current_password" type="password" class="mt-1 block w-full" autocomplete="current-password" />
-            <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
+<div class="row mt-4 gutter-2">
+    <div class="col">
+        <div class="signin-content">
+            <div class="mb-6">
+                <h2 class="mb-2">{{ __('Update Password') }}</h2>
+                <p class="normal">{{ __('Ensure your account is using a long, random password to stay secure.') }}</p>
+            </div>
         </div>
+    </div>
+</div>
+<div class="row mt-0 gutter-2">
+    <div class="col">
+        <form method="post" action="{{ route('password.update') }}" class="mt-6 space-y-6">
+            @csrf
+            @method('put')
 
-        <div>
-            <x-input-label for="password" :value="__('New Password')" />
-            <x-text-input id="password" name="password" type="password" class="mt-1 block w-full" autocomplete="new-password" />
-            <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
-        </div>
+            <div>
+                <x-input-label for="current_password" :value="__('Current Password')" />
+                <x-text-input id="current_password" name="current_password" type="password" class="mt-1 block w-full" autocomplete="current-password" />
+                <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
+            </div>
 
-        <div>
-            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
-            <x-text-input id="password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" autocomplete="new-password" />
-            <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
-        </div>
+            <div>
+                <x-input-label for="password" :value="__('New Password')" />
+                <x-text-input id="password" name="password" type="password" class="mt-1 block w-full" autocomplete="new-password" />
+                <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
+            </div>
 
-        <div class="flex items-center gap-4">
-            <x-primary-button>{{ __('Save') }}</x-primary-button>
+            <div>
+                <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
+                <x-text-input id="password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" autocomplete="new-password" />
+                <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
+            </div>
 
-            @if (session('status') === 'password-updated')
-                <p
-                    x-data="{ show: true }"
-                    x-show="show"
-                    x-transition
-                    x-init="setTimeout(() => show = false, 2000)"
-                    class="text-sm text-gray-600 dark:text-gray-400"
-                >{{ __('Saved.') }}</p>
-            @endif
-        </div>
-    </form>
-</section>
+            <div class="d-flex justify-content-end text-end mt-4 mb-4">
+                <x-primary-button class="ml-3 btn btn-gradient"><span>{{ __('Save') }}</span></x-primary-button>
+
+                @if (session('status') === 'password-updated')
+                    <p
+                        x-data="{ show: true }"
+                        x-show="show"
+                        x-transition
+                        x-init="setTimeout(() => show = false, 2000)"
+                        class="text-sm text-gray-600 dark:text-gray-400"
+                    >{{ __('Saved.') }}</p>
+                @endif
+            </div>
+        </form>
+    </div>
+</div>
diff --git a/site/resources/views/profile/partials/update-profile-information-form.blade.php b/site/resources/views/profile/partials/update-profile-information-form.blade.php
index a958f5a..8ea1a24 100644
--- a/site/resources/views/profile/partials/update-profile-information-form.blade.php
+++ b/site/resources/views/profile/partials/update-profile-information-form.blade.php
@@ -1,63 +1,65 @@
-<section>
-    <header>
-        <h2>
-            {{ __('Login Information') }}
-        </h2>
-        <p>
-            {{ __("Update your account's username and email address. Note, your username may not be the same as your public artist profile.") }}
-        </p>
-    </header>
-
-    <form id="send-verification" method="post" action="{{ route('verification.send') }}">
-        @csrf
-    </form>
-
-    <form method="post" action="{{ route('profile.update') }}" class="mt-6 space-y-6">
-        @csrf
-        @method('patch')
-
-        <div>
-            <x-input-label for="name" :value="__('Name')" />
-            <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $user->name)" required autofocus autocomplete="name" />
-            <x-input-error class="mt-2" :messages="$errors->get('name')" />
+<div class="row mt-4 gutter-2">
+    <div class="col">
+        <div class="signin-content">
+            <div class="mb-6">
+                <h2 class="mb-2">{{ __('Edit Login Information') }}</h2>
+                <p class="normal">{{ __("Update your account's username and email address. Note, your username may not be the same as your public artist profile.") }}</p>
+            </div>
         </div>
+    </div>
+</div>
+<div class="row mt-0 gutter-2">
+    <div class="col">
+        <form id="send-verification" method="post" action="{{ route('verification.send') }}">
+            @csrf
+        </form>
 
-        <div>
-            <x-input-label for="email" :value="__('Email')" />
-            <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $user->email)" required autocomplete="username" />
-            <x-input-error class="mt-2" :messages="$errors->get('email')" />
+        <form method="post" action="{{ route('profile.update') }}">
+            @csrf
+            @method('patch')
 
-            @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
-                <div>
-                    <p class="text-sm mt-2 text-gray-800 dark:text-gray-200">
-                        {{ __('Your email address is unverified.') }}
+            <div>
+                <x-input-label for="name" :value="__('Name')" />
+                <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $user->name)" required autofocus autocomplete="name" />
+                <x-input-error class="mt-2" :messages="$errors->get('name')" />
+            </div>
 
-                        <button form="send-verification" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
-                            {{ __('Click here to re-send the verification email.') }}
-                        </button>
-                    </p>
+            <div>
+                <x-input-label for="email" :value="__('Email')" />
+                <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $user->email)" required autocomplete="username" />
+                <x-input-error class="mt-2" :messages="$errors->get('email')" />
 
-                    @if (session('status') === 'verification-link-sent')
-                        <p class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
-                            {{ __('A new verification link has been sent to your email address.') }}
+                @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
+                    <div>
+                        <p class="text-sm mt-2 text-gray-800 dark:text-gray-200">
+                            {{ __('Your email address is unverified.') }}
+
+                            <button form="send-verification" class="btn btn-small btn-gradient">
+                                <span>{{ __('Click here to re-send the verification email.') }}</span>
+                            </button>
                         </p>
-                    @endif
-                </div>
-            @endif
-        </div>
 
-        <div class="flex items-center gap-4">
-            <x-primary-button>{{ __('Save') }}</x-primary-button>
+                        @if (session('status') === 'verification-link-sent')
+                            <p class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
+                                {{ __('A new verification link has been sent to your email address.') }}
+                            </p>
+                        @endif
+                    </div>
+                @endif
+            </div>
 
-            @if (session('status') === 'profile-updated')
-                <p
-                    x-data="{ show: true }"
-                    x-show="show"
-                    x-transition
-                    x-init="setTimeout(() => show = false, 2000)"
-                    class="text-sm text-gray-600 dark:text-gray-400"
-                >{{ __('Saved.') }}</p>
-            @endif
-        </div>
-    </form>
-</section>
+            <div class="d-flex justify-content-end mt-4 mb-4 text-end">
+                <x-primary-button class="ml-3 btn btn-gradient"><span>{{ __('Update Login Information') }}</span></x-primary-button>
+                @if (session('status') === 'profile-updated')
+                    <p
+                        x-data="{ show: true }"
+                        x-show="show"
+                        x-transition
+                        x-init="setTimeout(() => show = false, 2000)"
+                        class="text-sm text-gray-600 dark:text-gray-400"
+                    >{{ __('Saved.') }}</p>
+                @endif
+            </div>
+        </form>
+    </div>
+</div>