Project

General

Profile

Feature #3762

[CRM] Implementasi Tampilan Login & Daftar pada Aplikasi Golfscape

Added by Mr Dhafin about 1 month ago. Updated 19 days ago.

Status:
Assigned
Priority:
High
Assignee:
Start date:
07/31/2025
Due date:
08/07/2025 (34 days late)
% Done:

0%

Estimated time:

Description

Dear mas Alwi,

Task ini mencakup implementasi tampilan dan alur autentikasi pengguna pada aplikasi Golfscape, yang terdiri dari fitur Login, Pendaftaran Akun (Register), Verifikasi OTP, dan Reset Password. Setiap proses pendaftaran dan reset password akan diverifikasi menggunakan kode OTP yang dikirim ke email untuk memastikan email valid dan aktif.

1. Tampilan Login
• Input: Email dan Password.
• Fitur tambahan:
o Checkbox Keep me signed in.
o Tombol Login dan Back.
• Validasi:
o Format email harus valid.
o Password minimal 6 karakter.
• Jika data sesuai, user diarahkan ke halaman utama.
• Jika salah, tampilkan notifikasi “Email atau Password salah”.

2. Tampilan Register / Create Account
• Input: Full Name, Email, Password.
• Tombol Register.
• Setelah tombol Register ditekan:
o Sistem mengirimkan kode OTP (6 digit) ke email user.
o Data user disimpan sementara hingga OTP berhasil diverifikasi.
• User diarahkan ke halaman OTP Verification.
• Ketika sudah register maka Untuk Tablenya itu PMDCUS0001

3. Tampilan OTP Verification
• Menampilkan form input 6digit OTP.
• Teks pendukung: “Enter the verification code sent to your email address”.
• Tombol Verify.
• Jika OTP benar:
o Proses pendaftaran selesai → User diarahkan ke halaman login.
o Untuk reset password → User diarahkan ke halaman ubah password.
• Jika OTP salah:
o Tampilkan pesan error dan berikan opsi Resend OTP.

4. Tampilan Reset Password
• Proses dimulai dari halaman Login dengan memilih “Forgot Password”.
• User diminta memasukkan email.
• Sistem mengirimkan OTP ke email.
• Setelah verifikasi OTP berhasil:
o User mengisi New Password dan Confirm Password.
o Jika password cocok, data diperbarui dan user diarahkan ke halaman login.
o Jika tidak cocok, tampilkan notifikasi “Password tidak sama”.

Protorype Figma : https://www.figma.com/proto/vLRpE0LWnQhuWvJEe9umOp/CRM-Training-Golf?node-id=213-522&t=rXAAphdkJyNQBxPY-0&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=129%3A212

database = 103.153.60.89
nama database = MinovaES_DEMO_GolfCourse


Files

CRM Login 1.jpg (189 KB) CRM Login 1.jpg Mr Dhafin, 07/31/2025 11:38 AM
CRM Daftar.jpg (191 KB) CRM Daftar.jpg Mr Dhafin, 07/31/2025 11:38 AM
CRM Login OTP.jpg (158 KB) CRM Login OTP.jpg Mr Dhafin, 07/31/2025 11:38 AM
CRM Login.jpg (147 KB) CRM Login.jpg Mr Dhafin, 07/31/2025 11:38 AM
CRM Reset Password.jpg (201 KB) CRM Reset Password.jpg Mr Dhafin, 07/31/2025 11:38 AM
Rekomendasi Warna.docx (25.1 KB) Rekomendasi Warna.docx Mr Dhafin, 07/31/2025 11:39 AM
Golfscape_Logo.png (27 KB) Golfscape_Logo.png Mr Dhafin, 08/18/2025 11:05 AM
#1

Updated by Mr Dhafin about 1 month ago

  • Due date set to 08/05/2025
#2

Updated by Kezia Pawitra Yulianti about 1 month ago

  • Due date changed from 08/05/2025 to 08/07/2025
  • Status changed from New to Assigned
#3

Updated by Kezia Pawitra Yulianti about 1 month ago

  • Subject changed from Implementasi Tampilan Login & Daftar pada Aplikasi Golfscape to [CRM] Implementasi Tampilan Login & Daftar pada Aplikasi Golfscape
#5

Updated by Mr Dhafin 19 days ago

Dear mas alwi,

Berikut penjelasan referensi Tablenya

implementasi tampilan dan alur autentikasi pengguna pada aplikasi Golfscape yang terdiri dari empat fitur utama: Login, Pendaftaran Akun (Register), Verifikasi OTP, dan Reset Password. Seluruh proses pendaftaran akun dan pengaturan ulang kata sandi akan divalidasi menggunakan kode OTP yang dikirimkan ke email pengguna untuk memastikan bahwa email tersebut valid dan aktif.

Untuk fitur Login, pengguna diminta memasukkan alamat email dan kata sandi. Sistem akan memvalidasi format email serta memastikan bahwa kata sandi minimal terdiri dari enam karakter. Selain itu, terdapat fitur tambahan berupa checkbox "Keep me signed in", serta tombol Login dan Back. Jika email dan kata sandi yang dimasukkan sesuai, pengguna akan diarahkan ke halaman utama aplikasi. Namun jika tidak sesuai, akan ditampilkan notifikasi "Email atau Password salah". Proses autentikasi ini merujuk pada tabel SUSER sebagai penyimpan data akun utama dan SUSERGENERALDATA untuk informasi email pengguna.

Fitur Register atau Pendaftaran Akun memungkinkan pengguna membuat akun baru dengan mengisi nama lengkap, email, dan kata sandi. Setelah tombol Register ditekan, sistem akan mengirimkan OTP (6 digit) ke email yang dimasukkan. Data registrasi ini disimpan sementara di tabel TMP_REGISTER_USER hingga pengguna berhasil memverifikasi OTP-nya. OTP tersebut dicatat di tabel SUSER_OTP_LOG, yang juga menyimpan informasi tujuan OTP (seperti register atau reset password), status penggunaan, serta waktu kedaluwarsa. Setelah OTP berhasil diverifikasi, data pengguna dipindahkan ke tabel utama pelanggan, yaitu PMDCUS0001, serta dapat diintegrasikan ke SUSER dan SUSERGENERALDATA sesuai kebutuhan.

Tampilan OTP Verification memungkinkan pengguna memasukkan 6 digit kode verifikasi yang telah dikirim ke email. Jika OTP yang dimasukkan benar dan masih aktif, maka untuk proses registrasi, pengguna akan diarahkan ke halaman Login. Sedangkan untuk proses reset password, pengguna akan diarahkan ke halaman pengisian kata sandi baru. Jika OTP tidak valid, maka ditampilkan pesan error dan opsi untuk mengirim ulang kode OTP. Seluruh proses ini menggunakan tabel SUSER_OTP_LOG sebagai referensi untuk validasi dan pelacakan OTP.

Untuk Reset Password, proses dimulai dari halaman Login ketika pengguna memilih opsi "Forgot Password". Pengguna akan diminta memasukkan email, dan sistem akan mengirimkan OTP ke email tersebut. Setelah OTP berhasil diverifikasi, pengguna diminta mengisi kata sandi baru dan konfirmasi kata sandi. Jika kedua input cocok, kata sandi akan diperbarui di tabel SUSER, dan pengguna akan diarahkan kembali ke halaman login. Jika tidak cocok, sistem akan menampilkan notifikasi "Password tidak sama". OTP untuk reset password juga disimpan dan diverifikasi melalui tabel SUSER_OTP_LOG. Apabila dibutuhkan pencatatan tambahan, tabel PASSWORD_RESET_REQUESTS dapat digunakan untuk melacak setiap permintaan reset password secara lebih detail.

Secara keseluruhan, implementasi fitur autentikasi ini memanfaatkan tabel-tabel yang sudah ada seperti SUSER, SUSERGENERALDATA, dan PMDCUS0001, serta menambahkan tabel baru seperti SUSER_OTP_LOG dan TMP_REGISTER_USER untuk mendukung proses verifikasi OTP dan pendaftaran akun. Struktur ini dirancang untuk mendukung keamanan data pengguna serta fleksibilitas dalam proses validasi dan manajemen akun di aplikasi Golfscape.

Also available in: Atom PDF