rework login screen

common/src/main/res/values/strings.xml

@@ -33,11 +33,11 @@
     <string name="login_btn">Login</string>
     <string name="register_btn">Register</string>
     <string name="username">Username</string>
-    <string name="email_username">Email or Username</string>
+    <string name="email_username">Email/Username</string>
     <string name="password">Password</string>
     <string name="emailAddress">Email address</string>
     <string name="confirmpassword">Confirm password</string>
-    <string name="login_btn_google">Login with Google</string>
+    <string name="login_btn_google">Sign in with Google</string>
 
     <string name="logout">Logout</string>
     <string name="logout_description">Log out of your account</string>

wearos/src/main/java/com/habitrpg/wearos/habitica/ui/activities/LoginActivity.kt

@@ -7,6 +7,7 @@ import android.content.Intent
 import android.os.Bundle
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.activity.viewModels
+import androidx.core.view.isVisible
 import com.habitrpg.android.habitica.R
 import com.habitrpg.android.habitica.databinding.ActivityLoginBinding
 import com.habitrpg.wearos.habitica.ui.viewmodels.LoginViewModel
@@ -14,7 +15,51 @@ import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
 class LoginActivity: BaseActivity<ActivityLoginBinding, LoginViewModel>() {
+    enum class State {
+        INITIAL,
+        OTHER,
+        INPUT
+    }
     override val viewModel: LoginViewModel by viewModels()
+    var currentState: State = State.INITIAL
+    set(value) {
+        field = value
+        when(value) {
+            State.INITIAL -> {
+                binding.descriptionView.isVisible = true
+                binding.signInOnPhoneButton.isVisible = true
+                binding.otherButton.isVisible = true
+                binding.googleLoginButton.isVisible = false
+                binding.registerButton.isVisible = false
+                binding.usernamePasswordButton.isVisible = false
+                binding.usernameEditText.isVisible = false
+                binding.passwordEditText.isVisible = false
+                binding.loginButton.isVisible = false
+            }
+            State.OTHER -> {
+                binding.descriptionView.isVisible = false
+                binding.signInOnPhoneButton.isVisible = false
+                binding.otherButton.isVisible = false
+                binding.googleLoginButton.isVisible = true
+                binding.registerButton.isVisible = true
+                binding.usernamePasswordButton.isVisible = true
+                binding.usernameEditText.isVisible = false
+                binding.passwordEditText.isVisible = false
+                binding.loginButton.isVisible = false
+            }
+            State.INPUT -> {
+                binding.descriptionView.isVisible = false
+                binding.signInOnPhoneButton.isVisible = false
+                binding.otherButton.isVisible = false
+                binding.googleLoginButton.isVisible = false
+                binding.registerButton.isVisible = false
+                binding.usernamePasswordButton.isVisible = false
+                binding.usernameEditText.isVisible = true
+                binding.passwordEditText.isVisible = true
+                binding.loginButton.isVisible = true
+            }
+        }
+    }
 
     override fun onCreate(savedInstanceState: Bundle?) {
         binding = ActivityLoginBinding.inflate(layoutInflater)
@@ -24,9 +69,15 @@ class LoginActivity: BaseActivity<ActivityLoginBinding, LoginViewModel>() {
             startMainActivity()
         }
 
+        binding.signInOnPhoneButton.setOnClickListener {  }
+        binding.otherButton.setOnClickListener { currentState = State.OTHER }
+        binding.usernamePasswordButton.setOnClickListener { currentState = State.INPUT }
+
         binding.loginButton.setOnClickListener { loginLocal() }
         binding.googleLoginButton.setOnClickListener { loginGoogle() }
         binding.registerButton.setOnClickListener { openRegisterOnPhone() }
+
+        currentState = State.INITIAL
     }
 
     private fun openRegisterOnPhone() {

wearos/src/main/res/drawable/ic_keyboard.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M20,5L4,5c-1.1,0 -1.99,0.9 -1.99,2L2,17c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,7c0,-1.1 -0.9,-2 -2,-2zM11,8h2v2h-2L11,8zM11,11h2v2h-2v-2zM8,8h2v2L8,10L8,8zM8,11h2v2L8,13v-2zM7,13L5,13v-2h2v2zM7,10L5,10L5,8h2v2zM16,17L8,17v-2h8v2zM16,13h-2v-2h2v2zM16,10h-2L14,8h2v2zM19,13h-2v-2h2v2zM19,10h-2L17,8h2v2z"/>
+</vector>

wearos/src/main/res/drawable/row_background_outline.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+    <corners android:radius="40dp" />
+    <stroke android:color="@color/gray_100" android:width="2dp" />
+</shape>

wearos/src/main/res/layout/activity_login.xml

@@ -8,38 +8,93 @@
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="vertical">
-            <EditText
-                android:id="@+id/username_edit_text"
-                android:layout_width="match_parent"
+            android:orientation="vertical"
+            android:gravity="center"
+            android:animateLayoutChanges="true">
+            <TextView
+                android:id="@+id/title_view"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:inputType="textEmailAddress"
-                android:hint="@string/username"
-                android:autofillHints="username" />
-
-            <EditText
-                android:id="@+id/password_edit_text"
-                android:layout_width="match_parent"
+                style="@style/Text.Subheader1"
+                android:textColor="@color/white"
+                android:text="@string/sign_in"
+                android:layout_marginBottom="@dimen/spacing_large"/>
+            <TextView
+                android:id="@+id/description_view"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:inputType="textPassword"
-                android:hint="@string/password"
-                android:autofillHints="password"/>
+                android:gravity="center"
+                android:text="@string/sign_in_description"
+                style="@style/Text.Body2"
+                android:textColor="@color/white"
+                android:layout_marginBottom="18dp"/>
             <Button
-                android:id="@+id/login_button"
+                android:id="@+id/sign_in_on_phone_button"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:text="@string/login_btn"/>
+                style="@style/ChipButton"
+                android:text="@string/sign_in_on_phone"
+                android:drawableStart="@drawable/handoff"
+                android:layout_marginBottom="@dimen/spacing_small"/>
+            <Button
+                android:id="@+id/other_button"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                style="@style/ChipButton"
+                android:drawableStart="@drawable/ic_keyboard"
+                android:text="@string/other_options"/>
+
+
             <Button
                 android:id="@+id/google_login_button"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="@string/login_btn_google"
-                android:layout_marginTop="@dimen/spacing_small"/>
+                android:layout_marginBottom="@dimen/spacing_small"
+                style="@style/ChipButton"/>
+            <Button
+                android:id="@+id/username_password_button"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:text="@string/sign_in_password"
+                android:layout_marginBottom="@dimen/spacing_small"
+                android:drawableStart="@drawable/ic_keyboard"
+                style="@style/ChipButton"/>
             <Button
                 android:id="@+id/register_button"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:text="@string/register_btn"
-                android:layout_marginTop="@dimen/spacing_large"/>
+                android:text="@string/create_account"
+                android:drawableStart="@drawable/handoff"
+                style="@style/ChipButton"/>
+
+            <EditText
+                android:id="@+id/username_edit_text"
+                android:layout_width="match_parent"
+                android:layout_height="52dp"
+                android:inputType="textEmailAddress"
+                android:hint="@string/email_username"
+                android:paddingHorizontal="16dp"
+                android:background="@drawable/row_background_outline"
+                android:autofillHints="username"
+                android:textSize="14sp"
+                android:layout_marginBottom="@dimen/spacing_small"/>
+            <EditText
+                android:id="@+id/password_edit_text"
+                android:layout_width="match_parent"
+                android:layout_height="52dp"
+                android:inputType="textPassword"
+                android:hint="@string/password"
+                android:background="@drawable/row_background_outline"
+                android:paddingHorizontal="16dp"
+                android:autofillHints="password"
+                android:textSize="14sp"
+                android:layout_marginBottom="@dimen/spacing_small"/>
+            <Button
+                android:id="@+id/login_button"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:text="@string/sign_in"
+                style="@style/ChipButton.Purple"/>
         </LinearLayout>
 </com.habitrpg.wearos.habitica.ui.views.HabiticaScrollView>

wearos/src/main/res/layout/row_header.xml

@@ -10,7 +10,7 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
-        android:textColor="@color/watch_purple_500"
+        android:textColor="@color/watch_purple_200"
         tools:text="Header Text"
         android:fontFamily="sans-serif-medium"
         android:textSize="16sp" />

wearos/src/main/res/values/strings.xml

@@ -8,4 +8,10 @@
     <string name="x_and_y">%s and %s</string>
     <string name="some_x">some %s</string>
     <string name="edit_on_phone">Edit on phone</string>
+    <string name="sign_in">Sign in</string>
+    <string name="sign_in_description">Create task lists and track progress with your gamified avatar</string>
+    <string name="sign_in_on_phone">Sign in on phone</string>
+    <string name="other_options">Other options</string>
+    <string name="create_account">Create account</string>
+    <string name="sign_in_password">Sign in with password</string>
 </resources>

wearos/src/main/res/values/styles.xml

@@ -17,8 +17,28 @@
         <item name="android:paddingHorizontal">@dimen/row_padding_horizontal</item>
         <item name="android:paddingVertical">@dimen/row_padding_vertical</item>
         <item name="android:background">@drawable/row_background</item>
+        <item name="android:textSize">14sp</item>
+        <item name="fontFamily">@string/medium</item>
         <item name="android:gravity">center</item>
         <item name="android:minHeight">52dp</item>
         <item name="android:textAllCaps">false</item>
+        <item name="android:letterSpacing">0.05</item>
+        <item name="android:drawablePadding">8dp</item>
+        <item name="android:foreground">?selectableItemBackground</item>
+    </style>
+
+    <style name="ChipButton.Purple">
+        <item name="android:backgroundTint">@color/watch_purple_100</item>
+    </style>
+
+    <style name="Text" />
+
+    <style name="Text.Subheader1">
+        <item name="android:fontFamily">sans-serif-medium</item>
+        <item name="android:textSize">16sp</item>
+    </style>
+
+    <style name="Text.Body2">
+        <item name="android:textSize">14sp</item>
     </style>
 </resources>