Gambaran Keseluruhan

Komponen ForgotPasswordTemplate menyediakan contoh UI untuk skrin lupa kata laluan menggunakan komponen MYDS Ia merangkumi:

• ForgotPasswordTemplate – Borang ringkas dan berpusat di mana pengguna memasukkan emel untuk meminta penetapan semula kata laluan, dengan pautan “Kembali ke Log Masuk”.
• ResetEmailTemplate – Skrin pengesahan yang memaklumkan pengguna untuk menyemak emel mereka, dengan pilihan untuk membuka aplikasi emel atau menghantar semula pautan.
• SetNewPasswordTemplate – Borang selamat untuk mencipta kata laluan baharu, termasuk panduan kekuatan kata laluan.
• SetNewPasswordSuccessTemplate – Skrin kejayaan yang mengesahkan penetapan semula kata laluan dan meminta pengguna untuk log masuk.

Templat halaman lupa kata laluan ini dibina untuk pembangunan yang pantas dan integrasi yang mudah. Ia direka bentuk untuk membantu pasukan memulakan dengan lebih cepat melalui susun atur yang mematuhi sistem reka bentuk MYDS, tanpa perlu menyusun komponen secara manual.

⚠️ Nota: Ini ialah templat reka bentuk sahaja. Ia tidak merangkumi sebarang logik fungsi seperti:

• Pengesahan medan borang
• Permintaan API untuk menghantar pautan penetapan semula

You are expected to implement such logic based on your own system needs.

Anatomi

<ForgotPasswordTemplate />
└── PageContainer (latar belakang skrin penuh)
    └── CenteredCard
        ├── Tajuk ("Lupa kata laluan?")
        ├── Subtajuk ("Jangan risau, kami akan hantar arahan penetapan semula.")
        ├── Borang
        │   ├── Label (Emel)
        │   ├── Input (Emel)
        │   └── Butang Tetapkan Semula Kata Laluan
        └── Pautan Kembali ke Log Masuk


<ResetEmailTemplate />
└── PageContainer (latar belakang skrin penuh)
    └── CenteredCard (teks berpusat)
        ├── Tajuk ("Semak emel anda")
        ├── Subtajuk (termasuk alamat emel penerima)
        ├── Butang ("Buka aplikasi emel")
        ├── Teks + Pautan Hantar Semula
        └── Pautan Kembali ke Log Masuk


<SetNewPasswordTemplate />
└── PageContainer (latar belakang skrin penuh)
    └── CenteredCard (teks berpusat)
        ├── Tajuk ("Tetapkan kata laluan baharu")
        ├── Subtajuk ("Kata laluan baharu anda mesti berbeza...")
        ├── Borang
        │   ├── Label + Input (Kata Laluan Baharu)
        │   ├── Label + Input (Sahkan Kata Laluan Baharu)
        │   └── Senarai Keperluan Kata Laluan (dengan ikon)
        └── Butang Tetapkan Semula Kata Laluan
        └── Pautan Kembali ke Log Masuk


<SetNewPasswordSuccessTemplate />
└── PageContainer (latar belakang skrin penuh)
    └── CenteredCard (kecil, dengan bayang)
        ├── Ikon Berjaya
        ├── Tajuk ("Kata laluan berjaya ditetapkan semula")
        ├── Subtajuk ("Kata laluan anda telah berjaya ditetapkan semula...")
        └── Butang Log Masuk

Ciri-ciri

• Menggunakan sistem gaya dan komponen MYDS.
• Responsif sepenuhnya dengan UI adaptif untuk skrin kecil.
• Skrin templat asas untuk memulakan pembangunan.

Penyesuaian

Anda boleh mengubah suai apa sahaja dalam kod ini — ia sepenuhnya boleh diubah suai! Ia dibina untuk membantu anda bermula dengan cepat dengan UI log masuk, dan direka untuk diadaptasi mengikut citarasa anda. Anggaplah ini sebagai titik permulaan UI yang fleksibel, di mana anda boleh mengubah, menambah, dan menjadikannya milik anda sepenuhnya!

Sebelum ini, menggunakan komponen MYDS sahaja bermaksud anda masih perlu mereka bentuk dan menyusun gaya halaman sepenuhnya dari awal. Kini, dengan templat baharu, anda tidak perlu risau tentang CSS atau reka bentuk susun atur. Templat ini hadir dengan UI mesra mudah alih yang siap sedia untuk mempercepatkan pembangunan anda!