mirror of
https://github.com/balzack/databag.git
synced 2025-02-14 12:39:17 +00:00
adding sealing key modal
This commit is contained in:
Roland Osborne
parent
41b72427c4
commit
55f8519ef7
@ -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'),
|
||||
|
||||
@ -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',
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@ -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.sealable}>
|
||||
<TouchableOpacity onPress={() => actions.setSealEnable(!state.sealEnabled)} activeOpacity={1}>
|
||||
<Text style={styles.sealableText}>Enable Sealed Topics</Text>
|
||||
<View style={styles.modalClose}>
|
||||
<TouchableOpacity activeOpacity={1} onPress={actions.hideEditSeal}>
|
||||
<MatIcons name="close" size={20} color={Colors.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 && (
|
||||
<View style={styles.inputField}>
|
||||
<TextInput style={styles.input} value={state.sealUnlock} onChangeText={actions.setSealUnlock}
|
||||
autoCapitalize={'none'} secureTextEntry={true} placeholder="Password for Seal"
|
||||
placeholderTextColor={Colors.grey} />
|
||||
<TouchableOpacity onPress={actions.showSealUnlock}>
|
||||
<Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Text style={styles.modalDescription}>{ state.strings.sealUnset }</Text>
|
||||
<View style={styles.modalInput}>
|
||||
<TextInput style={styles.inputText} value={state.sealPassword} onChangeText={actions.setSealPassword}
|
||||
autoCapitalize={'none'} secureTextEntry={state.hidePassword} placeholder={state.strings.password}
|
||||
placeholderTextColor={Colors.placeholderText} />
|
||||
</View>
|
||||
<View style={styles.modalInput}>
|
||||
<TextInput style={styles.inputText} value={state.sealConfirm} onChangeText={actions.setSealConfirm}
|
||||
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 && (
|
||||
<View style={styles.inputField}>
|
||||
<TextInput style={styles.input} value={state.sealUnlock} onChangeText={actions.setSealUnlock}
|
||||
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>
|
||||
{ (state.sealPassword !== state.sealConfirm || !state.sealPassword) && (
|
||||
<View style={styles.disabledButton}>
|
||||
<Text style={styles.disabledButtonText}>{ state.strings.generate }</Text>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{ (state.sealMode === 'updating' || state.sealMode === 'enabling') && (
|
||||
<>
|
||||
{ !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.sealEnabled && !state.sealUnlocked && (
|
||||
<Text style={styles.modalDescription}>{ state.strings.sealLocked }</Text>
|
||||
)}
|
||||
{ state.sealMode === 'disabling' && (
|
||||
<View style={styles.inputField}>
|
||||
<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.sealEnabled && state.sealUnlocked && (
|
||||
<Text style={styles.modalDescritpion}>{ state.strings.sealUnlocked }</Text>
|
||||
)}
|
||||
{ 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>
|
||||
|
||||
@ -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',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -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");
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user