Tugas 7 (Halaman Login)

 Halaman Login

Pada pertemuan ke-7 dilakukan secara asynchronus dan diberikan tugas untuk membuat sebuah halaman login, pada kesempatan ini, saya mencoba membuat halaman login seperti tugas yang diberikan lalu saya lakukan modifikasi agar lebih relevan dan lebih menarik

Tampilan Halaman Login

Tampilan Halaman Setelah Modifikasi

Modifikasi yang saya lakukan sebagai berikut :

• Mengubah warna background agar lebih menarik
• Menambahkan kotak pada page pengisian login user agar lebih relevan
• Menambahkan logo email dan password agar lebih menarik

Readable Source Code

@Composable
fun LoginScreen() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(Color(0xFF6A11CB), Color(0xFF2575FC))
                )
            )
            .padding(horizontal = 24.dp),
        contentAlignment = Alignment.Center
    ) {
        LoginCard(email, password, { email = it }, { password = it })
    }
}

LoginScreen()

• Fungsi utama yang menampilkan seluruh tampilan login.

• Mengatur background gradient ungu ke biru.

• Memanggil LoginCard() untuk menampilkan form login.

@Composable
fun LoginCard(
    email: String,
    password: String,
    onEmailChange: (String) -> Unit,
    onPasswordChange: (String) -> Unit
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(),
        shape = RoundedCornerShape(20.dp),
        colors = CardDefaults.cardColors(containerColor = Color.White),
        elevation = CardDefaults.cardElevation(12.dp)
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.padding(24.dp)
        ) {
            Image(
                painter = painterResource(id = R.drawable.login),
                contentDescription = "Login Illustration",
                modifier = Modifier
                    .size(160.dp)
                    .padding(bottom = 24.dp)
            )

            Text(
                text = "Let's Sign You In",
                fontSize = 28.sp,
                fontWeight = FontWeight.Bold,
                color = Color.Black
            )
            Text(
                text = "Welcome back, you've been missed!",
                fontSize = 16.sp,
                color = Color.Gray,
                modifier = Modifier.padding(bottom = 24.dp)
            )

            CustomTextField(
                value = email,
                onValueChange = onEmailChange,
                label = "Email",
                iconResId = R.drawable.ic_email
            )
            Spacer(modifier = Modifier.height(16.dp))
            CustomTextField(
                value = password,
                onValueChange = onPasswordChange,
                label = "Password",
                iconResId = R.drawable.ic_lock,
                isPassword = true
            )

            Spacer(modifier = Modifier.height(20.dp))
            ActionSection(email, password)
            Spacer(modifier = Modifier.height(12.dp))
            TextButton(onClick = { /* Forgot password logic */ }) {
                Text("Forgot Password?", color = Color(0xFF6A11CB))
            }
            Spacer(modifier = Modifier.height(24.dp))
            Text(
                text = "Or sign in with",
                fontSize = 14.sp,
                color = Color.Gray
            )
            Spacer(modifier = Modifier.height(16.dp))
            SocialLoginSection()
        }
    }
}

Dibungkus dalam Card dengan rounded corner dan warna latar putih.

Mengandung:

1. Gambar ilustrasi di atas (login dari drawable).

2. Judul dan subjudul ("Let's Sign You In", "Welcome back...").

3. TextField Email dan Password → pakai CustomTextField(...).

4. Tombol Login → ActionSection(...).

5. Link “Forgot Password?”.

6. Opsi login sosial media → SocialLoginSection()

@Composable
fun CustomTextField(
    value: String,
    onValueChange: (String) -> Unit,
    label: String,
    iconResId: Int,
    isPassword: Boolean = false
) {
    OutlinedTextField(
        value = value,
        onValueChange = onValueChange,
        label = { Text(label, color = Color.DarkGray) },
        leadingIcon = {
            Icon(
                painter = painterResource(id = iconResId),
                contentDescription = "$label Icon",
                tint = Color(0xFF6A11CB),
                modifier = Modifier.size(32.dp) // Ukuran icon
            )
        },
        visualTransformation = if (isPassword) PasswordVisualTransformation() else VisualTransformation.None,
        singleLine = true,
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp), // Tinggi
        shape = RoundedCornerShape(20.dp),
        colors = OutlinedTextFieldDefaults.colors(
            focusedContainerColor = Color.White,
            unfocusedContainerColor = Color.White,
            focusedBorderColor = Color(0xFF6A11CB),
            unfocusedBorderColor = Color.LightGray,
            cursorColor = Color(0xFF6A11CB),
            focusedLabelColor = Color(0xFF6A11CB),
            unfocusedLabelColor = Color.Gray
        )
    )
}

• Komponen reusable untuk membuat field input (email & password).
• Gunakan OutlinedTextField.
• Bisa menampilkan ikon di depan (seperti amplop & gembok).
• Properti isPassword mengatur apakah teks disembunyikan.
• Ukuran tinggi 56.dp, sehingga tampak konsisten.

@Composable
fun ActionSection(email: String, password: String) {
    Button(
        onClick = {
            Log.i("Login", "Email: $email | Password: $password")
        },
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp),
        shape = RoundedCornerShape(30.dp),
        colors = ButtonDefaults.buttonColors(containerColor = Color.Transparent),
        contentPadding = PaddingValues()
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(
                    brush = Brush.horizontalGradient(
                        colors = listOf(Color(0xFF8E2DE2), Color(0xFF4A00E0))
                    ),
                    shape = RoundedCornerShape(30.dp)
                ),
            contentAlignment = Alignment.Center
        ) {
            Text("Login", color = Color.White, fontSize = 16.sp)
        }
    }
}

• Menampilkan tombol Login.

• Pakai gradient horizontal sebagai latar tombol.

• Border-nya bulat (30.dp), dan teks putih.

@Composable
fun SocialLoginSection() {
    Row(
        horizontalArrangement = Arrangement.SpaceEvenly,
        modifier = Modifier.fillMaxWidth()
    ) {
        SocialButton(R.drawable.facebook, "Facebook")
        SocialButton(R.drawable.google, "Google")
        SocialButton(R.drawable.twitter, "Twitter")
    }
}

@Composable
fun SocialButton(iconRes: Int, description: String) {
    Surface(
        shape = CircleShape,
        color = Color.White,
        modifier = Modifier
            .size(50.dp)
            .clip(CircleShape)
            .clickable { Log.i("Social Login", "$description clicked") },
        shadowElevation = 4.dp
    ) {
        Image(
            painter = painterResource(id = iconRes),
            contentDescription = description,
            modifier = Modifier
                .padding(10.dp)
                .fillMaxSize()
        )
    }
}

• Tiga tombol sosial media (Facebook, Google, Twitter).

• Masing-masing tombol:

• Berbentuk bulat (CircleShape).
• Latar putih, dengan ikon di tengah.
• Bisa di-klik (clickable), menampilkan log di console.

Source Code : Code Halaman Login

Video Presentasi