Tugas 7 Login Page

Nama: Dafarel Fatih Wirayudha
NRP: 5025211120
Kelas: PPB A

Pada tugas kali ini saya membuat halaman login sederhana

Berikut adalah penjelasan kodenya:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            LoginPageTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    LoginScreen(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

• onCreate(): Fungsi utama yang dijalankan saat aplikasi dibuka.
• setContent {}: Menggunakan Jetpack Compose untuk menampilkan UI.
• LoginPageTheme {}: Menerapkan tema yang telah disetting di file ui.theme.
• Scaffold: Layout dasar (untuk padding, snackbar, top bar, dll).
• LoginScreen(): Fungsi composable yang menampilkan halaman login.

fun LoginScreen(modifier: Modifier = Modifier) {
    val email = remember { mutableStateOf("") }
    val password = remember { mutableStateOf("") }

• email, password: Menyimpan input user secara real-time (reactive state).

.background(
    brush = Brush.verticalGradient(
        colors = listOf(Color(0xFFE0C3FC), Color(0xFF8EC5FC))
    )
),

• Latar belakang ungu ke biru muda dengan efek gradasi.

Card(
    elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
    shape = RoundedCornerShape(16.dp),
    modifier = Modifier
        .padding(24.dp)
        .fillMaxWidth()
        .wrapContentHeight()
)

• Box putih dengan sudut membulat dan bayangan.
• Tempat seluruh form login ditampilkan.

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

• Field input satu baris untuk email.

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

• Disembunyikan seperti bintang (****)
• Keyboard otomatis jadi jenis password

Button(
    onClick = { /* Handle Login */ },
    modifier = Modifier
        .fillMaxWidth()
        .height(50.dp),
    shape = RoundedCornerShape(12.dp),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color(0xFF6A1B9A)
    )
) {
    Text("Login", color = Color.White)
}

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

TextButton(onClick = { /* Forgot Password */ }) {
    Text("Forgot Password?", style = MaterialTheme.typography.bodySmall)
}

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

Text("Or sign in with", fontSize = 14.sp, color = Color.Gray)

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

• Belum terhubung ke backend, hanya placeholder.
• Background ungu gelap (0xFF6A1B9A).
• Placeholder untuk fitur lupa password.

Row(
    horizontalArrangement = Arrangement.Center,
    modifier = Modifier.fillMaxWidth()
) {
    listOf(R.drawable.facebook, R.drawable.google, R.drawable.github).forEach { iconId ->
        IconButton(onClick = { }) {
            Image(
                painter = painterResource(id = iconId),
                contentDescription = null,
                modifier = Modifier.size(36.dp)
            )
        }
    }
}

• 3 ikon ditampilkan (Facebook, Google, GitHub)
• Belum ada logika klik, hanya UI.

Hasil:

Video Demo:

Link Source Lengkap: GitHub