EAS - Pemrograman Perangkat Bergerak I

Nama   : Theresia Nawangsih
NRP       : 5025201144
Kelas    : PPB - I

Evaluasi Akhir Semester

Pada pertemuan kali ini, kelas kami telah melakukan Evaluasi dengan "redesain dan refactoring". 

Redesain

Dari hasil redesign, saya mengimplementasikan nya sehingga hasilnya seperti dokumentasi dibawah ini

Hasil Dokumentasi Implementasi Gambar

Login

Hasil Dokumentasi Implementasi Video

Source Code

LoginActivity.kt

package com.example.ets_pweb

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.ClickableText
//import androidx.compose.material.*
//import androidx.compose.material.icons.Icons
////import androidx.compose.material.icons.filled.Visibility
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.res.painterResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.foundation.shape.RoundedCornerShape

@Composable
fun LoginActivity() {

    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 16.dp, vertical = 32.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = R.drawable.toko),
            contentDescription = "Login Image",
            modifier = Modifier.size(300.dp)
        )

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

        Text(
            text = "Masuk",
            fontWeight = FontWeight.Bold,
            fontSize = 24.sp,
            modifier = Modifier.align(Alignment.Start)
        )

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

        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text(text = "Email / Nomor Telepon") },
            placeholder = { Text(text = "Contoh: johndoe@gmail.com") },
            modifier = Modifier.fillMaxWidth()
        )

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

        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text(text = "Password") },
            placeholder = { Text(text = "Masukkan password") },
            visualTransformation = PasswordVisualTransformation(),
            trailingIcon = {
                IconButton(onClick = { /* Handle visibility toggle */ }) {
//                    Icon(imageVector = Icons.Default.Visibility, contentDescription = "Toggle password visibility")
                }
            },
            modifier = Modifier.fillMaxWidth()
        )

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

        ClickableText(
            text = AnnotatedString("Lupa Kata Sandi"),
            onClick = { /* Handle forgot password click */ },
            modifier = Modifier.align(Alignment.End),
            style = androidx.compose.ui.text.TextStyle(color = Color(0xFFB4A460))
        )

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

        Button(
            onClick = { Log.i("Credential", "Email : $email Password : $password") },
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFD4AF37)),
            shape = RoundedCornerShape(24.dp),
            modifier = Modifier
                .fillMaxWidth()
                .height(48.dp)
        ) {
            Text(
                text = "Masuk",
                fontWeight = FontWeight.Bold,
                color = Color.Black,
                fontSize = 16.sp
            )
        }

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

        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(text = "Belum punya akun?")
            Spacer(modifier = Modifier.width(4.dp))
            ClickableText(
                text = AnnotatedString("Daftar di sini"),
                onClick = { /* Handle sign up click */ },
                style = androidx.compose.ui.text.TextStyle(color = Color(0xFFD4AF37))
            )
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun LoginActivityPreview() {
    LoginActivity()
}