From dc0553b9f299ea36b839dd18612135c0d9ff243a Mon Sep 17 00:00:00 2001
From: cukiprit <andhikadwikyp@gmail.com>
Date: Fri, 27 Feb 2026 05:48:39 +0700
Subject: [PATCH] feat: add password reset request page with OTP verification
 and create master_induks table migration

---
 ...2_05_064036_create_master_induks_table.php |  29 ++++
 .../auth/reset-password-request.blade.php     | 135 ++++++++++++++++++
 2 files changed, 164 insertions(+)
 create mode 100644 database/migrations/2026_02_05_064036_create_master_induks_table.php
 create mode 100644 resources/views/auth/reset-password-request.blade.php

diff --git a/database/migrations/2026_02_05_064036_create_master_induks_table.php b/database/migrations/2026_02_05_064036_create_master_induks_table.php
new file mode 100644
index 0000000..bd1f62a
--- /dev/null
+++ b/database/migrations/2026_02_05_064036_create_master_induks_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up()
+    {
+        Schema::create('master_induks', function (Blueprint $table) {
+            $table->id();
+            $table->string('nomor_induk')->unique();
+            $table->enum('role', ['siswa', 'guru']);
+            $table->string('nama_pemilik')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('master_induks');
+    }
+};
diff --git a/resources/views/auth/reset-password-request.blade.php b/resources/views/auth/reset-password-request.blade.php
new file mode 100644
index 0000000..3aa623a
--- /dev/null
+++ b/resources/views/auth/reset-password-request.blade.php
@@ -0,0 +1,135 @@
+<x-guest-layout>
+    {{-- VERIFIKASI OTP --}}
+    <div id="step-otp">
+        <div class="mb-4 text-center">
+            <h4 class="fw-bold text-dark">Verifikasi Kode OTP</h4>
+            <p class="text-muted small">Masukkan 6 digit kode yang diberikan Admin via WhatsApp.</p>
+        </div>
+
+        <form id="formVerifyOtp" onsubmit="verifikasiOTP(event)">
+            <div class="mb-4">
+                <label class="form-label fw-bold">Kode OTP</label>
+                <input class="form-control text-center fs-3 letter-spacing-2 py-2" type="text" id="inputOtp"
+                    placeholder="000000" maxlength="6" required autofocus autocomplete="off">
+            </div>
+
+            <div class="d-grid">
+                <button type="submit" class="btn btn-primary py-2 fw-bold">
+                    Verifikasi Kode
+                </button>
+            </div>
+
+            <div class="text-center mt-3">
+                <a href="/login" class="text-decoration-none small text-muted">
+                    <i class="bi bi-arrow-left me-1"></i>Kembali ke Login
+                </a>
+            </div>
+        </form>
+    </div>
+
+    {{-- PASSWORD BARU --}}
+    <div id="step-password" class="d-none">
+        <div class="mb-4 text-center">
+            <h4 class="fw-bold text-dark">Buat Kata Sandi Baru</h4>
+            <p class="text-muted small">OTP Valid! Silakan buat kata sandi baru Anda.</p>
+        </div>
+
+        <form id="formResetPassword" onsubmit="simpanPassword(event)">
+            {{-- Password Utama --}}
+            <div class="mb-3">
+                <label class="form-label">Kata Sandi Baru</label>
+                <div class="input-group">
+                    <input id="password" class="form-control" type="password" name="password" required placeholder="Minimal 8 karakter"/>
+                    <button class="btn btn-outline-secondary" type="button" onclick="lihatPassword('password', this)">
+                        <i class="bi bi-eye-slash-fill"></i>
+                    </button>
+                </div>
+            </div>
+
+            {{-- Konfirmasi Password --}}
+            <div class="mb-4">
+                <label class="form-label">Konfirmasi Kata Sandi</label>
+                <div class="input-group">
+                    <input id="password_confirmation" class="form-control" type="password" name="password_confirmation" required placeholder="Ulangi kata sandi"/>
+                    <button class="btn btn-outline-secondary" type="button" onclick="lihatPassword('password_confirmation', this)">
+                        <i class="bi bi-eye-slash-fill"></i>
+                    </button>
+                </div>
+            </div>
+
+            <div class="d-grid">
+                <button type="submit" class="btn btn-primary py-2 fw-bold">
+                    Simpan Kata Sandi
+                </button>
+            </div>
+        </form>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script>
+        // Fungsi Toggle Lihat Password 
+        function lihatPassword(targetId, btn) {
+            const input = document.getElementById(targetId);
+            const icon = btn.querySelector('i');
+
+            if (input.type === 'password') {
+                input.type = 'text';
+                icon.classList.remove('bi-eye-slash-fill');
+                icon.classList.add('bi-eye-fill');
+            } else {
+                input.type = 'password';
+                icon.classList.remove('bi-eye-fill');
+                icon.classList.add('bi-eye-slash-fill');
+            }
+        }
+
+        // Fungsi Verifikasi OTP
+        function verifikasiOTP(e) {
+            e.preventDefault();
+            const inputOtp = document.getElementById('inputOtp').value;
+
+            if(inputOtp !== '678901') { 
+                Swal.fire({ icon: 'error', title: 'Gagal', text: 'Kode OTP salah! Coba cek lagi WA Admin.' });
+                return;
+            }
+
+            Swal.fire({ title: 'Memverifikasi...', timer: 800, didOpen: () => Swal.showLoading() }).then(() => {
+                document.getElementById('step-otp').classList.add('d-none');
+                document.getElementById('step-password').classList.remove('d-none');
+                document.getElementById('password').focus();
+                
+                const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });
+                Toast.fire({ icon: 'success', title: 'Kode OTP Valid' });
+            });
+        }
+
+        // Fungsi Simpan Password
+        function simpanPassword(e) {
+            e.preventDefault();
+            const pass = document.getElementById('password').value;
+            const conf = document.getElementById('password_confirmation').value; 
+
+            if(pass.length < 8) {
+                Swal.fire({ icon: 'warning', text: 'Kata sandi minimal 8 karakter!' }); return;
+            }
+            if(pass !== conf) {
+                Swal.fire({ icon: 'warning', text: 'Konfirmasi kata sandi tidak cocok!' }); return;
+            }
+
+            Swal.fire({ title: 'Menyimpan...', timer: 1500, didOpen: () => Swal.showLoading() }).then(() => {
+                Swal.fire({
+                    icon: 'success', title: 'Berhasil!', text: 'Kata sandi Anda telah diperbarui. Silakan login.',
+                    confirmButtonText: 'Ke Halaman Login', allowOutsideClick: false
+                }).then(() => { window.location.href = "/login"; });
+            });
+        }
+    </script>
+
+    <style>
+        .letter-spacing-2 {
+            letter-spacing: 0.5em;
+            font-weight: bold;
+            color: #0d6efd;
+        }
+    </style>
+</x-guest-layout>
\ No newline at end of file