You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
324 lines
13 KiB
324 lines
13 KiB
package com.example.dattingapp.Login
|
|
|
|
import android.content.Intent
|
|
import android.os.Bundle
|
|
import androidx.activity.ComponentActivity
|
|
import androidx.activity.compose.setContent
|
|
import androidx.activity.enableEdgeToEdge
|
|
import androidx.compose.foundation.Image
|
|
import androidx.compose.foundation.clickable
|
|
import androidx.compose.foundation.layout.*
|
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
import androidx.compose.foundation.text.KeyboardOptions
|
|
import androidx.compose.material.icons.Icons
|
|
import androidx.compose.material.icons.filled.Favorite
|
|
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.layout.ContentScale
|
|
import androidx.compose.ui.res.painterResource
|
|
import androidx.compose.ui.text.font.FontWeight
|
|
import androidx.compose.ui.text.input.ImeAction
|
|
import androidx.compose.ui.text.input.KeyboardType
|
|
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.dattingapp.ui.theme.DattingAPPTheme
|
|
import com.example.dattingapp.R
|
|
import com.example.dattingapp.registration.RegistrationScreen
|
|
|
|
// Renamed Activity to LoginActivity to fix the shadowing collision
|
|
class LoginActivity : ComponentActivity() {
|
|
override fun onCreate(savedInstanceState: Bundle?) {
|
|
super.onCreate(savedInstanceState)
|
|
enableEdgeToEdge()
|
|
setContent {
|
|
DattingAPPTheme {
|
|
LoginScreenContent(
|
|
onJoinNowClick = {
|
|
val intent = Intent(
|
|
this@LoginActivity,
|
|
RegistrationScreen::class.java
|
|
)
|
|
startActivity(intent)
|
|
finish()
|
|
}
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@Composable
|
|
fun LoginScreenContent(
|
|
onGoogleClick: () -> Unit = {},
|
|
onWeChatClick: () -> Unit = {},
|
|
onContinueClick: (String) -> Unit = {},
|
|
onJoinNowClick: () -> Unit = {}
|
|
) {
|
|
var emailOrPhone by remember { mutableStateOf("") }
|
|
|
|
Box(
|
|
modifier = Modifier.fillMaxSize(),
|
|
contentAlignment = Alignment.Center
|
|
) {
|
|
// Background Image
|
|
Image(
|
|
painter = painterResource(id = R.drawable.locationpermissionbg),
|
|
contentDescription = null,
|
|
modifier = Modifier.fillMaxSize(),
|
|
contentScale = ContentScale.Crop
|
|
)
|
|
|
|
Column(
|
|
modifier = Modifier
|
|
.fillMaxSize()
|
|
.padding(horizontal = 20.dp, vertical = 24.dp),
|
|
horizontalAlignment = Alignment.CenterHorizontally,
|
|
verticalArrangement = Arrangement.SpaceBetween
|
|
) {
|
|
// TOP SECTION: Logo, App Name & Tagline
|
|
Column(
|
|
horizontalAlignment = Alignment.CenterHorizontally,
|
|
modifier = Modifier.padding(top = 40.dp)
|
|
) {
|
|
// Heart Icon Badge
|
|
Card(
|
|
shape = RoundedCornerShape(20.dp),
|
|
colors = CardDefaults.cardColors(containerColor = Color.White.copy(alpha = 0.9f)),
|
|
elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
|
|
modifier = Modifier.size(70.dp)
|
|
) {
|
|
Box(
|
|
modifier = Modifier.fillMaxSize(),
|
|
contentAlignment = Alignment.Center
|
|
) {
|
|
Icon(
|
|
imageVector = Icons.Default.Favorite,
|
|
contentDescription = "App Logo",
|
|
tint = Color(0xFFC2003B),
|
|
modifier = Modifier.size(36.dp)
|
|
)
|
|
}
|
|
}
|
|
|
|
Spacer(modifier = Modifier.height(16.dp))
|
|
|
|
// App Name
|
|
Text(
|
|
text = "VibeCheck",
|
|
fontSize = 26.sp,
|
|
fontWeight = FontWeight.Bold,
|
|
color = Color(0xFF6B008A)
|
|
)
|
|
|
|
Spacer(modifier = Modifier.height(4.dp))
|
|
|
|
// Tagline
|
|
Text(
|
|
text = "Find your frequency.",
|
|
fontSize = 13.sp,
|
|
color = Color.DarkGray,
|
|
fontWeight = FontWeight.Medium
|
|
)
|
|
}
|
|
|
|
// BOTTOM OVERLAY CARD: Login Form & Options
|
|
Surface(
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.padding(bottom = 12.dp),
|
|
shape = RoundedCornerShape(28.dp),
|
|
color = Color.White.copy(alpha = 0.85f),
|
|
shadowElevation = 12.dp
|
|
) {
|
|
Column(
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.padding(start = 20.dp, top = 24.dp, end = 20.dp, bottom = 16.dp),
|
|
horizontalAlignment = Alignment.CenterHorizontally
|
|
) {
|
|
// Google Sign In
|
|
Button(
|
|
onClick = onGoogleClick,
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.height(48.dp),
|
|
shape = RoundedCornerShape(12.dp),
|
|
colors = ButtonDefaults.buttonColors(
|
|
containerColor = Color(0xFFEEEEEE).copy(alpha = 0.8f)
|
|
),
|
|
elevation = ButtonDefaults.buttonElevation(defaultElevation = 0.dp)
|
|
) {
|
|
Row(verticalAlignment = Alignment.CenterVertically) {
|
|
Icon(
|
|
painter = painterResource(id = R.drawable.googleicon),
|
|
contentDescription = "Google Logo",
|
|
tint = Color.Unspecified,
|
|
modifier = Modifier.size(20.dp)
|
|
)
|
|
Spacer(modifier = Modifier.width(8.dp))
|
|
Text(
|
|
text = "Continue with Google",
|
|
color = Color.DarkGray,
|
|
fontSize = 13.sp,
|
|
fontWeight = FontWeight.SemiBold
|
|
)
|
|
}
|
|
}
|
|
|
|
Spacer(modifier = Modifier.height(10.dp))
|
|
|
|
// WeChat Sign In
|
|
Button(
|
|
onClick = onWeChatClick,
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.height(48.dp),
|
|
shape = RoundedCornerShape(12.dp),
|
|
colors = ButtonDefaults.buttonColors(
|
|
containerColor = Color(0xFFD8F3E5)
|
|
),
|
|
elevation = ButtonDefaults.buttonElevation(defaultElevation = 0.dp)
|
|
) {
|
|
Row(verticalAlignment = Alignment.CenterVertically) {
|
|
Icon(
|
|
painter = painterResource(id = R.drawable.wechatlog),
|
|
contentDescription = "WeChat Logo",
|
|
tint = Color(0xFF07C160),
|
|
modifier = Modifier.size(20.dp)
|
|
)
|
|
Spacer(modifier = Modifier.width(8.dp))
|
|
Text(
|
|
text = "Continue with WeChat",
|
|
color = Color(0xFF07C160),
|
|
fontSize = 13.sp,
|
|
fontWeight = FontWeight.SemiBold
|
|
)
|
|
}
|
|
}
|
|
|
|
Spacer(modifier = Modifier.height(16.dp))
|
|
|
|
// Email or Phone Input
|
|
OutlinedTextField(
|
|
value = emailOrPhone,
|
|
onValueChange = { emailOrPhone = it },
|
|
placeholder = {
|
|
Text(
|
|
text = "Email or Phone Number",
|
|
fontSize = 12.sp,
|
|
color = Color.Gray
|
|
)
|
|
},
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.height(52.dp),
|
|
shape = RoundedCornerShape(12.dp),
|
|
singleLine = true,
|
|
colors = OutlinedTextFieldDefaults.colors(
|
|
focusedContainerColor = Color(0xFFEFEFEF).copy(alpha = 0.6f),
|
|
unfocusedContainerColor = Color(0xFFEFEFEF).copy(alpha = 0.6f),
|
|
focusedBorderColor = Color.Transparent,
|
|
unfocusedBorderColor = Color.Transparent,
|
|
focusedTextColor = Color.Black,
|
|
unfocusedTextColor = Color.Black
|
|
),
|
|
keyboardOptions = KeyboardOptions(
|
|
keyboardType = KeyboardType.Email,
|
|
imeAction = ImeAction.Done
|
|
)
|
|
)
|
|
|
|
Spacer(modifier = Modifier.height(14.dp))
|
|
|
|
// Continue Button
|
|
Button(
|
|
onClick = { onContinueClick(emailOrPhone) },
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.height(48.dp),
|
|
shape = RoundedCornerShape(12.dp),
|
|
colors = ButtonDefaults.buttonColors(
|
|
containerColor = Color(0xFFC2003B)
|
|
)
|
|
) {
|
|
Text(
|
|
text = "Continue",
|
|
color = Color.White,
|
|
fontSize = 14.sp,
|
|
fontWeight = FontWeight.Bold
|
|
)
|
|
}
|
|
|
|
Spacer(modifier = Modifier.height(16.dp))
|
|
|
|
// OR Divider
|
|
Row(
|
|
modifier = Modifier.fillMaxWidth(),
|
|
verticalAlignment = Alignment.CenterVertically
|
|
) {
|
|
HorizontalDivider(
|
|
modifier = Modifier.weight(1f),
|
|
thickness = 0.8.dp,
|
|
color = Color.LightGray
|
|
)
|
|
Text(
|
|
text = "or",
|
|
fontSize = 11.sp,
|
|
color = Color.Gray,
|
|
modifier = Modifier.padding(horizontal = 8.dp)
|
|
)
|
|
HorizontalDivider(
|
|
modifier = Modifier.weight(1f),
|
|
thickness = 0.8.dp,
|
|
color = Color.LightGray
|
|
)
|
|
}
|
|
|
|
Spacer(modifier = Modifier.height(14.dp))
|
|
|
|
// Join Now Navigation Row
|
|
Row(
|
|
verticalAlignment = Alignment.CenterVertically,
|
|
horizontalArrangement = Arrangement.Center
|
|
) {
|
|
Text(
|
|
text = "Don't have an account? ",
|
|
fontSize = 11.sp,
|
|
color = Color.Gray
|
|
)
|
|
Text(
|
|
text = "Join Now",
|
|
fontSize = 11.sp,
|
|
fontWeight = FontWeight.Bold,
|
|
color = Color(0xFFC2003B),
|
|
modifier = Modifier.clickable { onJoinNowClick() }
|
|
)
|
|
}
|
|
|
|
Spacer(modifier = Modifier.height(10.dp))
|
|
|
|
// Terms and Conditions Disclaimer
|
|
Text(
|
|
text = "By continuing, you agree to our Terms of Service and Privacy Policy.",
|
|
fontSize = 9.sp,
|
|
color = Color.Gray,
|
|
textAlign = TextAlign.Center,
|
|
lineHeight = 12.sp,
|
|
modifier = Modifier.padding(horizontal = 12.dp)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@Preview(showBackground = true, showSystemUi = true)
|
|
@Composable
|
|
fun LoginScreenPreview() {
|
|
LoginScreenContent()
|
|
}
|