diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js index 4d461655..0960f28e 100644 --- a/app/mobile/src/constants/Colors.js +++ b/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', diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js index f337421a..bd3341ed 100644 --- a/app/mobile/src/constants/Strings.js +++ b/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', } ]; diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx index 4baa8ba2..f797f6ab 100644 --- a/app/mobile/src/session/settings/Settings.jsx +++ b/app/mobile/src/session/settings/Settings.jsx @@ -195,30 +195,27 @@ export function Settings() { - + { state.strings.logout } - - + { state.strings.changeLogin } - - + { state.strings.deleteAccount } - @@ -503,6 +500,11 @@ export function Settings() { } /> - - - } - customHidePasswordComponent={} - /> + + { state.validated && !state.available && ( + { state.strings.notAvailable } + )} - - - { (state.password !== state.confirm || !state.password || !state.validated || !state.username) && ( + + + { state.strings.cancel } + + { (!state.available || !state.password || !state.validated || !state.username) && ( { state.strings.update } )} - { state.password === state.confirm && state.password && state.validated && state.username && ( + { state.available && state.password && state.validated && state.username && ( { state.strings.update } diff --git a/app/mobile/src/session/settings/Settings.styled.js b/app/mobile/src/session/settings/Settings.styled.js index 4d9d71a5..07d499e3 100644 --- a/app/mobile/src/session/settings/Settings.styled.js +++ b/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, + }, }); diff --git a/app/mobile/src/session/settings/useSettings.hook.js b/app/mobile/src/session/settings/useSettings.hook.js index 2765c6cd..c360c703 100644 --- a/app/mobile/src/session/settings/useSettings.hook.js +++ b/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 }); }