Change "Get Started" -> "Create Account"

EdgeApp · Jan 10, 2024 · c0043d0 · c0043d0
1 parent c70e70a
commit c0043d0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+- changed: Update legacy components to their UI4 counterparts
+- changed: "Get Started" -> "Create Account" on the Password Login Scene
+- fixed: New password scene showing blank error message
 - removed: No longer render scene backgrounds. The app background shows through now.
 
 ## 2.20.0 (2024-01-04)

diff --git a/src/components/scenes/PasswordLoginScene.tsx b/src/components/scenes/PasswordLoginScene.tsx
@@ -50,12 +50,12 @@ import { TextInputModal } from '../modals/TextInputModal'
 import { CreateAccountType } from '../publicApi/types'
 import { Airship, showError } from '../services/AirshipInstance'
 import { Theme, useTheme } from '../services/ThemeContext'
-import { MainButton } from '../themed/MainButton'
 import {
   OutlinedTextInput,
   OutlinedTextInputRef
 } from '../themed/OutlinedTextInput'
 import { ThemedScene } from '../themed/ThemedScene'
+import { ButtonsViewUi4 } from '../ui4/ButtonsViewUi4'
 
 const MAX_DISPLAYED_LOCAL_USERS = 5
 
@@ -94,7 +94,6 @@ export const PasswordLoginScene = (props: Props) => {
     string | undefined
   >(undefined)
   const [password, setPassword] = React.useState('')
-  const [spinner, setSpinner] = React.useState<boolean>(false)
   const [showUsernameList, setShowUsernameList] = React.useState(false)
   const [dropdownY, setDropdownY] = React.useState(0)
   const [usernameItemHeight, setUsernameItemHeight] = React.useState(0)
@@ -190,10 +189,7 @@ export const PasswordLoginScene = (props: Props) => {
   })
 
   const handleSubmitPassword = useHandler(() => {
-    setSpinner(true)
     handleSubmit()
-      .catch(e => console.error(e))
-      .finally(() => setSpinner(false))
   })
 
   const handleSubmit = useHandler(async (challengeId?: string) => {
@@ -520,41 +516,27 @@ export const PasswordLoginScene = (props: Props) => {
     // TODO: Update and use ButtonsViewUi4 after UI specs are made
     return (
       <View style={styles.buttonsBox}>
-        <EdgeAnim enter={{ type: 'fadeInDown', distance: 20 }}>
-          <MainButton
-            type="escape"
-            onPress={handleForgotPassword}
-            label={lstrings.forgot_password}
-            marginRem={0}
-          />
-        </EdgeAnim>
-        <EdgeAnim
-          style={styles.loginButtonBox}
-          enter={{ type: 'fadeInDown', distance: 40 }}
-        >
-          <MainButton
-            label={lstrings.login_button}
-            testID="loginButton"
-            type="primary"
-            disabled={
-              username.length === 0 ||
-              password.length === 0 ||
-              usernameErrorMessage != null ||
-              passwordErrorMessage != null
-            }
-            spinner={spinner}
-            marginRem={0.25}
-            onPress={handleSubmit}
-          />
-        </EdgeAnim>
-
-        <EdgeAnim enter={{ type: 'fadeInDown', distance: 60 }}>
-          <MainButton
-            type="secondary"
-            testID="createAccountButton"
-            onPress={handleCreateAccount}
-            marginRem={[0.25, 0, 1, 0]}
-            label={lstrings.get_started}
+        <EdgeAnim enter={{ type: 'fadeInDown', distance: 80 }}>
+          <ButtonsViewUi4
+            primary={{
+              label: lstrings.login_button,
+              onPress: handleSubmit,
+              disabled:
+                username.length === 0 ||
+                password.length === 0 ||
+                usernameErrorMessage != null ||
+                passwordErrorMessage != null
+            }}
+            secondary={{
+              label: lstrings.landing_create_account_button,
+              onPress: handleCreateAccount,
+              disabled: username.length === 0
+            }}
+            tertiary={{
+              label: lstrings.forgot_password,
+              onPress: handleForgotPassword,
+              disabled: username.length === 0
+            }}
           />
         </EdgeAnim>
         <EdgeAnim enter={{ type: 'fadeInDown', distance: 80 }}>