made responsive screens - [Started & Login]

.idea/deploymentTargetDropDown.xml

@@ -6,7 +6,20 @@
         <State />
       </entry>
       <entry key="app">
-        <State />
+        <State>
+          <runningDeviceTargetSelectedWithDropDown>
+            <Target>
+              <type value="RUNNING_DEVICE_TARGET" />
+              <deviceKey>
+                <Key>
+                  <type value="SERIAL_NUMBER" />
+                  <value value="1C051FDF60048Z" />
+                </Key>
+              </deviceKey>
+            </Target>
+          </runningDeviceTargetSelectedWithDropDown>
+          <timeTargetWasSelectedWithDropDown value="2024-04-17T10:07:38.236077208Z" />
+        </State>
       </entry>
     </value>
   </component>

app/src/main/java/com/vpn/fastestvpnservice/screens/LoginScreen.kt

@@ -1,25 +1,16 @@
 package com.vpn.fastestvpnservice.screens
 
-
 import android.content.Intent
 import android.content.res.Configuration
-import android.gesture.Gesture
 import android.location.Location
 import android.util.Log
-import android.widget.TextView
-import android.widget.Toast
-import androidx.activity.OnBackPressedCallback
-import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
@@ -31,54 +22,34 @@ 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.foundation.layout.width
-import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.ClickableText
-import androidx.compose.foundation.text.KeyboardActionScope
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.Snackbar
-import androidx.compose.material.SnackbarDuration
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.AddAlert
-import androidx.compose.material.icons.filled.Email
-import androidx.compose.material.icons.filled.Home
-import androidx.compose.material.icons.filled.Lock
-import androidx.compose.material.icons.filled.Visibility
-import androidx.compose.material.icons.filled.VisibilityOff
 import androidx.compose.material.icons.filled.Warning
 import androidx.compose.material.icons.outlined.Visibility
 import androidx.compose.material.rememberScaffoldState
 import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonColors
 import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.ButtonElevation
 import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.ElevatedButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Shapes
-import androidx.compose.material3.SnackbarDefaults
-import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
-import androidx.compose.material3.TextFieldColors
 import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.setValue
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCompositionContext
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
@@ -94,7 +65,6 @@ import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
@@ -102,23 +72,17 @@ import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
-import androidx.navigation.NavController
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import com.vpn.fastestvpnservice.R
-import com.vpn.fastestvpnservice.beans.DataResponse
 import com.vpn.fastestvpnservice.beans.Server
-import com.vpn.fastestvpnservice.beans.UserResponse
 import com.vpn.fastestvpnservice.beans.filterList
 import com.vpn.fastestvpnservice.beans.isDarkTheme
-import com.vpn.fastestvpnservice.beans.themesList
 import com.vpn.fastestvpnservice.constants.smartConnect
 import com.vpn.fastestvpnservice.helpers.BasePreferenceHelper
-import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddText
 import com.vpn.fastestvpnservice.sealedClass.Screen
 import com.vpn.fastestvpnservice.ui.theme.customTypography
 import com.vpn.fastestvpnservice.ui.theme.outfitFontFamily
@@ -128,7 +92,6 @@ import com.vpn.fastestvpnservice.views.ShowCustomSnackBar
 import com.vpn.fastestvpnservice.widgets.SimpleAppWidget
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
-import kotlin.coroutines.coroutineContext
 import kotlin.random.Random
 
 @OptIn(ExperimentalComposeUiApi::class)
@@ -172,6 +135,310 @@ fun Login(navHostController: NavHostController) {
                     },
             ) {
                 ShowCustomSnackBar(snackBarState)
+                Image(
+                    painter = painterResource(
+                        id = R.drawable.fastestapp_logo3x),
+                    contentDescription = "FastestVPN",
+                    modifier = Modifier
+                        .padding(top = 40.dp)
+                        .size(width = 75.dp, height = 102.dp)
+                        .align(Alignment.TopCenter)
+                    ,
+                )
+
+                Column (
+                    modifier = Modifier.align(Alignment.Center),
+                    verticalArrangement = Arrangement.Center,
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                        TextMsg(
+                            text = "Welcome Back!",
+                            color = Color.White,
+                            style = MaterialTheme.typography.displayLarge
+                        )
+                        Spacer(modifier = Modifier.height(8.dp))
+                        TextMsg(
+                            text = "Please login to your account.",
+                            color = colorResource(id = R.color.white),
+                            style = MaterialTheme.typography.customTypography.labelLarge,
+                            alpha = 0.6F
+                        )
+
+                        Spacer(modifier = Modifier.height(20.dp))
+                        TextField(
+                            value = textChanged,
+                            onValueChange = {
+                                textChanged = it
+                            },
+                            readOnly = readOnly!!,
+                            textStyle = MaterialTheme.typography.customTypography.bodyMedium,
+                            modifier = Modifier
+                                .padding(start = 15.dp, end = 15.dp)
+                                .align(Alignment.Start)
+                                .fillMaxWidth()
+                                .height(60.dp)
+                                .border(
+                                    1.dp,
+                                    color = if (showErrorEmail) colorResource(id = R.color.red)
+                                    else colorResource(id = R.color.white),
+                                    shape = RoundedCornerShape(16.dp)
+                                )
+                                .clickable() { },
+
+//                placeholder = {
+//                    Text(text = "Enter email address",
+//                        color = colorResource(id = R.color.white))
+//                },
+                            label = {
+                                Text(text = "Email",
+                                    style = MaterialTheme.typography.customTypography.bodySmall
+                                )
+                            },
+                            leadingIcon = {
+                                Icon(
+                                    painter = painterResource(id = R.drawable.sms3x),
+                                    contentDescription = "Email Logo",
+                                    tint = colorResource(id = R.color.white),
+                                    modifier = Modifier
+                                        .size(24.dp, 24.dp)
+                                )
+                            },
+                            maxLines = 1,
+                            colors = TextFieldDefaults.colors(
+                                focusedLabelColor = Color.Blue,
+                                unfocusedContainerColor = colorResource(id = R.color.transparent),
+                                focusedContainerColor = colorResource(id = R.color.transparent),
+                                focusedIndicatorColor = colorResource(id = R.color.transparent),
+                                disabledIndicatorColor = colorResource(id = R.color.transparent),
+                                unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+                                cursorColor = colorResource(id = R.color.white)
+                            ),
+                            keyboardOptions = KeyboardOptions(
+                                keyboardType = KeyboardType.Email,
+                                imeAction = ImeAction.Done
+                            ),
+                            keyboardActions = KeyboardActions(
+                                onDone = {
+                                    focusManager.clearFocus()
+                                    keyboardController?.hide()
+                                }
+                            ),
+
+                            )
+
+                        if (showErrorEmail) {
+                            ShowErrorRow(errorText = "Email is Empty")
+                        }
+
+                        Spacer(modifier = Modifier.height(20.dp))
+
+                        val color = if (showErrorPass1) {
+                            colorResource(id = R.color.red)
+                        }
+                        else if (showErrorPass2) {
+                            colorResource(id = R.color.red)
+                        }
+                        else {
+                            MaterialTheme.colorScheme.secondaryContainer
+                        }
+
+                        TextField(
+                            value = passwordChanged,
+                            onValueChange = {
+//                            Log.d("onClick_test", "onValueChange -> ")
+                                passwordChanged = it
+                            },
+                            readOnly = readOnly,
+
+                            textStyle = MaterialTheme.typography.customTypography.bodyLarge,
+                            modifier = Modifier
+                                .padding(start = 15.dp, end = 15.dp)
+                                .align(Alignment.Start)
+                                .fillMaxWidth()
+                                .height(60.dp)
+                                .border(
+                                    1.dp,
+                                    color = color,
+                                    shape = RoundedCornerShape(16.dp)
+                                )
+                                .background(color = colorResource(id = R.color.transparent))
+                                .clickable() {},
+
+                            shape = RoundedCornerShape(15.dp),
+//                placeholder = {
+//                    Text(text = "Enter password",
+//                        color = colorResource(id = R.color.white))
+//                },
+                            label = {
+                                Text(text = "Password",
+                                    style = MaterialTheme.typography.customTypography.bodyLarge
+                                )
+                            },
+                            leadingIcon = {
+                                Icon(
+                                    painter = painterResource(id = R.drawable.lock3x),
+                                    contentDescription = "Password Logo",
+                                    tint = colorResource(id = R.color.white),
+                                    modifier = Modifier
+                                        .size(24.dp, 24.dp)
+                                )
+                            },
+                            maxLines = 1,
+                            colors = TextFieldDefaults.colors(
+                                focusedLabelColor = Color.Blue,
+                                unfocusedContainerColor = MaterialTheme.colorScheme.secondaryContainer,
+                                focusedContainerColor = MaterialTheme.colorScheme.secondaryContainer,
+                                focusedIndicatorColor = colorResource(id = R.color.transparent),
+                                disabledIndicatorColor = colorResource(id = R.color.transparent),
+                                unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+                                cursorColor = colorResource(id = R.color.white)
+                            ),
+                            keyboardOptions = KeyboardOptions(
+                                keyboardType = KeyboardType.Password,
+                                imeAction = ImeAction.Done
+                            ),
+                            keyboardActions = KeyboardActions(
+                                onDone = {
+                                    focusManager.clearFocus()
+                                    keyboardController?.hide()
+                                }
+                            ),
+                            visualTransformation =
+                            if (passwordVisible) VisualTransformation.Companion.None
+                            else PasswordVisualTransformation(),
+
+                            trailingIcon = {
+//                    val image
+//                            = if (passwordVisible) Icons.Filled.Visibility
+//                    else Icons.Filled.VisibilityOff
+
+                                val description = if (passwordVisible) "Hide Password"
+                                else "Show Password"
+
+                                IconButton(onClick = {
+                                    if (!readOnly) {
+                                        passwordVisible = !passwordVisible
+                                    }
+                                })
+                                {
+                                    if (passwordVisible) {
+                                        Icon(
+                                            imageVector = Icons.Outlined.Visibility,
+                                            contentDescription = description,
+                                            tint = colorResource(id = R.color.white),
+                                            modifier = Modifier.size(24.dp)
+                                        )
+                                    }
+                                    else {
+                                        Icon(
+                                            painter = painterResource(id = R.drawable.eye_slash3x),
+                                            contentDescription = description,
+                                            tint = colorResource(id = R.color.white),
+                                            modifier = Modifier.size(24.dp)
+                                        )
+                                    }
+                                }
+                            }
+                        )
+
+                        if (showErrorPass1) {
+                            ShowErrorRow(errorText = "Password is Empty")
+                        }
+                        else if (showErrorPass2) {
+                            ShowErrorRow(errorText = "Should be 3 or more!")
+                        }
+
+                        Spacer(modifier = Modifier.height(10.dp))
+                        ClickableText(
+                            onClick = {
+                                if (!readOnly) {
+//                                Log.d("onClick_test", "Forgot Password Clicked")
+                                    navHostController.navigate(Screen.ForgotPassword.route)
+                                }
+                            },
+                            modifier = Modifier
+                                .padding(end = 15.dp)
+                                .align(Alignment.End),
+                            style = MaterialTheme.typography.customTypography.titleSmall,
+                            text = AnnotatedString("Forgot Password"),
+                        )
+                }
+
+                Column(
+                    modifier = Modifier.align(Alignment.BottomCenter)
+                ) {
+                    SignInButton(
+                        navHostController = navHostController,
+                        textChanged,
+                        passwordChanged,
+                        loginViewModel = loginViewModel,
+                        basePreferenceHelper,
+                        showErrorEmail = {
+                            showErrorEmail = it
+                        },
+                        showErrorEmail,
+                        showErrorPass = {
+                            showErrorPass1 = it
+                        },
+                        showErrorPass1,
+                        showErrorPass2 = {
+                            showErrorPass2 = it
+                        },
+                        showErrorPass2,
+                        snackBarState
+                    )
+                    Row (
+                        modifier = Modifier
+                            .padding(bottom = 25.dp)
+                            .align(Alignment.CenterHorizontally),
+                    ){
+                        TextMsgSignUp(navHostController = navHostController, loginViewModel, readOnly!!)
+                    }
+                }
+            }
+        }
+    )
+}
+
+@Composable
+fun Login2(navHostController: NavHostController) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+    val random = Random.nextInt(1,999)
+    val loginViewModel: LoginViewModel = viewModel()
+    val readOnly = loginViewModel.liveDataLoginStatus.observeAsState().value
+    var textChanged by remember { mutableStateOf("") }
+    var passwordChanged by remember { mutableStateOf("") }
+    var passwordVisible by remember { mutableStateOf(false) }
+    var showErrorEmail by remember { mutableStateOf(false) }
+    var showErrorPass1 by remember { mutableStateOf(false) }
+    var showErrorPass2 by remember { mutableStateOf(false) }
+    val context = LocalContext.current
+    val basePreferenceHelper = BasePreferenceHelper(context)
+    val snackBarState = remember { SnackbarHostState() }
+
+    Scaffold(
+        content = { padding ->
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .paint(
+                        painter = painterResource(id = if (isDarkTheme.value) R.drawable.bg_app else R.drawable.bg_img3),
+                        contentScale = ContentScale.FillBounds
+                    )
+                    .alpha(if (readOnly == true) 0.6F else 1F)
+//            .background(
+//                if (isSystemInDarkTheme()) Color.Black
+//                else Color.Transparent
+//            )
+                    .pointerInput(Unit) {
+                        detectTapGestures {
+                            focusManager.clearFocus()
+                            keyboardController?.hide()
+                        }
+                    },
+            ) {
+                ShowCustomSnackBar(snackBarState)
 
                 Column (
                     modifier = Modifier
@@ -411,26 +678,26 @@ fun Login(navHostController: NavHostController) {
 
                 }
 
-                SignInButton(
-                    navHostController = navHostController,
-                    textChanged,
-                    passwordChanged,
-                    loginViewModel = loginViewModel,
-                    basePreferenceHelper,
-                    showErrorEmail = {
-                        showErrorEmail = it
-                    },
-                    showErrorEmail,
-                    showErrorPass = {
-                        showErrorPass1 = it
-                    },
-                    showErrorPass1,
-                    showErrorPass2 = {
-                        showErrorPass2 = it
-                    },
-                    showErrorPass2,
-                    snackBarState
-                )
+//                SignInButton(
+//                    navHostController = navHostController,
+//                    textChanged,
+//                    passwordChanged,
+//                    loginViewModel = loginViewModel,
+//                    basePreferenceHelper,
+//                    showErrorEmail = {
+//                        showErrorEmail = it
+//                    },
+//                    showErrorEmail,
+//                    showErrorPass = {
+//                        showErrorPass1 = it
+//                    },
+//                    showErrorPass1,
+//                    showErrorPass2 = {
+//                        showErrorPass2 = it
+//                    },
+//                    showErrorPass2,
+//                    snackBarState
+//                )
                 Row (
                     modifier = Modifier
                         .align(Alignment.BottomCenter)
@@ -443,7 +710,6 @@ fun Login(navHostController: NavHostController) {
     )
 }
 
-
 @Composable
 fun ColumnScope.ShowErrorRow(
     errorText: String
@@ -485,7 +751,7 @@ fun RowScope.TextMsgSignUp(
         )
         ClickableText(
             onClick = {
-                if (isEnabled == false) {
+                if (!isEnabled) {
                     navHostController.navigate(Screen.SignUp.route)
                 }
             },
@@ -499,7 +765,7 @@ fun RowScope.TextMsgSignUp(
 
 
 @Composable
-fun BoxScope.SignInButton(
+fun ColumnScope.SignInButton(
     navHostController: NavHostController,
     email: String,
     password: String,
@@ -532,7 +798,6 @@ fun BoxScope.SignInButton(
         CircularProgressIndicator(
             progress = { progress },
             modifier = Modifier
-                .align(Alignment.Center)
                 .size(50.dp),
             color = colorResource(id = R.color.yellow_text),
             strokeWidth = 5.dp,
@@ -565,9 +830,8 @@ fun BoxScope.SignInButton(
         modifier = Modifier
             .padding(
                 start = 15.dp, end = 15.dp,
-                bottom = 109.dp
+                bottom = 25.dp
             )
-            .align(Alignment.BottomCenter)
             .background(colorResource(id = R.color.transparent))
             .fillMaxWidth()
             .height(60.dp)

app/src/main/java/com/vpn/fastestvpnservice/screens/SignUpScreen.kt

@@ -525,6 +525,422 @@ fun SignUp(navHostController: NavHostController) {
 }
 
 @Composable
+fun SignUp2(navHostController: NavHostController) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+    val signUpViewModel: SignUpViewModel = viewModel()
+    var isSignUpEnabled = signUpViewModel.liveDataSignUpStatus.observeAsState().value
+
+    var textChanged by remember { mutableStateOf("") }
+    var passwordChanged by remember { mutableStateOf("") }
+    var passwordVisible by remember { mutableStateOf(false) }
+    var showErrorEmail by remember { mutableStateOf(false) }
+    var showErrorEmail2 by remember { mutableStateOf(false) }
+    var showErrorPass1 by remember { mutableStateOf(false) }
+    var showErrorPass2 by remember { mutableStateOf(false) }
+    val snackBarState = remember { SnackbarHostState() }
+
+    Scaffold(
+        content = { padding ->
+            Box(
+                modifier = Modifier
+                    .paint(
+                        painter = painterResource(id = if (isDarkTheme.value) R.drawable.bg_app else R.drawable.bg_img3),
+                        contentScale = ContentScale.FillBounds
+                    )
+                    .alpha(if (isSignUpEnabled!!) 0.6F else 1F)
+//            .background(
+//                if (isSystemInDarkTheme()) Color.Black
+//                else Color.Transparent
+//            )
+                    .fillMaxSize()
+                    .pointerInput(Unit) {
+                        detectTapGestures {
+                            focusManager.clearFocus()
+                            keyboardController?.hide()
+                        }
+                    },
+            ) {
+                ShowCustomSnackBar(snackBarState)
+
+                Column (
+                    modifier = Modifier
+                        .fillMaxHeight()
+                        .fillMaxWidth()
+                    ,
+                    verticalArrangement = Arrangement.Top,
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+
+                    Spacer(modifier = Modifier.height(50.dp))
+
+                    IconButton(
+                        onClick = {
+                            if (!isSignUpEnabled) {
+                                navHostController.popBackStack()
+                            }
+                        },
+                        modifier = Modifier
+                            .padding(start = 16.dp, top = 25.dp)
+                            .align(Alignment.Start)
+                    )
+                    {
+                        Icon(painter = painterResource(
+                            id = R.drawable.back_arrow3x),
+                            contentDescription = "Back Button",
+                            tint = colorResource(id = R.color.white),
+                            modifier = Modifier
+                                .height(36.dp)
+                                .width(36.dp)
+                                .align(Alignment.Start),
+                        )
+                    }
+                    Spacer(modifier = Modifier.height(44.dp))
+
+                    Image(
+                        painter = painterResource(id = R.drawable.fastestapp_logo3x),
+                        contentDescription = "FastestVPN",
+                        modifier = Modifier
+                            .size(75.dp, 102.dp)
+                            .background(Color.Transparent)
+                            .padding(top = 0.dp),
+                    )
+                    Spacer(modifier = Modifier.height(50.dp))
+                    Text(
+                        modifier = Modifier
+                            .padding(start = 15.dp)
+                            .align(Alignment.Start)
+                        ,
+                        style = MaterialTheme.typography.displayLarge,
+                        text = "Hello There!",
+                        color = Color.White,
+                    )
+                    Text(
+                        modifier = Modifier
+                            .padding(start = 15.dp)
+                            .align(Alignment.Start)
+                            .alpha(0.6F),
+                        style = MaterialTheme.typography.customTypography.labelLarge,
+                        text = "Please register your account.",
+                        color = colorResource(id = R.color.white),
+                    )
+                    Spacer(modifier = Modifier.height(20.dp))
+
+                    val colorEmail = if (showErrorEmail || showErrorEmail2) {
+                        colorResource(id = R.color.red)
+                    } else {
+                        colorResource(id = R.color.white)
+                    }
+
+                    TextField(
+                        value = textChanged,
+                        onValueChange = {
+                            textChanged = it
+                        },
+                        readOnly = isSignUpEnabled,
+                        textStyle = MaterialTheme.typography.customTypography.bodyMedium,
+                        modifier = Modifier
+                            .padding(start = 15.dp, end = 15.dp, top = 10.dp)
+                            .align(Alignment.Start)
+                            .fillMaxWidth()
+                            .height(60.dp)
+                            .border(
+                                1.dp,
+                                color = colorEmail,
+                                shape = RoundedCornerShape(16.dp)
+                            ),
+
+//                placeholder = {
+//                    Text(text = "Enter email address",
+//                        color = colorResource(id = R.color.white),
+//                        fontSize = 14.sp,
+//                    )
+//                },
+                        label = {
+                            Text(text = "Email",
+                                style = MaterialTheme.typography.customTypography.bodySmall
+                            )
+                        },
+                        leadingIcon = {
+                            Icon(
+                                painter = painterResource(id = R.drawable.sms3x),
+                                contentDescription = "Email Logo",
+                                tint = colorResource(id = R.color.white),
+                                modifier = Modifier
+                                    .size(24.dp, 24.dp)
+                            )
+                        },
+                        maxLines = 1,
+                        colors = TextFieldDefaults.colors(
+                            focusedLabelColor = Color.Blue,
+                            unfocusedContainerColor = colorResource(id = R.color.transparent),
+                            focusedContainerColor = colorResource(id = R.color.transparent),
+                            focusedIndicatorColor = colorResource(id = R.color.transparent),
+                            disabledIndicatorColor = colorResource(id = R.color.transparent),
+                            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+                            cursorColor = colorResource(id = R.color.white)
+                        ),
+                        keyboardOptions = KeyboardOptions(
+                            keyboardType = KeyboardType.Email,
+                            imeAction = ImeAction.Done
+                        ),
+                        keyboardActions = KeyboardActions(
+                            onDone = {
+                                focusManager.clearFocus()
+                                keyboardController?.hide()
+                            }
+                        ),
+                    )
+
+                    if (showErrorEmail) {
+                        ShowErrorRow(errorText = "Email is Empty")
+                    }
+                    else if (showErrorEmail2) {
+                        ShowErrorRow(errorText = "Email format incorrect")
+                    }
+
+                    Spacer(modifier = Modifier.height(20.dp))
+
+                    val colorPass = if (showErrorPass1 || showErrorPass2) {
+                        colorResource(id = R.color.red)
+                    } else {
+                        MaterialTheme.colorScheme.secondaryContainer
+                    }
+
+                    TextField(
+                        value = passwordChanged,
+                        onValueChange = {
+                            Log.d("onClick_test", "onValueChange -> ")
+                            passwordChanged = it
+                        },
+                        readOnly = isSignUpEnabled,
+                        textStyle = MaterialTheme.typography.customTypography.bodyMedium,
+                        modifier = Modifier
+                            .padding(start = 15.dp, end = 15.dp)
+                            .align(Alignment.Start)
+                            .fillMaxWidth()
+                            .height(60.dp)
+                            .border(
+                                1.dp,
+                                color = colorPass,
+                                shape = RoundedCornerShape(16.dp)
+                            )
+                            .background(color = colorResource(id = R.color.transparent)),
+
+                        shape = RoundedCornerShape(15.dp),
+//                placeholder = {
+//                    Text(text = "Enter password",
+//                        color = colorResource(id = R.color.white))
+//                },
+                        label = {
+                            Text(text = "Password",
+                                style = MaterialTheme.typography.customTypography.bodyLarge
+                            )
+                        },
+                        leadingIcon = {
+                            Icon(
+                                painter = painterResource(id = R.drawable.lock3x),
+                                contentDescription = "Password Logo",
+                                tint = colorResource(id = R.color.white),
+                                modifier = Modifier
+                                    .size(24.dp, 24.dp)
+                            )
+                        },
+                        maxLines = 1,
+                        colors = TextFieldDefaults.colors(
+                            focusedLabelColor = Color.Blue,
+                            unfocusedContainerColor = MaterialTheme.colorScheme.secondaryContainer,
+                            focusedContainerColor = MaterialTheme.colorScheme.secondaryContainer,
+                            focusedIndicatorColor = colorResource(id = R.color.transparent),
+                            disabledIndicatorColor = colorResource(id = R.color.transparent),
+                            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+                            cursorColor = colorResource(id = R.color.white)
+                        ),
+                        keyboardOptions = KeyboardOptions(
+                            keyboardType = KeyboardType.Password,
+                            imeAction = ImeAction.Done
+                        ),
+                        keyboardActions = KeyboardActions(
+                            onDone = {
+                                focusManager.clearFocus()
+                                keyboardController?.hide()
+                            }
+                        ),
+                        visualTransformation =
+                        if (passwordVisible) VisualTransformation.None
+                        else PasswordVisualTransformation(),
+
+                        trailingIcon = {
+                            Log.d("onClick_test", "trailingIcon -> ")
+
+//                    val image
+//                            = if (passwordVisible) Icons.Filled.Visibility
+//                    else Icons.Filled.VisibilityOff
+
+                            val description = if (passwordVisible) "Hide Password"
+                            else "Show Password"
+
+                            IconButton(onClick = {
+                                if (!isSignUpEnabled) {
+                                    passwordVisible = !passwordVisible
+                                }
+                            })
+                            {
+                                if (passwordVisible) {
+                                    Icon(
+                                        imageVector = Icons.Outlined.Visibility,
+                                        contentDescription = description,
+                                        tint = colorResource(id = R.color.white),
+                                        modifier = Modifier.size(24.dp)
+                                    )
+                                }
+                                else {
+                                    Icon(
+                                        painter = painterResource(id = R.drawable.eye_slash3x),
+                                        contentDescription = description,
+                                        tint = colorResource(id = R.color.white),
+                                        modifier = Modifier.size(24.dp)
+                                    )
+                                }
+
+                            }
+                        }
+                    )
+
+                    if (showErrorPass1) {
+                        ShowErrorRow(errorText = "Password is Empty")
+                    }
+                    else if (showErrorPass2) {
+                        ShowErrorRow(errorText = "Should be 3 or more!")
+                    }
+
+                    Spacer(modifier = Modifier.height(15.dp))
+
+                    Row (
+                        modifier = Modifier
+                            .padding(start = 15.dp, top = 16.dp)
+                            .fillMaxWidth(),
+                    ){
+
+                        val colorLogo = if (showErrorEmail || showErrorEmail2 || showErrorPass1 || showErrorPass2) colorResource(
+                            id = R.color.red
+                        ) else colorResource(id = R.color.white)
+
+                        Icon(
+                            painter = painterResource(id = R.drawable.tick_square3x),
+                            contentDescription = "Logo",
+                            tint = colorLogo,
+                            modifier = Modifier.size(24.dp, 24.dp)
+                        )
+                        Text(
+                            modifier = Modifier
+                                .padding(start = 15.dp),
+                            style = MaterialTheme.typography.customTypography.bodyLarge,
+                            text = "By creating your account, you agree to",
+                            color = colorResource(id = R.color.white),
+                        )
+                    }
+
+                    Spacer(modifier = Modifier.height(0.dp))
+
+                    Row (
+                        modifier = Modifier
+                            .padding(start = 15.dp)
+                            .fillMaxWidth(),
+                    ){
+
+                        Icon(
+                            painter = painterResource(id = R.drawable.tick_square3x),
+                            contentDescription = "Logo",
+                            tint = colorResource(id = R.color.transparent),
+                            modifier = Modifier.size(24.dp),
+                        )
+                        ClickableText(
+                            onClick = {
+                                if (!isSignUpEnabled) {
+                                    navHostController.navigate(
+                                        Screen.TermsAndConditions.route
+                                    )
+                                }
+                            },
+                            modifier = Modifier
+                                .padding(start = 15.dp),
+                            text = AnnotatedString("Terms & Conditions"),
+                            style = MaterialTheme.typography.customTypography.titleLarge
+                        )
+                    }
+
+                }
+
+                SignUpButton(
+                    signUpViewModel,
+                    textChanged,
+                    passwordChanged,
+                    navHostController,
+                    showErrorEmail1 = {
+                        showErrorEmail = it
+                    },
+                    showErrorEmail,
+                    showErrorPass1 = {
+                        showErrorPass1 = it
+                    },
+                    showErrorPass1,
+                    showErrorPass2 = {
+                        showErrorPass2 = it
+                    },
+                    showErrorPass2,
+                    showErrorEmail2 = {
+                        showErrorEmail2 = it
+                    },
+                    showErrorEmail2,
+                    snackBarState
+                )
+
+                Row (
+                    modifier = Modifier
+                        .align(Alignment.BottomCenter)
+                        .padding(40.dp),
+                ){
+                    Text(
+                        modifier = Modifier
+                            .padding(0.dp),
+                        style = MaterialTheme.typography.customTypography.labelLarge,
+                        text = "Already have an account? ",
+                        color = Color.White,
+                    )
+                    ClickableText(
+                        onClick = {
+                            if (!isSignUpEnabled) {
+                                navHostController.popBackStack()
+
+                                if (navHostController.currentDestination?.id != null &&
+                                    navHostController.currentDestination?.route != null){
+                                    Log.d("test_signup", "From Sign In -> id = " + navHostController.currentDestination?.id
+                                            + " route = " + navHostController.currentDestination?.route
+                                    )
+                                }
+                                else {
+                                    Log.d("test_signup", "From Sign Up -> id = " + navHostController.currentDestination?.id
+                                            + " route = " + navHostController.currentDestination?.route
+                                    )
+                                    navHostController.navigate(Screen.Login.route)
+                                }
+                            }
+
+                        },
+                        modifier = Modifier
+                            .padding(0.dp),
+                        style = MaterialTheme.typography.customTypography.titleMedium,
+                        text = AnnotatedString(" Sign In"),
+                    )
+                }
+            }
+        }
+    )
+}
+
+@Composable
 fun ColumnScope.ShowErrorRowSignUp(
     errorText: String
 ) {

app/src/main/java/com/vpn/fastestvpnservice/screens/StartedScreen.kt

@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
@@ -58,20 +59,181 @@ fun Started(navHostController: NavHostController) {
     val screenHeight = configuration.screenHeightDp.dp
     val screenWidth = configuration.screenWidthDp.dp
 
+    val firstPart = screenHeight/1.5F
+    val secondPart = screenHeight - firstPart
+    Log.d("test_height", "$screenHeight $firstPart $secondPart")
+
+    Column(
+        modifier = Modifier.fillMaxSize()
+            .paint(
+                painter = painterResource(id = if (isDarkTheme.value) R.drawable.bgapp_dark else R.drawable.bg_img3),
+                contentScale = ContentScale.FillBounds
+            ),
+    ) {
+        Box(modifier = Modifier
+            .fillMaxSize()
+            .weight(0.6f)
+            .background(Color.Transparent),
+            contentAlignment = Alignment.Center
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.map2),
+                contentDescription = "FastestVPN Map",
+                modifier = Modifier
+                    .background(Color.Transparent)
+                    .padding(vertical = 0.dp)
+                    .fillMaxSize()
+                ,
+                contentScale = ContentScale.FillBounds
+            )
+            Image(
+                painter = painterResource(id = R.drawable.lines_fvpn3x),
+                contentDescription = "FastestVPN Lines",
+                modifier = Modifier
+                    .background(Color.Transparent)
+                    .fillMaxSize()
+                    .padding(
+                        top = 70.dp,
+                        start = 27.dp,
+                        end = 27.dp,
+                        bottom = 80.dp
+                    ),
+                contentScale = ContentScale.FillBounds
+            )
+        }
+
+        Box(modifier = Modifier
+            .fillMaxSize()
+            .weight(0.4f)
+            .background(Color.Transparent)
+            .padding(vertical = 0.dp),
+        ) {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier = Modifier.fillMaxSize().background(Color.Transparent)
+                    .padding(top = 0.dp),
+                verticalArrangement = Arrangement.Center
+                
+            ) {
+                Column (
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    modifier = Modifier.padding(top = 0.dp)
+                        .background(Color.Transparent)
+                ) {
+                    Text(
+                        modifier = Modifier
+                            .padding(bottom = 15.dp),
+                        text = "Secure. Fast. Stable.",
+                        color = colorResource(id = R.color.white),
+                        style = MaterialTheme.typography.titleLarge,
+                    )
+                    Text(
+                        modifier = Modifier
+                            .padding(start = 0.dp)
+                            .alpha(0.8F),
+                        text = "Top-notch security, blazing speed,",
+                        style = MaterialTheme.typography.customTypography.labelSmall,
+                    )
+                    Text(
+                        modifier = Modifier
+                            .padding(start = 0.dp)
+                            .alpha(0.8F),
+                        text = "Unwavering stability. Your digital world,",
+                        style = MaterialTheme.typography.customTypography.labelSmall,
+                    )
+                    Text(
+                        modifier = Modifier
+                            .padding(start = 0.dp)
+                            .alpha(0.8F),
+                        text = "Protected.",
+                        style = MaterialTheme.typography.customTypography.labelSmall,
+                    )
+                }
+
+                Row (
+                    modifier = Modifier
+                        .padding(top = 15.dp)
+                        .background(Color.Transparent),
+                    horizontalArrangement = Arrangement.Center,
+                    verticalAlignment = Alignment.Bottom
+                ) {
+                    Button(
+                        onClick = {
+                            Log.d("test_button", "onClick Send Code")
+                            navHostController.popBackStack()
+                            navHostController.navigate(Screen.Login.route)
+                        },
+                        modifier = Modifier
+                            .padding(
+                                start = 15.dp, end = 5.dp,
+                                bottom = 15.dp, top = 15.dp
+                            )
+                            .background(colorResource(id = R.color.transparent))
+                            .weight(1F)
+                            .height(60.dp),
+
+                        shape = RoundedCornerShape(15.dp),
+                        colors = ButtonDefaults.buttonColors(
+                            contentColor = MaterialTheme.colorScheme.primaryContainer,
+                            containerColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                        ),
+                    )
+                    {
+                        Text(text = "Sign In",
+                            style = MaterialTheme.typography.customTypography.labelMedium,
+                        )
+                        Log.d("test_button", "RowScope")
+                    }
+
+                    Button(
+                        onClick = {
+                            Log.d("test_button", "onClick Send Code")
+                            navHostController.popBackStack()
+                            navHostController.navigate(Screen.SignUp.route)
+                        },
+                        modifier = Modifier
+                            .padding(
+                                start = 5.dp, end = 15.dp,
+                                bottom = 15.dp, top = 15.dp
+                            )
+                            .background(colorResource(id = R.color.transparent))
+                            .weight(1F)
+                            .height(60.dp),
+
+                        shape = RoundedCornerShape(15.dp),
+                        colors = ButtonDefaults.buttonColors(
+                            contentColor = colorResource(id = R.color.white),
+                            containerColor = colorResource(id = R.color.transparent),
+                        ),
+                        border = BorderStroke(2.dp,
+                            colorResource(id = R.color.white))
+                    )
+                    {
+                        Text(text = "Sign Up",
+                            style = MaterialTheme.typography.customTypography.labelMedium,)
+                        Log.d("test_button", "RowScope")
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun Start(navHostController: NavHostController) {
+    val configuration = LocalConfiguration.current
+    val screenHeight = configuration.screenHeightDp.dp
+    val screenWidth = configuration.screenWidthDp.dp
+
     Box (
         modifier = Modifier
             .fillMaxSize()
             .paint(
                 painter = painterResource(id = if (isDarkTheme.value) R.drawable.bgapp_dark else R.drawable.bg_img3),
                 contentScale = ContentScale.FillBounds
-            )
-//            .background(
-//                if (isSystemInDarkTheme()) Color.Black
-//                else Color.Transparent
-//            )
-        ,
+            ),
         contentAlignment = Alignment.BottomCenter
-        ) {
+    ) {
         Column (
             verticalArrangement = Arrangement.Bottom,
             horizontalAlignment = Alignment.CenterHorizontally,
@@ -84,7 +246,28 @@ fun Started(navHostController: NavHostController) {
             Column (
                 verticalArrangement = Arrangement.Center,
                 horizontalAlignment = Alignment.CenterHorizontally,
-                modifier = Modifier.padding(bottom = 25.dp)
+                modifier = Modifier
+                    .padding(bottom = 20.dp)
+                    .weight(2F)
+                    .fillMaxHeight()
+                ,
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.map2),
+                    contentDescription = "FastestVPN Map",
+                    modifier = Modifier
+                        .background(Color.Transparent)
+                        .width(screenWidth)
+                    ,
+                    alignment = Alignment.TopCenter
+                )
+            }
+            Column (
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier = Modifier
+                    .padding(bottom = 20.dp)
+                    .weight(1F)
             ) {
                 Text(
                     modifier = Modifier
@@ -106,8 +289,6 @@ fun Started(navHostController: NavHostController) {
                         .alpha(0.8F),
                     text = "Unwavering stability. Your digital world,",
                     style = MaterialTheme.typography.customTypography.labelSmall,
-
-//
                 )
                 Text(
                     modifier = Modifier
@@ -115,15 +296,15 @@ fun Started(navHostController: NavHostController) {
                         .alpha(0.8F),
                     text = "Protected.",
                     style = MaterialTheme.typography.customTypography.labelSmall,
-                    )
+                )
             }
 
             Row (
                 modifier = Modifier
-                    .padding(bottom = 50.dp),
+                    .padding(bottom = 25.dp)
+                    .weight(1F),
                 horizontalArrangement = Arrangement.Center,
                 verticalAlignment = Alignment.Bottom
-
             ) {
                 Button(
                     onClick = {
@@ -149,7 +330,7 @@ fun Started(navHostController: NavHostController) {
                 {
                     Text(text = "Sign In",
                         style = MaterialTheme.typography.customTypography.labelMedium,
-                        )
+                    )
                     Log.d("test_button", "RowScope")
                 }
 
@@ -158,7 +339,7 @@ fun Started(navHostController: NavHostController) {
                         Log.d("test_button", "onClick Send Code")
                         navHostController.popBackStack()
                         navHostController.navigate(Screen.SignUp.route)
-                        },
+                    },
                     modifier = Modifier
                         .padding(
                             start = 5.dp, end = 15.dp,
@@ -186,17 +367,6 @@ fun Started(navHostController: NavHostController) {
     }
 
     Image(
-        painter = painterResource(id = R.drawable.map2),
-        contentDescription = "FastestVPN Map",
-        modifier = Modifier
-            .background(Color.Transparent)
-            .height(screenHeight)
-            .padding(top = 50.dp)
-            .width(screenWidth)
-        ,
-        alignment = Alignment.TopCenter
-    )
-    Image(
         painter = painterResource(id = R.drawable.lines_fvpn3x),
         contentDescription = "FastestVPN Lines",
         modifier = Modifier
@@ -206,11 +376,9 @@ fun Started(navHostController: NavHostController) {
             .padding(
                 top = 123.dp, start = 27.dp,
                 end = 27.dp
-            )
-        ,
+            ),
         alignment = Alignment.TopCenter
     )
-
 }
 
 @Preview