new branding

This commit is contained in:
Mark Gregory
2026-06-19 10:15:21 +01:00
parent d84c32e441
commit 29ed273200
9 changed files with 413 additions and 281 deletions
@@ -32,8 +32,8 @@
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<a href="{{ route('helpdesk.index') }}" wire:navigate class="hd-btn hd-btn-blue"> <a href="{{ route('helpdesk.index') }}" wire:navigate class="hd-btn hd-btn-blue">
<i class="fa-solid fa-arrow-left" aria-hidden="true"></i> <i class="fa-solid fa-gauge-high" aria-hidden="true"></i>
<span>Helpdesk</span> <span>Dashboard</span>
</a> </a>
</div> </div>
</div> </div>
@@ -1,36 +1,48 @@
<x-layouts::auth :title="__('Confirm password')"> <x-layouts::auth :title="__('Confirm password')">
<div class="flex flex-col gap-6"> <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
<x-auth-header <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
:title="__('Confirm password')"
:description="__('This is a secure area of the application. Please confirm your password before continuing.')"
/>
<x-auth-session-status class="text-center" :status="session('status')" /> <div class="space-y-7 p-6 sm:p-8">
<div class="space-y-5 text-center">
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">WMS</div>
<div class="space-y-2">
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('Protected area') }}</p>
<h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Confirm password') }}</h1>
<p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Confirm your identity before continuing to this secure WMS workflow.') }}</p>
</div>
</div>
<x-passkey-verify <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
options-route="passkey.confirm-options" <x-auth-session-status class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200" :status="session('status')" />
submit-route="passkey.confirm"
:label="__('Confirm with passkey')"
:loading-label="__('Confirming...')"
:separator="__('Or confirm with password')"
/>
<form method="POST" action="{{ route('password.confirm.store') }}" class="flex flex-col gap-6"> <div class="mb-5">
@csrf <x-passkey-verify
options-route="passkey.confirm-options"
submit-route="passkey.confirm"
:label="__('Confirm with passkey')"
:loading-label="__('Confirming...')"
:separator="__('Or confirm with password')"
/>
</div>
<flux:input <form method="POST" action="{{ route('password.confirm.store') }}" class="flex flex-col gap-5">
name="password" @csrf
:label="__('Password')"
type="password"
required
autocomplete="current-password"
:placeholder="__('Password')"
viewable
/>
<flux:button variant="primary" type="submit" class="w-full" data-test="confirm-password-button"> <flux:input
{{ __('Confirm') }} name="password"
</flux:button> :label="__('Password')"
</form> type="password"
</div> required
autocomplete="current-password"
:placeholder="__('Password')"
viewable
/>
<flux:button variant="primary" type="submit" class="w-full" data-test="confirm-password-button">
{{ __('Confirm') }}
</flux:button>
</form>
</div>
</div>
</section>
</x-layouts::auth> </x-layouts::auth>
@@ -1,31 +1,44 @@
<x-layouts::auth :title="__('Forgot password')"> <x-layouts::auth :title="__('Forgot password')">
<div class="flex flex-col gap-6"> <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
<x-auth-header :title="__('Forgot password')" :description="__('Enter your email to receive a password reset link')" /> <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
<!-- Session Status --> <div class="space-y-7 p-6 sm:p-8">
<x-auth-session-status class="text-center" :status="session('status')" /> <div class="space-y-5 text-center">
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">WMS</div>
<div class="space-y-2">
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('Account recovery') }}</p>
<h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Warehouse Management System') }}</h1>
<p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Request a secure reset link for your WMS account.') }}</p>
</div>
</div>
<form method="POST" action="{{ route('password.email') }}" class="flex flex-col gap-6"> <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
@csrf <x-auth-header :title="__('Forgot password')" :description="__('Enter your email address and we will send you a password reset link.')" />
<!-- Email Address --> <x-auth-session-status class="mt-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200" :status="session('status')" />
<flux:input
name="email"
:label="__('Email address')"
type="email"
required
autofocus
placeholder="email@example.com"
/>
<flux:button variant="primary" type="submit" class="w-full" data-test="email-password-reset-link-button"> <form method="POST" action="{{ route('password.email') }}" class="mt-6 flex flex-col gap-5">
{{ __('Email password reset link') }} @csrf
</flux:button>
</form>
<div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-400"> <flux:input
<span>{{ __('Or, return to') }}</span> name="email"
<flux:link :href="route('login')" wire:navigate>{{ __('log in') }}</flux:link> :label="__('Email address')"
type="email"
required
autofocus
placeholder="email@example.com"
/>
<flux:button variant="primary" type="submit" class="w-full" data-test="email-password-reset-link-button">
{{ __('Email password reset link') }}
</flux:button>
</form>
</div>
<div class="text-center text-sm text-zinc-600 dark:text-zinc-400">
<span>{{ __('Remember your password?') }}</span>
<flux:link :href="route('login')" wire:navigate>{{ __('Log in') }}</flux:link>
</div>
</div> </div>
</div> </section>
</x-layouts::auth> </x-layouts::auth>
+59 -35
View File
@@ -1,44 +1,68 @@
<x-layouts::auth :title="__('Log in')"> <x-layouts::auth :title="__('Log in')">
<div class="flex flex-col gap-6"> <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
<x-auth-header :title="__('Log in to your account')" :description="__('Enter your email and password below to log in')" /> <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
<x-auth-session-status class="text-center" :status="session('status')" /> <div class="space-y-7 p-6 sm:p-8">
<div class="space-y-5 text-center">
<x-passkey-verify /> <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black tracking-tight text-white shadow-lg shadow-zinc-900/20 dark:bg-white dark:text-zinc-950">
WMS
<form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-6"> </div>
@csrf
<div class="space-y-2">
<div class="grid gap-2"> <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">MPBA Limited</p>
<label for="email" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Email address') }}</label> <h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Warehouse Management System') }}</h1>
<input id="email" name="email" type="email" value="{{ old('email') }}" required autofocus autocomplete="email" placeholder="email@example.com" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" /> <p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Secure access for tenant workspaces, warehouse operations, support, licences, and dashboards.') }}</p>
@error('email')<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
</div>
<div class="grid gap-2">
<div class="flex items-center justify-between gap-3">
<label for="password" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Password') }}</label>
@if (Route::has('password.request'))
<a class="text-sm font-medium text-cyan-700 underline underline-offset-4 hover:text-cyan-900 dark:text-cyan-300" href="{{ route('password.request') }}" wire:navigate>{{ __('Forgot your password?') }}</a>
@endif
</div> </div>
<input id="password" name="password" type="password" required autocomplete="current-password" placeholder="{{ __('Password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" />
@error('password')<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
</div> </div>
<label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300"> <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
<input name="remember" type="checkbox" value="1" @checked(old('remember')) class="rounded border-zinc-300 text-cyan-600 focus:ring-cyan-500 dark:border-zinc-700 dark:bg-zinc-950" /> <div class="mb-6 space-y-1 text-center">
<span>{{ __('Remember me') }}</span> <p class="text-xs font-semibold uppercase tracking-[0.22em] text-sky-700 dark:text-sky-300">{{ __('Secure sign in') }}</p>
</label> <h2 class="text-xl font-bold text-zinc-950 dark:text-white">{{ __('Log in to your account') }}</h2>
<p class="text-sm text-zinc-600 dark:text-zinc-400">{{ __('Enter your email and password to continue.') }}</p>
</div>
<button type="submit" class="w-full rounded-xl bg-zinc-950 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-cyan-400 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200" data-test="login-button"> <x-auth-session-status class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200" :status="session('status')" />
{{ __('Log in') }}
</button>
</form>
<div class="space-x-1 text-center text-sm text-zinc-600 rtl:space-x-reverse dark:text-zinc-400"> <div class="mb-5">
<span>{{ __('Don\'t have an account?') }}</span> <x-passkey-verify />
<a href="{{ route('register') }}" wire:navigate class="font-medium text-cyan-700 underline underline-offset-4 hover:text-cyan-900 dark:text-cyan-300">{{ __('Sign up') }}</a> </div>
<form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-5">
@csrf
<div class="grid gap-2">
<label for="email" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Email address') }}</label>
<input id="email" name="email" type="email" value="{{ old('email') }}" required autofocus autocomplete="email" placeholder="email@example.com" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
@error('email')<p class="text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
</div>
<div class="grid gap-2">
<div class="flex items-center justify-between gap-3">
<label for="password" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Password') }}</label>
@if (Route::has('password.request'))
<a class="text-sm font-semibold text-sky-700 underline underline-offset-4 hover:text-sky-900 dark:text-sky-300" href="{{ route('password.request') }}" wire:navigate>{{ __('Forgot password?') }}</a>
@endif
</div>
<input id="password" name="password" type="password" required autocomplete="current-password" placeholder="{{ __('Password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
@error('password')<p class="text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
</div>
<label class="flex items-center gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm text-zinc-700 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300">
<input name="remember" type="checkbox" value="1" @checked(old('remember')) class="rounded border-zinc-300 text-sky-600 focus:ring-sky-500 dark:border-zinc-700 dark:bg-zinc-950" />
<span>{{ __('Remember this device') }}</span>
</label>
<button type="submit" class="w-full rounded-xl bg-zinc-950 px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-4 focus:ring-sky-200 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 dark:focus:ring-sky-950" data-test="login-button">
{{ __('Log in') }}
</button>
</form>
</div>
<div class="text-center text-sm text-zinc-600 dark:text-zinc-400">
<span>{{ __('Need access?') }}</span>
<a href="{{ route('register') }}" wire:navigate class="font-semibold text-sky-700 underline underline-offset-4 hover:text-sky-900 dark:text-sky-300">{{ __('Create an account') }}</a>
</div>
</div> </div>
</div> </section>
</x-layouts::auth> </x-layouts::auth>
@@ -1,43 +1,59 @@
<x-layouts::auth :title="__('Register')"> <x-layouts::auth :title="__('Register')">
<div class="flex flex-col gap-6"> <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
<x-auth-header :title="__('Create an account')" :description="__('Enter your details below to create your account')" /> <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
<x-auth-session-status class="text-center" :status="session('status')" /> <div class="space-y-7 p-6 sm:p-8">
<div class="space-y-5 text-center">
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black tracking-tight text-white shadow-lg shadow-zinc-900/20 dark:bg-white dark:text-zinc-950">
WMS
</div>
<form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-6"> <div class="space-y-2">
@csrf <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('MPBA Limited') }}</p>
<h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Create your WMS account') }}</h1>
<div class="grid gap-2"> <p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Register for secure access to your company workspace and warehouse operations.') }}</p>
<label for="name" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Name') }}</label> </div>
<input id="name" name="name" type="text" value="{{ old('name') }}" required autofocus autocomplete="name" placeholder="{{ __('Full name') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" />
@error('name')<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
</div> </div>
<div class="grid gap-2"> <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
<label for="email" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Email address') }}</label> <x-auth-session-status class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200" :status="session('status')" />
<input id="email" name="email" type="email" value="{{ old('email') }}" required autocomplete="email" placeholder="email@example.com" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" />
@error('email')<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror <form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-5">
@csrf
<div class="grid gap-2">
<label for="name" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Name') }}</label>
<input id="name" name="name" type="text" value="{{ old('name') }}" required autofocus autocomplete="name" placeholder="{{ __('Full name') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
@error('name')<p class="text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
</div>
<div class="grid gap-2">
<label for="email" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Email address') }}</label>
<input id="email" name="email" type="email" value="{{ old('email') }}" required autocomplete="email" placeholder="email@example.com" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
@error('email')<p class="text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
</div>
<div class="grid gap-2">
<label for="password" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Password') }}</label>
<input id="password" name="password" type="password" required autocomplete="new-password" placeholder="{{ __('Password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
@error('password')<p class="text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
</div>
<div class="grid gap-2">
<label for="password_confirmation" class="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{{ __('Confirm password') }}</label>
<input id="password_confirmation" name="password_confirmation" type="password" required autocomplete="new-password" placeholder="{{ __('Confirm password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-950 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-100 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-sky-400 dark:focus:ring-sky-950" />
</div>
<button type="submit" class="w-full rounded-xl bg-zinc-950 px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-4 focus:ring-sky-200 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 dark:focus:ring-sky-950" data-test="register-user-button">
{{ __('Create account') }}
</button>
</form>
</div> </div>
<div class="grid gap-2"> <div class="text-center text-sm text-zinc-600 dark:text-zinc-400">
<label for="password" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Password') }}</label> <span>{{ __('Already have access?') }}</span>
<input id="password" name="password" type="password" required autocomplete="new-password" placeholder="{{ __('Password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" /> <a href="{{ route('login') }}" wire:navigate class="font-semibold text-sky-700 underline underline-offset-4 hover:text-sky-900 dark:text-sky-300">{{ __('Log in') }}</a>
@error('password')<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
</div> </div>
<div class="grid gap-2">
<label for="password_confirmation" class="text-sm font-medium text-zinc-800 dark:text-zinc-200">{{ __('Confirm password') }}</label>
<input id="password_confirmation" name="password_confirmation" type="password" required autocomplete="new-password" placeholder="{{ __('Confirm password') }}" class="w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500 dark:focus:border-cyan-400 dark:focus:ring-cyan-900" />
</div>
<button type="submit" class="w-full rounded-xl bg-zinc-950 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-cyan-400 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200" data-test="register-user-button">
{{ __('Create account') }}
</button>
</form>
<div class="space-x-1 text-center text-sm text-zinc-600 rtl:space-x-reverse dark:text-zinc-400">
<span>{{ __('Already have an account?') }}</span>
<a href="{{ route('login') }}" wire:navigate class="font-medium text-cyan-700 underline underline-offset-4 hover:text-cyan-900 dark:text-cyan-300">{{ __('Log in') }}</a>
</div> </div>
</div> </section>
</x-layouts::auth> </x-layouts::auth>
@@ -1,54 +1,60 @@
<x-layouts::auth :title="__('Reset password')"> <x-layouts::auth :title="__('Reset password')">
<div class="flex flex-col gap-6"> <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
<x-auth-header :title="__('Reset password')" :description="__('Please enter your new password below')" /> <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
<!-- Session Status --> <div class="space-y-7 p-6 sm:p-8">
<x-auth-session-status class="text-center" :status="session('status')" /> <div class="space-y-5 text-center">
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">WMS</div>
<form method="POST" action="{{ route('password.update') }}" class="flex flex-col gap-6"> <div class="space-y-2">
@csrf <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('Password reset') }}</p>
<!-- Token --> <h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Secure account recovery') }}</h1>
<input type="hidden" name="token" value="{{ request()->route('token') }}"> <p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Create a new password for your WMS account.') }}</p>
</div>
<!-- Email Address -->
<flux:input
name="email"
value="{{ request('email') }}"
:label="__('Email')"
type="email"
required
autocomplete="email"
/>
<!-- Password -->
<flux:input
name="password"
:label="__('Password')"
type="password"
required
autocomplete="new-password"
:placeholder="__('Password')"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<!-- Confirm Password -->
<flux:input
name="password_confirmation"
:label="__('Confirm password')"
type="password"
required
autocomplete="new-password"
:placeholder="__('Confirm password')"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<div class="flex items-center justify-end">
<flux:button type="submit" variant="primary" class="w-full" data-test="reset-password-button">
{{ __('Reset password') }}
</flux:button>
</div> </div>
</form>
</div> <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
<x-auth-session-status class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200" :status="session('status')" />
<form method="POST" action="{{ route('password.update') }}" class="flex flex-col gap-5">
@csrf
<input type="hidden" name="token" value="{{ request()->route('token') }}">
<flux:input
name="email"
value="{{ request('email') }}"
:label="__('Email')"
type="email"
required
autocomplete="email"
/>
<flux:input
name="password"
:label="__('Password')"
type="password"
required
autocomplete="new-password"
:placeholder="__('Password')"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<flux:input
name="password_confirmation"
:label="__('Confirm password')"
type="password"
required
autocomplete="new-password"
:placeholder="__('Confirm password')"
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
viewable
/>
<flux:button type="submit" variant="primary" class="w-full" data-test="reset-password-button">
{{ __('Reset password') }}
</flux:button>
</form>
</div>
</div>
</section>
</x-layouts::auth> </x-layouts::auth>
@@ -1,101 +1,116 @@
<x-layouts::auth :title="__('Two-factor authentication')"> <x-layouts::auth :title="__('Two-factor authentication')">
<div class="flex flex-col gap-6"> <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
<div <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
class="relative w-full h-auto"
x-cloak
x-data="{
showRecoveryInput: @js($errors->has('recovery_code')),
code: '',
recovery_code: '',
focusOtp() {
this.$nextTick(() => this.$refs.otp?.querySelector('input')?.focus());
},
init() {
if (! this.showRecoveryInput) {
this.focusOtp();
}
},
toggleInput() {
this.showRecoveryInput = !this.showRecoveryInput;
this.code = ''; <div class="space-y-7 p-6 sm:p-8">
this.recovery_code = ''; <div class="space-y-5 text-center">
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">WMS</div>
$nextTick(() => { <div class="space-y-2">
this.showRecoveryInput <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('Multi-factor security') }}</p>
? this.$refs.recovery_code?.focus() <h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Verify your sign in') }}</h1>
: this.focusOtp(); <p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Complete the security challenge to continue into WMS.') }}</p>
}); </div>
},
}"
>
<div x-show="!showRecoveryInput">
<x-auth-header
:title="__('Authentication code')"
:description="__('Enter the authentication code provided by your authenticator application.')"
/>
</div> </div>
<div x-show="showRecoveryInput"> <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
<x-auth-header <div
:title="__('Recovery code')" class="relative w-full h-auto"
:description="__('Please confirm access to your account by entering one of your emergency recovery codes.')" x-cloak
/> x-data="{
</div> showRecoveryInput: @js($errors->has('recovery_code')),
code: '',
recovery_code: '',
focusOtp() {
this.$nextTick(() => this.$refs.otp?.querySelector('input')?.focus());
},
init() {
if (! this.showRecoveryInput) {
this.focusOtp();
}
},
toggleInput() {
this.showRecoveryInput = !this.showRecoveryInput;
<form method="POST" action="{{ route('two-factor.login.store') }}"> this.code = '';
@csrf this.recovery_code = '';
<div class="space-y-5 text-center"> $nextTick(() => {
this.showRecoveryInput
? this.$refs.recovery_code?.focus()
: this.focusOtp();
});
},
}"
>
<div x-show="!showRecoveryInput"> <div x-show="!showRecoveryInput">
<div class="flex items-center justify-center my-5" x-ref="otp"> <x-auth-header
<flux:otp :title="__('Authentication code')"
x-model="code" :description="__('Enter the authentication code provided by your authenticator application.')"
length="6" />
name="code"
label="OTP Code"
label:sr-only
class="mx-auto"
/>
</div>
</div> </div>
<div x-show="showRecoveryInput"> <div x-show="showRecoveryInput">
<div class="my-5"> <x-auth-header
<flux:input :title="__('Recovery code')"
type="text" :description="__('Please confirm access to your account by entering one of your emergency recovery codes.')"
name="recovery_code" />
x-ref="recovery_code" </div>
x-bind:required="showRecoveryInput"
autocomplete="one-time-code" <form method="POST" action="{{ route('two-factor.login.store') }}" class="mt-6">
x-model="recovery_code" @csrf
/>
<div class="space-y-5 text-center">
<div x-show="!showRecoveryInput">
<div class="my-5 flex items-center justify-center" x-ref="otp">
<flux:otp
x-model="code"
length="6"
name="code"
label="OTP Code"
label:sr-only
class="mx-auto"
/>
</div>
</div>
<div x-show="showRecoveryInput">
<div class="my-5">
<flux:input
type="text"
name="recovery_code"
x-ref="recovery_code"
x-bind:required="showRecoveryInput"
autocomplete="one-time-code"
x-model="recovery_code"
/>
</div>
@error('recovery_code')
<flux:text color="red">
{{ $message }}
</flux:text>
@enderror
</div>
<flux:button
variant="primary"
type="submit"
class="w-full"
>
{{ __('Continue') }}
</flux:button>
</div> </div>
@error('recovery_code') <div class="mt-5 text-center text-sm leading-5 text-zinc-600 dark:text-zinc-400">
<flux:text color="red"> <span>{{ __('or you can') }}</span>
{{ $message }} <button type="button" class="inline font-semibold text-sky-700 underline underline-offset-4 hover:text-sky-900 dark:text-sky-300" @click="toggleInput()">
</flux:text> <span x-show="!showRecoveryInput">{{ __('login using a recovery code') }}</span>
@enderror <span x-show="showRecoveryInput">{{ __('login using an authentication code') }}</span>
</div> </button>
</div>
<flux:button </form>
variant="primary"
type="submit"
class="w-full"
>
{{ __('Continue') }}
</flux:button>
</div> </div>
</div>
<div class="mt-5 space-x-0.5 text-sm leading-5 text-center">
<span class="opacity-50">{{ __('or you can') }}</span>
<div class="inline font-medium underline cursor-pointer opacity-80">
<span x-show="!showRecoveryInput" @click="toggleInput()">{{ __('login using a recovery code') }}</span>
<span x-show="showRecoveryInput" @click="toggleInput()">{{ __('login using an authentication code') }}</span>
</div>
</div>
</form>
</div> </div>
</div> </section>
</x-layouts::auth> </x-layouts::auth>
@@ -1,29 +1,44 @@
<x-layouts::auth :title="__('Email verification')"> <x-layouts::auth :title="__('Email verification')">
<div class="mt-4 flex flex-col gap-6"> <section class="mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-950">
<flux:text class="text-center"> <div class="h-1.5 bg-gradient-to-r from-emerald-500 via-sky-500 to-blue-600"></div>
{{ __('Please verify your email address by clicking on the link we just emailed to you.') }}
</flux:text>
@if (session('status') == 'verification-link-sent') <div class="space-y-7 p-6 sm:p-8">
<flux:text class="text-center font-medium !dark:text-green-400 !text-green-600"> <div class="space-y-5 text-center">
{{ __('A new verification link has been sent to the email address you provided during registration.') }} <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">WMS</div>
</flux:text> <div class="space-y-2">
@endif <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700 dark:text-sky-300">{{ __('Email verification') }}</p>
<h1 class="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{{ __('Confirm your account') }}</h1>
<p class="text-sm leading-6 text-zinc-600 dark:text-zinc-400">{{ __('Verify your email address before accessing the WMS dashboard.') }}</p>
</div>
</div>
<div class="flex flex-col items-center justify-between space-y-3"> <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60">
<form method="POST" action="{{ route('verification.send') }}"> <flux:text class="text-center leading-6">
@csrf {{ __('Please verify your email address by clicking on the link we just emailed to you.') }}
<flux:button type="submit" variant="primary" class="w-full"> </flux:text>
{{ __('Resend verification email') }}
</flux:button>
</form>
<form method="POST" action="{{ route('logout') }}"> @if (session('status') == 'verification-link-sent')
@csrf <div class="mt-5 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-center text-sm font-semibold text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200">
<flux:button variant="ghost" type="submit" class="text-sm cursor-pointer" data-test="logout-button"> {{ __('A new verification link has been sent to the email address you provided during registration.') }}
{{ __('Log out') }} </div>
</flux:button> @endif
</form>
<div class="mt-6 flex flex-col gap-3">
<form method="POST" action="{{ route('verification.send') }}">
@csrf
<flux:button type="submit" variant="primary" class="w-full">
{{ __('Resend verification email') }}
</flux:button>
</form>
<form method="POST" action="{{ route('logout') }}">
@csrf
<flux:button variant="ghost" type="submit" class="w-full cursor-pointer text-sm" data-test="logout-button">
{{ __('Log out') }}
</flux:button>
</form>
</div>
</div>
</div> </div>
</div> </section>
</x-layouts::auth> </x-layouts::auth>
@@ -0,0 +1,31 @@
<?php
namespace Tests\Browser\Auth;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;
class AuthBrandingLayoutBrowserTest extends DuskTestCase
{
/**
* Ensure guest authentication pages keep the professional WMS branding and do not overflow horizontally.
*/
public function test_guest_authentication_pages_are_branded_and_do_not_overflow(): void
{
$pages = [
route('login'),
route('register'),
route('password.request'),
];
foreach ($pages as $page) {
$this->browse(function (Browser $browser) use ($page): void {
$browser->resize(1280, 900)
->visit($page)
->assertSee('WMS')
->assertSee('Warehouse Management System')
->assertScript('document.documentElement.scrollWidth <= document.documentElement.clientWidth + 1');
});
}
}
}