Skip to content

Commit

Permalink
feat: update reset password ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@WailanTirajoh
WailanTirajoh committed Nov 25, 2023
1 parent 0152c6a commit 532a51b
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 110 deletions.
1 change: 1 addition & 0 deletions app/Http/Controllers/AuthController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
use Illuminate\Auth\Events\PasswordReset;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Password;
use Illuminate\Support\Str;

class AuthController extends Controller
{
Expand Down
2 changes: 1 addition & 1 deletion public/hot
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
http://127.0.0.1:5173
http://[::1]:5173
124 changes: 79 additions & 45 deletions resources/views/auth/passwords/email.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,98 @@
@extends('template.auth')

@section('content')
<style>
#btn_submit {
width: 100%;
transition: all 0.5s ease-in-out;
}
<style>
#btn_submit {
width: 100%;
transition: all 0.5s ease-in-out;
}
#btn_submit.isLoading {
width: 50px;
border-radius: 100vw;
}
#btn_submit.isLoading {
width: 50px;
border-radius: 100vw;
}
.hide {
display: none;
}
.hide {
display: none;
}
</style>
<link href="{{ asset('style/css/stylelogin.css') }}" rel="stylesheet">

</style>
<link href="{{ asset('style/css/stylelogin.css') }}" rel="stylesheet">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Reset Password') }}</div>

<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
<svg class="wavestop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0099ff" fill-opacity="1"
d="M0,224L48,186.7C96,149,192,75,288,42.7C384,11,480,21,576,74.7C672,128,768,224,864,256C960,288,1056,256,1152,234.7C1248,213,1344,203,1392,197.3L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z">
</path>
</svg>
<div class="container">
<div class="row vertical-center">
<div class="col-lg-5 col-md-8 col-sm-12 mx-auto" style="z-index: 1">
<div class="glassmorphism card-signin my-5">
<div class="card-body">
<div class="row mb-3">
<div class="col-lg-12">
<div class="d-flex justify-content-center">
<img src="{{ asset('img/logo/sip.png') }}" width="100" height="100"
class="rounded-circle mx-auto" alt="logo" style="background-color: white;">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h5 class="card-title text-center">Hotel Information System</h5>
</div>
</div>
@endif

<form method="POST" action="{{ route('password.email') }}">
@csrf
<div class="row">
<div class="col-lg-12">
<form onsubmit="return disableButton()" method="POST"
action="{{ route('password.email') }}"
style="display: flex; flex-direction: column; gap: 8px;"
>
@csrf

<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="form-group row">
<label for="email"
class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
<div class="col-md-8">
<input id="email" type="email"
class="form-control @error('email') is-invalid @enderror" name="email"
value="{{ old('email') }}" required autocomplete="email" autofocus>

@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>

<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Send Password Reset Link') }}
</button>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button id="btn_submit" type="submit" class="btn btn-primary">
{{ __('Send Password Reset Link') }}
</button>
</div>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<svg class="wavesbottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0099ff" fill-opacity="1"
d="M0,224L48,213.3C96,203,192,181,288,154.7C384,128,480,96,576,122.7C672,149,768,235,864,234.7C960,235,1056,149,1152,117.3C1248,85,1344,107,1392,117.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>

<script>
function disableButton() {
$("#loading_submit").removeClass("hide");
$("#text_submit").addClass("hide");
$("#btn_submit").attr('disabled', 'disabled');
}
</script>
@endsection
173 changes: 109 additions & 64 deletions resources/views/auth/reset-password.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,127 @@
@extends('template.auth')

@section('content')
<style>
#btn_submit {
width: 100%;
transition: all 0.5s ease-in-out;
}
#btn_submit.isLoading {
width: 50px;
border-radius: 100vw;
}
.hide {
display: none;
}
</style>
<link href="{{ asset('style/css/stylelogin.css') }}" rel="stylesheet">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Reset Password') }}</div>

<div class="card-body">
<form method="POST" action="{{ route('password.update') }}">
@csrf

<input type="hidden" name="token" value="{{ $token }}">

<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>

@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<style>
#btn_submit {
width: 100%;
transition: all 0.5s ease-in-out;
}
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
#btn_submit.isLoading {
width: 50px;
border-radius: 100vw;
}
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
.hide {
display: none;
}
</style>
<link href="{{ asset('style/css/stylelogin.css') }}" rel="stylesheet">

@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
<svg class="wavestop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0099ff" fill-opacity="1"
d="M0,224L48,186.7C96,149,192,75,288,42.7C384,11,480,21,576,74.7C672,128,768,224,864,256C960,288,1056,256,1152,234.7C1248,213,1344,203,1392,197.3L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z">
</path>
</svg>
<div class="container">
<div class="row vertical-center">
<div class="col-lg-5 col-md-8 col-sm-12 mx-auto" style="z-index: 1">
<div class="glassmorphism card-signin my-5">
<div class="card-body">
<div class="row mb-3">
<div class="col-lg-12">
<div class="d-flex justify-content-center">
<img src="{{ asset('img/logo/sip.png') }}" width="100" height="100"
class="rounded-circle mx-auto" alt="logo" style="background-color: white;">
</div>
</div>
</div>

<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
<div class="row">
<div class="col-lg-12">
<h5 class="card-title text-center">Hotel Information System</h5>
</div>
</div>

<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Reset Password') }}
</button>
<div class="row">
<div class="col-lg-12">
<form onsubmit="return disableButton()" method="POST"
action="{{ route('password.update') }}"
style="display: flex; flex-direction: column; gap: 8px;">
@csrf

<input type="hidden" name="token" value="{{ $token }}">

<div class="form-group row">
<label for="email"
class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

<div class="col-md-8">
<input id="email" type="email"
class="form-control @error('email') is-invalid @enderror" name="email"
value="{{ $email ?? old('email') }}" required autocomplete="email"
autofocus>

@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>

<div class="form-group row">
<label for="password"
class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

<div class="col-md-8">
<input id="password" type="password"
class="form-control @error('password') is-invalid @enderror" name="password"
required autocomplete="new-password">

@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>

<div class="form-group row">
<label for="password-confirm"
class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

<div class="col-md-8">
<input id="password-confirm" type="password" class="form-control"
name="password_confirmation" required autocomplete="new-password">
</div>
</div>

<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Reset Password') }}
</button>
</div>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<svg class="wavesbottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0099ff" fill-opacity="1"
d="M0,224L48,213.3C96,203,192,181,288,154.7C384,128,480,96,576,122.7C672,149,768,235,864,234.7C960,235,1056,149,1152,117.3C1248,85,1344,107,1392,117.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>

<script>
function disableButton() {
$("#loading_submit").removeClass("hide");
$("#text_submit").addClass("hide");
$("#btn_submit").attr('disabled', 'disabled');
}
</script>
@endsection

0 comments on commit 532a51b

Please sign in to comment.