Pertemuan 7 - Membuat Login Page

Nama: Kadek Fajar Pramartha Yasodana

NRP: 5025231185

Kelas: PPB C

Pertemuan 7 - Membuat Login Page

Pada tugas kali ini, saya diminta untuk membuat sebuah login page. Untuk membuat login page sebenarnya cukup simple jika sudah terbiasa dengan cara kerja compose. Jika pemikiran kita menganggap sedang mengoding html, css dengan tailwind, sebenarnya compose tidak berbeda terlalu jauh dan bisa dibilang cuma beda syntax.

package com.fajary.loginpage

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedIconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.fajary.loginpage.ui.theme.LoginPageTheme
import androidx.compose.runtime.getValue;
import androidx.compose.runtime.setValue;
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.input.PasswordVisualTransformation
import org.w3c.dom.Text

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

@Composable
fun LoginPage(modifier: Modifier = Modifier) {
    var email by remember {
        mutableStateOf("")
    }
    var password by remember {
        mutableStateOf("")
    }

    Box(
        modifier = modifier.fillMaxSize().background(Color.White)
    )
    {
        Column(
            modifier = Modifier.fillMaxSize().padding(24.dp),
            verticalArrangement = Arrangement.Center
        ){
            Row(
                horizontalArrangement = Arrangement.Center,
                modifier = Modifier.fillMaxWidth()
            ){
                Image(
                    painter = painterResource(id = R.drawable.cover),
                    contentDescription = "Login Illustration",
                    modifier = Modifier.size(220.dp),
                )
            }
            Text(
                text = "Welcome Back",
                fontWeight = FontWeight.Bold,
                fontSize = 32.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )
            Text(
                text = "Login to your account",
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )
            OutlinedTextField(
                value = email,
                onValueChange = {
                    email = it
                },
                label = {
                    Text("Email Address")
                },
                modifier = Modifier.fillMaxWidth().padding(top = 8.dp)
            )
            OutlinedTextField(
                value = password,
                onValueChange = {
                    password = it
                },
                label = {
                    Text("Password")
                },
                modifier = Modifier.fillMaxWidth().padding(top = 8.dp),
                visualTransformation = PasswordVisualTransformation()
            )
            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally
            ){
                Button(
                    onClick = {

                    },
                    modifier = Modifier.padding(top = 16.dp),
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color.Black,
                        contentColor = Color.White
                    )
                ) {
                    Text("Login")
                }
                TextButton(
                    onClick = {

                    },
                    modifier = Modifier.padding(top = 8.dp)
                ) {
                    Text("Forgot Password?", color = Color.Black)
                }
            }

            Text(
                text = "Or sign in with",
                modifier = Modifier.padding(top = 48.dp).fillMaxWidth(),
                textAlign = TextAlign.Center,
                color = Color.Gray
            )
            Row(
                modifier = Modifier.fillMaxWidth().padding(top = 16.dp, bottom = 20.dp),
                horizontalArrangement = Arrangement.spacedBy(
                    4.dp,
                    Alignment.CenterHorizontally
                )
            ) {
                OutlinedIconButton(
                    onClick = {

                    },
                    shape = RoundedCornerShape(10.dp)
                ) {
                    Icon(
                        painter = painterResource(id = R.drawable.facebook),
                        contentDescription = "Login Illustration",
                        modifier = Modifier.size(28.dp)
                    )
                }
                OutlinedIconButton(
                    onClick = {

                    },
                    shape = RoundedCornerShape(10.dp)
                ) {
                    Icon(
                        painter = painterResource(id = R.drawable.google),
                        contentDescription = "Login Illustration",
                        modifier = Modifier.size(28.dp)
                    )
                }
                OutlinedIconButton(
                    onClick = {

                    },
                    shape = RoundedCornerShape(10.dp)
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.x),
                        contentDescription = "Login Illustration",
                        modifier = Modifier.size(28.dp).clip(RoundedCornerShape(6.dp))
                    )
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun LoginPagePreview() {
    LoginPageTheme {
        Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
            LoginPage(
                modifier = Modifier.padding(innerPadding)
            )
        }
    }
}

MainActivity

MainActivity berfungsi sebagai root aplikasi yang mengatur tampilan utama menggunakan setContent, mirip seperti <App /> di web. LoginPageTheme dan Scaffold bertindak sebagai wrapper global, sehingga jika kita berpikir dalam Tailwind, ini seperti menggunakan min-h-screen w-full sebagai container utama, lalu LoginPage menjadi isi kontennya dengan padding agar tidak menabrak system UI.

LoginPagePreview

LoginPagePreview adalah fungsi yang digunakan untuk menampilkan preview UI langsung di Android Studio tanpa perlu menjalankan aplikasi. Fungsi ini dibungkus dengan anotasi @Preview(showBackground = true) sehingga Compose akan merender tampilan LoginPage di design view. Di dalamnya, LoginPageTheme dan Scaffold tetap digunakan agar preview mencerminkan kondisi sebenarnya di aplikasi.

LoginPage

LoginPage (root) menyimpan state email dan password menggunakan remember (mirip useState). Layout dimulai dengan Box full screen dengan background putih, sehingga jika kita berpikir dalam Tailwind maka seperti w-full h-screen bg-white. Di dalamnya ada Column dengan padding(24.dp) dan Arrangement.Center, yang jika dianalogikan menjadi flex flex-col justify-center p-6, berfungsi sebagai struktur utama yang menempatkan semua elemen di tengah layar.

• Bagian image menggunakan Row dengan fillMaxWidth dan center alignment, sehingga jika kita berpikir dalam Tailwind maka seperti flex justify-center w-full. Image dengan ukuran tetap (220.dp) bisa dianggap seperti w-[220px] h-[220px], berfungsi sebagai ilustrasi utama di bagian atas halaman.
• Title dan subtitle menggunakan Text dengan fillMaxWidth dan textAlign.Center, sehingga jika kita berpikir dalam Tailwind maka seperti text-center w-full. Penggunaan fontSize dan fontWeight membentuk hierarki seperti text-3xl font-bold untuk judul dan text-base untuk deskripsi, yang berfungsi sebagai heading dan penjelasan halaman login.
• Input field menggunakan OutlinedTextField dengan fillMaxWidth dan padding(top), sehingga jika kita berpikir dalam Tailwind maka seperti w-full mt-2. Label pada field bertindak sebagai floating label, dan password menggunakan visualTransformation yang setara dengan type="password", sehingga bagian ini berfungsi sebagai form input utama user.
• Button section dibungkus Column dengan alignment tengah (items-center w-full). Tombol login menggunakan warna hitam putih (bg-black text-white mt-4) sebagai primary action, dan TextButton untuk “Forgot Password” sebagai secondary action seperti link (mt-2 text-black). Jika kita berpikir dalam Tailwind maka ini seperti kombinasi flex flex-col items-center.
• Divider text “Or sign in with” menggunakan Text dengan padding atas besar dan warna abu, sehingga jika kita berpikir dalam Tailwind maka seperti mt-12 text-center text-gray-500, berfungsi sebagai pemisah antara login biasa dan login sosial.
• Social login row menggunakan Row dengan Arrangement.spacedBy dan center alignment, sehingga jika kita berpikir dalam Tailwind maka seperti flex justify-center gap-x. Setiap OutlinedIconButton memiliki border dan rounded (border rounded-lg) dengan icon di dalamnya, yang berfungsi sebagai alternatif login menggunakan platform lain.