Login Cleanup (#81)

This change request adds a bunch of cleanup after the initial infrastructure was in. Including: - Logout - A better looking login card in settings - Removing default styling on text fields - Better IME selection for text entry
EmergeTools · Jul 25, 2024 · c6173bd · c6173bd
1 parent 2cdc6aa
commit c6173bd
Show file tree

Hide file tree

Showing 7 changed files with 276 additions and 84 deletions.
diff --git a/android/app/src/main/java/com/emergetools/hackernews/AppActivity.kt b/android/app/src/main/java/com/emergetools/hackernews/AppActivity.kt
@@ -4,7 +4,6 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.browser.customtabs.CustomTabsIntent
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.slideIn
 import androidx.compose.animation.slideOut
@@ -17,21 +16,18 @@ import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationBarItemDefaults
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.IntOffset
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavDestination
 import androidx.navigation.NavHostController
+import androidx.navigation.Navigator
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.rememberNavController
 import com.emergetools.hackernews.data.ChromeTabsProvider
-import com.emergetools.hackernews.data.LocalCustomTabsIntent
-import com.emergetools.hackernews.features.bookmarks.BookmarksNavigation
 import com.emergetools.hackernews.features.bookmarks.bookmarksRoutes
 import com.emergetools.hackernews.features.comments.commentsRoutes
 import com.emergetools.hackernews.features.login.loginRoutes
@@ -40,9 +36,6 @@ import com.emergetools.hackernews.features.stories.Stories
 import com.emergetools.hackernews.features.stories.StoriesDestinations.Feed
 import com.emergetools.hackernews.features.stories.storiesGraph
 import com.emergetools.hackernews.ui.theme.HackerNewsTheme
-import com.emergetools.hackernews.ui.theme.HackerOrangeLight
-import com.emergetools.hackernews.ui.theme.HackerRed
-import com.emergetools.hackernews.ui.theme.HackerRedLight
 
 class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
@@ -60,9 +53,10 @@ class MainActivity : ComponentActivity() {
 
 @Composable
 fun rememberNavController(
+  vararg navigators: Navigator<out NavDestination>,
   onDestinationChanged: (NavDestination) -> Unit
 ): NavHostController {
-  return rememberNavController().apply {
+  return rememberNavController(*navigators).apply {
     addOnDestinationChangedListener { _, destination, _ ->
       onDestinationChanged(destination)
     }
@@ -73,9 +67,10 @@ fun rememberNavController(
 fun App() {
   val model = viewModel<AppViewModel>()
   val state by model.state.collectAsState()
-  val navController = rememberNavController() { destination ->
+  val navController = rememberNavController { destination ->
     model.actions(AppAction.DestinationChanged(destination))
   }
+
   Scaffold(
     bottomBar = {
       NavigationBar {

diff --git a/android/app/src/main/java/com/emergetools/hackernews/data/UserStorage.kt b/android/app/src/main/java/com/emergetools/hackernews/data/UserStorage.kt
@@ -16,6 +16,12 @@ class UserStorage(private val appContext: Context) {
     }
   }
 
+  suspend fun clearCookie() {
+    appContext.dataStore.edit { store ->
+      store.remove(cookieKey)
+    }
+  }
+
   fun getCookie(): Flow<String?> {
     return appContext.dataStore.data.map { it[cookieKey] }
   }

diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/login/LoginRouting.kt b/android/app/src/main/java/com/emergetools/hackernews/features/login/LoginRouting.kt
@@ -3,10 +3,11 @@ package com.emergetools.hackernews.features.login
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.window.DialogProperties
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
-import androidx.navigation.compose.composable
+import androidx.navigation.compose.dialog
 import com.emergetools.hackernews.webClient
 import kotlinx.serialization.Serializable
 
@@ -16,7 +17,12 @@ sealed interface LoginDestinations {
 }
 
 fun NavGraphBuilder.loginRoutes(navController: NavController) {
-  composable<LoginDestinations.Login> {
+  dialog<LoginDestinations.Login>(
+    dialogProperties = DialogProperties(
+      usePlatformDefaultWidth = false,
+      decorFitsSystemWindows = false
+    )
+  ) {
     val context = LocalContext.current
     val model = viewModel<LoginViewModel>(
       factory = LoginViewModel.Factory(

diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/login/LoginScreen.kt b/android/app/src/main/java/com/emergetools/hackernews/features/login/LoginScreen.kt
@@ -4,21 +4,26 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Warning
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
 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.AnnotatedString
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.input.OffsetMapping
-import androidx.compose.ui.text.input.TransformedText
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import com.emergetools.hackernews.ui.theme.HackerNewsTheme
@@ -30,7 +35,6 @@ fun LoginScreen(
   actions: (LoginAction) -> Unit,
   navigation: (LoginNavigation) -> Unit
 ) {
-
   LaunchedEffect(state.status) {
     if (state.status == LoginStatus.Success) {
       navigation(LoginNavigation.Dismiss)
@@ -41,7 +45,10 @@ fun LoginScreen(
     modifier = Modifier
       .fillMaxSize()
       .background(color = MaterialTheme.colorScheme.background),
-    verticalArrangement = Arrangement.spacedBy(16.dp, alignment = Alignment.CenterVertically),
+    verticalArrangement = Arrangement.spacedBy(
+      16.dp,
+      alignment = Alignment.CenterVertically
+    ),
     horizontalAlignment = Alignment.CenterHorizontally
   ) {
     Text(
@@ -51,6 +58,15 @@ fun LoginScreen(
     )
     TextField(
       value = state.username,
+      shape = RoundedCornerShape(8.dp),
+      colors = TextFieldDefaults.colors(
+        focusedIndicatorColor = Color.Transparent,
+        unfocusedIndicatorColor = Color.Transparent,
+      ),
+      keyboardOptions = KeyboardOptions(
+        keyboardType = KeyboardType.Text,
+        imeAction = ImeAction.Next
+      ),
       placeholder = { Text("Username") },
       trailingIcon = {
         if (state.status == LoginStatus.Failed) {
@@ -65,13 +81,17 @@ fun LoginScreen(
     )
     TextField(
       value = state.password,
+      shape = RoundedCornerShape(8.dp),
+      colors = TextFieldDefaults.colors(
+        focusedIndicatorColor = Color.Transparent,
+        unfocusedIndicatorColor = Color.Transparent,
+      ),
       placeholder = { Text("Password") },
-      visualTransformation = { text ->
-        TransformedText(
-          text = AnnotatedString("*".repeat(text.text.length)),
-          offsetMapping = OffsetMapping.Identity
-        )
-      },
+      keyboardOptions = KeyboardOptions(
+        keyboardType = KeyboardType.Password,
+        imeAction = ImeAction.Done
+      ),
+      visualTransformation = PasswordVisualTransformation(),
       trailingIcon = {
         if (state.status == LoginStatus.Failed) {
           Icon(
@@ -83,8 +103,17 @@ fun LoginScreen(
       },
       onValueChange = { actions(LoginAction.PasswordUpdated(it)) }
     )
-    Button(onClick = { actions(LoginAction.LoginSubmit) }) {
-      Text(text = "Submit", style = MaterialTheme.typography.labelMedium, fontWeight = FontWeight.Bold)
+    Button(
+      colors = ButtonDefaults.buttonColors(
+        contentColor = MaterialTheme.colorScheme.onBackground
+      ),
+      onClick = { actions(LoginAction.LoginSubmit) }
+    ) {
+      Text(
+        text = "Submit",
+        style = MaterialTheme.typography.labelMedium,
+        fontWeight = FontWeight.Bold
+      )
     }
   }
 }

diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/settings/SettingsDomain.kt b/android/app/src/main/java/com/emergetools/hackernews/features/settings/SettingsDomain.kt
@@ -11,13 +11,15 @@ import kotlinx.coroutines.flow.asStateFlow
 import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.stateIn
 import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
 
 data class SettingsState(
   val loggedIn: Boolean
 )
 
 sealed interface SettingsAction {
   data object LoginPressed : SettingsAction
+  data object LogoutPressed: SettingsAction
 }
 
 sealed interface SettingsNavigation {
@@ -26,18 +28,14 @@ sealed interface SettingsNavigation {
   }
 }
 
-class SettingsViewModel(userStorage: UserStorage) : ViewModel() {
+class SettingsViewModel(private val userStorage: UserStorage) : ViewModel() {
   private val internalState = MutableStateFlow(SettingsState(false))
 
   val state = combine(
     userStorage.getCookie(),
     internalState.asStateFlow()
   ) { cookie, state ->
-    if (!cookie.isNullOrEmpty()) {
-      state.copy(loggedIn = true)
-    } else {
-      state
-    }
+    state.copy(loggedIn = !cookie.isNullOrEmpty())
   }.stateIn(
     scope = viewModelScope,
     started = SharingStarted.WhileSubscribed(),
@@ -47,7 +45,12 @@ class SettingsViewModel(userStorage: UserStorage) : ViewModel() {
   fun actions(action: SettingsAction) {
     when (action) {
       SettingsAction.LoginPressed -> {
-        // TODO
+      }
+
+      SettingsAction.LogoutPressed -> {
+        viewModelScope.launch {
+          userStorage.clearCookie()
+        }
       }
     }
   }