Membuat Autentikasi Aplikasi

Burhanudin Rifa - 5025201191

PPB - D

Github: Link

Youtube: Link




package com.example.authentication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.authentication.ui.LamanAplikasi
import com.example.authentication.ui.auth.LamanMasuk
import com.example.authentication.ui.auth.LamanOTP
import com.example.authentication.ui.auth.LamanDaftar
import com.example.authentication.ui.LayarMuat
import com.example.authentication.ui.LamanDepan
import com.example.authentication.ui.theme.authenticationTheme

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

sealed class Screen(val route: String) {
    data object LayarMuat : Screen("layarmuat")
    data object LamanDepan : Screen("lamandepan")
    data object Masuk : Screen("masuk")
    data object Daftar : Screen("daftar")
    data object OTP : Screen("otp")
    data object Aplikasi : Screen("aplikasi")
}

@Composable
fun Navigasi() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = Screen.LayarMuat.route) {

        composable(Screen.LayarMuat.route) {
            LayarMuat(onLayarMuatFinished = {
                navController.navigate(Screen.LamanDepan.route) {
                    popUpTo(Screen.LayarMuat.route) { inclusive = true }
                }
            })
        }

        composable(Screen.LamanDepan.route) {
            LamanDepan(
                onMasukClick = { navController.navigate(Screen.Masuk.route) },
                onDaftarClick = { navController.navigate(Screen.Daftar.route) }
            )
        }

        composable(Screen.Masuk.route) {
            LamanMasuk(
                onMasukClick = {
                    navController.navigate(Screen.Aplikasi.route) {
                        popUpTo(Screen.LamanDepan.route) { inclusive = true }
                    }
                },
                onDaftarClick = { navController.navigate(Screen.Daftar.route) }
            )
        }

        composable(Screen.Daftar.route) {
            LamanDaftar(
                onDaftarClick = { navController.navigate(Screen.OTP.route) },
                onMasukClick = { navController.navigate(Screen.Masuk.route) }
            )
        }

        composable(Screen.OTP.route) {
            LamanOTP(
                onVerifyClick = {
                    navController.navigate(Screen.Masuk.route) {
                        popUpTo(Screen.LamanDepan.route)
                    }
                }
            )
        }

        composable(Screen.Aplikasi.route) {
            LamanAplikasi(
                onKeluarClick = {
                    navController.navigate(Screen.LamanDepan.route) {
                        popUpTo(Screen.LamanDepan.route)
                    }
                }
            )
        }
    }
}

@Preview
@Composable
fun NavigasiPreview() {
    authenticationTheme {
        Navigasi()
    }
}
package com.example.authentication.ui

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LamanAplikasi(
    onKeluarClick: () -> Unit
) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Aplikasi Saya") }
            )
        },
        content = { padding ->
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(padding)
                    .padding(16.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Selamat Datang!",
                    style = MaterialTheme.typography.headlineMedium
                )
                Spacer(modifier = Modifier.height(16.dp))
                Text(
                    text = "Anda telah melakukan autentikasi",
                    style = MaterialTheme.typography.bodyLarge
                )
                Spacer(modifier = Modifier.height(32.dp))
                Button(onClick = { onKeluarClick() }) {
                    Text("Kembali")
                }
            }
        }
    )
}
package com.example.authentication.ui

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.graphics.Color

@Composable
fun LamanDepan(
    onMasukClick: () -> Unit,
    onDaftarClick: () -> Unit
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Box {} // Spacer
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            Text(
                "Selamat Datang",
                style = MaterialTheme.typography.displaySmall,
                fontWeight = FontWeight.Bold
            )
            Spacer(modifier = Modifier.height(16.dp))
            Text(
                "Silakan masuk aplikasi atau buat akun baru jika belum memiliki",
                style = MaterialTheme.typography.bodyLarge,
                textAlign = TextAlign.Center,
                color = Color.Gray
            )
        }

        Column(modifier = Modifier.fillMaxWidth()) {
            Button(
                onClick = onDaftarClick,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp),
                shape = RoundedCornerShape(12.dp)
            ) {
                Text("Buat Akun Baru", fontSize = 16.sp)
            }
            Spacer(modifier = Modifier.height(12.dp))
            OutlinedButton(
                onClick = onMasukClick,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp),
                shape = RoundedCornerShape(12.dp)
            ) {
                Text("Masuk", fontSize = 16.sp)
            }
        }
    }
}

package com.example.authentication.ui

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import kotlinx.coroutines.delay

@Composable
fun LayarMuat(onLayarMuatFinished: () -> Unit) {
    LaunchedEffect(key1 = true) {
        delay(2000)
        onLayarMuatFinished()
    }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background),
        contentAlignment = Alignment.Center
    ) {
        Text(
            "Uji Coba Autentikasi",
            style = MaterialTheme.typography.headlineLarge,
            fontWeight = FontWeight.Bold,
            color = MaterialTheme.colorScheme.primary
        )
    }
}

package com.example.authentication.ui.auth

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
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.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import java.text.SimpleDateFormat
import java.util.Calendar
import java.util.Date
import java.util.Locale

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LamanDaftar(
    onDaftarClick: () -> Unit,
    onMasukClick: () -> Unit
    ) {
    var name by remember { mutableStateOf("") }
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    var passwordVisible by remember { mutableStateOf(false) }

    val context = LocalContext.current
    val dateFormatter = remember { SimpleDateFormat("dd/MM/yyyy", Locale.getDefault()) }
    var selectedDate by remember { mutableStateOf(dateFormatter.format(Date())) }
    val calendar = Calendar.getInstance()

    Column(modifier = Modifier.fillMaxSize().padding(32.dp), verticalArrangement = Arrangement.Center) {
        Text("Buat Akun", style = MaterialTheme.typography.headlineLarge, fontWeight = FontWeight.Bold)
        Spacer(modifier = Modifier.height(24.dp))

        OutlinedTextField(
            value = name,
            onValueChange = { name = it },
            label = { Text("Nama Lengkap") },
            modifier = Modifier.fillMaxWidth(),
            singleLine = true
        )
        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = selectedDate,
            onValueChange = {},
            label = { Text("Tanggal Lahir") },
            modifier = Modifier
                .fillMaxWidth()
                .clickable {
                    val datePickerDialog = android.app.DatePickerDialog(
                        context,
                        { _, year, month, dayOfMonth ->
                            calendar.set(year, month, dayOfMonth)
                            selectedDate = dateFormatter.format(calendar.time)
                        },
                        calendar.get(Calendar.YEAR),
                        calendar.get(Calendar.MONTH),
                        calendar.get(Calendar.DAY_OF_MONTH)
                    )
                    datePickerDialog.show()
                },
            enabled = false
        )
        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Surel") },
            modifier = Modifier.fillMaxWidth(),
            singleLine = true
        )
        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Sandi") },
            modifier = Modifier.fillMaxWidth(),
            singleLine = true,
            visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
            trailingIcon = {
                val image = if (passwordVisible)
                    Icons.Filled.Visibility
                else
                    Icons.Filled.VisibilityOff

                val description = if (passwordVisible) "Sembunyikan sandi" else "Tampilkan sandi"

                IconButton(onClick = { passwordVisible = !passwordVisible }) {
                    Icon(imageVector = image, contentDescription = description)
                }
            }
        )
        Spacer(modifier = Modifier.height(32.dp))

        Button(onClick = onDaftarClick, modifier = Modifier.fillMaxWidth().height(50.dp)) {
            Text("Daftar")
        }

        Row(verticalAlignment = Alignment.CenterVertically) {
            Text("Sudah punya akun?")
            TextButton(onClick = onMasukClick) { Text("Masuk") }
        }
    }
}
package com.example.authentication.ui.auth

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp

@Composable
fun LamanMasuk(onMasukClick: () -> Unit, onDaftarClick: () -> Unit) {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    var passwordVisible by remember { mutableStateOf(false) }

    Column(modifier = Modifier.fillMaxSize().padding(32.dp), verticalArrangement = Arrangement.Center) {
        Text("Masuk", style = MaterialTheme.typography.headlineLarge, fontWeight = FontWeight.Bold)
        Spacer(modifier = Modifier.height(24.dp))
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Surel") },
            modifier = Modifier.fillMaxWidth(),
            singleLine = true
        )
        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Sandi") },
            modifier = Modifier.fillMaxWidth(),
            singleLine = true,
            visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
            trailingIcon = {
                val image = if (passwordVisible)
                    Icons.Filled.Visibility
                else
                    Icons.Filled.VisibilityOff

                val description = if (passwordVisible) "Sembunyikan sandi" else "Tampilkan sandi"

                IconButton(onClick = { passwordVisible = !passwordVisible }) {
                    Icon(imageVector = image, contentDescription = description)
                }
            }
        )
        Spacer(modifier = Modifier.height(32.dp))
        Button(onClick = onMasukClick, modifier = Modifier.fillMaxWidth().height(50.dp)) {
            Text("Masuk")
        }
        Row(verticalAlignment = Alignment.CenterVertically) {
            Text("Belum punya akun?")
            TextButton(onClick = onDaftarClick) { Text("Daftar") }
        }
    }
}
package com.example.authentication.ui.auth

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.graphics.Color

@Composable
fun LamanOTP    (onVerifyClick: () -> Unit) {
    var otpValue by remember { mutableStateOf("") }

    Column(modifier = Modifier.fillMaxSize().padding(32.dp), verticalArrangement = Arrangement.Center) {
        Text("Verifikasi Kode", style = MaterialTheme.typography.headlineLarge, fontWeight = FontWeight.Bold)
        Text("Masukkan 4 digit kode yang dikirim ke surel Anda.", color = Color.Gray)
        Spacer(modifier = Modifier.height(32.dp))
        OutlinedTextField(
            value = otpValue,
            onValueChange = { if (it.length <= 4) otpValue = it },
            label = { Text("Kode OTP") },
            textStyle = MaterialTheme.typography.headlineMedium.copy(textAlign = TextAlign.Center),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(32.dp))
        Button(
            onClick = onVerifyClick,
            modifier = Modifier.fillMaxWidth().height(50.dp),
            enabled = otpValue.length == 4
        ) {
            Text("Verifikasi")
        }
    }
}



Comments

Post a Comment

Popular posts from this blog

Aplikasi Expense Tracker - Expenz

Image
 Expenz Deskripsi: Expenz adalah aplikasi mobile untuk mencatat dan melacak pengeluaran harian secara otomatis. Pengguna dapat menambahkan berbagai item pengeluaran dengan mudah, kemudian Expenz menghitung total pengeluaran secara real-time, sehingga membantu pengguna memahami pola pengeluaran dan mengelola keuangan pribadi dengan lebih baik. Studi Kasus: Kantor startup sering kali memiliki staf yang membeli kopi, makan siang, transportasi, dan langganan layanan online setiap hari. Tanpa catatan yang rapi, staf sulit melihat ke mana saja uang mereka mengalir. Expenz menawarkan solusi dengan alur sederhana: Skenario Pencatatan Cepat (Quick Entry): Rina baru saja membeli kopi pagi seharga Rp25.000. Ia membuka Expenz, memilih kategori “Makanan & Minuman”, memasukkan nama “Kopi Pagi” dan nominal Rp25.000, lalu menyimpan. Expenz langsung menambahkan ke daftar pengeluaran hari ini dan memperbarui total otomatis. Fitur, Fungsi, dan Struktur Program Fitur Wajib (Otentikasi)...
Read more

Membuat Aplikasi Login Page Sederhana

Image
Burhanudin Rifa - 5025201191 PPB - D Github:  Link Youtube:  Link package com.example.loginpage 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.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled. Lock import androidx.compose.material.icons.filled. Email import androidx.compose.material.icons.filled. Person import androidx.compose.material.icons.filled. ExitToApp 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.font.FontWeight import androidx.compose.ui.text.input.* import androidx.compose.ui.unit.dp import androidx.compose.ui.unit....
Read more