Compare commits
No commits in common. "a3e71fd181d2b0685215811371c33bc97c05991b" and "cb50fbbb1906663c25e9a3aae86e64d6f837108b" have entirely different histories.
a3e71fd181
...
cb50fbbb19
|
|
@ -7,8 +7,6 @@ use Illuminate\Http\Request;
|
||||||
use Illuminate\Support\Facades\Hash;
|
use Illuminate\Support\Facades\Hash;
|
||||||
use Illuminate\Support\Facades\Auth;
|
use Illuminate\Support\Facades\Auth;
|
||||||
use Illuminate\Support\Facades\Log;
|
use Illuminate\Support\Facades\Log;
|
||||||
use Illuminate\Support\Facades\Mail;
|
|
||||||
use App\Mail\WelcomeMail;
|
|
||||||
|
|
||||||
class AuthController extends Controller
|
class AuthController extends Controller
|
||||||
{
|
{
|
||||||
|
|
@ -20,31 +18,7 @@ class AuthController extends Controller
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// public function register(Request $request)
|
public function register(Request $request)
|
||||||
// {
|
|
||||||
// $request->validate([
|
|
||||||
// 'first_name' => 'required|string|max:255',
|
|
||||||
// 'last_name' => 'required|string|max:255',
|
|
||||||
// 'email' => 'required|string|email|max:255|unique:users',
|
|
||||||
// 'phone' => 'required|string|max:15',
|
|
||||||
// 'password' => 'required|string|min:8|confirmed',
|
|
||||||
// ]);
|
|
||||||
|
|
||||||
// $user = User::create([
|
|
||||||
// 'first_name' => $request->first_name,
|
|
||||||
// 'last_name' => $request->last_name,
|
|
||||||
// 'email' => $request->email,
|
|
||||||
// 'phone' => $request->phone,
|
|
||||||
// 'password' => Hash::make($request->password),
|
|
||||||
// ]);
|
|
||||||
|
|
||||||
|
|
||||||
// Auth::login($user);
|
|
||||||
// return redirect('/')->with('success', 'Registration successful! Welcome to your dashboard.');
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
public function register(Request $request)
|
|
||||||
{
|
{
|
||||||
$request->validate([
|
$request->validate([
|
||||||
'first_name' => 'required|string|max:255',
|
'first_name' => 'required|string|max:255',
|
||||||
|
|
@ -62,17 +36,11 @@ class AuthController extends Controller
|
||||||
'password' => Hash::make($request->password),
|
'password' => Hash::make($request->password),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Email එක යැවීම
|
|
||||||
try {
|
|
||||||
Mail::to($user->email)->send(new WelcomeMail($user));
|
|
||||||
} catch (\Exception $e) {
|
|
||||||
\Log::error("Mail sending failed: " . $e->getMessage());
|
|
||||||
}
|
|
||||||
|
|
||||||
Auth::login($user);
|
Auth::login($user);
|
||||||
return redirect()->route('signin')->with('success', 'Registration successful! Welcome to your dashboard.');
|
return redirect('/')->with('success', 'Registration successful! Welcome to your dashboard.');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
public function login(Request $request)
|
public function login(Request $request)
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
namespace App\Mail;
|
|
||||||
|
|
||||||
use App\Models\User; // 1. User Model එක Import කළා
|
|
||||||
use Illuminate\Bus\Queueable;
|
|
||||||
use Illuminate\Contracts\Queue\ShouldQueue;
|
|
||||||
use Illuminate\Mail\Mailable;
|
|
||||||
use Illuminate\Mail\Mailables\Attachment;
|
|
||||||
use Illuminate\Mail\Mailables\Content;
|
|
||||||
use Illuminate\Mail\Mailables\Envelope;
|
|
||||||
use Illuminate\Queue\SerializesModels;
|
|
||||||
|
|
||||||
class WelcomeMail extends Mailable
|
|
||||||
{
|
|
||||||
use Queueable, SerializesModels;
|
|
||||||
|
|
||||||
public $user;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create a new message instance.
|
|
||||||
*/
|
|
||||||
public function __construct(User $user)
|
|
||||||
{
|
|
||||||
$this->user = $user;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the message envelope.
|
|
||||||
*/
|
|
||||||
public function envelope(): Envelope
|
|
||||||
{
|
|
||||||
return new Envelope(
|
|
||||||
subject: 'Welcome to Student Registration!', // Email එකේ Subject එක
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the message content definition.
|
|
||||||
*/
|
|
||||||
public function content(): Content
|
|
||||||
{
|
|
||||||
return new Content(
|
|
||||||
view: 'mail.welcome',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the attachments for the message.
|
|
||||||
*
|
|
||||||
* @return array<int, Attachment>
|
|
||||||
*/
|
|
||||||
public function attachments(): array
|
|
||||||
{
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -397,7 +397,7 @@ body {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ABOUT CONTENT function -->
|
<!-- ABOUT CONTENT -->
|
||||||
<section class="py-5 overflow-hidden">
|
<section class="py-5 overflow-hidden">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row align-items-center g-5">
|
<div class="row align-items-center g-5">
|
||||||
|
|
@ -408,19 +408,19 @@ body {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6 animate-item slide-right-init">
|
<div class="col-md-6 animate-item slide-right-init">
|
||||||
<h2 class="fw-bold mb-3">Vision</h2>
|
<h2 class="fw-bold mb-3">Who We Are</h2>
|
||||||
<p class="text-muted fs-5" style="justfy-content: justify;">
|
<p class="text-muted fs-5">
|
||||||
To be a global leader in automotive education, driving the future of mobility by empowering the next generation of engineers, technicians, and innovators.
|
Our institute specializes in automotive engineering education,
|
||||||
|
offering hands-on training in modern vehicle technologies,
|
||||||
|
mechanical systems, and electric vehicles.
|
||||||
</p>
|
</p>
|
||||||
<h2 class="fw-bold mb-3">Mission</h2>
|
<p class="text-muted mb-4">
|
||||||
<p class="text-muted fs-5" style="justfy-content: justify;">
|
We focus on building skilled professionals who are ready for
|
||||||
To foster technical mastery and critical thinking through immersive, practical learning environments, strong industry partnerships, and a commitment to eco-friendly automotive practices.
|
the global automotive industry.
|
||||||
</p>
|
</p>
|
||||||
|
<a href="/courses" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
|
||||||
|
|
||||||
<!-- <a href="/courses" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
|
|
||||||
View Courses
|
View Courses
|
||||||
</a> -->
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -601,5 +601,4 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Welcome to Student Registration</title>
|
|
||||||
</head>
|
|
||||||
<body style="margin: 0; padding: 0; background-color: #f5f7fb; font-family: 'Segoe UI', Arial, sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
|
|
||||||
|
|
||||||
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f5f7fb; padding: 40px 10px;">
|
|
||||||
<tr>
|
|
||||||
<td align="center">
|
|
||||||
|
|
||||||
<!-- Main Email Card -->
|
|
||||||
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 520px; background-color: #ffffff; border-radius: 18px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.12);">
|
|
||||||
|
|
||||||
<!-- Header Banner -->
|
|
||||||
<tr>
|
|
||||||
<td align="center" style="background-color: #5E244E; padding: 35px 20px;">
|
|
||||||
<h1 style="color: #ffffff; margin: 0; font-size: 26px; font-weight: 700; letter-spacing: 0.5px;">
|
|
||||||
Student Registration
|
|
||||||
</h1>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<!-- Body Content -->
|
|
||||||
<tr>
|
|
||||||
<td style="padding: 40px 35px; color: #334155; font-size: 15px; line-height: 1.6;">
|
|
||||||
|
|
||||||
<h2 style="color: #222222; margin-top: 0; margin-bottom: 15px; font-size: 22px; font-weight: 700;">
|
|
||||||
Welcome, {{ $user->first_name }}! 👋
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p style="margin-bottom: 25px; color: #555555; font-size: 15px;">
|
|
||||||
Thank you for signing up. Your account has been created successfully! Here are your account details:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Account Details Box -->
|
|
||||||
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa; border-radius: 12px; padding: 20px; margin-bottom: 30px; border: 1px solid #e2e8f0;">
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<p style="margin: 0 0 8px 0; font-size: 14px; color: #744a68;">
|
|
||||||
<strong>Full Name:</strong> {{ $user->first_name }} {{ $user->last_name }}
|
|
||||||
</p>
|
|
||||||
<p style="margin: 0 0 8px 0; font-size: 14px; color: #744a68;">
|
|
||||||
<strong>Email Address:</strong> {{ $user->email }}
|
|
||||||
</p>
|
|
||||||
<p style="margin: 0; font-size: 14px; color: #744a68;">
|
|
||||||
<strong>Mobile Number:</strong> {{ $user->phone }}
|
|
||||||
</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<p style="margin-bottom: 30px; color: #555555; font-size: 15px;">
|
|
||||||
You can now sign in using your email and password to access your student dashboard.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Action Button (Matching Page Button Style) -->
|
|
||||||
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
||||||
<tr>
|
|
||||||
<td align="center">
|
|
||||||
<a href="{{ url('/signin') }}" style="background-color: #822424; color: #ffffff; text-decoration: none; padding: 14px 35px; border-radius: 8px; font-weight: 600; font-size: 16px; display: inline-block; transition: background 0.2s;">
|
|
||||||
Sign In to Your Account
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<tr>
|
|
||||||
<td align="center" style="background-color: #f8f9fa; padding: 20px; border-top: 1px solid #edf2f7; font-size: 13px; color: #666666;">
|
|
||||||
<p style="margin: 0 0 5px 0;">If you didn't create this account, please ignore this email.</p>
|
|
||||||
<p style="margin: 0; font-weight: 600; color: #744a68;">© {{ date('Y') }} Student Registration System</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
@push('styles')
|
@push('styles')
|
||||||
<!-- Google Font -->
|
<!-- Google Font -->
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
|
|
@ -184,7 +183,7 @@
|
||||||
color: var(--theme-navy-dark);
|
color: var(--theme-navy-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* RESPONSIVE DESIGN */
|
||||||
@media(max-width:991px) {
|
@media(max-width:991px) {
|
||||||
.left-panel {
|
.left-panel {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|
@ -203,31 +202,6 @@
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.input-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.toggle-password {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #744a68;
|
|
||||||
z-index: 10;
|
|
||||||
transition: color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-password:hover {
|
|
||||||
color: #5E244E;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.input-container input {
|
|
||||||
padding-right: 35px !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@endpush
|
@endpush
|
||||||
|
|
||||||
|
|
@ -252,18 +226,9 @@
|
||||||
@enderror
|
@enderror
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="input-container">
|
<div class="input-container">
|
||||||
<input type="password" name="password" placeholder=" " required>
|
<input type="password" name="password" placeholder=" " required>
|
||||||
<label>Password</label>
|
<label>Password</label>
|
||||||
@error('password')
|
|
||||||
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
|
||||||
@enderror
|
|
||||||
</div> -->
|
|
||||||
<div class="input-container">
|
|
||||||
<input type="password" id="password" name="password" placeholder=" " required>
|
|
||||||
<label>Password</label>
|
|
||||||
<i class="fa-solid fa-eye toggle-password" id="togglePassword"></i>
|
|
||||||
|
|
||||||
@error('password')
|
@error('password')
|
||||||
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
||||||
@enderror
|
@enderror
|
||||||
|
|
@ -289,20 +254,4 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
const togglePassword = document.getElementById('togglePassword');
|
|
||||||
const passwordInput = document.getElementById('password');
|
|
||||||
|
|
||||||
togglePassword.addEventListener('click', function () {
|
|
||||||
|
|
||||||
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
||||||
passwordInput.setAttribute('type', type);
|
|
||||||
|
|
||||||
|
|
||||||
this.classList.toggle('fa-eye');
|
|
||||||
this.classList.toggle('fa-eye-slash');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -3,9 +3,6 @@
|
||||||
@section('title', 'Student Registration')
|
@section('title', 'Student Registration')
|
||||||
|
|
||||||
@push('styles')
|
@push('styles')
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
background: #f5f7fb;
|
background: #f5f7fb;
|
||||||
|
|
@ -13,7 +10,7 @@
|
||||||
scale: 0.92;
|
scale: 0.92;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* LEFT PANEL (If active) */
|
||||||
.left-panel {
|
.left-panel {
|
||||||
background: #5E244E;
|
background: #5E244E;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -22,7 +19,8 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* RIGHT PANEL */
|
||||||
.right-panel {
|
.right-panel {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -41,7 +39,8 @@
|
||||||
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
|
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
|
||||||
scale : 0.72
|
scale : 0.72
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* TITLE */
|
||||||
.headline {
|
.headline {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
|
|
@ -50,7 +49,7 @@
|
||||||
margin-bottom: 35px;
|
margin-bottom: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* MODERN INPUT WITH FLOATING LABELS */
|
||||||
.input-container {
|
.input-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
|
|
@ -59,7 +58,7 @@
|
||||||
.input-container input {
|
.input-container input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
padding: 15px 35px 5px 0;
|
padding: 15px 0 5px 0;
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 2px solid #ddd;
|
border-bottom: 2px solid #ddd;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
@ -79,12 +78,12 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Input Focus States */
|
||||||
.input-container input:focus {
|
.input-container input:focus {
|
||||||
border-bottom-color: #744a68;
|
border-bottom-color: #744a68;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Label Floating Effect */
|
||||||
.input-container input:focus + label,
|
.input-container input:focus + label,
|
||||||
.input-container input:not(:placeholder-shown) + label {
|
.input-container input:not(:placeholder-shown) + label {
|
||||||
top: -10px;
|
top: -10px;
|
||||||
|
|
@ -93,22 +92,6 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.toggle-password {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 37px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #744a68;
|
|
||||||
font-size: 16px;
|
|
||||||
z-index: 10;
|
|
||||||
transition: color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-password:hover {
|
|
||||||
color: #5E244E;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CHECKBOX STYLE */
|
/* CHECKBOX STYLE */
|
||||||
.form-check-input:checked {
|
.form-check-input:checked {
|
||||||
background-color: #5E244E;
|
background-color: #5E244E;
|
||||||
|
|
@ -142,7 +125,7 @@
|
||||||
transform: scale(0.98);
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* BOTTOM TEXT */
|
||||||
.dontacc {
|
.dontacc {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -165,37 +148,6 @@
|
||||||
color: #5E244E;
|
color: #5E244E;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.password-rules {
|
|
||||||
display: none;
|
|
||||||
margin-top: -15px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 10px 15px;
|
|
||||||
background: #f8f9fa;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-rules ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-rules li {
|
|
||||||
margin-bottom: 3px;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rule-invalid {
|
|
||||||
color: #dc3545; /* Red */
|
|
||||||
}
|
|
||||||
|
|
||||||
.rule-valid {
|
|
||||||
color: #198754; /* Green */
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(max-width:991px) {
|
@media(max-width:991px) {
|
||||||
.right-panel {
|
.right-panel {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
@ -219,12 +171,11 @@
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row min-vh-100">
|
<div class="row min-vh-100">
|
||||||
|
|
||||||
<div class="col-md-8 col-lg-5 mx-auto right-panel" style="padding-left:5px;">
|
<div class="col-md-8 col-lg-5 mx-auto right-panel">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<h2 class="headline">Student Registration</h2>
|
<h2 class="headline">Student Registration</h2>
|
||||||
|
|
||||||
<form method="POST" action="{{ url('/signuppage') }}">
|
<form method="POST" action="{{ url('/signuppage') }}">
|
||||||
|
|
||||||
@csrf
|
@csrf
|
||||||
|
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
|
|
@ -259,38 +210,19 @@
|
||||||
@enderror
|
@enderror
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="input-container">
|
||||||
<div class="input-container mb-2">
|
<input type="password" name="password" placeholder=" " required autocomplete="new-password">
|
||||||
<input type="password" id="password" name="password" placeholder=" " required autocomplete="new-password">
|
|
||||||
<label>Password</label>
|
<label>Password</label>
|
||||||
<i class="fa-solid fa-eye toggle-password" id="togglePassword"></i>
|
|
||||||
@error('password')
|
@error('password')
|
||||||
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
||||||
@enderror
|
@enderror
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="input-container">
|
||||||
<div class="password-rules" id="passwordRules">
|
<input type="password" name="password_confirmation" placeholder=" " required autocomplete="new-password">
|
||||||
<strong style="font-size: 13px; color: #444;" class="d-block mb-1">Password Status:</strong>
|
|
||||||
<ul>
|
|
||||||
<li id="rule-length" class="rule-invalid">• At least 6 characters</li>
|
|
||||||
<li id="rule-upper" class="rule-invalid">• At least one uppercase letter</li>
|
|
||||||
<li id="rule-lower" class="rule-invalid">• At least one lowercase letter</li>
|
|
||||||
<li id="rule-number" class="rule-invalid">• At least one number</li>
|
|
||||||
<li id="rule-special" class="rule-invalid">• At least one special character</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="input-container mb-2">
|
|
||||||
<input type="password" id="password_confirmation" name="password_confirmation" placeholder=" " required autocomplete="new-password">
|
|
||||||
<label>Confirm Password</label>
|
<label>Confirm Password</label>
|
||||||
<i class="fa-solid fa-eye toggle-password" id="toggleConfirmPassword"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Confirm Password Match Status Message -->
|
|
||||||
<div id="matchMessage" class="mb-3 small" style="display: none; font-weight: 600; font-size: 12px;"></div>
|
|
||||||
|
|
||||||
<div class="form-check mb-4 d-flex align-items-center gap-2">
|
<div class="form-check mb-4 d-flex align-items-center gap-2">
|
||||||
<input class="form-check-input" type="checkbox" id="agree" required>
|
<input class="form-check-input" type="checkbox" id="agree" required>
|
||||||
<label class="form-check-label" for="agree">
|
<label class="form-check-label" for="agree">
|
||||||
|
|
@ -312,97 +244,4 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@push('scripts')
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
const passwordInput = document.getElementById('password');
|
|
||||||
const confirmPasswordInput = document.getElementById('password_confirmation');
|
|
||||||
const passwordRules = document.getElementById('passwordRules');
|
|
||||||
const matchMessage = document.getElementById('matchMessage');
|
|
||||||
|
|
||||||
const togglePassword = document.getElementById('togglePassword');
|
|
||||||
const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
|
|
||||||
|
|
||||||
const ruleLength = document.getElementById('rule-length');
|
|
||||||
const ruleUpper = document.getElementById('rule-upper');
|
|
||||||
const ruleLower = document.getElementById('rule-lower');
|
|
||||||
const ruleNumber = document.getElementById('rule-number');
|
|
||||||
const ruleSpecial = document.getElementById('rule-special');
|
|
||||||
|
|
||||||
|
|
||||||
function setupPasswordToggle(inputEl, iconEl) {
|
|
||||||
iconEl.addEventListener('click', function () {
|
|
||||||
const type = inputEl.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
||||||
inputEl.setAttribute('type', type);
|
|
||||||
this.classList.toggle('fa-eye');
|
|
||||||
this.classList.toggle('fa-eye-slash');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setupPasswordToggle(passwordInput, togglePassword);
|
|
||||||
setupPasswordToggle(confirmPasswordInput, toggleConfirmPassword);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
passwordInput.addEventListener('focus', function () {
|
|
||||||
passwordRules.style.display = 'block';
|
|
||||||
});
|
|
||||||
|
|
||||||
passwordInput.addEventListener('blur', function () {
|
|
||||||
if (passwordInput.value.length === 0) {
|
|
||||||
passwordRules.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
passwordInput.addEventListener('input', function () {
|
|
||||||
const val = passwordInput.value;
|
|
||||||
|
|
||||||
toggleRule(ruleLength, val.length >= 6);
|
|
||||||
toggleRule(ruleUpper, /[A-Z]/.test(val));
|
|
||||||
toggleRule(ruleLower, /[a-z]/.test(val));
|
|
||||||
toggleRule(ruleNumber, /[0-9]/.test(val));
|
|
||||||
toggleRule(ruleSpecial, /[!@#$%^&*(),.?":{}|<>]/.test(val));
|
|
||||||
|
|
||||||
checkPasswordMatch();
|
|
||||||
});
|
|
||||||
|
|
||||||
function toggleRule(element, isValid) {
|
|
||||||
if (isValid) {
|
|
||||||
element.classList.remove('rule-invalid');
|
|
||||||
element.classList.add('rule-valid');
|
|
||||||
} else {
|
|
||||||
element.classList.remove('rule-valid');
|
|
||||||
element.classList.add('rule-invalid');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
confirmPasswordInput.addEventListener('input', checkPasswordMatch);
|
|
||||||
|
|
||||||
function checkPasswordMatch() {
|
|
||||||
const pwd = passwordInput.value;
|
|
||||||
const confirmPwd = confirmPasswordInput.value;
|
|
||||||
|
|
||||||
if (confirmPwd.length === 0) {
|
|
||||||
matchMessage.style.display = 'none';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
matchMessage.style.display = 'block';
|
|
||||||
|
|
||||||
if (pwd === confirmPwd) {
|
|
||||||
matchMessage.style.color = '#198754'; // Green
|
|
||||||
matchMessage.textContent = '✓ Passwords match';
|
|
||||||
} else {
|
|
||||||
matchMessage.style.color = '#dc3545'; // Red
|
|
||||||
matchMessage.textContent = '✕ Passwords do not match';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@endpush
|
|
||||||
Loading…
Reference in New Issue