Merge branch 'setpasswors' into dev

app/Http/Controllers/AuthController.php

@@ -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,7 +20,31 @@ 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([
             'first_name' => 'required|string|max:255',
@@ -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.');
     }
     
      

app/Mail/WelcomeMail.php

@@ -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 [];
+    }
+}

resources/views/abouts.blade.php

@@ -397,7 +397,7 @@ body {
     </div>
 </section>
 
-<!-- ABOUT CONTENT -->
+<!-- ABOUT CONTENT function -->
 <section class="py-5 overflow-hidden">
 <div class="container">
     <div class="row align-items-center g-5">
@@ -408,19 +408,19 @@ body {
         </div>
 
         <div class="col-md-6 animate-item slide-right-init">
-            <h2 class="fw-bold mb-3">Who We Are</h2>
+            <h2 class="fw-bold mb-3">Vision</h2>
-            <p class="text-muted fs-5">
+            <p class="text-muted fs-5" style="justfy-content: justify;">
-                Our institute specializes in automotive engineering education,
+             To be a global leader in automotive education, driving the future of mobility by empowering the next generation of engineers, technicians, and innovators.
-                offering hands-on training in modern vehicle technologies,
-                mechanical systems, and electric vehicles.
             </p>
-            <p class="text-muted mb-4">
+            <h2 class="fw-bold mb-3">Mission</h2>
-                We focus on building skilled professionals who are ready for
+            <p class="text-muted fs-5" style="justfy-content: justify;">
-                the global automotive industry.
+               To foster technical mastery and critical thinking through immersive, practical learning environments, strong industry partnerships, and a commitment to eco-friendly automotive practices.
             </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
-            </a>
+            </a> -->
         </div>
     </div>
 </div>
@@ -601,4 +601,5 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 </script>
 
+
 @endsection

resources/views/mail/welcome.blade.php

@@ -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>

resources/views/signin.blade.php

@@ -5,6 +5,7 @@
 @push('styles')
 <!-- Google Font -->
 <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>
     :root {
@@ -183,7 +184,7 @@
         color: var(--theme-navy-dark);
     }
 
-    /* RESPONSIVE DESIGN */
+     
     @media(max-width:991px) {
         .left-panel {
             display: none !important;
@@ -202,6 +203,31 @@
             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>
 @endpush
 
@@ -226,9 +252,18 @@
                         @enderror
                     </div>
 
-                    <div class="input-container">
+                    <!-- <div class="input-container">
                         <input type="password" name="password" placeholder=" " required>
                         <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')
                             <span class="d-block text-danger mt-1 small">{{ $message }}</span>
                         @enderror
@@ -255,3 +290,19 @@
     </div>
 </div>
 @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>

resources/views/signup.blade.php

@@ -3,6 +3,9 @@
 @section('title', 'Student Registration')
 
 @push('styles')
+ 
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
 <style>
     body {
         background: #f5f7fb;
@@ -10,7 +13,7 @@
         scale: 0.92;
     }
 
-    /* LEFT PANEL (If active) */
+    
     .left-panel {
         background: #5E244E;
         color: white;
@@ -20,7 +23,6 @@
         padding: 40px;
     }
  
-    /* RIGHT PANEL */
     .right-panel {
         min-height: 100vh;
         display: flex;
@@ -40,7 +42,6 @@
         scale : 0.72
     }
  
-    /* TITLE */
     .headline {
         text-align: center;
         font-size: 32px;
@@ -49,7 +50,7 @@
         margin-bottom: 35px;
     }
 
-    /* MODERN INPUT WITH FLOATING LABELS */
+    
     .input-container {
         position: relative;
         margin-bottom: 25px;
@@ -58,7 +59,7 @@
     .input-container input {
         width: 100%;
         height: 50px;
-        padding: 15px 0 5px 0;
+        padding: 15px 35px 5px 0; 
         border: none;
         border-bottom: 2px solid #ddd;
         background: transparent;
@@ -78,12 +79,12 @@
         font-size: 16px;
     }
 
-    /* Input Focus States */
+     
     .input-container input:focus {
         border-bottom-color: #744a68;
     }
 
-    /* Label Floating Effect */
+ 
     .input-container input:focus + label,
     .input-container input:not(:placeholder-shown) + label {
         top: -10px;
@@ -92,6 +93,22 @@
         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 */
     .form-check-input:checked {
         background-color: #5E244E;
@@ -125,7 +142,7 @@
         transform: scale(0.98);
     }
 
-    /* BOTTOM TEXT */
+     
     .dontacc {
         text-align: center;
     }
@@ -148,6 +165,37 @@
         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) {
         .right-panel {
             min-height: 100vh;
@@ -171,11 +219,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 +259,38 @@
                         @enderror
                     </div>
 
-                    <div class="input-container">
+                   
-                        <input type="password" name="password" placeholder=" " required autocomplete="new-password">
+                    <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">
+                    <div class="password-rules" id="passwordRules">
-                        <label>Confirm Password</label>
+                        <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>
+                        <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 +313,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');
+
+       
+        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