Feature: convert login into jetpack compose

mifospay/build.gradle

@@ -25,6 +25,11 @@ android {
     }
     buildFeatures{
         dataBinding true
+        compose = true
+    }
+
+    composeOptions {
+        kotlinCompilerExtensionVersion "1.5.3"
     }
 
     aaptOptions {
@@ -71,6 +76,17 @@ dependencies {
     // Splash API
     implementation("androidx.core:core-splashscreen:1.0.1")
 
+    // Compose
+    implementation(platform("androidx.compose:compose-bom:2023.03.00"))
+    implementation("androidx.compose.ui:ui")
+    implementation("androidx.compose.ui:ui-graphics")
+    implementation("androidx.compose.ui:ui-tooling-preview")
+    implementation("androidx.compose.material3:material3")
+
+    implementation("androidx.activity:activity-compose:1.8.0")
+    runtimeOnly("androidx.compose.runtime:runtime:$compose_version")
+    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
+
     implementation "com.google.dagger:dagger:$rootProject.daggerVersion"
     kapt "com.google.dagger:dagger-compiler:$rootProject.daggerVersion"
 

mifospay/src/main/java/org/mifos/mobilewallet/mifospay/auth/ui/LoginActivity.kt

@@ -2,12 +2,10 @@ package org.mifos.mobilewallet.mifospay.auth.ui
 
 import android.content.Intent
 import android.os.Bundle
-import com.google.android.material.textfield.TextInputEditText
 import android.text.Editable
 import android.text.TextWatcher
-import android.widget.Button
 import android.widget.Toast
-import butterknife.*
+import androidx.compose.ui.platform.ViewCompositionStrategy
 import com.google.android.gms.auth.api.signin.GoogleSignIn
 import com.google.android.gms.auth.api.signin.GoogleSignInAccount
 import com.google.android.gms.auth.api.signin.GoogleSignInClient
@@ -25,6 +23,7 @@ import org.mifos.mobilewallet.mifospay.databinding.ActivityLoginBinding
 import org.mifos.mobilewallet.mifospay.passcode.ui.PassCodeActivity
 import org.mifos.mobilewallet.mifospay.registration.ui.MobileVerificationActivity
 import org.mifos.mobilewallet.mifospay.registration.ui.SignupMethod
+import org.mifos.mobilewallet.mifospay.theme.MifosTheme
 import org.mifos.mobilewallet.mifospay.utils.Constants
 import org.mifos.mobilewallet.mifospay.utils.DebugUtil
 import org.mifos.mobilewallet.mifospay.utils.Toaster
@@ -51,6 +50,20 @@ class LoginActivity : BaseActivity(), LoginView {
         activityComponent.inject(this)
         setContentView(binding.root)
         mPresenter.attachView(this)
+
+        binding.loginCompose.apply {
+            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+            setContent {
+                MifosTheme {
+                    LoginScreen({
+                        onLoginClicked()
+                    }, {
+                        onSignupClicked()
+                    })
+                }
+            }
+        }
+
         val pref = PasscodePreferencesHelper(applicationContext)
         if (pref.passCode.isNotEmpty()) {
             startPassCodeActivity()

mifospay/src/main/java/org/mifos/mobilewallet/mifospay/auth/ui/LoginScreen.kt

@@ -0,0 +1,138 @@
+package org.mifos.mobilewallet.mifospay.auth.ui
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Text
+import androidx.compose.material.TextField
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.mifos.mobilewallet.mifospay.theme.MifosTheme
+import org.mifos.mobilewallet.mifospay.theme.grey
+import org.mifos.mobilewallet.mifospay.theme.styleMedium16sp
+import org.mifos.mobilewallet.mifospay.theme.styleMedium30sp
+import org.mifos.mobilewallet.mifospay.theme.styleNormal18sp
+
+@Composable
+fun LoginScreen(
+    login: () -> Unit,
+    signUp: () -> Unit
+) {
+    var userName by rememberSaveable { mutableStateOf("") }
+    var password by rememberSaveable { mutableStateOf("") }
+    MifosTheme {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(Color.White)
+                .verticalScroll(rememberScrollState())
+                .padding(top = 100.dp, start = 48.dp, end = 48.dp),
+            horizontalAlignment = Alignment.Start
+        ) {
+            Text(
+                text = "Login",
+                style = styleMedium30sp
+            )
+            Text(
+                modifier = Modifier
+                    .padding(top = 32.dp),
+                text = "Welcome back!",
+                style = styleNormal18sp.copy(color = grey)
+            )
+            TextField(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 32.dp),
+                value = userName,
+                onValueChange = {
+                    userName = it
+                },
+                label = { Text("Username") }
+            )
+            TextField(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 16.dp),
+                value = password,
+                onValueChange = {
+                    password = it
+                },
+                label = { Text("Password") }
+            )
+            Button(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 16.dp),
+                colors = ButtonDefaults.buttonColors(backgroundColor = Color.Black),
+                enabled = userName.isNotEmpty() && password.isNotEmpty(),
+                onClick = {
+                    login.invoke()
+                }
+            ) {
+                Text(text = "Login", style = styleMedium16sp.copy(color = Color.White))
+            }
+            // Hide reset password for now
+            /*Text(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 32.dp),
+                text = "Forgot Password",
+                textAlign = TextAlign.Center,
+                style = styleMedium16sp.copy(
+                    textDecoration = TextDecoration.Underline,
+                )
+            )
+            Text(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 24.dp),
+                text = "OR",
+                textAlign = TextAlign.Center,
+                style = styleMedium16sp.copy(color = grey)
+            )*/
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 24.dp),
+                horizontalArrangement = Arrangement.Center
+            ) {
+                Text(
+                    text = "Don’t have an account yet? ",
+                    style = styleMedium16sp
+                )
+                Text(
+                    modifier = Modifier.clickable {
+                        signUp.invoke()
+                    },
+                    text = "Sign up.",
+                    style = styleMedium16sp.copy(
+                        textDecoration = TextDecoration.Underline,
+                    ),
+                )
+            }
+        }
+    }
+}
+
+@Preview(showSystemUi = true, device = "id:pixel_5")
+@Composable
+fun LoanScreenPreview() {
+    LoginScreen({}, {})
+}

mifospay/src/main/java/org/mifos/mobilewallet/mifospay/theme/Color.kt

@@ -0,0 +1,15 @@
+package org.mifos.mobilewallet.mifospay.theme
+
+import androidx.compose.ui.graphics.Color
+
+val Purple80 = Color(0xFFD0BCFF)
+val PurpleGrey80 = Color(0xFFCCC2DC)
+val Pink80 = Color(0xFFEFB8C8)
+
+val Purple40 = Color(0xFF6650a4)
+val PurpleGrey40 = Color(0xFF625b71)
+val Pink40 = Color(0xFF7D5260)
+
+// colors
+val black = Color(0xFF000000)
+val grey = Color(0xFF757074)

mifospay/src/main/java/org/mifos/mobilewallet/mifospay/theme/MifosTextStyle.kt

@@ -0,0 +1,27 @@
+package org.mifos.mobilewallet.mifospay.theme
+
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+val styleMedium16sp = TextStyle(
+    fontSize = 16.sp,
+    fontFamily = FontFamily.SansSerif,
+    fontWeight = FontWeight.Medium,
+    color = black,
+)
+
+val styleNormal18sp = TextStyle(
+    fontSize = 18.sp,
+    fontFamily = FontFamily.SansSerif,
+    fontWeight = FontWeight.Normal,
+    color = black,
+)
+
+val styleMedium30sp = TextStyle(
+    fontSize = 30.sp,
+    fontFamily = FontFamily.SansSerif,
+    fontWeight = FontWeight.Medium,
+    color = black,
+)

mifospay/src/main/java/org/mifos/mobilewallet/mifospay/theme/Theme.kt

@@ -0,0 +1,70 @@
+package org.mifos.mobilewallet.mifospay.theme
+
+import android.app.Activity
+import android.os.Build
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalView
+import androidx.core.view.WindowCompat
+
+private val DarkColorScheme = darkColorScheme(
+    primary = Purple80,
+    secondary = PurpleGrey80,
+    tertiary = Pink80
+)
+
+private val LightColorScheme = lightColorScheme(
+    primary = Purple40,
+    secondary = PurpleGrey40,
+    tertiary = Pink40
+
+    /* Other default colors to override
+    background = Color(0xFFFFFBFE),
+    surface = Color(0xFFFFFBFE),
+    onPrimary = Color.White,
+    onSecondary = Color.White,
+    onTertiary = Color.White,
+    onBackground = Color(0xFF1C1B1F),
+    onSurface = Color(0xFF1C1B1F),
+    */
+)
+
+@Composable
+fun MifosTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    // Dynamic color is available on Android 12+
+    dynamicColor: Boolean = true,
+    content: @Composable () -> Unit
+) {
+    val colorScheme = when {
+        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
+            val context = LocalContext.current
+            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
+        }
+
+        darkTheme -> DarkColorScheme
+        else -> LightColorScheme
+    }
+    val view = LocalView.current
+    if (!view.isInEditMode) {
+        SideEffect {
+            val window = (view.context as Activity).window
+            window.statusBarColor = colorScheme.primary.toArgb()
+            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
+        }
+    }
+
+    MaterialTheme(
+        colorScheme = colorScheme,
+        typography = Typography,
+        content = content
+    )
+}

mifospay/src/main/java/org/mifos/mobilewallet/mifospay/theme/Type.kt

@@ -0,0 +1,34 @@
+package org.mifos.mobilewallet.mifospay.theme
+
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+// Set of Material typography styles to start with
+val Typography = Typography(
+    bodyLarge = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.5.sp
+    )
+    /* Other default text styles to override
+    titleLarge = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 22.sp,
+        lineHeight = 28.sp,
+        letterSpacing = 0.sp
+    ),
+    labelSmall = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Medium,
+        fontSize = 11.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.5.sp
+    )
+    */
+)