Tugas 7: Membuat Aplikasi Login Screen

Pada artikel ini, saya akan membedah proses pembuatan halaman login yang fungsional menggunakan Jetpack Compose. Desain ini mencakup elemen-elemen esensial seperti input email dan password, serta fitur tambahan seperti login melalui media sosial dan tautan kebijakan privasi.

Logo dan Judul Aplikasi

Image(
    painter = painterResource(id = R.drawable.ic_launcher_foreground),
    contentDescription = "App Logo",
    modifier = Modifier.size(180.dp)
)

Text(
    text = "Create and discover your life on ThisApp",
    style = MaterialTheme.typography.headlineMedium,
    textAlign = TextAlign.Center
)
        

Bagian teratas dari layar menampilkan logo aplikasi menggunakan komponen Image. Di bawahnya, terdapat Text yang berfungsi sebagai slogan atau judul utama, menggunakan gaya tipografi headlineMedium dan perataan teks tengah untuk menarik perhatian pengguna.

Input Email

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    singleLine = true,
    modifier = Modifier.fillMaxWidth()
)
        

Komponen OutlinedTextField digunakan untuk field input email. value terikat pada variabel state email dan diperbarui melalui onValueChange setiap kali ada input dari pengguna. Atribut singleLine = true memastikan input tetap dalam satu baris.

Input Password

OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    singleLine = true,
    visualTransformation = PasswordVisualTransformation(),
    modifier = Modifier.fillMaxWidth()
)
        

Untuk field password, digunakan OutlinedTextField yang serupa. Perbedaannya adalah penambahan visualTransformation = PasswordVisualTransformation(), yang secara otomatis mengubah karakter input menjadi titik-titik untuk menjaga kerahasiaan password.

Tombol Aksi: Lupa Password dan Lanjutkan

TextButton(
    onClick = {
        // TODO: Forgot password action
    },
    modifier = Modifier.align(Alignment.End)
) {
    Text("Forgot password?")
}

Spacer(modifier = Modifier.height(16.dp))

Button(
    onClick = {
        // TODO: Login action
    },
    modifier = Modifier.fillMaxWidth()
) {
    Text("Continue")
}
        

Terdapat dua tombol aksi utama. TextButton untuk "Lupa Password" diletakkan di sisi kanan. Tombol utama, "Continue", menggunakan komponen Button standar yang lebarnya memenuhi layar. Logika untuk kedua aksi ini ditandai dengan komentar // TODO, menandakan fungsionalitas yang akan diimplementasikan di kemudian hari.

Opsi Login Alternatif (Social Login)

Row(
    modifier = Modifier.wrapContentWidth(),
    horizontalArrangement = Arrangement.spacedBy(32.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    IconButton(
        onClick = { /* TODO: Login with Google */ }
    ) {
        Image(...)
    }

    IconButton(
        onClick = { /* TODO: Login with Facebook */ }
    ) {
        Image(...)
    }
}
        

Aplikasi menyediakan opsi login alternatif melalui Google dan Facebook. Kedua ikon ditempatkan berdampingan menggunakan Row. Komponen IconButton digunakan untuk membuat ikon dapat diklik, di mana setiap ikonnya dimuat menggunakan Image.

Teks Persetujuan dan Kebijakan Privasi

Text(
    "By continuing, you agree to ThisApp's Terms of Service and acknowledge that you've read our Privacy Policy.",
    style = MaterialTheme.typography.bodyMedium,
    textAlign = TextAlign.Center
)
        

Di bagian paling bawah, terdapat teks informatif yang menyatakan bahwa dengan melanjutkan, pengguna menyetujui Ketentuan Layanan dan Kebijakan Privasi aplikasi. Ini adalah praktik umum untuk transparansi dan kepatuhan hukum.

Dokumentasi & Referensi

• Github:
• https://kuliahppb.blogspot.com/2024/03/studi-kasus-membuat-halaman-login.html
• https://www.youtube.com/watch?v=-Kj9T1sa6zk.