Tugas 11

Tugas  11 - Latihan FP

Ahmad Fauzan Alghifari - 5025211091

Penugasan ini membuat aplikasi dengan mengimplementasikan auth dan OTP sederhana. Saya memutuskan untuk membuat dua konsep tersebut secara hardcoded. Repositori : fazghfr/ppb-t11

package com.example.ppb11

import android.os.Bundle
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.platform.LocalContext
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.ppb11.ui.theme.Ppb11Theme

class MainActivity : ComponentActivity() {

    // Data hardcoded untuk login dan OTP
    private val hardcodedEmail = "user@example.com"
    private val hardcodedPassword = "password123"
    private val correctOtp = "123456"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Ppb11Theme {
                // Panggil Composable utama aplikasi
                AuthApp(
                    hardcodedEmail = hardcodedEmail,
                    hardcodedPassword = hardcodedPassword,
                    correctOtp = correctOtp
                )
            }
        }
    }
}

// Enum untuk merepresentasikan halaman yang berbeda
enum class Screen {
    LOGIN,
    REGISTER,
    OTP,
    WELCOME
}

@Composable
fun AuthApp(hardcodedEmail: String, hardcodedPassword: String, correctOtp: String) {
    // State untuk mengontrol halaman mana yang sedang aktif
    var currentScreen by remember { mutableStateOf(Screen.LOGIN) }

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        // `when` akan menampilkan Composable yang sesuai dengan state `currentScreen`
        when (currentScreen) {
            Screen.LOGIN -> LoginScreen(
                onLoginSuccess = { currentScreen = Screen.WELCOME },
                onNavigateToRegister = { currentScreen = Screen.REGISTER },
                hardcodedEmail = hardcodedEmail,
                hardcodedPassword = hardcodedPassword
            )
            Screen.REGISTER -> RegisterScreen(
                onRegisterSuccess = { currentScreen = Screen.OTP }
            )
            Screen.OTP -> OtpScreen(
                onOtpSuccess = { currentScreen = Screen.LOGIN },
                correctOtp = correctOtp
            )
            Screen.WELCOME -> WelcomeScreen(
                onLogout = { currentScreen = Screen.LOGIN }
            )
        }
    }
}

@Composable
fun LoginScreen(
    onLoginSuccess: () -> Unit,
    onNavigateToRegister: () -> Unit,
    hardcodedEmail: String,
    hardcodedPassword: String
) {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    val context = LocalContext.current

    Column(
        modifier = Modifier.fillMaxSize().padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Login", fontSize = 32.sp, modifier = Modifier.padding(bottom = 32.dp))
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Email") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation(),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(24.dp))
        Button(
            onClick = {
                if (email == hardcodedEmail && password == hardcodedPassword) {
                    Toast.makeText(context, "Login Berhasil", Toast.LENGTH_SHORT).show()
                    onLoginSuccess()
                } else {
                    Toast.makeText(context, "Email atau Password Salah", Toast.LENGTH_SHORT).show()
                }
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Login")
        }
        TextButton(onClick = onNavigateToRegister, modifier = Modifier.padding(top = 8.dp)) {
            Text("Belum punya akun? Register")
        }
    }
}

@Composable
fun RegisterScreen(onRegisterSuccess: () -> Unit) {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    val context = LocalContext.current

    Column(
        modifier = Modifier.fillMaxSize().padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Register", fontSize = 32.sp, modifier = Modifier.padding(bottom = 32.dp))
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Email") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(24.dp))
        Button(
            onClick = {
                if (email.isNotEmpty() && password.isNotEmpty()) {
                    Toast.makeText(context, "Registrasi berhasil, verifikasi OTP", Toast.LENGTH_SHORT).show()
                    onRegisterSuccess()
                } else {
                    Toast.makeText(context, "Email & Password tidak boleh kosong", Toast.LENGTH_SHORT).show()
                }
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Register")
        }
    }
}

@Composable
fun OtpScreen(onOtpSuccess: () -> Unit, correctOtp: String) {
    var otp by remember { mutableStateOf("") }
    val context = LocalContext.current

    Column(
        modifier = Modifier.fillMaxSize().padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Verifikasi OTP", fontSize = 32.sp, modifier = Modifier.padding(bottom = 16.dp), textAlign = TextAlign.Center)
        OutlinedTextField(
            value = otp,
            onValueChange = { if (it.length <= 6) otp = it },
            label = { Text("XXXXXX") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(24.dp))
        Button(
            onClick = {
                if (otp == correctOtp) {
                    Toast.makeText(context, "Verifikasi Berhasil! Silakan Login.", Toast.LENGTH_SHORT).show()
                    onOtpSuccess()
                } else {
                    Toast.makeText(context, "Kode OTP Salah", Toast.LENGTH_SHORT).show()
                }
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Verifikasi")
        }
    }
}

@Composable
fun WelcomeScreen(onLogout: () -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize().padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Selamat Datang!", fontSize = 24.sp)
        Spacer(modifier = Modifier.height(24.dp))
        Button(onClick = onLogout) {
            Text("Logout")
        }
    }
}

// Preview untuk melihat tampilan LoginScreen di editor
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    Ppb11Theme {
        LoginScreen({}, {}, "user@example.com", "password123")
    }
}

Tampilan Output : 

Demo :