Pertemuan 7 - UI/UX Login Page

Nama              : Al-Ferro Yudisthira Putra

NRP                : 5025211176

Kelas               : PPB - A

UI/UX LOGIN PAGE

Pada tugas pertemuan 7, saya membuat sebuah UI/UX sederhana untuk page Login. Page ini memiliki komponen utama berupa input text untuk email dan juga password, button untuk login, dan button untuk mengganti password. Berikut merupakan code dari page yang telah saya buat.

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

    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        contentAlignment = Alignment.Center
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
            shape = MaterialTheme.shapes.large,
        ) {
            Column(
                modifier = Modifier
                    .padding(24.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Hello!",
                    style = MaterialTheme.typography.headlineMedium
                )

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

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

                Button(
                    onClick = { /* LOGIC LOGIN */ },
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp),
                    shape = MaterialTheme.shapes.medium
                ) {
                    Text("Login")
                }

                TextButton(onClick = { /* LOGIC FORGOT PASSWORD */ }

                    Text("Forgot Password?")
                }
            }
        }
    }
}

Pada fungsi LoginScreen, kita memulai dengan mendeklarasikan dua buah state menggunakan remember dan mutableStateOf, yaitu email dan password. State ini digunakan untuk menyimpan inputan user secara real-time. Setelah itu, seluruh tampilan dibungkus dalam sebuah Box, yang berguna untuk memposisikan konten di tengah layar (contentAlignment = Alignment.Center) dengan sedikit padding di sekeliling layar (Modifier.padding(16.dp)).

Di dalam Box, kita menempatkan sebuah Card. Card ini berfungsi untuk memberikan efek bayangan (elevation) dan sudut melengkung (rounded corners) pada tampilan form, sehingga tampilan login terlihat lebih modern dan elegan. Card ini juga diberi padding tambahan agar isi di dalamnya tidak mepet ke pinggir.

Isi dari Card disusun menggunakan Column, yang menumpuk komponen-komponen secara vertikal dengan jarak antar komponen sebesar 16.dp (verticalArrangement = Arrangement.spacedBy(16.dp)). Di bagian atas, terdapat teks "Welcome Back!" yang ditampilkan menggunakan gaya huruf headlineMedium dari MaterialTheme, sehingga tampil lebih besar dan mencolok sebagai sambutan.

Selanjutnya, ada dua buah OutlinedTextField untuk input email dan password. Keduanya diberi label yang sesuai, diatur agar hanya satu baris (singleLine = true), dan disesuaikan jenis keyboard-nya (keyboardOptions) agar lebih nyaman ketika diisi user (contohnya keyboard tipe email saat mengisi email).

Setelah input fields, terdapat Button bertuliskan "Login", yang diatur memenuhi lebar penuh (fillMaxWidth()) dan memiliki tinggi 50dp. Bentuk tombol dibuat agak melengkung menggunakan shape = MaterialTheme.shapes.medium. Terakhir, terdapat TextButton bertuliskan "Forgot Password?" yang bisa diarahkan ke fitur reset password, walaupun aksi kliknya masih berupa komentar TODO untuk diisi nanti.

Berikut merupakan visualisasi dari page yang telah dibuat

Berikut merupakan link repository dari code yang dibuat.

https://github.com/YudisthiraPutra/PPB_Week7_Assignment