Pengumpulan Tugas Pemrograman Perangkat Bergerak G - Pertemuan 7

link repository: https://github.com/RayyanFv/ppb-7-loginscreen

Dokumentasi Halaman Login dengan Jetpack Compose

1. Pendahuluan

Halaman login ini diimplementasikan menggunakan Jetpack Compose di Android. Fitur utama dari aplikasi ini adalah memungkinkan pengguna untuk login dengan menggunakan username dan password, serta menampilkan pesan kesalahan jika kredensial tidak valid.

2. Fitur Utama

Halaman login ini memiliki fitur-fitur sebagai berikut:

• Logo Aplikasi: Menampilkan ikon aplikasi di bagian atas halaman login.

• Username: Kolom input untuk nama pengguna.

• Password: Kolom input untuk kata sandi dengan opsi untuk menampilkan atau menyembunyikan kata sandi.

• Login Button: Tombol untuk melakukan login.

• Forgot Password: Tautan untuk mengarahkan pengguna ke halaman pemulihan kata sandi.

• Pesan Kesalahan: Pesan kesalahan jika kredensial yang dimasukkan tidak valid.

• Sign Up: Opsi untuk mendaftar bagi pengguna baru.

3. Struktur Kode

3.1. MainActivity

MainActivity adalah activity utama yang memanggil komponen utama aplikasi, yaitu halaman login yang disebut EnhancedLoginScreen.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyLoginTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    EnhancedLoginScreen()
                }
            }
        }
    }
}

Fungsi onCreate memanggil setContent yang menampilkan EnhancedLoginScreen sebagai tampilan utama dari aplikasi.

3.2. EnhancedLoginScreen Composable

Komponen utama halaman login adalah fungsi EnhancedLoginScreen. Di dalamnya terdapat berbagai elemen UI yang membentuk halaman login, seperti kolom untuk username, password, tombol login, dan pesan kesalahan.

@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
@Composable
fun EnhancedLoginScreen() {
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    var passwordVisible by remember { mutableStateOf(false) }
    var isLoginEnabled by remember { mutableStateOf(false) }
    var showError by remember { mutableStateOf(false) }

    val focusManager = LocalFocusManager.current
    val keyboardController = LocalSoftwareKeyboardController.current

    // Update login button state
    LaunchedEffect(username, password) {
        isLoginEnabled = username.isNotBlank() && password.length >= 6
    }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.Center),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            // App Logo/Icon
            Card(
                modifier = Modifier
                    .size(100.dp)
                    .padding(bottom = 8.dp),
                elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
                colors = CardDefaults.cardColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer
                )
            ) {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Icon(
                        imageVector = Icons.Default.Person,
                        contentDescription = "App Logo",
                        modifier = Modifier.size(50.dp),
                        tint = MaterialTheme.colorScheme.primary
                    )
                }
            }

            // Welcome Text
            Text(
                text = "Welcome Back",
                style = MaterialTheme.typography.headlineLarge,
                color = MaterialTheme.colorScheme.primary
            )
            // Rest of the code...
        }
    }
}

3.3. Penjelasan Fungsi

• State Management: Menggunakan remember untuk menyimpan status seperti username, password, apakah password terlihat atau tidak, dan status validasi login.

• LaunchedEffect: Mengupdate status tombol login berdasarkan apakah username sudah diisi dan password memenuhi syarat minimal panjang.

• VisualTransformation: Menggunakan PasswordVisualTransformation untuk menyembunyikan password jika diperlukan.

3.4. Bagian-Bagian dari UI

• Card untuk Logo: Menampilkan logo aplikasi di bagian atas halaman login.

• Text untuk Pesan Sambutan: Menampilkan teks "Welcome Back" untuk menyambut pengguna yang akan login.

• OutlinedTextField untuk Username: Kolom input untuk memasukkan username pengguna dengan ikon di samping kiri.

• OutlinedTextField untuk Password: Kolom input untuk memasukkan password, dengan fitur untuk menampilkan atau menyembunyikan password.

• Login Button: Tombol untuk mengirimkan form login.

Demo app: