916 lines
30 KiB
PHP
916 lines
30 KiB
PHP
{{-- <!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SIPAYA</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
|
|
<script src="https://cdn.lordicon.com/lusqsztk.js"></script>
|
|
<link rel="stylesheet" href="{{ asset('assets/css/demo.css') }}" />
|
|
|
|
<style>
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-family: 'Poppins', sans-serif;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(to bottom right, #f2f4f8, #f2f4f8);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.curve-container {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
padding-top: 90px;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
.gradient-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 60vh;
|
|
background: linear-gradient(270deg, #1a2035, #28314d, #364264, #44537b, #526492, #6075a9, #7088bf, #809cd6);
|
|
background-size: 600% 600%;
|
|
animation: gradientAnimation 15s ease infinite;
|
|
opacity: 0.7;
|
|
z-index: 2;
|
|
}
|
|
|
|
.top-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 60vh;
|
|
object-fit: cover;
|
|
z-index: 1;
|
|
}
|
|
|
|
.v-shaped-background {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 80vh;
|
|
background: #f2f4f8;
|
|
clip-path: polygon(0 30%, 50% 50%, 100% 30%, 100% 100%, 0 100%);
|
|
box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.1);
|
|
z-index: 3;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
@keyframes gradientAnimation {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
.card-body {
|
|
background: #ffffff;
|
|
padding: 2rem;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
|
|
max-width: 500px;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 4;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: fadeInUp 3s ease forwards;
|
|
top: -60px;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.login-image {
|
|
display: block;
|
|
margin: 0 auto 20px auto;
|
|
width: 200px;
|
|
height: auto;
|
|
z-index: 5;
|
|
position: relative;
|
|
opacity: 0.7;
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #6c757d;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 0.8rem;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 5px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #0AB39C;
|
|
border-color: #0AB39C;
|
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
background-color: #0AB39C;
|
|
border-color: #0AB39C;
|
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:focus,
|
|
.btn-primary:active {
|
|
background-color: #0AB39C !important;
|
|
border-color: #0AB39C !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #088c73;
|
|
border-color: #088c73;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.small {
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.small:hover {
|
|
color: #1a088c;
|
|
text-decoration: none;
|
|
}
|
|
|
|
lord-icon {
|
|
width: 100px;
|
|
height: 100px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 0;
|
|
position: relative;
|
|
bottom: 30px;
|
|
text-align: center;
|
|
padding: px 0;
|
|
background: inherit;
|
|
font-size: 0.9rem;
|
|
z-index: 5;
|
|
}
|
|
|
|
.form-control.is-invalid {
|
|
border-color: red !important;
|
|
border-width: 1.5px !important;
|
|
|
|
}
|
|
|
|
.form-control.is-valid {
|
|
border-color: green !important;
|
|
border-width: 1.5px !important;
|
|
|
|
}
|
|
|
|
.form-control.is-valid,
|
|
.input-group .form-control.is-valid {
|
|
background-image: none !important;
|
|
background-position: initial !important;
|
|
}
|
|
|
|
input.is-invalid {
|
|
background-image: none !important;
|
|
}
|
|
|
|
input.is-invalid::after {
|
|
content: none !important;
|
|
}
|
|
|
|
input.is-valid {
|
|
background-image: none !important;
|
|
}
|
|
|
|
input.is-valid::after {
|
|
content: none !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.curve-container {
|
|
padding: 0 15px;
|
|
padding-top: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.login-image {
|
|
width: 150px;
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
.card-body {
|
|
top: -70px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.curve-container {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="preloader">
|
|
<div class="preloader-body">
|
|
<div class="cssload-container">
|
|
<div class="cssload-speeding-wheel"></div>
|
|
</div>
|
|
<p>Loading...</p>
|
|
</div>
|
|
</div>
|
|
@include('sweetalert::alert')
|
|
<div class="curve-container">
|
|
<img src="{{ asset('asset/images/pepaya1.png') }}" alt="Top Image" class="top-image">
|
|
<div class="gradient-overlay"></div>
|
|
<div class="v-shaped-background"></div>
|
|
<div class="content-center text-center">
|
|
<img src="{{ asset('asset/images/logo.png') }}" alt="Login Image" class="login-image">
|
|
<div class="card-body">
|
|
<p class="text-muted">Masukkan password baru untuk akun Anda</p>
|
|
<form class="user" action="{{ route('validation_forgot_password.process') }}" method="POST"
|
|
id="resetForm">
|
|
@csrf
|
|
<input type="hidden" name="token" value="{{ $token }}">
|
|
|
|
<label for="password" class="form-label"
|
|
style="font-size: 14px; font-weight: bold; text-align: left; display: block; margin-bottom: 5px;">
|
|
Password
|
|
</label>
|
|
<div class="form-group" style="position: relative; margin-bottom: 10px; flex-direction: column;">
|
|
<div style="display: flex; align-items: center; position: relative;">
|
|
<input type="password" id="passwordInput" class="form-control" name="password"
|
|
placeholder="Masukkan password baru" required
|
|
style="border-color: black; outline: none; box-shadow: none; padding-right: 40px; font-size: 14px;">
|
|
<span id="togglePassword"
|
|
style="position: absolute; right: 10px; display: flex; align-items: center; cursor: pointer;">
|
|
<i class="fas fa-eye" id="togglePasswordIcon" style="font-size: 14px;"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<small id="passwordError" class="text-danger d-none"
|
|
style="text-align: left; display: block; margin-top: 5px;">
|
|
Password minimal 6 karakter dan harus mengandung angka atau simbol.
|
|
</small>
|
|
@error('password')
|
|
<small class="text-danger">{{ $message }}</small>
|
|
@enderror
|
|
</div>
|
|
|
|
<label for="password_confirmation" class="form-label"
|
|
style="font-size: 14px; font-weight: bold; text-align: left; display: block; margin-bottom: 5px;">
|
|
Konfirmasi Password
|
|
</label>
|
|
<div class="form-group" style="display: flex; flex-direction: column; position: relative;">
|
|
<div style="display: flex; align-items: center; position: relative;">
|
|
<input type="password" id="confirmPasswordInput" class="form-control"
|
|
name="password_confirmation" placeholder="Masukkan konfirmasi password" required
|
|
style="border-color: black; outline: none; box-shadow: none; padding-right: 40px; font-size: 14px;">
|
|
<span id="toggleConfirmPassword"
|
|
style="position: absolute; right: 10px; display: flex; align-items: center; cursor: pointer;">
|
|
<i class="fas fa-eye" id="toggleConfirmPasswordIcon" style="font-size: 14px;"></i>
|
|
</span>
|
|
</div>
|
|
<small id="confirmPasswordError" class="text-danger d-none"
|
|
style="text-align: left; display: block; margin-top: 5px;">
|
|
Konfirmasi password minimal 6 karakter dan harus cocok dengan password.
|
|
</small>
|
|
@error('password_confirmation')
|
|
<small class="text-danger">{{ $message }}</small>
|
|
@enderror
|
|
</div>
|
|
|
|
<button type="submit" id="submitButton" class="btn btn-primary btn-block mt-1" disabled>
|
|
Ubah Password
|
|
</button>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer text-center">
|
|
<p class="text-muted mb-0">
|
|
© {{ date('Y') }} SIPAYA. Crafted by Muhammad Agi Prasetyo
|
|
</p>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const preloader = document.querySelector('.preloader');
|
|
const forgotForm = document.getElementById('forgotForm');
|
|
|
|
if (forgotForm) {
|
|
forgotForm.addEventListener('submit', () => {
|
|
if (preloader) {
|
|
preloader.style.display = 'flex';
|
|
}
|
|
});
|
|
}
|
|
window.addEventListener('load', () => {
|
|
if (preloader) {
|
|
preloader.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
const passwordInput = document.getElementById('passwordInput');
|
|
const confirmPasswordInput = document.getElementById('confirmPasswordInput');
|
|
const passwordError = document.getElementById('passwordError');
|
|
const confirmPasswordError = document.getElementById('confirmPasswordError');
|
|
const submitButton = document.getElementById('submitButton');
|
|
const togglePassword = document.getElementById('togglePassword');
|
|
const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
|
|
const passwordPattern = /[0-9!@#$%^&*(),.?":{}|<>]/;
|
|
|
|
function validatePassword() {
|
|
const passwordValue = passwordInput?.value.trim();
|
|
let isValid = true;
|
|
|
|
if (passwordValue.length < 6) {
|
|
passwordError.textContent = 'Password minimal 6 karakter.';
|
|
passwordError.classList.remove('d-none');
|
|
passwordInput.classList.add('is-invalid');
|
|
passwordInput.classList.remove('is-valid');
|
|
isValid = false;
|
|
} else if (!passwordPattern.test(passwordValue)) {
|
|
passwordError.textContent = 'Password harus mengandung angka atau simbol.';
|
|
passwordError.classList.remove('d-none');
|
|
passwordInput.classList.add('is-invalid');
|
|
passwordInput.classList.remove('is-valid');
|
|
isValid = false;
|
|
} else {
|
|
passwordError.classList.add('d-none');
|
|
passwordInput.classList.remove('is-invalid');
|
|
passwordInput.classList.add('is-valid');
|
|
}
|
|
return isValid;
|
|
}
|
|
|
|
function validateConfirmPassword() {
|
|
const passwordValue = passwordInput?.value.trim();
|
|
const confirmPasswordValue = confirmPasswordInput?.value.trim();
|
|
let isValid = true;
|
|
|
|
if (confirmPasswordValue.length < 6) {
|
|
confirmPasswordError.textContent = 'Konfirmasi password minimal 6 karakter.';
|
|
confirmPasswordError.classList.remove('d-none');
|
|
confirmPasswordInput.classList.add('is-invalid');
|
|
confirmPasswordInput.classList.remove('is-valid');
|
|
isValid = false;
|
|
} else if (confirmPasswordValue !== passwordValue) {
|
|
confirmPasswordError.textContent = 'Password tidak cocok.';
|
|
confirmPasswordError.classList.remove('d-none');
|
|
confirmPasswordInput.classList.add('is-invalid');
|
|
confirmPasswordInput.classList.remove('is-valid');
|
|
isValid = false;
|
|
} else {
|
|
confirmPasswordError.classList.add('d-none');
|
|
confirmPasswordInput.classList.remove('is-invalid');
|
|
confirmPasswordInput.classList.add('is-valid');
|
|
}
|
|
return isValid;
|
|
}
|
|
|
|
function checkFormValidity() {
|
|
const isPasswordValid = validatePassword();
|
|
const isConfirmPasswordValid = validateConfirmPassword();
|
|
if (isPasswordValid && isConfirmPasswordValid) {
|
|
submitButton.disabled = false;
|
|
} else {
|
|
submitButton.disabled = true;
|
|
}
|
|
}
|
|
|
|
if (passwordInput && confirmPasswordInput) {
|
|
passwordInput.addEventListener('input', () => {
|
|
validatePassword();
|
|
validateConfirmPassword();
|
|
checkFormValidity();
|
|
});
|
|
|
|
confirmPasswordInput.addEventListener('input', () => {
|
|
validateConfirmPassword();
|
|
checkFormValidity();
|
|
});
|
|
}
|
|
|
|
if (togglePassword) {
|
|
togglePassword.addEventListener('click', () => {
|
|
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
passwordInput.setAttribute('type', type);
|
|
togglePassword.querySelector('i').classList.toggle('fa-eye-slash');
|
|
});
|
|
}
|
|
|
|
if (toggleConfirmPassword) {
|
|
toggleConfirmPassword.addEventListener('click', () => {
|
|
const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' :
|
|
'password';
|
|
confirmPasswordInput.setAttribute('type', type);
|
|
toggleConfirmPassword.querySelector('i').classList.toggle('fa-eye-slash');
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> --}}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SIPAYA</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
|
|
<link rel="icon" href={{ asset('asset/images/icon.png') }} type="image/x-icon" />
|
|
<link rel="stylesheet" href="{{ asset('assets/css/demo.css') }}" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<script src="https://www.google.com/recaptcha/api.js"></script>
|
|
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: linear-gradient(135deg, #6a11cb, #2575fc);
|
|
font-family: 'Poppins', sans-serif;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.panel {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.left-panel {
|
|
width: 43%;
|
|
background-color: #a7b5c7;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow-y: auto;
|
|
gap: 20px;
|
|
}
|
|
|
|
.right-panel {
|
|
width: 57%;
|
|
background-color: #ffffff;
|
|
padding: 30px 250px 30px 50px;
|
|
}
|
|
|
|
/* Link kembali ke beranda */
|
|
.home-link {
|
|
text-decoration: none;
|
|
margin-top: 30px;
|
|
font-size: 15px;
|
|
color: #2575fc;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.home-link:hover {
|
|
color: #0056b3;
|
|
}
|
|
|
|
.home-link i {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Judul halaman */
|
|
.welcome-text {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.welcome-text h1 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #000;
|
|
}
|
|
|
|
.welcome-text p {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #6c757d;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.welcome-text p span {
|
|
color: #2575fc;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Container form */
|
|
.form-container {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/* Form Group */
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
label {
|
|
font-size: 13px;
|
|
font-weight: 510;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Input container untuk password */
|
|
.input-container {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.input-container input {
|
|
width: 100%;
|
|
padding: 10px 15px;
|
|
padding-right: 40px;
|
|
/* Ruang untuk ikon mata */
|
|
height: 45px;
|
|
font-size: 14px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.input-container input:focus {
|
|
outline: none;
|
|
border-color: #2575fc;
|
|
}
|
|
|
|
/* Tombol show/hide password */
|
|
.input-container i {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
color: #888;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Aksi di form */
|
|
.actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.actions a {
|
|
text-decoration: none;
|
|
color: #2575fc;
|
|
font-size: 14px;
|
|
font-weight: 550;
|
|
}
|
|
|
|
.actions a:hover {
|
|
color: #0056b3;
|
|
}
|
|
|
|
/* Google reCAPTCHA */
|
|
.g-recaptcha {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
/* Tombol submit */
|
|
.submit-button {
|
|
width: 100%;
|
|
height: 50px;
|
|
margin-top: 5px;
|
|
background-color: #1a2035;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
font-weight: 550;
|
|
border: none;
|
|
border-radius: 25px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.submit-button:hover {
|
|
background-color: #131827;
|
|
}
|
|
|
|
/* Link lupa password */
|
|
.forgot-link {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.forgot-link a {
|
|
text-decoration: none;
|
|
color: #2575fc;
|
|
}
|
|
|
|
.forgot-link a:hover {
|
|
color: #0056b3;
|
|
}
|
|
|
|
/* Gambar di panel kiri */
|
|
.left-panel-image {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* RESPONSIVE DESIGN */
|
|
@media (max-width: 768px) {
|
|
body {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.left-panel {
|
|
display: none;
|
|
}
|
|
|
|
.right-panel {
|
|
width: 100%;
|
|
padding: 40px 30px;
|
|
}
|
|
|
|
.welcome-text h1 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.welcome-text p {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.home-link {
|
|
font-size: 14px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
input[type="password"] {
|
|
height: 40px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.submit-button {
|
|
height: 50px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.forgot-link {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.input-container i {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.right-panel {
|
|
padding: 20px 30px;
|
|
}
|
|
|
|
.welcome-text h1 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.welcome-text p {
|
|
font-size: 15px;
|
|
}
|
|
|
|
input[type="password"] {
|
|
height: 45px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.submit-button {
|
|
height: 50px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.forgot-link {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
@include('sweetalert::alert')
|
|
<div class="preloader">
|
|
<div class="preloader-body">
|
|
<div class="cssload-container">
|
|
<div class="cssload-speeding-wheel"></div>
|
|
</div>
|
|
<p>Loading...</p>
|
|
</div>
|
|
</div>
|
|
<div class="panel left-panel">
|
|
<div class="panel left-panel">
|
|
<img src="{{ asset('asset/images/icon.png') }}" alt="Welcome Image" class="left-panel-image">
|
|
<img src="{{ asset('asset/images/logo3.png') }}" alt="Second Image" class="left-panel-image">
|
|
</div>
|
|
</div>
|
|
<div class="panel right-panel">
|
|
<a href="{{ route('home.index') }}" class="home-link">
|
|
<i class="fas fa-chevron-left"></i>
|
|
Beranda
|
|
</a>
|
|
|
|
<div class="welcome-text">
|
|
<h1>Reset Password</h1>
|
|
<p>Masukkan password baru untuk akun anda</p>
|
|
</div>
|
|
|
|
<div class="form-container">
|
|
<form class="user" action="{{ route('validation_forgot_password.process') }}" method="POST"
|
|
id="resetForm">
|
|
@csrf
|
|
<input type="hidden" name="token" value="{{ $token }}">
|
|
<div class="form-group">
|
|
<label for="password">Password <span style="color: red">*</span></label>
|
|
<div class="input-container">
|
|
<input type="password" id="password" name="password" placeholder="************"
|
|
style="padding-right: 40px; border: 1px solid #393a36;" required>
|
|
<i id="togglePassword" class="fas fa-eye"></i>
|
|
</div>
|
|
<small id="passwordError" class="text-danger" style="color: #ff6b6b; display: none;">
|
|
Password minimal 6 karakter
|
|
</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password_confirmation">Konfirmasi Password <span style="color: red">*</span></label>
|
|
<div class="input-container">
|
|
<input type="password" id="password_confirmation" name="password_confirmation"
|
|
placeholder="************" style="padding-right: 40px; border: 1px solid #393a36;" required>
|
|
<i id="toggleConfirmPassword" class="fas fa-eye"></i>
|
|
</div>
|
|
<small id="confirmPasswordError" class="text-danger" style="color: #ff6b6b; display: none;">
|
|
Password tidak cocok
|
|
</small>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="submit" class="submit-button">UBAH PASSWORD</button>
|
|
</div>
|
|
|
|
<div class="forgot-link" style="font-weight: 550">
|
|
<span style="color: grey">Ingin kembali?</span> <a href="{{ route('login.index') }}">Login</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const preloader = document.querySelector('.preloader');
|
|
const resetForm = document.getElementById('resetForm');
|
|
|
|
// Toggle visibility untuk password
|
|
document.getElementById('togglePassword').addEventListener('click', function() {
|
|
const passwordField = document.getElementById('password');
|
|
const type = passwordField.type === 'password' ? 'text' : 'password';
|
|
passwordField.type = type;
|
|
|
|
this.classList.toggle('fa-eye-slash');
|
|
this.classList.toggle('fa-eye');
|
|
});
|
|
|
|
// Toggle visibility untuk konfirmasi password
|
|
document.getElementById('toggleConfirmPassword').addEventListener('click', function() {
|
|
const confirmPasswordField = document.getElementById('password_confirmation');
|
|
const type = confirmPasswordField.type === 'password' ? 'text' : 'password';
|
|
confirmPasswordField.type = type;
|
|
|
|
this.classList.toggle('fa-eye-slash');
|
|
this.classList.toggle('fa-eye');
|
|
});
|
|
|
|
// Validasi Password
|
|
document.getElementById('password').addEventListener('input', function() {
|
|
const passwordError = document.getElementById('passwordError');
|
|
const passwordValue = this.value.trim();
|
|
const containsSymbol = /[!@#$%^&*(),.?":{}|<>]/.test(passwordValue);
|
|
|
|
if (passwordValue === '') {
|
|
passwordError.textContent = 'Password tidak boleh kosong';
|
|
passwordError.style.display = 'block';
|
|
this.style.border = '1px solid red';
|
|
} else if (passwordValue.length < 6) {
|
|
passwordError.textContent = 'Password minimal 6 karakter';
|
|
passwordError.style.display = 'block';
|
|
this.style.border = '1px solid red';
|
|
} else if (!containsSymbol) {
|
|
passwordError.textContent =
|
|
'Password harus mengandung setidaknya satu simbol !@#$%^&*(),.?":{}|<>';
|
|
passwordError.style.display = 'block';
|
|
this.style.border = '1px solid red';
|
|
} else {
|
|
passwordError.style.display = 'none';
|
|
this.style.border = '1px solid blue';
|
|
}
|
|
validateForm();
|
|
});
|
|
|
|
// Validasi Konfirmasi Password
|
|
document.getElementById('password_confirmation').addEventListener('input', function() {
|
|
const confirmPasswordError = document.getElementById('confirmPasswordError');
|
|
const passwordField = document.getElementById('password');
|
|
|
|
if (this.value.trim() === '') {
|
|
confirmPasswordError.textContent = 'Konfirmasi password harus diisi';
|
|
confirmPasswordError.style.display = 'block';
|
|
this.style.border = '1px solid red';
|
|
} else if (this.value.trim() !== passwordField.value.trim()) {
|
|
confirmPasswordError.textContent = 'Konfirmasi password tidak cocok';
|
|
confirmPasswordError.style.display = 'block';
|
|
this.style.border = '1px solid red';
|
|
} else {
|
|
confirmPasswordError.style.display = 'none';
|
|
this.style.border = '1px solid blue';
|
|
}
|
|
validateForm();
|
|
});
|
|
|
|
// Validasi Form Secara Global
|
|
function validateForm() {
|
|
const passwordError = document.getElementById('passwordError').style.display !== 'none';
|
|
const confirmPasswordError = document.getElementById('confirmPasswordError').style.display !==
|
|
'none';
|
|
|
|
const submitButton = document.querySelector('.submit-button');
|
|
submitButton.disabled = passwordError || confirmPasswordError;
|
|
}
|
|
|
|
// Tampilkan preloader saat form dikirim
|
|
resetForm.addEventListener('submit', function(e) {
|
|
const isDisabled = document.querySelector('.submit-button').disabled;
|
|
if (!isDisabled && preloader) {
|
|
preloader.style.display = 'flex';
|
|
}
|
|
});
|
|
|
|
// Hilangkan preloader saat halaman selesai dimuat
|
|
window.addEventListener('load', () => {
|
|
if (preloader) preloader.style.display = 'none';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|