webmaster/crewsportswear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: enhance authentication forms with improved layout and design

Browse Source
This commit is contained in:
Frank John Begornia
2026-04-17 14:18:31 +08:00
parent a29bca1931
commit 04675dfd37
4 changed files with 675 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
resources/views/auth/reset.blade.php
View File

@@ -3,60 +3,158 @@
@section('content')
<style>
.error{
color: red;
body {
background: #ffffff;
margin: 0;
}
.form-wrapper{
margin-top: 20%;
.navbar-custom {
margin-bottom: 0;
}
.auth-wrapper {
min-height: calc(100vh - 100px);
min-height: calc(100dvh - 100px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
box-sizing: border-box;
}
.auth-card {
width: 100%;
max-width: 380px;
background: #ffffff;
border: 1px solid #eceff3;
border-radius: 12px;
padding: 28px;
}
.auth-title {
font-size: 24px;
font-weight: 600;
line-height: 1.2;
margin: 0 0 8px;
color: #111827;
}
.auth-subtitle {
font-size: 14px;
margin: 0 0 20px;
color: #6b7280;
}
.auth-card .form-group {
margin-bottom: 14px;
}
.auth-card label {
display: block;
font-size: 13px;
font-weight: 500;
margin-bottom: 6px;
color: #374151;
}
.auth-card .form-control {
height: 42px;
border-radius: 8px;
border: 1px solid #d1d5db;
background: #ffffff;
font-size: 14px;
padding: 0 12px;
box-shadow: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-card .form-control:focus {
border-color: #9ca3af;
box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
outline: none;
}
.btn-auth {
width: 100%;
height: 44px;
border: 0;
border-radius: 8px;
background: #111827;
color: #ffffff;
font-size: 14px;
font-weight: 600;
transition: opacity 0.2s;
}
.btn-auth:hover {
opacity: 0.92;
color: #ffffff;
}
.auth-footer {
margin-top: 16px;
text-align: center;
font-size: 13px;
color: #6b7280;
}
.auth-footer a {
color: #111827;
text-decoration: none;
font-weight: 500;
}
.auth-footer a:hover {
text-decoration: underline;
}
.auth-card .alert {
border-radius: 8px;
font-size: 13px;
}
.auth-card .alert ul {
padding-left: 18px;
margin-bottom: 0;
}
</style>
<div class="container">
<div class="col-md-4 col-md-offset-4">
<div class="form-wrapper">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="text-center">R E S E T &nbsp; P A S S W O R D</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form role="form" method="POST" action="{{ url('/password/reset') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="token" value="{{ $token }}">
<div class="form-group">
<label class="control-label">Email Address</label>
<input type="email" class="form-control" name="email" value="{{ old('email') }}" title="Please enter your email address" placeholder="example@gmail.com">
<span class="help-block"></span>
</div>
<div class="form-group">
<label class="control-label">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password">
<span class="help-block"></span>
</div>
<div class="form-group">
<label class="control-label">Confirm Password</label>
<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password">
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-default btn-block">Reset Password</button>
</form>
<br><br>
</div>
</div>
</div>
<div class="auth-wrapper">
<div class="auth-card">
<h1 class="auth-title">Reset password</h1>
<p class="auth-subtitle">Set a new password for your account.</p>
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
</div>
@endif
<form role="form" method="POST" action="{{ url('/password/reset') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="token" value="{{ $token }}">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}" title="Please enter your email address" placeholder="you@example.com">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" name="password" id="password" placeholder="New password">
</div>
<div class="form-group">
<label for="password_confirmation">Confirm Password</label>
<input type="password" class="form-control" name="password_confirmation" id="password_confirmation" placeholder="Confirm password">
</div>
<button type="submit" class="btn-auth">Reset password</button>
</form>
<p class="auth-footer"><a href="{{ url('/auth/login') }}">Back to sign in</a></p>
</div>
</div>
@endsection