Tugas 7: Membuat Log in Page

 Alendra Rafif Athaillah

5025221297

PPB G

link github: click here

Login App - Android Jetpack Compose

Aplikasi login sederhana yang dibangun menggunakan Jetpack Compose dengan Kotlin untuk platform Android. Aplikasi ini menampilkan antarmuka login yang modern dengan dukungan autentikasi email/password dan tombol social media login.

📱 Screenshot

✨ Fitur

• Modern UI Design - Menggunakan Material Design 3 dengan Jetpack Compose
• Form Login - Input field untuk email dan password dengan validasi visual
• Password Visibility Toggle - Tombol untuk menampilkan/menyembunyikan password
• Social Media Login - Tombol untuk login dengan Facebook, Google, dan X (Twitter)
• Forgot Password - Link untuk reset password
• Responsive Design - Layout yang menyesuaikan dengan berbagai ukuran layar
• Interactive Elements - Animasi dan efek hover untuk pengalaman pengguna yang lebih baik

🛠️ Teknologi yang Digunakan

• Kotlin - Bahasa pemrograman utama
• Jetpack Compose - UI toolkit modern untuk Android
• Material Design 3 - Sistem desain Google
• Material Icons Extended - Koleksi ikon lengkap dari Material Design

📋 Persyaratan

• Android Studio Hedgehog (2023.1.1) atau yang lebih baru
• Minimum SDK 24 (Android 7.0)
• Target SDK 34 (Android 14)
• Kotlin 1.9.0 atau yang lebih baru

🚀 Cara Instalasi

1. Clone repository ini ke komputer Anda:

   git clone https://github.com/username/login-app.git

2. Buka project di Android Studio

3. Tambahkan dependencies di build.gradle.kts (Module: app):

   dependencies {
       implementation "androidx.compose.ui:ui:1.5.4"
       implementation "androidx.compose.ui:ui-tooling-preview:1.5.4"
       implementation "androidx.compose.material3:material3:1.1.2"
       implementation "androidx.activity:activity-compose:1.8.0"
       implementation "androidx.compose.material:material-icons-extended:1.5.4"
   }

4. Sync project dengan Gradle files

5. Build dan run aplikasi di emulator atau device

📁 Struktur Project

app/
├── src/main/java/com/example/myapplication/
│   ├── MainActivity.kt          # Activity utama dengan LoginScreen
│   └── ui/theme/
│       ├── Theme.kt            # Konfigurasi tema aplikasi
│       ├── Color.kt            # Definisi warna
│       └── Type.kt             # Definisi typography
├── res/
│   ├── values/
│   │   ├── colors.xml          # Resource warna
│   │   └── strings.xml         # Resource string
│   └── drawable/               # Asset gambar dan ikon
└── build.gradle.kts            # Konfigurasi build dan dependencies

🎨 Komponen UI

LoginScreen

Komponen utama yang berisi:

• Header Illustration - Ilustrasi visual dengan shapes
• Welcome Text - Teks sambutan "Welcome Back"
• Email Field - Input field untuk email dengan validasi
• Password Field - Input field untuk password dengan toggle visibility
• Login Button - Tombol utama untuk melakukan login
• Forgot Password Link - Link untuk reset password
• Social Media Buttons - Tombol login dengan platform social media

SocialMediaButton

Komponen reusable untuk tombol social media dengan:

• Background color yang dapat dikustomisasi
• Text/icon yang dapat diubah
• Click handler untuk setiap platform

🔧 Kustomisasi

Mengubah Warna Tema

Edit file ui/theme/Color.kt:

val primaryColor = Color(0xFF6366F1)  // Ubah warna primary
val backgroundColor = Color.White      // Ubah background color

Menambah Platform Social Media

Tambahkan tombol baru di LoginScreen:

SocialMediaButton(
    backgroundColor = Color(0xFF0077B5), // LinkedIn blue
    text = "in",
    textColor = Color.White,
    modifier = Modifier.weight(1f)
) {
    println("LinkedIn login clicked")
}