style: enhance authentication forms with improved layout and design
This commit is contained in:
Frank John Begornia
@@ -2,58 +2,168 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<style>
|
<style>
|
||||||
.error{
|
html,
|
||||||
color: red;
|
body {
|
||||||
|
height: 100%;
|
||||||
|
background: #ffffff;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.form-wrapper{
|
|
||||||
margin-top: 20%;
|
.navbar-custom {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-wrapper {
|
||||||
|
height: calc(100vh - 100px);
|
||||||
|
height: calc(100dvh - 100px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 380px;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #eceff3;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0 0 24px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card .form-group {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card label {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card .form-control:focus {
|
||||||
|
border-color: #9ca3af;
|
||||||
|
box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-remember-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 6px 0 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-remember-row label {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-remember-row a {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #4b5563;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-remember-row a:hover {
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-login {
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #111827;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-login:hover {
|
||||||
|
opacity: 0.92;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-footer {
|
||||||
|
margin-top: 18px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-footer a {
|
||||||
|
color: #111827;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-footer a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-response-msg .alert {
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="container">
|
|
||||||
<div class="col-md-4 col-md-offset-4">
|
<div class="login-wrapper">
|
||||||
<div class="form-wrapper">
|
<div class="login-card">
|
||||||
<div class="panel panel-default">
|
<h1 class="login-title">Sign in</h1>
|
||||||
<div class="panel-heading">
|
<p class="login-subtitle">Welcome back. Please enter your details.</p>
|
||||||
<h3 class="text-center">S I G N - I N</h3>
|
<div id="login-response-msg"></div>
|
||||||
</div>
|
<form role="form" id="frm-login">
|
||||||
<div class="panel-body">
|
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
||||||
<div class="row">
|
<div class="form-group">
|
||||||
<div class="col-xs-12">
|
<label for="email">Email Address</label>
|
||||||
<div id="login-response-msg"></div>
|
<input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}" placeholder="you@example.com" title="Please enter your email address">
|
||||||
<form role="form" id="frm-login">
|
|
||||||
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="username" 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 for="password" class="control-label">Password</label>
|
|
||||||
<input type="password" class="form-control" name="password" placeholder="Password" title="Please enter your password">
|
|
||||||
<span class="help-block"></span>
|
|
||||||
</div>
|
|
||||||
<div class="checkbox">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" name="remember"> Remember login
|
|
||||||
</label>
|
|
||||||
<p class="help-block">(if this is a private computer)</p>
|
|
||||||
</div>
|
|
||||||
<button type="submit" id="btn-login" class="btn btn-success btn-block"><i class="fa fa-sign-in"></i> Sign in</button>
|
|
||||||
<a href="{{ url('/password/email') }}" class="btn btn-link btn-block">Forgot Your Password?</a>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<hr />
|
|
||||||
<p class="text-center">Don't have an account? Register Now!</p>
|
|
||||||
<a href="{{ url('/auth/register') }}" type="submit" id="btn-login" class="btn btn-primary btn-block">Register</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="form-group">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input type="password" class="form-control" name="password" id="password" placeholder="Enter your password" title="Please enter your password">
|
||||||
|
</div>
|
||||||
|
<div class="login-remember-row">
|
||||||
|
<label><input type="checkbox" name="remember"> Remember me</label>
|
||||||
|
<a href="{{ url('/password/email') }}">Forgot password?</a>
|
||||||
|
</div>
|
||||||
|
<button type="submit" id="btn-login" class="btn-login">Sign in</button>
|
||||||
|
</form>
|
||||||
|
<p class="login-footer">Don’t have an account? <a href="{{ url('/auth/register') }}">Create one</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
@@ -2,54 +2,154 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<style>
|
<style>
|
||||||
.error{
|
body {
|
||||||
color: red;
|
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>
|
</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 P A S S W O R D</h3>
|
|
||||||
</div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-12">
|
|
||||||
@if (session('status'))
|
|
||||||
<div class="alert alert-success">
|
|
||||||
{{ session('status') }}
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
@if (count($errors) > 0)
|
<div class="auth-wrapper">
|
||||||
<div class="alert alert-danger">
|
<div class="auth-card">
|
||||||
<strong>Whoops!</strong> There were some problems with your input.<br><br>
|
<h1 class="auth-title">Forgot password</h1>
|
||||||
<ul>
|
<p class="auth-subtitle">Enter your email and we’ll send you a reset link.</p>
|
||||||
@foreach ($errors->all() as $error)
|
|
||||||
<li>{{ $error }}</li>
|
@if (session('status'))
|
||||||
@endforeach
|
<div class="alert alert-success">
|
||||||
</ul>
|
{{ session('status') }}
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
<form role="form" method="POST" action="{{ url('/password/email') }}">
|
|
||||||
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="username" 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>
|
|
||||||
<button type="submit" class="btn btn-default btn-block">Send Password Reset Link</button>
|
|
||||||
</form>
|
|
||||||
<br><br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
@endif
|
||||||
|
|
||||||
|
@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/email') }}">
|
||||||
|
<input type="hidden" name="_token" value="{{ csrf_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>
|
||||||
|
<button type="submit" class="btn-auth">Send reset link</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p class="auth-footer"><a href="{{ url('/auth/login') }}">Back to sign in</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
@@ -2,136 +2,242 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<style>
|
<style>
|
||||||
.error {
|
body {
|
||||||
color: red;
|
background: #ffffff;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-custom {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-wrapper {
|
||||||
|
min-height: calc(100vh - 100px);
|
||||||
|
min-height: calc(100dvh - 100px);
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 560px;
|
||||||
|
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-section-title {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #6b7280;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin: 8px 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card select.form-control {
|
||||||
|
padding-right: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.g-recaptcha {
|
.g-recaptcha {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.auth-terms {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #6b7280;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-terms a {
|
||||||
|
color: #111827;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-terms a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-register-modern {
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #111827;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-register-modern: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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#register-response-msg .alert {
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<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 G I S T E R</h3>
|
|
||||||
</div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<div id="register-response-msg"></div>
|
|
||||||
<form role="form" id="frm-register">
|
|
||||||
<div class="form-group text-center">
|
|
||||||
<h5>Personal Information</h5>
|
|
||||||
</div>
|
|
||||||
<input type="hidden" name="redirect" value="{{ Request::get('redirectUrl') }}">
|
|
||||||
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="auth-wrapper">
|
||||||
<label class="control-label">First name</label>
|
<div class="auth-card">
|
||||||
<input type="text" class="form-control" name="firstname" placeholder="First name">
|
<h1 class="auth-title">Create account</h1>
|
||||||
</div>
|
<p class="auth-subtitle">Fill in your details to get started.</p>
|
||||||
|
<div id="register-response-msg"></div>
|
||||||
|
<form role="form" id="frm-register">
|
||||||
|
<div class="auth-section-title">Personal Information</div>
|
||||||
|
<input type="hidden" name="redirect" value="{{ Request::get('redirectUrl') }}">
|
||||||
|
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="control-label">Last name</label>
|
<label>First name</label>
|
||||||
<input type="text" class="form-control" name="lastname" placeholder="Last name">
|
<input type="text" class="form-control" name="firstname" placeholder="First name">
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div class="form-group">
|
|
||||||
<label class="control-label">Username</label>
|
|
||||||
<input type="text" class="form-control" name="username" value="{{ old('username') }}" placeholder="Username">
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label">Email Address</label>
|
|
||||||
<input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="Email Address">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label">Phone Number</label>
|
|
||||||
<input type="text" class="form-control" name="mobilenumber" placeholder="Phone Number">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label">Password</label>
|
|
||||||
<input type="password" class="form-control" name="password" id="password" required placeholder="Password">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label">Confirm Password</label>
|
|
||||||
<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" data-rule-equalTo="#password" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group text-center">
|
|
||||||
<h5>Address Information</h5>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label">Select Country</label>
|
|
||||||
<select name="countryCode" id="select_country" class="form-control" onchange="selectCountry(this)">
|
|
||||||
<option value="">Select Country</option>
|
|
||||||
<option value="US">United States</option>
|
|
||||||
<option value="CA">Canada</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label">State / Province</label>
|
|
||||||
<label></label>
|
|
||||||
<select class="form-control" name="state" id="lst-states">
|
|
||||||
<option value="">Select State</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label">City</label>
|
|
||||||
<select class="form-control" name="city" id="lst-cities">
|
|
||||||
<option value="">Select City</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label">Address 1</label>
|
|
||||||
<input type="text" class="form-control" name="address" placeholder="Address 1">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label">Address 2</label>
|
|
||||||
<input type="text" class="form-control" name="address2" placeholder="Address 2">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label">Zip Code</label>
|
|
||||||
<input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="g-recaptcha text-center" data-sitekey="{{ env('CAPTCHA_SITE_KEY') }}"></div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<p>By clicking Register, you agree to our <a href="#">Terms of Use</a> and that you have read our <a href="#">Privacy Policy</a>.</p>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<button type="submit" id="btn-register" class="btn btn-primary btn-block">Register</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<hr />
|
|
||||||
<p class="text-center">Have already an account?</p>
|
|
||||||
<a href="{{ url('/auth/login') }}" type="submit" id="btn-login" class="btn btn-success btn-block">Login here</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Last name</label>
|
||||||
|
<input type="text" class="form-control" name="lastname" placeholder="Last name">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Email Address</label>
|
||||||
|
<input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="you@example.com">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Phone Number</label>
|
||||||
|
<input type="text" class="form-control" name="mobilenumber" placeholder="Phone Number">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Password</label>
|
||||||
|
<input type="password" class="form-control" name="password" id="password" required placeholder="Password">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Confirm Password</label>
|
||||||
|
<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" data-rule-equalTo="#password" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="auth-section-title">Address Information</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Select Country</label>
|
||||||
|
<select name="countryCode" id="select_country" class="form-control" onchange="selectCountry(this)">
|
||||||
|
<option value="">Select Country</option>
|
||||||
|
<option value="US">United States</option>
|
||||||
|
<option value="CA">Canada</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>State / Province</label>
|
||||||
|
<select class="form-control" name="state" id="lst-states">
|
||||||
|
<option value="">Select State</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>City</label>
|
||||||
|
<select class="form-control" name="city" id="lst-cities">
|
||||||
|
<option value="">Select City</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Address 1</label>
|
||||||
|
<input type="text" class="form-control" name="address" placeholder="Address 1">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Address 2</label>
|
||||||
|
<input type="text" class="form-control" name="address2" placeholder="Address 2">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Zip Code</label>
|
||||||
|
<input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="g-recaptcha text-center" data-sitekey="{{ env('CAPTCHA_SITE_KEY') }}"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="auth-terms">By clicking Register, you agree to our <a href="#">Terms of Use</a> and that you have read our <a href="#">Privacy Policy</a>.</p>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<button type="submit" id="btn-register" class="btn-register-modern">Register</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p class="auth-footer">Already have an account? <a href="{{ url('/auth/login') }}">Sign in</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
@@ -3,60 +3,158 @@
|
|||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.error{
|
body {
|
||||||
color: red;
|
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>
|
</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 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">
|
<div class="auth-wrapper">
|
||||||
<label class="control-label">Email Address</label>
|
<div class="auth-card">
|
||||||
<input type="email" class="form-control" name="email" value="{{ old('email') }}" title="Please enter your email address" placeholder="example@gmail.com">
|
<h1 class="auth-title">Reset password</h1>
|
||||||
<span class="help-block"></span>
|
<p class="auth-subtitle">Set a new password for your account.</p>
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
@if (count($errors) > 0)
|
||||||
<label class="control-label">Password</label>
|
<div class="alert alert-danger">
|
||||||
<input type="password" class="form-control" name="password" placeholder="Password">
|
<strong>Whoops!</strong> There were some problems with your input.<br><br>
|
||||||
<span class="help-block"></span>
|
<ul>
|
||||||
</div>
|
@foreach ($errors->all() as $error)
|
||||||
<div class="form-group">
|
<li>{{ $error }}</li>
|
||||||
<label class="control-label">Confirm Password</label>
|
@endforeach
|
||||||
<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password">
|
</ul>
|
||||||
<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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
Reference in New Issue
Block a user