Pemrograman Perangkat Beregerak - Tugas Pertemuan 7 - Timothy Hosia

Login Page

Nama: Timothy Hosia Budianto

NRP: 5025211098

Kelas: PPB - A

Login Page

Pada pertemuan kali ini ditugaskan untuk membuat halaman login

Kode saya :

package com.example.mylogin

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.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.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() {  // 🛠️ sudah pakai nama default MainActivity
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color(0xFFF8F4FF) // Background ungu muda
                ) {
                    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(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")
        }

        // Divider dengan teks "or"
        Spacer(modifier = Modifier.height(24.dp))

        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            HorizontalDivider(modifier = Modifier.weight(1f))
            Text(
                text = "or",
                modifier = Modifier.padding(horizontal = 16.dp),
                color = Color.Gray
            )
            HorizontalDivider(modifier = Modifier.weight(1f))
        }

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

        // Tombol Login Google
        OutlinedButton(
            onClick = {
                Toast.makeText(context, "Login dengan Google", Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier.fillMaxWidth(),
            colors = ButtonDefaults.outlinedButtonColors(
                contentColor = Color.Black
            )
        ) {
            Text(text = "🔍 Continue with Google")
        }

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

        // Tombol Login Facebook
        OutlinedButton(
            onClick = {
                Toast.makeText(context, "Login dengan Facebook", Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier.fillMaxWidth(),
            colors = ButtonDefaults.outlinedButtonColors(
                contentColor = Color(0xFF1877F2) // Warna biru Facebook
            )
        ) {
            Text(text = "📘 Continue with Facebook")
        }
    }
}

Struktur Kode

1. MainActivity

• Activity utama yang menggunakan Jetpack Compose
• Set background ungu muda (Color(0xFFF8F4FF))
• Memanggil LoginScreen() sebagai konten utama

2. LoginScreen Composable

• Input Fields: 2 text field untuk email dan password
• Validasi: Cek email kosong, format email, password kosong, dan minimal 6 karakter
• UI Layout: Menggunakan Column dengan Arrangement.Center untuk tata letak vertikal

3. Komponen UI

• Welcome Text: Judul "Welcome Back!" berukuran 28sp
• Email Field: Input email dengan keyboard type email
• Password Field: Input password dengan keyboard type password
• Sign In Button: Tombol utama dengan validasi lengkap
• Divider "or": Pemisah horizontal dengan teks "or" di tengah
• Social Login: 2 tombol outline untuk Google dan Facebook

4. Fitur Validasi

• Email tidak boleh kosong
• Format email harus valid (menggunakan Patterns.EMAIL_ADDRESS)
• Password tidak boleh kosong
• Password minimal 6 karakter
• Menampilkan Toast message untuk setiap kondisi

5. Social Login (Dummy)

• Tombol Google dengan emoji 🔍 dan warna hitam
• Tombol Facebook dengan emoji 📘 dan warna biru Facebook
• Saat ini hanya menampilkan Toast, belum terintegrasi dengan SDK asli

Kode ini menggunakan Material Design 3 dan Jetpack Compose untuk membuat UI login yang modern dan responsif.

https://github.com/thossb/MyLogin.git