Merge pull request #458 from Kodylow/password-section

fedimint · Aug 5, 2024 · 5dc4336 · 5dc4336
2 parents 0eb9dd2 + 0f7a492
commit 5dc4336
Show file tree

Hide file tree

Showing 17 changed files with 203 additions and 101 deletions.
diff --git a/apps/guardian-ui/src/components/setup/screens/setConfiguration/BasicSettingsForm.tsx b/apps/guardian-ui/src/components/setup/screens/setConfiguration/BasicSettingsForm.tsx
@@ -21,9 +21,6 @@ interface BasicSettingsFormProps {
   setPassword: (password: string) => void;
   hasCopied: boolean;
   onCopy: () => void;
-  isFollower: boolean;
-  hostServerUrl: string;
-  setHostServerUrl: (url: string) => void;
 }
 
 export const BasicSettingsForm: React.FC<BasicSettingsFormProps> = ({
@@ -33,9 +30,6 @@ export const BasicSettingsForm: React.FC<BasicSettingsFormProps> = ({
   setPassword,
   hasCopied,
   onCopy,
-  isFollower,
-  hostServerUrl,
-  setHostServerUrl,
 }) => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -82,19 +76,6 @@ export const BasicSettingsForm: React.FC<BasicSettingsFormProps> = ({
           </Text>
         </FormHelperText>
       </FormControl>
-      {isFollower && (
-        <FormControl>
-          <FormLabel>{t('set-config.join-federation')}</FormLabel>
-          <Input
-            value={hostServerUrl}
-            onChange={(ev) => setHostServerUrl(ev.currentTarget.value)}
-            placeholder='ws://...'
-          />
-          <FormHelperText>
-            {t('set-config.join-federation-help')}
-          </FormHelperText>
-        </FormControl>
-      )}
     </FormGroup>
   );
 };
diff --git a/apps/guardian-ui/src/components/setup/screens/setConfiguration/ConfirmPasswordModal.tsx b/apps/guardian-ui/src/components/setup/screens/setConfiguration/ConfirmPasswordModal.tsx
@@ -1,6 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Box,
   Button,
+  Checkbox,
   Flex,
   FormControl,
   FormHelperText,
@@ -15,6 +21,7 @@ import {
   ModalOverlay,
 } from '@chakra-ui/react';
 import { useTranslation } from '@fedimint/utils';
+import { ReactComponent as WarningIcon } from '../../../../assets/svgs/warning.svg';
 
 interface ConfirmPasswordModalProps {
   password: string;
@@ -34,6 +41,7 @@ export const ConfirmPasswordModal: React.FC<ConfirmPasswordModalProps> = ({
   onClose,
 }) => {
   const { t } = useTranslation();
+  const [isBackupConfirmed, setIsBackupConfirmed] = useState(false);
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
@@ -55,6 +63,26 @@ export const ConfirmPasswordModal: React.FC<ConfirmPasswordModalProps> = ({
                 {t('set-config.error-password-mismatch')}
               </FormHelperText>
             )}
+            <Alert status='warning' mt={4}>
+              <AlertIcon>
+                <WarningIcon />
+              </AlertIcon>
+              <Box>
+                <AlertTitle>
+                  {t('set-config.password-warning-title')}
+                </AlertTitle>
+                <AlertDescription>
+                  {t('set-config.password-warning')}
+                </AlertDescription>
+              </Box>
+            </Alert>
+            <Checkbox
+              mt={4}
+              isChecked={isBackupConfirmed}
+              onChange={(e) => setIsBackupConfirmed(e.target.checked)}
+            >
+              {t('set-config.admin-password-backup')}
+            </Checkbox>
           </FormControl>
         </ModalBody>
         <ModalFooter>

diff --git a/apps/guardian-ui/src/components/setup/screens/setConfiguration/FederationSettingsForm.tsx b/apps/guardian-ui/src/components/setup/screens/setConfiguration/FederationSettingsForm.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { FormControl, FormLabel, Input, Select } from '@chakra-ui/react';
+import {
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Select,
+} from '@chakra-ui/react';
 import { useTranslation } from '@fedimint/utils';
 import { FormGroup } from '@fedimint/ui';
 import { ReactComponent as FedimintLogo } from '../../../../assets/svgs/fedimint.svg';
@@ -14,12 +20,18 @@ interface FederationSettingsFormProps {
   isHost: boolean;
   numPeers: string;
   setNumPeers: (value: string) => void;
+  isFollower: boolean;
+  hostServerUrl: string;
+  setHostServerUrl: (value: string) => void;
 }
 
 export const FederationSettingsForm: React.FC<FederationSettingsFormProps> = ({
   federationName,
   handleChangeFederationName,
   isHost,
+  isFollower,
+  hostServerUrl,
+  setHostServerUrl,
   numPeers,
   setNumPeers,
 }) => {
@@ -31,26 +43,44 @@ export const FederationSettingsForm: React.FC<FederationSettingsFormProps> = ({
       title={`${t('set-config.federation-settings')}`}
       isOpen={true}
     >
-      <FormControl>
-        <FormLabel>{t('set-config.federation-name')}</FormLabel>
-        <Input value={federationName} onChange={handleChangeFederationName} />
-      </FormControl>
       {isHost && (
+        <>
+          <FormControl>
+            <FormLabel>{t('set-config.federation-name')}</FormLabel>
+            <Input
+              value={federationName}
+              onChange={handleChangeFederationName}
+            />
+          </FormControl>
+          <FormControl>
+            <FormLabel>{t('set-config.guardian-number')}</FormLabel>
+            <Select
+              value={numPeers}
+              onChange={(e) => setNumPeers(e.target.value)}
+            >
+              {BFT_NUMBERS.map((num) => (
+                <option key={num} value={num.toString()}>
+                  {num}
+                </option>
+              ))}
+            </Select>
+          </FormControl>
+          <BftInfo numPeers={parseInt(numPeers)} />
+        </>
+      )}
+      {isFollower && (
         <FormControl>
-          <FormLabel>{t('set-config.guardian-number')}</FormLabel>
-          <Select
-            value={numPeers}
-            onChange={(e) => setNumPeers(e.target.value)}
-          >
-            {BFT_NUMBERS.map((num) => (
-              <option key={num} value={num.toString()}>
-                {num}
-              </option>
-            ))}
-          </Select>
+          <FormLabel>{t('set-config.join-federation')}</FormLabel>
+          <Input
+            value={hostServerUrl}
+            onChange={(ev) => setHostServerUrl(ev.currentTarget.value)}
+            placeholder='ws://...'
+          />
+          <FormHelperText>
+            {t('set-config.join-federation-help')}
+          </FormHelperText>
         </FormControl>
       )}
-      <BftInfo numPeers={parseInt(numPeers)} />
     </FormGroup>
   );
 };
diff --git a/apps/guardian-ui/src/components/setup/screens/setConfiguration/SetConfiguration.tsx b/apps/guardian-ui/src/components/setup/screens/setConfiguration/SetConfiguration.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Checkbox,
   Flex,
   Icon,
   Button,
@@ -55,7 +54,6 @@ export const SetConfiguration: React.FC<Props> = ({ next }: Props) => {
   const [myName, setMyName] = useState(stateMyName);
   const [password, setPassword] = useState(statePassword);
   const [confirmPassword, setConfirmPassword] = useState('');
-  const [passwordCheck, setPasswordCheck] = useState(false);
   const [hostServerUrl, setHostServerUrl] = useState('');
   const [defaultParams, setDefaultParams] = useState<ConfigGenParams>();
   const [federationName, setFederationName] = useState('');
@@ -121,7 +119,6 @@ export const SetConfiguration: React.FC<Props> = ({ next }: Props) => {
   const hostCriteria = [
     myName,
     password,
-    passwordCheck,
     federationName,
     isValidNumber(numPeers, 4),
     isValidNumber(blockConfirmations, 0, 200),
@@ -132,14 +129,13 @@ export const SetConfiguration: React.FC<Props> = ({ next }: Props) => {
   const soloCriteria = [
     myName,
     password,
-    passwordCheck,
     federationName,
     isValidNumber(blockConfirmations, 0, 200),
     isValidMeta(metaFields),
     network,
   ];
 
-  const followerCriteria = [myName, password, hostServerUrl, passwordCheck];
+  const followerCriteria = [myName, password, hostServerUrl];
 
   const isValid: boolean = isHost
     ? hostCriteria.every(Boolean)
@@ -230,14 +226,19 @@ export const SetConfiguration: React.FC<Props> = ({ next }: Props) => {
   };
 
   return (
-    <Flex direction='column' gap={['2', '6']} justify='start' align='start'>
-      <BasicSettingsForm
-        myName={myName}
-        setMyName={setMyName}
-        password={password}
-        setPassword={setPassword}
-        hasCopied={hasCopied}
-        onCopy={onCopy}
+    <Flex
+      direction='column'
+      gap={['2', '6']}
+      justify='flex-start'
+      align='flex-start'
+      width='auto'
+    >
+      <FederationSettingsForm
+        federationName={federationName}
+        handleChangeFederationName={handleChangeFederationName}
+        numPeers={numPeers}
+        setNumPeers={setNumPeers}
+        isHost={isHost}
         isFollower={!isHost && !isSolo}
         hostServerUrl={hostServerUrl}
         setHostServerUrl={setHostServerUrl}
@@ -251,49 +252,28 @@ export const SetConfiguration: React.FC<Props> = ({ next }: Props) => {
         setBlockConfirmations={setBlockConfirmations}
         isHostOrSolo={isHost || isSolo}
       />
-      {(isHost || isSolo) && (
-        <FederationSettingsForm
-          federationName={federationName}
-          handleChangeFederationName={handleChangeFederationName}
-          numPeers={numPeers}
-          setNumPeers={setNumPeers}
-          isHost={isHost}
-        />
-      )}
+      <BasicSettingsForm
+        myName={myName}
+        setMyName={setMyName}
+        password={password}
+        setPassword={setPassword}
+        hasCopied={hasCopied}
+        onCopy={onCopy}
+      />
+      <Button
+        isDisabled={!isValid}
+        onClick={isValid ? handleNext : undefined}
+        leftIcon={<Icon as={ArrowRightIcon} />}
+        width='60%'
+        alignSelf='center'
+      >
+        {t('common.next')}
+      </Button>
       {error && (
         <Text color={theme.colors.red[500]} mt={4}>
           {error}
         </Text>
       )}
-      <Flex
-        direction='column'
-        justify='space-between'
-        alignSelf='center'
-        width={['100%', '100%', '60%']}
-      >
-        {password !== '' && (
-          <Checkbox
-            isRequired
-            spacing='10px'
-            alignSelf='flex-start'
-            onChange={(e) => setPasswordCheck(e.target.checked)}
-          >
-            <Text color={theme.colors.yellow[500]}>
-              {t('set-config.admin-password-backup')}
-            </Text>
-          </Checkbox>
-        )}
-        <Button
-          isDisabled={!isValid}
-          onClick={isValid ? handleNext : undefined}
-          leftIcon={<Icon as={ArrowRightIcon} />}
-          mt={['2', '4']}
-          width={['25%', 'auto']}
-          alignSelf='flex-start'
-        >
-          {t('common.next')}
-        </Button>
-      </Flex>
       <ConfirmPasswordModal
         password={password}
         confirmPassword={confirmPassword}

diff --git a/apps/guardian-ui/src/languages/ca.json b/apps/guardian-ui/src/languages/ca.json
@@ -229,7 +229,9 @@
     "meta-fields-value": "Valor",
     "meta-fields-effect": "Efecte",
     "meta-fields-add-another": "Afegeix un altre",
-    "meta-fields-title": "La teva proposta Meta:"
+    "meta-fields-title": "La teva proposta Meta:",
+    "password-warning": "Has de fer una còpia de seguretat de la teva contrasenya i guardar-la en un lloc segur. Aquesta contrasenya és necessària per accedir al teu tauler de guardians. No pots recuperar-la si la perds!",
+    "password-warning-title": "Fes una còpia de seguretat de la teva contrasenya!"
   },
   "setup": {
     "common": {

diff --git a/apps/guardian-ui/src/languages/de.json b/apps/guardian-ui/src/languages/de.json
@@ -229,7 +229,9 @@
     "meta-fields-value": "Wert",
     "meta-fields-effect": "Effekt",
     "meta-fields-add-another": "Füge einen weiteren hinzu",
-    "meta-fields-title": "Ihr Meta-Vorschlag:"
+    "meta-fields-title": "Ihr Meta-Vorschlag:",
+    "password-warning": "Sie müssen eine Sicherung Ihres Passworts machen und es sicher aufbewahren. Dieses Passwort ist erforderlich, um auf Ihren Wächter-Dashboard zuzugreifen. Sie können es nicht wiederherstellen, wenn Sie es verlieren!",
+    "password-warning-title": "Sichern Sie Ihr Passwort!"
   },
   "setup": {
     "common": {

diff --git a/apps/guardian-ui/src/languages/en.json b/apps/guardian-ui/src/languages/en.json
@@ -229,7 +229,9 @@
     "meta-fields-value": "Value",
     "meta-fields-effect": "Effect",
     "meta-fields-add-another": "Add another",
-    "meta-fields-title": "Your Meta Proposal:"
+    "meta-fields-title": "Your Meta Proposal:",
+    "password-warning-title": "Backup your Password!",
+    "password-warning": "You MUST back up your password and keep it safe. This password is required to access your guardian dashboard. You CANNOT recover it if you lose it!"
   },
   "setup": {
     "common": {

diff --git a/apps/guardian-ui/src/languages/es.json b/apps/guardian-ui/src/languages/es.json
@@ -232,7 +232,9 @@
     "meta-fields-value": "Valor",
     "meta-fields-effect": "Efecto",
     "meta-fields-add-another": "Agregar otro",
-    "meta-fields-title": "Tu Propuesta Meta:"
+    "meta-fields-title": "Tu Propuesta Meta:",
+    "password-warning": "Debes hacer una copia de seguridad de tu contraseña y guardarla en un lugar seguro. Esta contraseña es necesaria para acceder a tu tablero de guardianes. ¡No puedes recuperarla si la pierdes!",
+    "password-warning-title": "¡Haz una copia de seguridad de tu contraseña!"
   },
   "setup": {
     "common": {

diff --git a/apps/guardian-ui/src/languages/fr.json b/apps/guardian-ui/src/languages/fr.json
@@ -229,7 +229,9 @@
     "meta-fields-value": "Valeur",
     "meta-fields-effect": "Effet",
     "meta-fields-add-another": "Ajouter un autre",
-    "meta-fields-title": "Votre proposition Meta :"
+    "meta-fields-title": "Votre proposition Meta :",
+    "password-warning": "Vous devez faire une sauvegarde de votre mot de passe et le conserver en sécurité. Ce mot de passe est nécessaire pour accéder à votre tableau de bord de gardien. Vous ne pouvez pas le récupérer si vous le perdez !",
+    "password-warning-title": "Faites une sauvegarde de votre mot de passe !"
   },
   "setup": {
     "common": {

diff --git a/apps/guardian-ui/src/languages/hu.json b/apps/guardian-ui/src/languages/hu.json
@@ -229,7 +229,9 @@
     "meta-fields-value": "Érték",
     "meta-fields-effect": "Hatás",
     "meta-fields-add-another": "Adj hozzá egy másikat",
-    "meta-fields-title": "A te Meta Javaslatod:"
+    "meta-fields-title": "A te Meta Javaslatod:",
+    "password-warning": "Meg kell őrizned a jelszavadat, és biztonságos helyen kell tárolnod. Ez a jelszó szükséges a Őrző irányítópultjának eléréséhez. Nem tudod visszaállítani, ha elveszíted!",
+    "password-warning-title": "Jelszó biztonsági mentése!"
   },
   "setup": {
     "common": {