Tugas 7 PPB A 2025 - Login Page

Nama     : Rayhan Arvianta Bayuputra

NRP        : 5025211217

Kelas      : PPB A

TA            : 2024 (Genap)

Halaman Login

Pada pertemuan kali ini, kami membuat halaman login dari sebuah aplikasi. Berikut cuplikannya:

Berikut adalah source code dari project halaman login:

package com.example.loginpage

import android.os.Bundle
import android.util.Patterns
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color(0xFFF8F4FF)
                ) {
                    LoginScreen()
                }
            }
        }
    }
}

@Composable
fun LoginScreen() {
    val context = LocalContext.current

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

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Welcome Back!",
            fontSize = 28.sp,
            color = Color.Black
        )

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

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

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

        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(),
            keyboardOptions = KeyboardOptions.Default.copy(
                keyboardType = KeyboardType.Password,
                imeAction = ImeAction.Done
            )
        )

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

        Text(
            text = "Forgot Password?",
            color = MaterialTheme.colorScheme.primary,
            modifier = Modifier.align(Alignment.End)
        )

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

        Button(
            onClick = {
                if (email.isEmpty()) {
                    Toast.makeText(context, "Email tidak boleh kosong", Toast.LENGTH_SHORT).show()
                } else if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
                    Toast.makeText(context, "Format email salah", Toast.LENGTH_SHORT).show()
                } else if (password.isEmpty()) {
                    Toast.makeText(context, "Password tidak boleh kosong", Toast.LENGTH_SHORT).show()
                } else if (password.length < 6) {
                    Toast.makeText(context, "Password minimal 6 karakter", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(context, "Login berhasil!", Toast.LENGTH_SHORT).show()
                }
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(text = "Sign In")
        }

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

        Text("Or sign in with", modifier = Modifier.align(Alignment.CenterHorizontally))

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

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            IconButton(onClick = { /* Google OAuth */ }) {
                Image(
                    painter = painterResource(id = R.drawable.ic_google),
                    contentDescription = "Google",
                    modifier = Modifier.size(36.dp)
                )
            }

            IconButton(onClick = { /* Facebook OAuth */ }) {
                Image(
                    painter = painterResource(id = R.drawable.ic_facebook),
                    contentDescription = "Facebook",
                    modifier = Modifier.size(36.dp)
                )
            }

            IconButton(onClick = { /* X (Twitter) OAuth */ }) {
                Image(
                    painter = painterResource(id = R.drawable.ic_x),
                    contentDescription = "X",
                    modifier = Modifier.size(36.dp)
                )
            }
        }
    }
}

MainActivity Class

Kelas MainActivity merupakan titik masuk utama aplikasi login. Kelas ini merupakan turunan dari ComponentActivity. Di dalam metode onCreate(), fungsi setContent {} digunakan untuk menginisialisasi antarmuka pengguna menggunakan Jetpack Compose.

Tema Material3 diterapkan melalui MaterialTheme, dan seluruh tampilan dibungkus dalam sebuah Surface. Fungsi utama LoginScreen() dipanggil untuk menampilkan UI halaman login.

LoginScreen Function

Fungsi LoginScreen() bertanggung jawab untuk membangun dan menampilkan seluruh elemen antarmuka pengguna dari halaman login. Fungsi ini terdiri dari beberapa elemen UI utama:

• Text ("Welcome Back!"): Menyambut pengguna dengan judul yang besar dan jelas.
• OutlinedTextField untuk Email: Kolom input untuk alamat email pengguna. Validasi dilakukan untuk memastikan input tidak kosong dan sesuai dengan format email.
• OutlinedTextField untuk Password: Kolom input untuk kata sandi. Validasi dilakukan untuk memastikan kata sandi tidak kosong dan memiliki panjang minimal 6 karakter.
• Text ("Forgot Password?"): Tautan teks yang bisa dikembangkan lebih lanjut untuk mengarahkan pengguna ke proses pemulihan kata sandi.
• Button ("Sign In"): Tombol untuk memproses login. Saat ditekan, sistem akan melakukan validasi terhadap email dan password, kemudian menampilkan pesan toast sesuai hasil validasi.
• Text ("Or sign in with"): Memberi petunjuk kepada pengguna bahwa mereka dapat masuk menggunakan akun lain seperti Google, Facebook, atau X.
• Row berisi tiga IconButton: Menampilkan tombol login menggunakan logo Google, Facebook, dan X (Twitter). Ikon ditampilkan menggunakan Image dan painterResource, dan tombol-tombol ini dapat dikaitkan dengan logika autentikasi OAuth.

Validasi Form

Validasi dilakukan secara lokal dengan kondisi sebagai berikut:

• Email tidak boleh kosong.
• Format email harus sesuai (Patterns.EMAIL_ADDRESS).
• Password tidak boleh kosong.
• Password minimal memiliki panjang 6 karakter.
• Jika semua validasi terpenuhi, maka akan ditampilkan pesan "Login berhasil!".

Penggunaan Gambar OAuth

Untuk tombol login pihak ketiga, gambar logo Google, Facebook, dan X digunakan sebagai ikon. Gambar ini diakses melalui painterResource(id = R.drawable.ic_google) dan disarankan untuk disimpan di folder res/drawable/.

Demo Aplikasi

Github Repository: https://github.com/arvianta/PPB_Week7_LoginPage