Pertemuan 7 - MEMBUAT HALAMAN LOGIN

Nama              : Armadya Hermawan Sarwono

NRP                : 5025211243

Kelas               : PPB - A

package com.example.login_page_android_app

import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.*
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

@Composable
fun LoginScreen() {

    var username by remember {
        mutableStateOf("")
    }

    var password by remember {
        mutableStateOf("")
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = R.drawable.pesanlapang_logo),
            contentDescription = "PesanLapang Logo",
            modifier = Modifier
                .size(300.dp)
        )

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

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

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

        OutlinedTextField(
            value = username ,
            onValueChange = {
                username = it
            },
            label = { Text("Username") }
        )

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

        OutlinedTextField(
            value = password ,
            onValueChange = {
                password = it
            },
            label = { Text("Password") }
        )

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

        Button(onClick = {}) {
            Text("Login")
        }

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

        Text("Or Login Using", fontSize = 16.sp)

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

        Row {
            Image(
                painter = painterResource(id = R.drawable.facebook),
                contentDescription = "Facebook Logo",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        //Facebook Clicked
                    }
            )

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

            Image(
                painter = painterResource(id = R.drawable.google),
                contentDescription = "Google Logo",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        //Google Clicked
                    }
            )

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

            Image(
                painter = painterResource(id = R.drawable.apple),
                contentDescription = "Apple Logo",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        //Apple Clicked
                    }
            )
        }

    }
}

Struktur Utama
Package dan Import:

Menggunakan package com.example.login_page_android_app
Mengimpor komponen Compose yang diperlukan seperti Image, Button, OutlinedTextField, dll.

State Management
var username by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }

Menggunakan remember dan mutableStateOf untuk menyimpan state username dan password
by delegate membuat kode lebih bersih dalam mengakses nilai state

Layout Struktur
Column Layout:

Menggunakan Column sebagai container utama dengan alignment tengah
fillMaxSize() membuat kolom memenuhi seluruh layar
verticalArrangement = Arrangement.Center menempatkan konten di tengah vertikal
horizontalAlignment = Alignment.CenterHorizontally menempatkan konten di tengah horizontal

Komponen UI

Logo Aplikasi:

Image dengan ukuran 300.dp menampilkan logo PesanLapang


Welcome Text:

Teks sambutan dengan ukuran font 28sp dan font tebal


Input Fields:

Dua OutlinedTextField untuk username dan password
Menggunakan two-way data binding dengan state variables


Login Button:

Button dengan fungsi onClick yang masih kosong (siap untuk implementasi logika login)


Social Login:

Teks "Or Login Using"
Row berisi tiga logo social media (Facebook, Google, Apple)
Setiap logo memiliki clickable modifier dengan fungsi yang masih kosong