Tugas 7 PPB

🔐 Aplikasi My Login Screen

Nama: Revy Pramana

NRP: 5025221252

Deskripsi: Aplikasi Android sederhana menampilkan layar login menggunakan Jetpack Compose: form email & password, tombol login, link “Forgot Password?”, dan opsi sign-in dengan ikon sosial media.

🧑‍💻 Cuplikan Kode

// LoginScreen.kt
package com.example.mylogin

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.ui.Alignment
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.runtime.*
import androidx.compose.ui.text.input.PasswordVisualTransformation

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

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        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(16.dp))

        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Email Address") }
        )

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

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

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

        Button(onClick = { /* TODO: handle login */ }) {
            Text("Login")
        }

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

        Text(
            text = "Forgot Password?",
            modifier = Modifier.clickable { /* TODO: handle forgot */ }
        )

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

        Text(text = "Or Sign in with")

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(40.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Image(
                painter = painterResource(id = R.drawable.fb),
                contentDescription = "facebook",
                modifier = Modifier
                    .size(45.dp)
                    .clickable { /* TODO */ }
            )
            Image(
                painter = painterResource(id = R.drawable.twitter),
                contentDescription = "twitter",
                modifier = Modifier
                    .size(45.dp)
                    .clickable { /* TODO */ }
            )
            Image(
                painter = painterResource(id = R.drawable.google),
                contentDescription = "google",
                modifier = Modifier
                    .size(45.dp)
                    .clickable { /* TODO */ }
            )
        }
    }
}

// MainActivity.kt
package com.example.mylogin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent

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

📸 Hasil Tampilan

Contoh screenshot layar login:

---

📌 Fitur Utama

• Form input “Email Address” dan “Password” (dengan masking).
• Tombol Login untuk proses otentikasi.
• Link “Forgot Password?” yang dapat diklik.
• Opsi sign-in dengan ikon Facebook, Twitter, dan Google.
• Layout terpusat & responsif menggunakan Column & Row.

🔧 Catatan Teknis

• Menggunakan Jetpack Compose dan Material 3.
• remember & mutableStateOf untuk state input.
• PasswordVisualTransformation untuk menyembunyikan teks password.
• Gambar logo dan ikon sosial media ditempatkan di res/drawable (a, fb, twitter, google).
• Gunakan Arrangement.Center & Alignment.CenterHorizontally untuk layout tengah layar.

🔗 Link GitHub Repository

Source code aplikasi ini dapat diakses di:
https://github.com/Revprm/Repo-PPB/tree/main/MyLogin