fix: themed manage account forms

This commit is contained in:
Paul Couture 2023-12-16 11:40:39 -06:00
parent a4bd889d23
commit a2ecb62a05
5 changed files with 113 additions and 117 deletions

View File

@ -35,7 +35,7 @@
{{ __('Remember me') }} {{ __('Remember me') }}
</label> </label>
</div> </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')) @if (Route::has('password.request'))
<a class="" href="{{ route('password.request') }}"> <a class="" href="{{ route('password.request') }}">
{{ __('Forgot your password?') }} {{ __('Forgot your password?') }}

View File

@ -63,8 +63,9 @@
alt="user avatar"></a> alt="user avatar"></a>
<ul class="submenu"> <ul class="submenu">
@if (Auth::user()) @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="/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"> <form method="post" action="/logout" name="logout" id="logoutForm">
@csrf @csrf
<li><a href="#" onclick="event.preventDefault(); document.getElementById('logoutForm').submit();"><i class="ri-logout-box-r-line"></i>Sign Out</a></li> <li><a href="#" onclick="event.preventDefault(); document.getElementById('logoutForm').submit();"><i class="ri-logout-box-r-line"></i>Sign Out</a></li>

View File

@ -1,29 +1,20 @@
<x-app-layout> <x-app-layout>
<x-slot name="header"> <x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight"> <h2 class="">
{{ __('Manage') }} {{ __('Manage Account Credentials') }}
</h2> </h2>
</x-slot> </x-slot>
<div class="py-12"> <section class="signup-wrapper signin-wrapper ptb-4">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6"> <div class="container">
<div class="p-4 sm:p-8 shadow sm:rounded-lg"> <div class="row d-flex-row d-flex align-content-stretch flex-wrap">
<div class="max-w-xl"> <div class="col-xl-5 col-lg-12 authbox">
@include('profile.partials.update-profile-information-form') @include('profile.partials.update-profile-information-form')
</div> </div>
</div> <div class="col-xl-5 offset-xl-2 col-lg-12 authbox">
<div class="p-4 sm:p-8 shadow sm:rounded-lg">
<div class="max-w-xl">
@include('profile.partials.update-password-form') @include('profile.partials.update-password-form')
</div> </div>
</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>
</div> </section>
</x-app-layout> </x-app-layout>

View File

@ -1,48 +1,50 @@
<section> <div class="row mt-4 gutter-2">
<header> <div class="col">
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100"> <div class="signin-content">
{{ __('Update Password') }} <div class="mb-6">
</h2> <h2 class="mb-2">{{ __('Update Password') }}</h2>
<p class="normal">{{ __('Ensure your account is using a long, random password to stay secure.') }}</p>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400"> </div>
{{ __('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> </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> <div>
<x-input-label for="password" :value="__('New Password')" /> <x-input-label for="current_password" :value="__('Current Password')" />
<x-text-input id="password" name="password" type="password" class="mt-1 block w-full" autocomplete="new-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('password')" class="mt-2" /> <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
</div> </div>
<div> <div>
<x-input-label for="password_confirmation" :value="__('Confirm Password')" /> <x-input-label for="password" :value="__('New Password')" />
<x-text-input id="password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" autocomplete="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_confirmation')" class="mt-2" /> <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
</div> </div>
<div class="flex items-center gap-4"> <div>
<x-primary-button>{{ __('Save') }}</x-primary-button> <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') <div class="d-flex justify-content-end text-end mt-4 mb-4">
<p <x-primary-button class="ml-3 btn btn-gradient"><span>{{ __('Save') }}</span></x-primary-button>
x-data="{ show: true }"
x-show="show" @if (session('status') === 'password-updated')
x-transition <p
x-init="setTimeout(() => show = false, 2000)" x-data="{ show: true }"
class="text-sm text-gray-600 dark:text-gray-400" x-show="show"
>{{ __('Saved.') }}</p> x-transition
@endif x-init="setTimeout(() => show = false, 2000)"
</div> class="text-sm text-gray-600 dark:text-gray-400"
</form> >{{ __('Saved.') }}</p>
</section> @endif
</div>
</form>
</div>
</div>

View File

@ -1,63 +1,65 @@
<section> <div class="row mt-4 gutter-2">
<header> <div class="col">
<h2> <div class="signin-content">
{{ __('Login Information') }} <div class="mb-6">
</h2> <h2 class="mb-2">{{ __('Edit Login Information') }}</h2>
<p> <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>
{{ __("Update your account's username and email address. Note, your username may not be the same as your public artist profile.") }} </div>
</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> </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> <form method="post" action="{{ route('profile.update') }}">
<x-input-label for="email" :value="__('Email')" /> @csrf
<x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $user->email)" required autocomplete="username" /> @method('patch')
<x-input-error class="mt-2" :messages="$errors->get('email')" />
@if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail()) <div>
<div> <x-input-label for="name" :value="__('Name')" />
<p class="text-sm mt-2 text-gray-800 dark:text-gray-200"> <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $user->name)" required autofocus autocomplete="name" />
{{ __('Your email address is unverified.') }} <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"> <div>
{{ __('Click here to re-send the verification email.') }} <x-input-label for="email" :value="__('Email')" />
</button> <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $user->email)" required autocomplete="username" />
</p> <x-input-error class="mt-2" :messages="$errors->get('email')" />
@if (session('status') === 'verification-link-sent') @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
<p class="mt-2 font-medium text-sm text-green-600 dark:text-green-400"> <div>
{{ __('A new verification link has been sent to your email address.') }} <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> </p>
@endif
</div>
@endif
</div>
<div class="flex items-center gap-4"> @if (session('status') === 'verification-link-sent')
<x-primary-button>{{ __('Save') }}</x-primary-button> <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') <div class="d-flex justify-content-end mt-4 mb-4 text-end">
<p <x-primary-button class="ml-3 btn btn-gradient"><span>{{ __('Update Login Information') }}</span></x-primary-button>
x-data="{ show: true }" @if (session('status') === 'profile-updated')
x-show="show" <p
x-transition x-data="{ show: true }"
x-init="setTimeout(() => show = false, 2000)" x-show="show"
class="text-sm text-gray-600 dark:text-gray-400" x-transition
>{{ __('Saved.') }}</p> x-init="setTimeout(() => show = false, 2000)"
@endif class="text-sm text-gray-600 dark:text-gray-400"
</div> >{{ __('Saved.') }}</p>
</form> @endif
</section> </div>
</form>
</div>
</div>