updated the auth views

This commit is contained in:
2025-03-31 23:28:25 +03:00
parent 7d6f72d31c
commit 5b26f832cd
6 changed files with 361 additions and 206 deletions
+33 -18
View File
@@ -1,27 +1,42 @@
<x-guest-layout> @extends('layouts.app')
<div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
{{ __('This is a secure area of the application. Please confirm your password before continuing.') }} @section('content')
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-5">
<div class="card shadow-sm">
<div class="card-body p-4">
<div class="text-center mb-4">
<h2 class="h4 mb-1">Confirm Password</h2>
<p class="text-muted mb-0">Please confirm your password to continue</p>
</div> </div>
<form method="POST" action="{{ route('password.confirm') }}"> <form method="POST" action="{{ route('password.confirm') }}">
@csrf @csrf
<!-- Password --> <div class="mb-3">
<div> <label for="password" class="form-label">Password</label>
<x-input-label for="password" :value="__('Password')" /> <div class="input-group">
<span class="input-group-text">
<x-text-input id="password" class="block mt-1 w-full" <i class="bi bi-lock"></i>
type="password" </span>
name="password" <input id="password" type="password" class="form-control @error('password') is-invalid @enderror"
required autocomplete="current-password" /> name="password" required autocomplete="current-password">
@error('password')
<x-input-error :messages="$errors->get('password')" class="mt-2" /> <div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div> </div>
<div class="flex justify-end mt-4"> <div class="d-grid gap-2">
<x-primary-button> <button type="submit" class="btn btn-primary">
{{ __('Confirm') }} <i class="bi bi-check-circle me-2"></i>Confirm Password
</x-primary-button> </button>
</div> </div>
</form> </form>
</x-guest-layout> </div>
</div>
</div>
</div>
</div>
@endsection
+44 -15
View File
@@ -1,25 +1,54 @@
<x-guest-layout> @extends('layouts.app')
<div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
{{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }} @section('content')
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-5">
<div class="card shadow-sm">
<div class="card-body p-4">
<div class="text-center mb-4">
<h2 class="h4 mb-1">Reset Password</h2>
<p class="text-muted mb-0">Enter your email to receive reset instructions</p>
</div> </div>
<!-- Session Status --> @if (session('status'))
<x-auth-session-status class="mb-4" :status="session('status')" /> <div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<form method="POST" action="{{ route('password.email') }}"> <form method="POST" action="{{ route('password.email') }}">
@csrf @csrf
<!-- Email Address --> <div class="mb-3">
<div> <label for="email" class="form-label">Email Address</label>
<x-input-label for="email" :value="__('Email')" /> <div class="input-group">
<x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus /> <span class="input-group-text">
<x-input-error :messages="$errors->get('email')" class="mt-2" /> <i class="bi bi-envelope"></i>
</span>
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div> </div>
<div class="flex items-center justify-end mt-4"> <div class="d-grid gap-2">
<x-primary-button> <button type="submit" class="btn btn-primary">
{{ __('Email Password Reset Link') }} <i class="bi bi-send me-2"></i>Send Reset Link
</x-primary-button> </button>
</div> </div>
</form> </form>
</x-guest-layout>
<div class="text-center mt-4">
<a href="{{ route('login') }}" class="text-decoration-none">
<i class="bi bi-arrow-left me-1"></i>Back to Login
</a>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
+62 -32
View File
@@ -1,47 +1,77 @@
<x-guest-layout> @extends('layouts.app')
<!-- Session Status -->
<x-auth-session-status class="mb-4" :status="session('status')" /> @section('content')
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-5">
<div class="card shadow-sm">
<div class="card-body p-4">
<div class="text-center mb-4">
<h2 class="h4 mb-1">Welcome Back</h2>
<p class="text-muted mb-0">Please sign in to your account</p>
</div>
<form method="POST" action="{{ route('login') }}"> <form method="POST" action="{{ route('login') }}">
@csrf @csrf
<!-- Email Address --> <div class="mb-3">
<div> <label for="email" class="form-label">Email Address</label>
<x-input-label for="email" :value="__('Email')" /> <div class="input-group">
<x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" /> <span class="input-group-text">
<x-input-error :messages="$errors->get('email')" class="mt-2" /> <i class="bi bi-envelope"></i>
</span>
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div> </div>
<!-- Password --> <div class="mb-3">
<div class="mt-4"> <label for="password" class="form-label">Password</label>
<x-input-label for="password" :value="__('Password')" /> <div class="input-group">
<span class="input-group-text">
<x-text-input id="password" class="block mt-1 w-full" <i class="bi bi-lock"></i>
type="password" </span>
name="password" <input id="password" type="password" class="form-control @error('password') is-invalid @enderror"
required autocomplete="current-password" /> name="password" required autocomplete="current-password">
@error('password')
<x-input-error :messages="$errors->get('password')" class="mt-2" /> <div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div> </div>
<!-- Remember Me --> <div class="mb-3">
<div class="block mt-4"> <div class="form-check">
<label for="remember_me" class="inline-flex items-center"> <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<input id="remember_me" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember"> <label class="form-check-label" for="remember">Remember Me</label>
<span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span> </div>
</label>
</div> </div>
<div class="flex items-center justify-end mt-4"> <div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">
<i class="bi bi-box-arrow-in-right me-2"></i>Sign In
</button>
</div>
<div class="text-center mt-4">
@if (Route::has('password.request')) @if (Route::has('password.request'))
<a 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" href="{{ route('password.request') }}"> <a class="text-decoration-none" href="{{ route('password.request') }}">
{{ __('Forgot your password?') }} Forgot your password?
</a> </a>
@endif @endif
<x-primary-button class="ms-3">
{{ __('Log in') }}
</x-primary-button>
</div> </div>
</form> </form>
</x-guest-layout>
<div class="text-center mt-4">
<p class="text-muted mb-0">Don't have an account?
<a href="{{ route('register') }}" class="text-decoration-none">Sign up</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
+74 -39
View File
@@ -1,52 +1,87 @@
<x-guest-layout> @extends('layouts.app')
@section('content')
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-5">
<div class="card shadow-sm">
<div class="card-body p-4">
<div class="text-center mb-4">
<h2 class="h4 mb-1">Create Account</h2>
<p class="text-muted mb-0">Join us to access premium features</p>
</div>
<form method="POST" action="{{ route('register') }}"> <form method="POST" action="{{ route('register') }}">
@csrf @csrf
<!-- Name --> <div class="mb-3">
<div> <label for="name" class="form-label">Name</label>
<x-input-label for="name" :value="__('Name')" /> <div class="input-group">
<x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" /> <span class="input-group-text">
<x-input-error :messages="$errors->get('name')" class="mt-2" /> <i class="bi bi-person"></i>
</span>
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror"
name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
@error('name')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div> </div>
<!-- Email Address --> <div class="mb-3">
<div class="mt-4"> <label for="email" class="form-label">Email Address</label>
<x-input-label for="email" :value="__('Email')" /> <div class="input-group">
<x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" /> <span class="input-group-text">
<x-input-error :messages="$errors->get('email')" class="mt-2" /> <i class="bi bi-envelope"></i>
</span>
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
name="email" value="{{ old('email') }}" required autocomplete="email">
@error('email')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div> </div>
<!-- Password --> <div class="mb-3">
<div class="mt-4"> <label for="password" class="form-label">Password</label>
<x-input-label for="password" :value="__('Password')" /> <div class="input-group">
<span class="input-group-text">
<x-text-input id="password" class="block mt-1 w-full" <i class="bi bi-lock"></i>
type="password" </span>
name="password" <input id="password" type="password" class="form-control @error('password') is-invalid @enderror"
required autocomplete="new-password" /> name="password" required autocomplete="new-password">
@error('password')
<x-input-error :messages="$errors->get('password')" class="mt-2" /> <div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div> </div>
<!-- Confirm Password --> <div class="mb-3">
<div class="mt-4"> <label for="password_confirmation" class="form-label">Confirm Password</label>
<x-input-label for="password_confirmation" :value="__('Confirm Password')" /> <div class="input-group">
<span class="input-group-text">
<x-text-input id="password_confirmation" class="block mt-1 w-full" <i class="bi bi-lock-fill"></i>
type="password" </span>
name="password_confirmation" required autocomplete="new-password" /> <input id="password_confirmation" type="password" class="form-control"
name="password_confirmation" required autocomplete="new-password">
<x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" /> </div>
</div> </div>
<div class="flex items-center justify-end mt-4"> <div class="d-grid gap-2">
<a 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" href="{{ route('login') }}"> <button type="submit" class="btn btn-primary">
{{ __('Already registered?') }} <i class="bi bi-person-plus me-2"></i>Register
</a> </button>
<x-primary-button class="ms-4">
{{ __('Register') }}
</x-primary-button>
</div> </div>
</form> </form>
</x-guest-layout>
<div class="text-center mt-4">
<p class="text-muted mb-0">Already have an account?
<a href="{{ route('login') }}" class="text-decoration-none">Sign in</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
+56 -25
View File
@@ -1,39 +1,70 @@
<x-guest-layout> @extends('layouts.app')
@section('content')
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-5">
<div class="card shadow-sm">
<div class="card-body p-4">
<div class="text-center mb-4">
<h2 class="h4 mb-1">Reset Password</h2>
<p class="text-muted mb-0">Please enter your new password</p>
</div>
<form method="POST" action="{{ route('password.store') }}"> <form method="POST" action="{{ route('password.store') }}">
@csrf @csrf
<!-- Password Reset Token --> <!-- Password Reset Token -->
<input type="hidden" name="token" value="{{ $request->route('token') }}"> <input type="hidden" name="token" value="{{ $request->route('token') }}">
<!-- Email Address --> <div class="mb-3">
<div> <label for="email" class="form-label">Email Address</label>
<x-input-label for="email" :value="__('Email')" /> <div class="input-group">
<x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $request->email)" required autofocus autocomplete="username" /> <span class="input-group-text">
<x-input-error :messages="$errors->get('email')" class="mt-2" /> <i class="bi bi-envelope"></i>
</span>
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
name="email" value="{{ old('email', $request->email) }}" required autocomplete="email" autofocus>
@error('email')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div> </div>
<!-- Password --> <div class="mb-3">
<div class="mt-4"> <label for="password" class="form-label">New Password</label>
<x-input-label for="password" :value="__('Password')" /> <div class="input-group">
<x-text-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" /> <span class="input-group-text">
<x-input-error :messages="$errors->get('password')" class="mt-2" /> <i class="bi bi-lock"></i>
</span>
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror"
name="password" required autocomplete="new-password">
@error('password')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div> </div>
<!-- Confirm Password --> <div class="mb-3">
<div class="mt-4"> <label for="password_confirmation" class="form-label">Confirm Password</label>
<x-input-label for="password_confirmation" :value="__('Confirm Password')" /> <div class="input-group">
<span class="input-group-text">
<x-text-input id="password_confirmation" class="block mt-1 w-full" <i class="bi bi-lock-fill"></i>
type="password" </span>
name="password_confirmation" required autocomplete="new-password" /> <input id="password_confirmation" type="password" class="form-control"
name="password_confirmation" required autocomplete="new-password">
<x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" /> </div>
</div> </div>
<div class="flex items-center justify-end mt-4"> <div class="d-grid gap-2">
<x-primary-button> <button type="submit" class="btn btn-primary">
{{ __('Reset Password') }} <i class="bi bi-check-circle me-2"></i>Reset Password
</x-primary-button> </button>
</div> </div>
</form> </form>
</x-guest-layout> </div>
</div>
</div>
</div>
</div>
@endsection
+31 -16
View File
@@ -1,31 +1,46 @@
<x-guest-layout> @extends('layouts.app')
<div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
{{ __('Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn\'t receive the email, we will gladly send you another.') }} @section('content')
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-5">
<div class="card shadow-sm">
<div class="card-body p-4 text-center">
<div class="mb-4">
<i class="bi bi-envelope-check display-4 text-primary"></i>
</div> </div>
<h2 class="h4 mb-3">Verify Email Address</h2>
<p class="text-muted mb-4">
Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you?
</p>
@if (session('status') == 'verification-link-sent') @if (session('status') == 'verification-link-sent')
<div class="mb-4 font-medium text-sm text-green-600 dark:text-green-400"> <div class="alert alert-success mb-4">
{{ __('A new verification link has been sent to the email address you provided during registration.') }} <i class="bi bi-check-circle me-2"></i>
A new verification link has been sent to your email address.
</div> </div>
@endif @endif
<div class="mt-4 flex items-center justify-between"> <div class="d-grid gap-2">
<form method="POST" action="{{ route('verification.send') }}"> <form method="POST" action="{{ route('verification.send') }}">
@csrf @csrf
<button type="submit" class="btn btn-primary">
<div> <i class="bi bi-send me-2"></i>Resend Verification Email
<x-primary-button> </button>
{{ __('Resend Verification Email') }}
</x-primary-button>
</div>
</form> </form>
<form method="POST" action="{{ route('logout') }}"> <form method="POST" action="{{ route('logout') }}">
@csrf @csrf
<button type="submit" class="btn btn-outline-secondary">
<button type="submit" 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"> <i class="bi bi-box-arrow-right me-2"></i>Log Out
{{ __('Log Out') }}
</button> </button>
</form> </form>
</div> </div>
</x-guest-layout> </div>
</div>
</div>
</div>
</div>
@endsection