Tugas 7: Membuat Aplikasi Login Screen

April 22, 2025

Nama: Ken Anargya Alkausar

NRP: 5025211168

Kelas: PPB - A

Tugas 7: Membuat Aplikasi Login Screen

Di artikel ini, saya membuat login screen yang dibuat menggunakan Jetpack Compose, dengan fokus pada tampilan yang bersih dan struktur kode yang rapi.

Input Username

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Username") },
    placeholder = { Text("example@email.com") },
    modifier = Modifier.fillMaxWidth(),
    shape = RoundedCornerShape(10.dp),
    singleLine = true
)

Bagian ini menggunakan OutlinedTextField untuk input username. Komponen ini memiliki label dan placeholder yang membantu pengguna memahami data apa yang harus dimasukkan. Nilai dari input disimpan dalam variabel email dan diperbarui setiap kali pengguna mengetik.

Input Password & Show/Hide

OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    singleLine = true,
    visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
    trailingIcon = {
        IconButton(onClick = { passwordVisible = !passwordVisible }) {
            Icon(
                imageVector = if (passwordVisible) Icons.Default.VisibilityOff else Icons.Default.Visibility,
                contentDescription = "Toggle password visibility"
            )
        }
    },
    modifier = Modifier.fillMaxWidth(),
    shape = RoundedCornerShape(10.dp)
)

Untuk bagian password, digunakan OutlinedTextField dengan PasswordVisualTransformation agar karakter disembunyikan. Terdapat tombol mata (trailingIcon) untuk menampilkan atau menyembunyikan password. Fitur ini dikendalikan oleh variabel boolean passwordVisible.

Tombol Login + Validasi Input

Button(
    onClick = {
        if (email.isNotBlank() && password.isNotBlank()) {
            Toast.makeText(context, "Login successful", Toast.LENGTH_SHORT).show()
        } else {
            Toast.makeText(context, "Please fill in all fields", Toast.LENGTH_SHORT).show()
        }
    },
    colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF3A86FF)),
    shape = RoundedCornerShape(12.dp),
    modifier = Modifier
        .fillMaxWidth()
        .height(50.dp)
) {
    Text("LOGIN", fontSize = 16.sp, fontWeight = FontWeight.Bold, color = Color.White)
}

Tombol login dibuat menggunakan Button. Di dalamnya terdapat pengecekan apakah kolom email dan password sudah terisi. Jika tidak, maka akan muncul Toast yang memberi tahu pengguna bahwa form belum lengkap. Jika sudah diisi, muncul notifikasi bahwa login berhasil.

Tautan "Forgot Password" dan "Sign Up"

Text(
    text = "Forgot your password?",
    fontSize = 12.sp,
    color = Color.Gray,
    modifier = Modifier
        .align(Alignment.End)
        .clickable {
            Toast.makeText(context, "Forgot password clicked", Toast.LENGTH_SHORT).show()
        }
)

Text(
    text = "Don't have an account? Sign Up",
    fontSize = 13.sp,
    color = Color(0xFF3A86FF),
    modifier = Modifier.clickable {
        Toast.makeText(context, "Sign up clicked", Toast.LENGTH_SHORT).show()
    }
)

Elemen teks tambahan ini dibuat menggunakan Text() dengan modifier clickable. Meskipun fungsinya belum aktif, ini sudah menunjukkan kesiapan desain untuk dikembangkan menjadi aplikasi login fungsional.

Dokumentasi: