diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js index 7f98d0f2..50a44248 100644 --- a/app/mobile/src/constants/Colors.js +++ b/app/mobile/src/constants/Colors.js @@ -16,9 +16,14 @@ const LightColors = { text: '#444444', screenBase: '#dddddd', areaBase: '#ffffff', + modalBase: '#ffffff', + modalOverlay: 'rgba(52,52,52,0.8)', headerBar: '#eeeeee', primaryButton: '#448866', - inputBase: '#ffffff', + primaryButtonText: '#ffffff', + disabledButton: '#dddddd', + disabledButtonText: '#aaaaaa', + inputBase: '#eeeeee', inputPlaceholder: '#888888', inputText: '#444444', connectedIndicator: '#41d041', @@ -52,8 +57,13 @@ const DarkColors = { text: '#ffffff', screenBase: '#333333', areaBase: '#555555', + modalBase: '#ffffff', + modalOverlay: 'rgba(52,52,52,0.8)', headerBar: '#555555', primaryButton: '#448866', + primaryButtonText: '#ffffff', + disabledButton: '#aaaaaa', + disabledButtonText: '#888888', inputBase: '#ffffff', inputPlaceholder: '#888888', inputText: '#444444', @@ -92,8 +102,13 @@ export const Colors = { text: getColor('text'), screenBase: getColor('screenBase'), areaBase: getColor('areaBase'), + modalOverlay: getColor('modalOverlay'), + modalBase: getColor('modalBase'), headerBar: getColor('headerBar'), primaryButton: getColor('primaryButton'), + primaryButtonText: getColor('primaryButtonText'), + disabledButton: getColor('disabledButton'), + disabledButtonText: getColor('disabledButtonText'), inputBase: getColor('inputBase'), inputPlaceholder: getColor('inputPlaceholder'), inputText: getColor('inputText'), diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js index 450d25bd..fecd7e80 100644 --- a/app/mobile/src/constants/Strings.js +++ b/app/mobile/src/constants/Strings.js @@ -25,6 +25,27 @@ const Strings = [ timeHalf: '12h', monthStart: 'mm/dd', monthEnd: 'dd/mm', + + sealUnset: 'Generate a key to enable end-to-end encrypted topics.', + sealUnlocked: 'Disabling the sealing key will remove access from all end-to-end encrypted topics until the key is unlocked again.', + sealLocked: 'Unlock the sealing key to enable end-to-end encrypted topics on this device.', + sealDelete: 'Deleting the sealing key will premanently remove access to any existing end-to-end encrypted topics for ALL of your devices.', + password: 'Password', + confirmPassword: 'Confirm Password', + generate: 'Generate', + disable: 'Disable', + delete: 'Delete', + unlock: 'Unlock', + removeSeal: 'Remove Sealing Key', + disableSeal: 'Disable Sealing Key', + unlockSeal: 'Unlock Sealing Key', + typeDelete: 'Type [delete] to remove key', + deleteKey: 'delete', + enableTopics: 'Enable Sealed Topics', + manageTopics: 'Manage Sealing Key', + changePassword: 'Change sealing key password.', + update: 'Update', + changeKey: 'Change Key Password', }, { visibleRegistry: 'Visible dans le Registre', @@ -50,6 +71,27 @@ const Strings = [ timeHalf: '12h', monthStart: 'mm/jj', monthEnd: 'jj/mm', + + sealUnset: 'Générez une clé pour activer les sujets chiffrés de bout en bout.', + sealUnlocked: 'La désactivation de la clé de scellement supprimera l\'accès à tous les sujets chiffrés de bout en bout jusqu\'à ce que la clé soit à nouveau déverrouillée.', + sealLocked: 'Déverrouillez la clé de scellement pour activer les sujets chiffrés de bout en bout sur cet appareil.', + sealDelete: 'La suppression de la clé de scellement supprimera définitivement l’accès à tous les sujets cryptés de bout en bout existants pour TOUS vos appareils.', + password: 'Mot de passe', + confirmPassword: 'Confirmez le mot de passe', + generate: 'Générer', + disable: 'Désactiver', + delete: 'Supprimer', + unlock: 'Activer', + removeSeal: 'Supprimer la clé de sécurité', + disableSeal: 'Désactiver la clé de sécurité', + unlockSeal: 'Déverrouiller la clé de sécurité', + typeDelete: 'Tapez [supprimer] pour supprimer la clé', + deleteKey: 'supprimer', + enableTopics: 'Activer les sujets sécurisés', + manageTopics: 'Gérer la clé de sécurité', + changePassword: 'Changez le mot de passe de la clé de sécurité.', + update: 'Mise à jour', + changeKey: 'Changer le mot de passe clé', }, { visibleRegistry: 'Visible en el Registro', @@ -75,6 +117,27 @@ const Strings = [ timeHalf: '12h', monthStart: 'mm/dd', monthEnd: 'dd/mm', + + sealUnset: 'Genere una clave para habilitar temas cifrados de un extremo a otro.', + sealUnlocked: 'Al desactivar la clave de sellado se eliminará el acceso a todos los temas cifrados de extremo a extremo hasta que la clave se desbloquee nuevamente.', + sealLocked: 'Desbloquee la clave de sellado para habilitar temas cifrados de extremo a extremo en este dispositivo.', + sealDelete: 'Al eliminar la clave de sellado, se eliminará de forma permanente el acceso a cualquier tema cifrado de extremo a extremo existente para TODOS sus dispositivos.', + password: 'Contraseña', + confirmPassword: 'Confirmar Contraseña', + generate: 'Generar', + disable: 'Desactivar', + delete: 'Borrar', + unlock: 'Desbloquear', + removeSeal: 'Borrar clave de seguridad', + disableSeal: 'Desactivar clave de seguridad', + unlockSeal: 'Desbloquear clave de seguridad', + typeDelete: 'Escriba [borrar] para borrar la clave', + deleteKey: 'borrar', + enableTopics: 'Habilitar temas seguros', + manageTopics: 'Administrar clave de seguridad', + changePassword: 'Cambiar la contraseña de la clave de seguridad.', + update: 'Actualizar', + changeKey: 'Cambiar clave Contraseña', }, { visibleRegistry: 'Sichtbar in der Registrierung', @@ -100,6 +163,27 @@ const Strings = [ timeHalf: '12h', monthStart: 'mm/dd', monthEnd: 'dd/mm', + + sealUnset: 'Generieren Sie einen Schlüssel, um Ende-zu-Ende-verschlüsselte Themen zu ermöglichen.', + sealUnlocked: 'Durch das Deaktivieren des Versiegelungsschlüssels wird der Zugriff auf alle Ende-zu-Ende-verschlüsselten Themen entfernt, bis der Schlüssel wieder entsperrt wird.', + sealLocked: 'Entsperren Sie den Versiegelungsschlüssel, um Ende-zu-Ende-verschlüsselte Themen auf diesem Gerät zu aktivieren.', + sealDelete: 'Durch das Löschen des Siegelschlüssels wird der Zugriff auf alle vorhandenen Ende-zu-Ende-verschlüsselten Themen für ALLE Ihre Geräte dauerhaft entfernt.', + password: 'Passwort', + confirmPassword: 'Bestätige das Passwort', + generate: 'Generieren', + disable: 'Deaktivieren', + delete: 'Löschen', + unlock: 'Freischalten', + removeSeal: 'Sicherheitsschlüssel entfernen', + disableSeal: 'Sicherheitsschlüssel deaktivieren', + unlockSeal: 'Sicherheitsschlüssel entsperren', + typeDelete: 'Geben Sie [löschen], um den Schlüssel zu entfernen', + deleteKey: 'löschen', + enableTopics: 'Aktivieren Sie gesicherte Themen', + manageTopics: 'Sicherheitsschlüssel verwalten', + changePassword: 'Ändern Sie das Passwort des Sicherheitsschlüssels', + update: 'Aktualisieren', + changeKey: 'Schlüsselpasswort ändern', } ]; diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx index 6bd8f432..db28ca49 100644 --- a/app/mobile/src/session/settings/Settings.jsx +++ b/app/mobile/src/session/settings/Settings.jsx @@ -3,7 +3,6 @@ import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import { styles } from './Settings.styled'; import { useSettings } from './useSettings.hook'; import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons'; -import Ionicons from 'react-native-vector-icons/AntDesign'; import Colors from 'constants/Colors'; export function Settings() { @@ -47,7 +46,12 @@ export function Settings() { - { state.strings.sealedTopics } + { state.sealEnabled && ( + { state.strings.manageTopics } + )} + { !state.sealEnabled && ( + { state.strings.enableTopics } + )} @@ -60,7 +64,7 @@ export function Settings() { - { state.strings.hourMode } + { state.strings.hourMode } actions.setTimeFull(false)}> { !state.timeFull && ( @@ -87,7 +91,7 @@ export function Settings() { - { state.strings.dateMode } + { state.strings.dateMode } actions.setMonthLast(false)}> { !state.monthLast && ( @@ -193,153 +197,45 @@ export function Settings() { supportedOrientations={['portrait', 'landscape']} onRequestClose={actions.hideEditSeal} > - + - Sealed Topics: - - actions.setSealEnable(!state.sealEnabled)} activeOpacity={1}> - Enable Sealed Topics + + + - - { state.sealMode === 'unlocking' && ( + { state.strings.sealedTopics } + { !state.sealEnabled && ( <> - { !state.showSealUnlock && ( - - - - - - + { state.strings.sealUnset } + + + + + + + { state.sealPassword === state.sealConfirm && state.sealPassword && ( + + { state.strings.generate } + )} - { state.showSealUnlock && ( - - - - - + { (state.sealPassword !== state.sealConfirm || !state.sealPassword) && ( + + { state.strings.generate } )} )} - { (state.sealMode === 'updating' || state.sealMode === 'enabling') && ( - <> - { !state.showSealPassword && ( - - - - - - - )} - { state.showSealPassword && ( - - - - - - - )} - { !state.showSealConfirm && ( - - - - - - - )} - { state.showSealConfirm && ( - - - - - - - )} - saving can take a few minutes - + { state.sealEnabled && !state.sealUnlocked && ( + { state.strings.sealLocked } )} - { state.sealMode === 'disabling' && ( - - - - + { state.sealEnabled && state.sealUnlocked && ( + { state.strings.sealUnlocked } )} - { state.sealMode === 'unlocked' && ( - - - - - - )} - - - Cancel - - { state.canSaveSeal && ( - <> - { state.sealMode !== 'unlocking' && state.sealMode !== 'unlocked' && ( - - { state.saving && ( - - )} - Save - - )} - { state.sealMode === 'unlocked' && ( - - { state.saving && ( - - )} - Forget - - )} - { state.sealMode === 'unlocking' && ( - - { state.saving && ( - - )} - Unlock - - )} - - )} - { !state.canSaveSeal && ( - <> - { state.sealMode !== 'unlocking' && ( - - { state.saving && ( - - )} - Save - - )} - { state.sealMode === 'unlocking' && ( - - { state.saving && ( - - )} - Unlock - - )} - - )} - - diff --git a/app/mobile/src/session/settings/Settings.styled.js b/app/mobile/src/session/settings/Settings.styled.js index 3116913f..db122bb3 100644 --- a/app/mobile/src/session/settings/Settings.styled.js +++ b/app/mobile/src/session/settings/Settings.styled.js @@ -79,6 +79,12 @@ export const styles = StyleSheet.create({ flex: 2, alignItems: 'center', }, + labelText: { + fontSize: 14, + paddingRight: 8, + color: Colors.descriptionText, + fontFamily: 'Roboto', + }, optionText: { fontSize: 16, paddingRight: 8, @@ -105,126 +111,87 @@ export const styles = StyleSheet.create({ transform: [{ scaleX: .6 }, { scaleY: .6 }], }, - modalWrapper: { + modalOverlay: { display: 'flex', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', - backgroundColor: 'rgba(52, 52, 52, 0.8)' + backgroundColor: Colors.modalOverlay, }, modalContainer: { - backgroundColor: Colors.formBackground, - padding: 16, + backgroundColor: Colors.modalBase, width: '80%', maxWidth: 400, + display: 'flex', + alignItems: 'center', + borderRadius: 8, }, modalHeader: { fontSize: 18, paddingBottom: 16, + paddingTop: 16, color: Colors.text, + fontFamily: 'Roboto', }, - input: { - fontSize: 14, - flexGrow: 1, - color: Colors.text, - }, - inputField: { - width: '100%', - borderWidth: 1, - borderColor: Colors.lightgrey, - borderRadius: 4, - padding: 8, - marginBottom: 8, - maxHeight: 92, - display: 'flex', - flexDirection: 'row', - }, - canceltext: { - color: Colors.text, - }, - modalList: { - width: '100%', - borderWidth: 1, - borderColor: Colors.lightgrey, - borderRadius: 2, - }, - modalControls: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-end', - }, - cancel: { - borderWidth: 1, - borderColor: Colors.lightgrey, - borderRadius: 4, - padding: 8, - marginRight: 8, - width: 88, - display: 'flex', - alignItems: 'center', - }, - save: { - padding: 8, - borderRadius: 4, - backgroundColor: Colors.primary, - width: 88, - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - }, - saveText: { - color: Colors.white, - }, - disabled: { - borderWidth: 1, - borderColor: Colors.lightgrey, - padding: 8, - borderRadius: 4, - width: 88, - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - }, - activity: { - paddingRight: 4, - }, - disabledText: { - color: Colors.disabled, - }, - sealUpdate: { + modalClose: { position: 'absolute', - top: 0, - height: 36, - left: 8, width: '100%', - }, - sealableText: { - color: Colors.text, - }, - sealable: { display: 'flex', - flexDirection: 'row', - alignItems: 'center', + alignItems: 'flex-end', + paddingRight: 8, + paddingTop: 8, + }, + modalDescription: { + fontSize: 14, + color: Colors.descriptionText, + paddingTop: 16, + paddingLeft: 16, + paddingRight: 16, paddingBottom: 16, }, - enable: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - justifyContent: 'center', + modalInput: { width: '100%', - marginBottom: 4, + paddingRight: 32, + paddingLeft: 32, }, - enableText: { - color: Colors.primary, - fontSize: 16, + inputText: { + width: '100%', + paddingLeft: 8, + paddingRight: 8, + paddingTop: 4, + paddingBottom: 4, + borderRadius: 4, + marginTop: 8, + backgroundColor: Colors.inputBase, }, - enableSwitch: { - transform: [{ scaleX: .6 }, { scaleY: .6 }], + enabledButton: { + marginTop: 32, + marginBottom: 16, + paddingTop: 8, + paddingBottom: 8, + paddingLeft: 32, + paddingRight: 32, + borderRadius: 4, + backgroundColor: Colors.primaryButton, + }, + enabledButtonText: { + color: Colors.primaryButtonText, + fontFamily: 'Roboto', + }, + disabledButton: { + marginTop: 32, + marginBottom: 16, + paddingTop: 8, + paddingBottom: 8, + paddingLeft: 32, + paddingRight: 32, + borderRadius: 4, + backgroundColor: Colors.disabledButton, + }, + disabledButtonText: { + color: Colors.disabledButtonText, + fontFamily: 'Roboto', }, }); diff --git a/app/mobile/src/session/settings/useSettings.hook.js b/app/mobile/src/session/settings/useSettings.hook.js index 6f6b54c1..e9a0d3f9 100644 --- a/app/mobile/src/session/settings/useSettings.hook.js +++ b/app/mobile/src/session/settings/useSettings.hook.js @@ -15,20 +15,12 @@ export function useSettings() { monthLast: false, editSeal: false, - sealMode: null, - sealUnlock: null, - sealPassword: null, - sealConfirm: null, - sealDelete: null, - seal: null, - sealKey: null, sealEnabled: false, sealUnlocked: false, - sealable: false, - canSaveSeal: false, - showSealUnlock: false, - showSealConfirm: false, - showSealPassword: false, + sealPassword: null, + sealConfirm: null, + hideConfirm: true, + hidePassword: true, }); const updateState = (value) => { @@ -45,7 +37,7 @@ export function useSettings() { const sealKey = account.state.sealKey; const sealEnabled = seal?.publicKey != null; const sealUnlocked = seal?.publicKey === sealKey?.public && sealKey?.private && sealKey?.public; - updateState({ sealable, seal, sealKey, sealEnabled, sealUnlocked }); + updateState({ sealable, seal, sealKey, sealEnabled: false, sealUnlocked }); }, [account.state]); const unlock = async () => { @@ -71,25 +63,6 @@ export function useSettings() { await account.actions.setAccountSeal({}, {}); } - useEffect(() => { - if (state.sealMode === 'unlocked') { - return updateState({ canSaveSeal: true }); - } - if (state.sealMode === 'unlocking' && state.sealUnlock != null && state.sealUnlock !== '') { - return updateState({ canSaveSeal: true }); - } - if (state.sealMode === 'enabling' && state.sealPassword != null && state.sealPassword === state.sealConfirm) { - return updateState({ canSaveSeal: true }); - } - if (state.sealMode === 'disabling' && state.sealDelete === 'delete') { - return updateState({ canSaveSeal: true }); - } - if (state.sealMode === 'updating' && state.sealPassword != null && state.sealPassword === state.sealConfirm) { - return updateState({ canSaveSeal: true }); - } - updateState({ canSaveSeal: false }); - }, [state.sealMode, state.sealable, state.sealUnlock, state.sealPassword, state.sealConfirm, state.sealDelete]); - const actions = { setTimeFull: async (flag) => { updateState({ timeFull: flag }); @@ -100,87 +73,19 @@ export function useSettings() { await profile.actions.setMonthLast(flag); }, showEditSeal: () => { - let sealMode = null; - const sealable = state.sealEnabled; - if (state.sealEnabled && !state.sealUnlocked) { - sealMode = 'unlocking'; - } - else if (state.sealEnabled && state.sealUnlocked) { - sealMode = 'unlocked'; - } - else { - sealMode = 'disabled'; - } - updateState({ editSeal: true, sealMode, sealUnlock: null, sealPassword: null, sealConfirm: null, sealDelete: null }); + updateState({ editSeal: true }); }, hideEditSeal: () => { updateState({ editSeal: false }); }, - setSealUnlock: (sealUnlock) => { - updateState({ sealUnlock }); - }, setSealPassword: (sealPassword) => { updateState({ sealPassword }); }, setSealConfirm: (sealConfirm) => { updateState({ sealConfirm }); }, - setSealDelete: (sealDelete) => { - updateState({ sealDelete }); - }, - showSealUnlock: () => { - updateState({ showSealUnlock: true }); - }, - hideSealUnlock: () => { - updateState({ showSealUnlock: false }); - }, - showSealPassword: () => { - updateState({ showSealPassword: true }); - }, - hideSealPassword: () => { - updateState({ showSealPassword: false }); - }, - showSealConfirm: () => { - updateState({ showSealConfirm: true }); - }, - hideSealConfirm: () => { - updateState({ showSealConfirm: false }); - }, - updateSeal: () => { - updateState({ sealMode: 'updating' }); - }, - saveSeal: async () => { - if (!state.saving) { - try { - updateState({ saving: true }); - - if (state.sealMode === 'enabling') { - await enable(); - } - else if (state.sealMode === 'disabling') { - await disable(); - } - else if (state.sealMode === 'unlocking') { - await unlock(); - } - else if (state.sealMode === 'unlocked') { - await forget(); - } - else if (state.sealMode === 'updating') { - await update(); - } - else { - console.log(state.sealMode); - } - - updateState({ saving: false }); - } - catch(err) { - console.log(err); - updateState({ saving: false }); - throw new Error('seal operation failed'); - } - } + generateKey: () => { + console.log("GENERATE KEY"); }, };