imadhi
/
academy
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

password set

This commit is contained in:
imadhigp 2026-08-07 12:23:25 +05:30
parent e6b5166782
commit 45fc7e33c9
4 changed files with 352 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/Http/Controllers/AuthController.php
View File

@ -7,6 +7,8 @@ use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Mail;
use App\Mail\WelcomeMail;
class AuthController extends Controller
{
@ -18,6 +20,30 @@ class AuthController extends Controller
}
// 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([
@ -36,9 +62,15 @@ class AuthController extends Controller
'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);
return redirect('/')->with('success', 'Registration successful! Welcome to your dashboard.');
return redirect()->route('signin')->with('success', 'Registration successful! Welcome to your dashboard.');
}

57
app/Mail/WelcomeMail.php Normal file
View File

@ -0,0 +1,57 @@
<?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 [];
}
}

88
resources/views/mail/welcome.blade.php Normal file
View File

@ -0,0 +1,88 @@
<!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>

177
resources/views/signup.blade.php
View File

@ -3,6 +3,9 @@
@section('title', 'Student Registration')
@push('styles')
<!-- FontAwesome Icons (Eye icon එක සඳහා) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
background: #f5f7fb;
@ -58,7 +61,7 @@
.input-container input {
width: 100%;
height: 50px;
padding: 15px 0 5px 0;
padding: 15px 35px 5px 0; /* Eye icon එක සඳහා දකුණු පසින් ඉඩ තබා ඇත */
border: none;
border-bottom: 2px solid #ddd;
background: transparent;
@ -92,6 +95,22 @@
font-weight: 600;
}
/* EYE ICON TOGGLE */
.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 */
.form-check-input:checked {
background-color: #5E244E;
@ -148,6 +167,37 @@
color: #5E244E;
}
/* PASSWORD STATUS BOX STYLE */
.password-rules {
display: none; /* මුලින් Hide කර ඇත */
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) {
.right-panel {
min-height: 100vh;
@ -171,11 +221,12 @@
<div class="container-fluid">
<div class="row min-vh-100">
<div class="col-md-8 col-lg-5 mx-auto right-panel">
<div class="col-md-8 col-lg-5 mx-auto right-panel" style="padding-left:5px;">
<div class="box">
<h2 class="headline">Student Registration</h2>
<form method="POST" action="{{ url('/signuppage') }}">
@csrf
<div class="input-container">
@ -210,19 +261,38 @@
@enderror
</div>
<div class="input-container">
<input type="password" name="password" placeholder=" " required autocomplete="new-password">
<!-- Password Field -->
<div class="input-container mb-2">
<input type="password" id="password" name="password" placeholder=" " required autocomplete="new-password">
<label>Password</label>
<i class="fa-solid fa-eye toggle-password" id="togglePassword"></i>
@error('password')
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
@enderror
</div>
<div class="input-container">
<input type="password" name="password_confirmation" placeholder=" " required autocomplete="new-password">
<label>Confirm Password</label>
<!-- Password Rules Box -->
<div class="password-rules" id="passwordRules">
<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>
<!-- Confirm Password Field -->
<div class="input-container mb-2">
<input type="password" id="password_confirmation" name="password_confirmation" placeholder=" " required autocomplete="new-password">
<label>Confirm Password</label>
<i class="fa-solid fa-eye toggle-password" id="toggleConfirmPassword"></i>
</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">
<input class="form-check-input" type="checkbox" id="agree" required>
<label class="form-check-label" for="agree">
@ -245,3 +315,96 @@
</div>
</div>
@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');
// --- 1. SHOW / HIDE PASSWORD TOGGLE ---
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);
// --- 2. FOCUS / BLUR FOR RULES BOX ---
passwordInput.addEventListener('focus', function () {
passwordRules.style.display = 'block';
});
passwordInput.addEventListener('blur', function () {
if (passwordInput.value.length === 0) {
passwordRules.style.display = 'none';
}
});
// --- 3. LIVE PASSWORD VALIDATION ---
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');
}
}
// --- 4. CONFIRM PASSWORD MATCH CHECK ---
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