เข้าสู่ระบบ
D-DoGrade มีกล่องเข้าสู่ระบบเดียว แต่แบ่งเป็น 2 แท็บ ตามบทบาท — ครูใช้อีเมลและรหัสผ่าน ส่วนนักเรียนใช้รหัสนักเรียนและรหัสผ่าน บทนี้พาเข้าใจฟอร์ม การจัดการ error และโฟลว์ "บังคับเปลี่ยนรหัสครั้งแรก" ที่จะเกิดทันทีหลัง login บัญชีใหม่
เปิดกล่องเข้าสู่ระบบ
กล่อง LoginDialog อยู่เป็นไอเดียเดียวกันในทุกหน้า public — เปิดได้ 2 วิธี
คลิกปุ่ม เข้าสู่ระบบ ที่มุมขวาบนของ Nav (เห็นได้ในทุกหน้า public)
เปิด URL ที่มี ?login=1 ต่อท้าย เช่น https://d-dograde.school-hub.workers.dev/?login=1 ระบบจะเปิดกล่องให้อัตโนมัติ (เหมาะกับลิงก์ที่ครูแชร์ให้นักเรียน)
แท็บ 'ครูใช้' (สำหรับคุณครู)
ใช้อีเมลและรหัสผ่านชั่วคราวที่ระบบส่งให้ทางอีเมลทันทีหลังสมัคร (ไม่มีขั้น admin อนุมัติ)
เลือกแท็บ 'ครูใช้' (เป็น default)
เมื่อเปิดกล่อง ระบบจะอยู่ที่แท็บ ครูใช้ เป็นค่าเริ่มต้น ถ้ามาจากการคลิกแท็บ "นักเรียนใช้" สามารถกดสลับกลับมาได้
กรอก Email และ Password
- Email — อีเมลเดียวกับที่กรอกตอนสมัคร (ระบบไม่ case-sensitive)
- Password — รหัสผ่านชั่วคราวที่ระบบส่งทางอีเมลตอนสมัคร (ถ้า login ครั้งแรก) หรือรหัสที่ตั้งไว้เอง
ฟอร์มจะตรวจสอบ หลังออกจากช่อง (on blur) — ถ้าใส่อีเมลผิดรูปแบบจะเห็น error ใต้ช่อง ไม่ต้องกด submit ก่อน
กดปุ่ม 'เข้าสู่ระบบ'
ถ้าข้อมูลถูกต้อง ระบบจะพาไปหน้าแดชบอร์ดทันที ถ้าผิด จะมี toast สีแดงขึ้น "อีเมลหรือรหัสผ่านไม่ถูกต้อง" และระบบจะ หน่วงไว้ 1 วินาที ก่อนตอบกลับ (กันการเดารหัสด้วย bot)
แท็บ 'นักเรียนใช้' (สำหรับนักเรียน)
ใช้รหัสนักเรียนและรหัสผ่านที่คุณครูประจำชั้นแจ้งให้
คลิกแท็บ 'นักเรียนใช้'
สลับแท็บจาก "ครูใช้" ไป "นักเรียนใช้" — ฟอร์มจะรีเซ็ตข้อมูล ไม่มีค่าจากแท็บก่อนหน้าค้างไว้
เลือกโรงเรียนจาก dropdown
เหนือช่องรหัสนักเรียนมี dropdown รายชื่อโรงเรียน — เลือกโรงเรียนของคุณจากรายการ (พิมพ์ค้นได้)
ทำไมต้องเลือก: รหัสนักเรียนซ้ำกันได้ข้ามโรงเรียน —
เช่นโรงเรียน ก. และโรงเรียน ข. อาจมีนักเรียนรหัส 12345 คนละคน
ระบบจึงใช้ "โรงเรียน + รหัสนักเรียน" คู่กันในการระบุตัวคุณ
กรอกรหัสนักเรียน + รหัสผ่าน
- รหัสนักเรียน (Student Code) — รหัสที่โรงเรียนใช้
(เช่น
10234,STU001) ความยาว 1–30 ตัวอักษร ครูเป็นผู้กำหนดตอน import - รหัสผ่าน — รหัสชั่วคราวจากครู หรือที่นักเรียนตั้งไว้เอง
ถ้าจำรหัสไม่ได้ อย่าลองเดาหลายครั้ง เพราะระบบจะหน่วงเวลาตอบกลับ — ติดต่อครูประจำชั้นเพื่อขอรีเซ็ตจะเร็วกว่า
กดเข้าสู่ระบบ → ไปหน้าห้องเรียนของฉัน
หลัง login สำเร็จจะไปที่หน้าแดชบอร์ด ซึ่งแสดงรายการห้องเรียนที่นักเรียนถูก assign ไว้ (โดยปกติคือห้องประจำชั้น + รายวิชาที่ครูเพิ่มชื่อ)
บังคับเปลี่ยนรหัสผ่านครั้งแรก
ทุกบัญชีที่ admin หรือครูเพิ่งสร้าง จะถูกบังคับให้เปลี่ยนรหัสก่อนใช้งานจริง
ระบบตรวจจับ mustChangePassword อัตโนมัติ
ถ้าบัญชีของคุณเพิ่งถูกสร้าง (หรือ admin/ครูเพิ่งกด "รีเซ็ตรหัสผ่าน")
ระบบจะตั้งสถานะ mustChangePassword = true ไว้
— ครั้งถัดไปที่ login สำเร็จ จะมี modal บังคับขึ้นทันที
ตั้งรหัสใหม่ในกล่องที่ปรากฏ
กล่องจะมี 2 ช่อง: รหัสผ่านใหม่ และ ยืนยันรหัสผ่านใหม่ — ต้องใส่ตรงกัน 2 ช่อง
ระหว่างที่ modal นี้เปิด ปุ่มอื่นทั้งหน้าใช้ไม่ได้ เพื่อกันการข้ามขั้นตอน ปิด modal ด้วย Esc ก็จะกลับมาเปิดทันทีในหน้าถัดไปอยู่ดี
กดยืนยัน → modal หายไปเอง
เมื่อตั้งรหัสใหม่สำเร็จ ระบบ revoke session เดิมแล้วสร้างใหม่ให้อัตโนมัติ modal จะปิดและคุณใช้งานหน้าแดชบอร์ดได้ทันที
กรณีพิเศษ — บัญชีถูกระงับ
ถ้า admin ระงับบัญชีไว้ login จะไม่สำเร็จ และระบบพาไปหน้ายื่นอุทธรณ์อัตโนมัติ
- Toast แดงขึ้นว่า "บัญชีถูกระงับ — ส่งคำอุทธรณ์ที่หน้านี้เพื่อขอใช้งานคืน"
- ระบบจะพาไปหน้า "บัญชีถูกระงับ" โดยอัตโนมัติ (พร้อมอีเมลของคุณ pre-fill ให้)
- กรอกฟอร์มยื่นอุทธรณ์ที่หน้านั้น — ดู คู่มือบัญชีถูกระงับ (ถ้าออกจากหน้าไปแล้วและอยากกลับมายื่นใหม่ คลิกเมนู อุทธรณ์บัญชีถูกระงับ ที่ Footer ของเว็บไซต์)
สรุปสถานการณ์ที่อาจเจอ
ตารางอ้างอิงเร็วเมื่อเข้าสู่ระบบไม่ได้
| สถานการณ์ | สิ่งที่เห็น | ทำอะไรต่อ |
|---|---|---|
| อีเมล/รหัสนักเรียนถูก แต่รหัสผ่านผิด | Toast แดง "อีเมลหรือรหัสผ่านไม่ถูกต้อง" | ลองพิมพ์ใหม่ ระวัง CapsLock — ถ้ายังไม่ได้ ติดต่อ admin/ครู |
| อีเมลผิดรูปแบบ (ไม่มี @) | Error ใต้ช่องตอน blur | แก้ฟอร์ม submit จะถูก block จนกว่าจะแก้ |
| Login ครั้งแรกของบัญชีใหม่ | เข้าหน้าแดชบอร์ดได้ แต่มี modal บังคับเปลี่ยนรหัส | ตั้งรหัสใหม่ตามขั้นตอนข้างบน |
| บัญชีถูกระงับ | พาไปหน้า "บัญชีถูกระงับ" พร้อม banner สีชมพู | ยื่นอุทธรณ์ที่ฟอร์มในหน้านั้น |
| ลืมรหัสผ่านสนิท | (ไม่มีปุ่ม "ลืมรหัสผ่าน" ในระบบ) | ครู→ติดต่อ admin · นักเรียน→ติดต่อครูประจำชั้น |