Login - Android

 

Nama: Richard Ryan

NRP: 5025211141

Kelas: PPB (G)

Tema: Halaman Login

Link Github :  Github

Penjelasan Kode

Pertama diperlukan beberapa variabel untuk menyimpan data yang ada di halaman login. Variabel email dan password digunakan untuk menyimpan teks yang akan ditulis di textfield. Variabel passwordVisible merupakan variabel yang menyatakan apakah password dapat terlihat karakternya ataukah ter-encrypt

var email by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
var passwordVisible by remember { mutableStateOf(false) }

Kemudian, untuk textbox email buat sebagai berikut.

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

Untuk textbox password agak sedikit berbeda untuk mengakomodir penggantian status terlihat dan tidak

OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Masukkan Password") },
            singleLine = true,
            visualTransformation = if (passwordVisible) VisualTransformation.None 
                                   else PasswordVisualTransformation(),
            trailingIcon = {
                val icon = if (passwordVisible) "🙈" else "👁"
                Text(
                    text = icon,
                    fontSize = 18.sp,
                    modifier = Modifier
                        .clickable { passwordVisible = !passwordVisible }
                        .padding(end = 8.dp)
                )
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 4.dp)
        )

Opsional

Sebagai tambahan, juga dapat langsung dicek apakah input valid (user ada) atau tidak

Pertama, buat terlebih dahulu data class User yang menyimpan bentuk entity User sebagai berikut

data class User(
    val username: String,
    val email: String,
    val password: String
)

Kemudian, buat daftar user yang terdaftar di sistem, misalkan sebagai berikut

val Users = listOf(
    User("user 1", "user1@gmail.com", "password1"),
    User("user 2", "user2@gmail.com", "password2")
)

Setelah itu, ubah kode tombol login sebagai berikut. Pertama akan dicari apakah ada entity User dari list dengan email dan password yang sesuai dengan input di halaman login, apabila ada maka dapat berpindah ke halaman selanjutnya dengan mempassing pula username serta emailnya. Apabila data tidak ditemukan, maka buat teks yang menyatakan gagal login di bawah tombol

var loginError by remember { mutableStateOf(false) }

Button(
    onClick = {
        val matchedUser = Users.find { it.email == email && it.password == password }

        if (matchedUser != null) {
            val intent = Intent(context, HelloActivity::class.java).apply {
                putExtra("email", matchedUser.email)
                putExtra("username", matchedUser.username)
            }
            context.startActivity(intent)
            (context as? ComponentActivity)?.finish()
        } else {
            loginError = true
        }
    },
    modifier = Modifier.fillMaxWidth()
) {
    Text("Login")
}

if (loginError) {
    Spacer(modifier = Modifier.height(16.dp))
    Text(
        text = "Email atau password salah",
        color = MaterialTheme.colorScheme.error
    )
}

Hasil