Tugas 11 - Membuat Autentikasi Aplikasi

Nama : Aida Fitrania Prabasati

Kelas : PPB D

Pada tugas ini diminta untuk membuat autentikasi login suatu aplikasi

🎯 Tujuan Aplikasi:

Aplikasi ini memungkinkan pengguna untuk:

• Melakukan login dan registrasi akun.

• Mengirim dan memverifikasi OTP (One Time Password) saat registrasi.

• Melihat halaman sambutan setelah berhasil login.

• Simulasi basis data pengguna secara lokal (tidak menggunakan Firebase atau database eksternal

✅ Daftar Fitur dan Penjelasannya:

1. Intro Screen (Layar Awal)

• Menampilkan ilustrasi dan sambutan.

• Tombol "Lanjutkan" untuk masuk ke layar login/registrasi.

• Desain dengan gradient background untuk tampilan yang menarik.

2. Login & Registrasi

• Dikelola dalam satu komponen SimpleAuthApp() menggunakan variabel isLoginScreen untuk berganti tampilan login ↔ registrasi.

a. Login

• Input: Username dan Password.

• Validasi apakah akun sudah terdaftar di dummyUserDB.

• Jika login berhasil, pengguna diarahkan ke halaman sambutan.

b. Registrasi

• Input: Username, Email, Password, Konfirmasi Password, OTP.

• Tombol “Kirim OTP” akan mengirim kode OTP acak (simulasi).

• OTP akan muncul otomatis setelah timer 5 detik untuk simulasi otentikasi.

• Validasi:

  • Semua input harus diisi.

  • Password dan konfirmasi harus cocok.

  • OTP harus sesuai.

  • Username/email tidak boleh sudah terdaftar.

3. Simulasi OTP

• OTP acak dikirim secara lokal (akan dikirim ke email dan langsung tertera di kolom OTP) ( untuk simulasi tidak ditampilkan pengiriman OTP ke email)

• Tombol Kirim OTP akan tidak aktif selama countdown berjalan (default: 5 detik).

• Setelah waktu habis, input OTP otomatis diisi (untuk simulasi keberhasilan).

4. Pesan Validasi

• Menampilkan pesan jika data belum lengkap, password salah, atau OTP salah.

• Pesan juga muncul saat pendaftaran berhasil.

5. Halaman Selamat Datang (Welcome Screen)

• Setelah login berhasil, pengguna akan melihat layar sambutan:

  • Teks "Selamat datang, [username]".

  • Tombol “Logout” untuk kembali ke layar login.

6. Logout

• Menghapus status login dan membersihkan form.

• Kembali ke tampilan login.

7. Penyimpanan Akun Lokal (Simulasi)

• Menggunakan mutableStateMapOf bernama dummyUserDB.

• Username → password disimpan di map.

• Email disimpan dalam bentuk key "email:xxx@example.com" → username.

8. UI Modern dengan Jetpack Compose

• Menggunakan Material3, OutlinedTextField, dan Card untuk desain responsif.

• Icon dan animasi tombol bawaan Compose seperti:

• Icon mata (👁️) untuk toggle visibilitas password.

• Icon user, lock, email, key, dll.

📌 Teknologi & Library yang Digunakan:

• Kotlin sebagai bahasa pemrograman.

• Jetpack Compose untuk desain UI deklaratif.

• Material3 untuk komponen UI modern.

• Coroutine (launch, delay) untuk mengelola countdown OTP.

👁️ Preview Tampilan Aplikasi:

Demo Aplikasi: Link Yotube

Github: AuthenticationApp