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");
},
};