adding sealing key modal

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'),

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',
   }
 ];
 

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() {
               <MatIcons name="lock-outline" size={20} color={Colors.linkText} />
             </View>
             <View style={styles.option}>
-              <Text style={styles.optionLink}>{ state.strings.sealedTopics }</Text>
+              { state.sealEnabled && (
+                <Text style={styles.optionLink}>{ state.strings.manageTopics }</Text>
+              )}
+              { !state.sealEnabled && (
+                <Text style={styles.optionLink}>{ state.strings.enableTopics }</Text>
+              )}
             </View>
             <View style={styles.control} />
           </TouchableOpacity>
@@ -60,7 +64,7 @@ export function Settings() {
               <MatIcons name="progress-clock" size={20} color={Colors.text} />
             </View>
             <View style={styles.optionControl}>
-              <Text style={styles.optionText}>{ state.strings.hourMode }</Text>
+              <Text style={styles.labelText}>{ state.strings.hourMode }</Text>
               <TouchableOpacity style={styles.radio} activeOpacity={1} onPress={() => actions.setTimeFull(false)}>
                 { !state.timeFull && (
                   <View style={styles.activeRadioCircle} />
@@ -87,7 +91,7 @@ export function Settings() {
               <MatIcons name="calendar-month-outline" size={20} color={Colors.text} />
             </View>
             <View style={styles.optionControl}>
-              <Text style={styles.optionText}>{ state.strings.dateMode }</Text>
+              <Text style={styles.labelText}>{ state.strings.dateMode }</Text>
               <TouchableOpacity style={styles.radio} activeOpacity={1} onPress={() => actions.setMonthLast(false)}>
                 { !state.monthLast && (
                   <View style={styles.activeRadioCircle} />
@@ -193,153 +197,45 @@ export function Settings() {
           supportedOrientations={['portrait', 'landscape']}
           onRequestClose={actions.hideEditSeal}
         >
-          <KeyboardAvoidingView behavior="height" style={styles.modalWrapper}>
+          <KeyboardAvoidingView behavior="height" style={styles.modalOverlay}>
             <View style={styles.modalContainer}>
-              <Text style={styles.modalHeader}>Sealed Topics:</Text>
+              <View style={styles.modalClose}>
-              <View style={styles.sealable}>
+                <TouchableOpacity activeOpacity={1} onPress={actions.hideEditSeal}>
-                <TouchableOpacity onPress={() => actions.setSealEnable(!state.sealEnabled)} activeOpacity={1}>
+                  <MatIcons name="close" size={20} color={Colors.text} />
-                  <Text style={styles.sealableText}>Enable Sealed Topics</Text>
                 </TouchableOpacity>
-                <Switch style={styles.enableSwitch} value={state.sealEnabled} onValueChange={actions.setSealEnable} trackColor={styles.switch}/>
               </View>
-              { state.sealMode === 'unlocking' && (
+              <Text style={styles.modalHeader}>{ state.strings.sealedTopics }</Text>
+              { !state.sealEnabled && (
                 <>
-                  { !state.showSealUnlock && (
+                  <Text style={styles.modalDescription}>{ state.strings.sealUnset }</Text>
-                    <View style={styles.inputField}>
+                  <View style={styles.modalInput}>
-                      <TextInput style={styles.input} value={state.sealUnlock} onChangeText={actions.setSealUnlock}
+                    <TextInput style={styles.inputText} value={state.sealPassword} onChangeText={actions.setSealPassword}
-                          autoCapitalize={'none'} secureTextEntry={true} placeholder="Password for Seal"
+                        autoCapitalize={'none'} secureTextEntry={state.hidePassword} placeholder={state.strings.password}
-                          placeholderTextColor={Colors.grey} />
+                        placeholderTextColor={Colors.placeholderText} />
-                      <TouchableOpacity onPress={actions.showSealUnlock}>
+                  </View>
-                        <Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
+                  <View style={styles.modalInput}>
-                      </TouchableOpacity>
+                    <TextInput style={styles.inputText} value={state.sealConfirm} onChangeText={actions.setSealConfirm}
-                    </View>
+                        autoCapitalize={'none'} secureTextEntry={state.hideConfirm} placeholder={state.strings.confirmPassword}
+                        placeholderTextColor={Colors.placeholderText} />
+                  </View>
+                  { state.sealPassword === state.sealConfirm && state.sealPassword && (
+                    <TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={actions.generateKey}>
+                      <Text style={styles.enabledButtonText}>{ state.strings.generate }</Text>
+                    </TouchableOpacity>
                   )}
-                  { state.showSealUnlock && (
+                  { (state.sealPassword !== state.sealConfirm || !state.sealPassword) && (
-                    <View style={styles.inputField}>
+                    <View style={styles.disabledButton}>
-                      <TextInput style={styles.input} value={state.sealUnlock} onChangeText={actions.setSealUnlock}
+                      <Text style={styles.disabledButtonText}>{ state.strings.generate }</Text>
-                          autoCapitalize={'none'} secureTextEntry={false} placeholder="Password for Seal"
-                          placeholderTextColor={Colors.grey} />
-                      <TouchableOpacity onPress={actions.hideSealUnlock}>
-                        <Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
-                      </TouchableOpacity>
                     </View>
                   )}
                 </>
               )}
-              { (state.sealMode === 'updating' || state.sealMode === 'enabling') && (
+              { state.sealEnabled && !state.sealUnlocked && (
-                <>
+                <Text style={styles.modalDescription}>{ state.strings.sealLocked }</Text>
-                  { !state.showSealPassword && (
-                    <View style={styles.inputField}>
-                      <TextInput style={styles.input} value={state.sealPassword} onChangeText={actions.setSealPassword}
-                          autoCapitalize={'none'} secureTextEntry={true} placeholder="Password for Seal"
-                          placeholderTextColor={Colors.grey} />
-                      <TouchableOpacity onPress={actions.showSealPassword}>
-                        <Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
-                      </TouchableOpacity>
-                    </View>
-                  )}
-                  { state.showSealPassword && (
-                    <View style={styles.inputField}>
-                      <TextInput style={styles.input} value={state.sealPassword} onChangeText={actions.setSealPassword}
-                          autoCapitalize={'none'} secureTextEntry={false} placeholder="Password for Seal"
-                          placeholderTextColor={Colors.grey} />
-                      <TouchableOpacity onPress={actions.hideSealPassword}>
-                        <Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
-                      </TouchableOpacity>
-                    </View>
-                  )}
-                  { !state.showSealConfirm && (
-                    <View style={styles.inputField}>
-                      <TextInput style={styles.input} value={state.sealConfirm} onChangeText={actions.setSealConfirm}
-                          autoCapitalize={'none'} secureTextEntry={true} placeholder="Confirm Password"
-                          placeholderTextColor={Colors.grey} />
-                      <TouchableOpacity onPress={actions.showSealConfirm}>
-                        <Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
-                      </TouchableOpacity>
-                    </View>
-                  )}
-                  { state.showSealConfirm && (
-                    <View style={styles.inputField}>
-                      <TextInput style={styles.input} value={state.sealConfirm} onChangeText={actions.setSealConfirm}
-                          autoCapitalize={'none'} secureTextEntry={false} placeholder="Confirm Password"
-                          placeholderTextColor={Colors.grey} />
-                      <TouchableOpacity onPress={actions.hideSealConfirm}>
-                        <Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
-                      </TouchableOpacity>
-                    </View>
-                  )}
-                  <Text style={styles.notice}>saving can take a few minutes</Text>
-                </>
               )}
-              { state.sealMode === 'disabling' && (
+              { state.sealEnabled && state.sealUnlocked && (
-                <View style={styles.inputField}>
+                <Text style={styles.modalDescritpion}>{ state.strings.sealUnlocked }</Text>
-                  <Ionicons style={styles.warn} name="exclamationcircleo" size={18} color="#888888" />
-                  <TextInput style={styles.input} value={state.sealDelete} onChangeText={actions.setSealDelete}
-                      autoCapitalize={'none'} placeholder="Type 'delete' to remove sealing key"
-                      placeholderTextColor={Colors.grey} />
-                </View>
               )}
-              { state.sealMode === 'unlocked' && (
-                <View style={styles.inputField}>
-                  <TextInput style={styles.input} value={'xxxxxxxx'} editable={false} secureTextEntry={true} />
-                  <Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
-                  <TouchableOpacity style={styles.sealUpdate} onPress={actions.updateSeal} />
-                </View>
-              )}
-              <View style={styles.modalControls}>
-                <TouchableOpacity style={styles.cancel} onPress={actions.hideEditSeal}>
-                  <Text style={styles.canceltext}>Cancel</Text>
-                </TouchableOpacity>
-                { state.canSaveSeal && (
-                  <>
-                    { state.sealMode !== 'unlocking' && state.sealMode !== 'unlocked' && (
-                      <TouchableOpacity style={styles.save} onPress={saveSeal}>
-                        { state.saving && (
-                          <ActivityIndicator style={styles.activity} color={Colors.white} />
-                        )}
-                        <Text style={styles.saveText}>Save</Text>
-                      </TouchableOpacity>
-                    )}
-                    { state.sealMode === 'unlocked' && (
-                      <TouchableOpacity style={styles.save} onPress={saveSeal}>
-                        { state.saving && (
-                          <ActivityIndicator style={styles.activity} color={Colors.white} />
-                        )}
-                        <Text style={styles.saveText}>Forget</Text>
-                      </TouchableOpacity>
-                    )}
-                    { state.sealMode === 'unlocking' && (
-                      <TouchableOpacity style={styles.save} onPress={saveSeal}>
-                        { state.saving && (
-                          <ActivityIndicator style={styles.activity} color={Colors.white} />
-                        )}
-                        <Text style={styles.saveText}>Unlock</Text>
-                      </TouchableOpacity>
-                    )}
-                  </>
-                )}
-                { !state.canSaveSeal && (
-                  <>
-                    { state.sealMode !== 'unlocking' && (
-                      <View style={styles.disabled}>
-                        { state.saving && (
-                          <ActivityIndicator style={styles.activity} color={Colors.white} />
-                        )}
-                        <Text style={styles.disabledText}>Save</Text>
-                      </View>
-                    )}
-                    { state.sealMode === 'unlocking' && (
-                      <View style={styles.disabled}>
-                        { state.saving && (
-                          <ActivityIndicator style={styles.activity} color={Colors.white} />
-                        )}
-                        <Text style={styles.disabledText}>Unlock</Text>
-                      </View>
-                    )}
-                  </>
-                )}
-
-              </View>
             </View>
           </KeyboardAvoidingView>
         </Modal>

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,
+    backgroundColor: Colors.modalBase,
-    padding: 16,
     width: '80%',
     maxWidth: 400,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: 8,
   },
   modalHeader: {
     fontSize: 18,
     paddingBottom: 16,
+    paddingTop: 16,
     color: Colors.text,
+    fontFamily: 'Roboto',
   },
-  input: {
+  modalClose: {
-    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: {
     position: 'absolute',
-    top: 0,
-    height: 36,
-    left: 8,
     width: '100%',
-  },
-  sealableText: {
-    color: Colors.text,
-  },
-  sealable: {
     display: 'flex',
-    flexDirection: 'row',
+    alignItems: 'flex-end',
-    alignItems: 'center',
+    paddingRight: 8,
+    paddingTop: 8,
+  },
+  modalDescription: {
+    fontSize: 14,
+    color: Colors.descriptionText,
+    paddingTop: 16,
+    paddingLeft: 16,
+    paddingRight: 16,
     paddingBottom: 16,
   },
-  enable: {
+  modalInput: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
     width: '100%',
-    marginBottom: 4,
+    paddingRight: 32,
+    paddingLeft: 32,
   },
-  enableText: {
+  inputText: {
-    color: Colors.primary,
+    width: '100%',
-    fontSize: 16,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4,
+    paddingBottom: 4,
+    borderRadius: 4,
+    marginTop: 8,
+    backgroundColor: Colors.inputBase,
   },
-  enableSwitch: {
+  enabledButton: {
-    transform: [{ scaleX: .6 }, { scaleY: .6 }],
+    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',
   },
 });
 

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,
+    sealPassword: null,
-    canSaveSeal: false,
+    sealConfirm: null,
-    showSealUnlock: false,
+    hideConfirm: true,
-    showSealConfirm: false,
+    hidePassword: true,
-    showSealPassword: false,
   });
 
   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;
+      updateState({ editSeal: true });
-      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 });
     },
     hideEditSeal: () => {
       updateState({ editSeal: false });
     },
-    setSealUnlock: (sealUnlock) => {
-      updateState({ sealUnlock });
-    },
     setSealPassword: (sealPassword) => {
       updateState({ sealPassword });
     },
     setSealConfirm: (sealConfirm) => {
       updateState({ sealConfirm });
     },
-    setSealDelete: (sealDelete) => {
+    generateKey: () => {
-      updateState({ sealDelete });
+      console.log("GENERATE KEY");
-    },
-    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');
-        }
-      }
     },
   };