Tugas 7 - Login Page

https://github.com/ilomimo/ppb-login-3 

Aplikasi ini adalah UI login sederhana yang menampilkan:

• Logo atau ilustrasi login
• Form input email dan password
• Tombol login
• Link “Forgot Password?”
• Pilihan login lewat Facebook, Google, Instagram

Arsitektur Utama

Kode berikut ditulis di MainActivity.kt dan menggunakan komponen Composable dari Jetpack Compose.

Kodingan Lengkap

package com.example.mylogin

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.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.tooling.preview.Preview

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            LoginScreen()
        }
    }
}

@Composable
fun LoginScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Gambar header/logo
        Image(
            painter = painterResource(id = R.drawable.a),
            contentDescription = "Login image",
            modifier = Modifier.size(200.dp)
        )

        Text(
            text = "Welcome Back",
            fontSize = 28.sp,
            fontWeight = FontWeight.Bold
        )

        Spacer(modifier = Modifier.height(4.dp))
        Text(text = "Login to your account")

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

        // Input Email
        OutlinedTextField(
            value = "",
            onValueChange = {},
            label = { Text(text = "Email address") }
        )

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

        // Input Password
        OutlinedTextField(
            value = "",
            onValueChange = {},
            label = { Text(text = "Password") }
        )

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

        Button(onClick = { /* Aksi login nanti di sini */ }) {
            Text(text = "Login")
        }

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

        Text(
            text = "Forgot Password?",
            modifier = Modifier.clickable { /* Aksi klik lupa password */ }
        )

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

        Text(text = "Or sign in with")

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

        // Media Sosial Row
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(40.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Image(
                painter = painterResource(id = R.drawable.fb),
                contentDescription = "Facebook",
                modifier = Modifier
                    .size(60.dp)
                    .clickable { /* Facebook login */ }
            )
            Image(
                painter = painterResource(id = R.drawable.google),
                contentDescription = "Google",
                modifier = Modifier
                    .size(60.dp)
                    .clickable { /* Google login */ }
            )
            Image(
                painter = painterResource(id = R.drawable.instagram),
                contentDescription = "Instagram",
                modifier = Modifier
                    .size(60.dp)
                    .clickable { /* Instagram login */ }
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewLoginScreen() {
    LoginScreen()
}

Penjelasan Komponen Penting

Komponen	Penjelasan
enableEdgeToEdge()	Mengaktifkan mode layar penuh tanpa batas UI
Column	Layout vertikal untuk menyusun elemen ke bawah
Image()	Menampilkan gambar dari resource drawable
OutlinedTextField	Input form dengan border tipis
Spacer()	Memberikan jarak antar elemen UI
Button()	Tombol aksi, saat ini belum ada fungsinya
Row()	Baris horizontal untuk menyusun ikon media sosial
Modifier.clickable	Membuat elemen bisa diklik