updating change password style based on comments

app/mobile/src/constants/Colors.js

@@ -72,7 +72,7 @@ const DarkColors = {
   cancelButton: '#888888',
   cancelButtonText: '#eeeeee',
   disabledButton: '#888888',
-  disabledButtonText: '#eeeeee',
+  disabledButtonText: '#aaaaaa',
   dangerButton: '#ff5555',
   dangerButtonText: '#ffffff',
   inputBase: '#333333',

app/mobile/src/constants/Strings.js

@@ -12,7 +12,7 @@ const Strings = [
     dateMode: 'Date',
     language: 'Language',
     logout: 'Logout',
-    changeLogin: 'Change Login',
+    changeLogin: 'Username and Password',
     deleteAccount: 'Delete Account',
     contacts: 'Contacts',
     topics: 'Topics',
@@ -48,7 +48,7 @@ const Strings = [
     enableTopics: 'Enable Sealed Topics',
     manageTopics: 'Manage Sealing Key',
     changePassword: 'Change sealing key password.',
-    update: 'Update',
+    update: 'Change',
     changeKey: 'Change Key Password',
     delayMessage: 'Key generation can take several minutes.',
 
@@ -58,6 +58,7 @@ const Strings = [
     loggingOut: 'Logging Out',
     username: 'Username',
     save: 'Save',
+    notAvailable: 'Username Not Available',
   },
   {
     visibleRegistry: 'Visible dans le Registre',
@@ -113,6 +114,7 @@ const Strings = [
     loggingOut: 'Confirmation de la Déconnexion', 
     username: 'Nom d\'Utilisateur',
     save: 'Engegistrer',
+    notAvailable: 'Nom d\'Utilisateur Indisponible',
   },
   {
     visibleRegistry: 'Visible en el Registro',
@@ -168,6 +170,7 @@ const Strings = [
     loggingOut: 'Confirmando cierre de sesión',
     username: 'Nombre de Usuario',
     save: 'Guardar',
+    notAvailable: 'Nombre de Usuario No Disponible',
   },
   {
     visibleRegistry: 'Sichtbar in der Registrierung',
@@ -223,6 +226,7 @@ const Strings = [
     loggingOut: 'Abmelden bestätigen',
     username: 'Nutzername',
     save: 'Speichern',
+    notAvailable: 'Benutzername Nicht Verfügbar',
   }
 ];
 

app/mobile/src/session/settings/Settings.jsx

@@ -195,30 +195,27 @@ export function Settings() {
             <View style={styles.icon}>
               <MatIcons name="logout" size={20} color={Colors.linkText} />
             </View>
-            <View style={styles.option}>
+            <View style={styles.optionControl}>
               <Text style={styles.optionLink}>{ state.strings.logout }</Text>
             </View>
-            <View style={styles.control} />
           </TouchableOpacity>
           <View style={styles.divider} />
           <TouchableOpacity style={styles.entry} activeOpacity={1} onPress={actions.showLogin}>
             <View style={styles.icon}>
               <MatIcons name="login" size={20} color={Colors.linkText} />
             </View>
-            <View style={styles.option}>
+            <View style={styles.optionControl}>
               <Text style={styles.optionLink}>{ state.strings.changeLogin }</Text>
             </View>
-            <View style={styles.control} />
           </TouchableOpacity>
           <View style={styles.divider} />
           <TouchableOpacity style={styles.entry} activeOpacity={1} onPress={actions.showDelete}>
             <View style={styles.icon}>
               <MatIcons name="trash-can-outline" size={20} color={Colors.dangerText} />
             </View>
-            <View style={styles.option}>
+            <View style={styles.optionControl}>
               <Text style={styles.dangerLink}>{ state.strings.deleteAccount }</Text>
             </View>
-            <View style={styles.control} />
           </TouchableOpacity>
         </View>
 
@@ -503,6 +500,11 @@ export function Settings() {
                 <FloatingLabelInput
                   label={state.strings.username}
                   value={state.username}
+                  autoCapitalize={'none'} 
+                  spellCheck={false}
+                  staticLabel={false}
+                  autoCorrect={false}
+                  autoComplete={'off'}
 
                   inputStyles={styles.floatingInput}
                   labelStyles={styles.floatingLable}
@@ -518,6 +520,8 @@ export function Settings() {
                   label={state.strings.password}
                   isPassword={true}
                   value={state.password}
+                  autoCapitalize={'none'} 
+                  spellCheck={false}
 
                   inputStyles={styles.floatingInput}
                   labelStyles={styles.floatingLable}
@@ -529,31 +533,21 @@ export function Settings() {
                   customHidePasswordComponent={<MatIcons name="eye-off-outline" size={16} color={Colors.inputPlaceholder} />}
                 />
               </View>
-
-              <View style={styles.modalInput}>
-                <FloatingLabelInput
-                  label={state.strings.confirmPassword}
-                  isPassword={true}
-                  value={state.confirm}
-
-                  inputStyles={styles.floatingInput}
-                  labelStyles={styles.floatingLable}
-                  customLabelStyles={styles.floatingCustomLabel}
-                  containerStyles={styles.floatingContainer}
-
-                  onChangeText={actions.setConfirm}
-                  customShowPasswordComponent={<MatIcons name="eye-outline" size={16} color={Colors.inputPlaceholder} />}
-                  customHidePasswordComponent={<MatIcons name="eye-off-outline" size={16} color={Colors.inputPlaceholder} />}
-                />
+              <View style={styles.availableStatus}>
+                { state.validated && !state.available && (
+                  <Text style={styles.notAvailable}>{ state.strings.notAvailable }</Text>
+                )}
               </View>
-
-              <View style={styles.buttons}>
-                { (state.password !== state.confirm || !state.password || !state.validated || !state.username) && (
+              <View style={styles.hintButtons}>
+                <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={actions.hideLogin}>
+                  <Text style={styles.cancelButtonText}>{ state.strings.cancel }</Text>
+                </TouchableOpacity>
+                { (!state.available || !state.password || !state.validated || !state.username) && (
                   <View style={styles.disabledButton}>
                     <Text style={styles.disabledButtonText}>{ state.strings.update }</Text>
                   </View>
                 )}
-                { state.password === state.confirm && state.password && state.validated && state.username && (
+                { state.available && state.password && state.validated && state.username && (
                   <TouchableOpacity style={styles.promptButton} activeOpacity={1} onPress={changeLogin}>
                     <Text style={styles.enabledButtonText}>{ state.strings.update }</Text>
                   </TouchableOpacity>

app/mobile/src/session/settings/Settings.styled.js

@@ -60,7 +60,7 @@ export const styles = StyleSheet.create({
     height: 40,
   },
   icon: {
-    flex: 2,
+    flex: 1,
     alignItems: 'center',
   },
   option: {
@@ -70,7 +70,7 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
   },
   optionControl: {
-    flex: 12,
+    flex: 8,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -142,7 +142,6 @@ export const styles = StyleSheet.create({
     padding: 12,
   },
   modalBusy: {
-    padding: 8,
   },
   modalDescription: {
     fontSize: 14,
@@ -243,6 +242,10 @@ export const styles = StyleSheet.create({
     borderRadius: 4,
     backgroundColor: Colors.cancelButton,
   },
+  cancelButtonText: {
+    color: Colors.cancelButtonText,
+    fontFamily: 'Roboto',
+  },
   promptButton: {
     marginTop: 8,
     marginBottom: 16,
@@ -253,6 +256,11 @@ export const styles = StyleSheet.create({
     borderRadius: 4,
     backgroundColor: Colors.primaryButton,
   },
+  hintButtons: {
+    display: 'flex',
+    flexDirection: 'row',
+    paddingBottom: 8,
+  },
   buttons: {
     display: 'flex',
     flexDirection: 'row',
@@ -277,5 +285,11 @@ export const styles = StyleSheet.create({
     borderRadius: 8,
     height: 52,
   },
+  availableStatus: {
+    height: 18,
+  },
+  notAvailable: {
+    color: Colors.dangerText,
+  },
 });
 

app/mobile/src/session/settings/useSettings.hook.js

@@ -120,6 +120,8 @@ export function useSettings() {
         debounce.current = setTimeout(async () => {
           const cur = JSON.parse(JSON.stringify(username));
           const available = await profile.actions.getHandleStatus(cur);
+console.log("CHECKED:", available);
+
           if (checking.current === cur) {
             updateState({ available, validated: true });
           }