Update onboarding flow with the new designs (#381)

* Update onboarding flow with the new designs

* Created Welcome Screen
* Redesigned Login Screen
* Added error indicators and text errors for Login input fields

* Run spotless

anystream-client-android/src/main/kotlin/MainActivity.kt

@@ -77,6 +77,7 @@ open class MainActivity : AppCompatActivity() {
                                     .launchIn(scope)
                             }
                             when (val route = stack.last()) {
+                                Routes.Welcome,
                                 Routes.Login -> LoginScreen(client, androidRouter)
                                 Routes.Home -> HomeScreen(
                                     client = client,

anystream-client-core/src/commonMain/kotlin/anystream/routing/Routes.kt

@@ -20,6 +20,10 @@ package anystream.routing
 sealed class Routes {
     abstract val path: String
 
+    data object Welcome : Routes() {
+        override val path: String = "welcome"
+    }
+
     data object Login : Routes() {
         override val path: String = "login"
     }

anystream-client-core/src/commonMain/kotlin/anystream/ui/login/LoginScreenModel.kt

@@ -30,7 +30,10 @@ data class LoginScreenModel(
     val loginError: CreateSessionResponse.Error? = null,
 ) {
     enum class State {
-        IDLE, AUTHENTICATING, AUTHENTICATED,
+        IDLE, AUTHENTICATING, AUTHENTICATED;
+
+        val isAuthenticating: Boolean
+            get() = this == AUTHENTICATING
     }
 
     enum class ServerValidation {

anystream-client-ui/src/commonMain/kotlin/anystream/ui/App.kt

@@ -31,6 +31,7 @@ import anystream.router.SharedRouter
 import anystream.routing.Routes
 import anystream.ui.home.HomeScreen
 import anystream.ui.login.LoginScreen
+import anystream.ui.login.WelcomeScreen
 import anystream.ui.media.MediaScreen
 import anystream.ui.movies.MoviesScreen
 import anystream.ui.theme.AppTheme
@@ -52,11 +53,11 @@ fun App() {
         AppTheme {
             BundleScope(null) {
                 val defaultRoute = when {
-                    !client.isAuthenticated() -> Routes.Login
+                    !client.isAuthenticated() -> Routes.Welcome
                     else -> Routes.Home
                 }
                 Router(
-                    defaultRoute::class.simpleName.orEmpty(),
+                    contextId = defaultRoute::class.simpleName.orEmpty(),
                     defaultRouting = defaultRoute,
                 ) { stack ->
                     LaunchedEffect(stack) {
@@ -65,7 +66,7 @@ fun App() {
                     remember {
                         client.authenticated
                             .onEach { authed ->
-                                val isLoginRoute = stack.last() == Routes.Login
+                                val isLoginRoute = stack.last() == Routes.Welcome
                                 if (authed && isLoginRoute) {
                                     stack.replace(Routes.Home)
                                 } else if (!authed && !isLoginRoute) {
@@ -75,6 +76,7 @@ fun App() {
                             .launchIn(scope)
                     }
                     when (val route = stack.last()) {
+                        Routes.Welcome -> WelcomeScreen { stack.push(Routes.Login) }
                         Routes.Login -> LoginScreen(client, router)
                         Routes.Home -> HomeScreen(
                             client = client,
@@ -108,11 +110,7 @@ fun App() {
                             },
                             backStack = stack,
                         )
-//                        Routes.Tv -> TODO("Tv route not implemented")
-//                        Routes.PairingScanner -> PairingScanner(
-//                            client = client,
-//                            backStack = stack,
-//                        )
+
                         is Routes.Details -> MediaScreen(
                             client = client,
                             mediaId = route.mediaRefId,
@@ -126,7 +124,11 @@ fun App() {
 
                         is Routes.Player -> SharedVideoPlayer(route, stack, client)
                         Routes.PairingScanner -> TODO()
-                        Routes.Tv -> TODO()
+//                        Routes.PairingScanner -> PairingScanner(
+//                            client = client,
+//                            backStack = stack,
+//                        )
+                        Routes.Tv -> TODO("Tv route not implemented")
                     }
                 }
             }

anystream-client-ui/src/commonMain/kotlin/anystream/ui/components/PrimaryButton.kt

@@ -0,0 +1,82 @@
+/**
+ * AnyStream
+ * Copyright (C) 2023 AnyStream Maintainers
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+package anystream.ui.components
+
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+internal fun PrimaryButton(
+    leftIcon: @Composable (() -> Unit)? = null,
+    text: String,
+    modifier: Modifier = Modifier,
+    isLoading: Boolean = false,
+    onClick: () -> Unit,
+) {
+    Button(
+        onClick = onClick,
+        shape = CircleShape,
+        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 18.dp),
+        enabled = !isLoading,
+        colors = ButtonDefaults.buttonColors(
+            contentColor = MaterialTheme.colors.onBackground,
+            disabledBackgroundColor = MaterialTheme.colors.primary,
+        ),
+        modifier = modifier,
+    ) {
+        AnimatedContent(targetState = isLoading) { targetState ->
+            when (targetState) {
+                true -> {
+                    CircularProgressIndicator(
+                        modifier = Modifier.size(20.dp),
+                        color = MaterialTheme.colors.onBackground,
+                        strokeWidth = 1.dp,
+                    )
+                }
+
+                false -> {
+                    leftIcon?.let { icon ->
+                        icon()
+                        Spacer(Modifier.width(8.dp))
+                    }
+                    Text(
+                        text = text,
+                        style = MaterialTheme.typography.body1.copy(fontWeight = FontWeight.Bold),
+                        letterSpacing = 0.2.sp,
+                        textAlign = TextAlign.Center,
+                    )
+                }
+            }
+        }
+    }
+}