Tugas 5 - Membuat Halaman Login

 

Nama : Muhammad Rafif Fadhil Naufal

NRP : 5025201273

Kelas : Pemrograman Perangkat Bergerak - B

Tugas 5 : Membuat Halaman Login

Tugas saya adalah membuat halaman login menggunakan Kotlin. Halaman ini akan menjadi antarmuka pengguna pertama yang dilihat oleh pengguna saat mereka ingin mengakses aplikasi atau sistem. Melalui Kotlin, saya akan merancang tampilan yang responsif dan menarik, memungkinkan pengguna untuk memasukkan kredensial mereka dengan mudah. Ini melibatkan pengaturan UI seperti bidang input untuk nama pengguna dan kata sandi, tombol untuk masuk, serta mungkin tautan untuk mengatur ulang kata sandi atau mendaftar akun baru. Tujuan utama saya adalah menciptakan pengalaman pengguna yang intuitif dan aman, memastikan bahwa halaman login ini memenuhi kebutuhan fungsional dan estetika yang diharapkan oleh pengguna.

MainActivity

package com.example.halamanlogin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.halamanlogin.ui.theme.HalamanLoginTheme

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

LoginScreen.kt

package com.example.halamanlogin

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.ui.Alignment
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.runtime.*
import androidx.compose.ui.text.input.PasswordVisualTransformation

@Composable
fun LoginScreen(){

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

    Column (
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(painter = painterResource(id = R.drawable.bglogin), contentDescription = "login image",
            modifier = Modifier.size(200.dp))

        Text(text = "Welcome Back", fontSize = 28.sp, fontWeight = FontWeight.Bold)

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

        OutlinedTextField(value = email, onValueChange = {
            email = it
        }, label = {
            Text(text = "Email Address")
        })

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

        OutlinedTextField(value = password, onValueChange = {
            password = it
        }, label = {
            Text(text = "Password")
        }, visualTransformation = PasswordVisualTransformation())

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

        Button(onClick = {}) {
            Text(text = "Login")
        }

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

        Text(text = "Forgot Password?", modifier = Modifier.clickable {

        })

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

        Text(text = "Or Sign in with")

        Row (
            modifier = Modifier
                .fillMaxWidth()
                .padding(40.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Image(painter = painterResource(id = R.drawable.facebook),
                contentDescription = "facebook",
                modifier = Modifier
                    .size(45.dp)
                    .clickable {

                    }
            )

            Image(painter = painterResource(id = R.drawable.x),
                contentDescription = "instagram",
                modifier = Modifier
                    .size(45.dp)
                    .clickable {

                    }
            )

            Image(painter = painterResource(id = R.drawable.google),
                contentDescription = "google",
                modifier = Modifier
                    .size(45.dp)
                    .clickable {

                    }
            )
        }
    }
}