Merge pull request #54 from medienhaus/add-component-ConfirmCancelBut…

…tons Add `ConfirmCancelButtons` component
medienhaus · Sep 5, 2023 · 6ef11fe · 6ef11fe
2 parents 31dc444 + d5fd533
commit 6ef11fe
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 18 deletions.
diff --git a/components/UI/ConfirmCancelButtons.js b/components/UI/ConfirmCancelButtons.js
@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+
+const ConfirmCancelButtonsWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: var(--margin);
+`;
+
+const ConfirmButton = styled.button`
+  color: var(--color-background);
+  background-color: var(--color-foreground);
+
+  &:disabled {
+    color: var(--color-background);
+    background-color: var(--color-disabled);
+  }
+`;
+
+const CancelButton = styled.button`
+  color: var(--color-foreground);
+  background-color: var(--color-background);
+
+  &:disabled {
+    color: var(--color-disabled);
+    background-color: var(--color-background);
+  }
+`;
+
+const ConfirmCancelButtons = ({ children, disabled, onClick, onCancel }) => {
+    const { t } = useTranslation();
+
+    return (
+        <ConfirmCancelButtonsWrapper>
+            <ConfirmButton type="submit" disabled={disabled} onClick={onClick}>{ children ? children : t('Confirm') }</ConfirmButton>
+            <CancelButton type="reset" disabled={disabled} onClick={onCancel}>{ t('Cancel') }</CancelButton>
+        </ConfirmCancelButtonsWrapper>
+    );
+};
+
+export default ConfirmCancelButtons;
diff --git a/pages/account.js b/pages/account.js
@@ -6,6 +6,7 @@ import { filter, map } from 'lodash';
 import styled from 'styled-components';
 
 import { useAuth } from '../lib/Auth';
+import ConfirmCancelButtons from '../components/UI/ConfirmCancelButtons';
 
 const ProfileSection = styled.div`
   display: grid;
@@ -127,12 +128,26 @@ export default function Account() {
         // Add new email if provided
         if (inputNewEmail) {
             const secretResponse = await matrixClient.generateClientSecret();
-            await matrixClient.requestAdd3pidEmailToken(inputNewEmail, secretResponse, 1, `${window.location}?secret=${secretResponse}`);
-            // Now an email will be sent to the user, in which they have to click on a validation link
+            const emailToken = await matrixClient.requestAdd3pidEmailToken(inputNewEmail, secretResponse, 1, `${window.location}?secret=${secretResponse}`)
+                .catch(/** @param {MatrixError} error */(error) => {
+                    setFeedbackMessage(error.data.error);
+                });
+
+            // Request is done, so we can set the state to false.
+            setIsSavingChanges(false);
+
+            // If the request was not successful, we return out of the function.
+            if (!emailToken) return;
+
+            // If the request was successful, a confirmation email will be sent to the user.
             setInputNewEmail('');
-            setFeedbackMessage(t('We have sent an email to the provided address. Please click the link in it in order to verify that you really own the given address.'));
+            setFeedbackMessage(t('We have sent a confirmation email to the provided address.'));
         }
-        setIsSavingChanges(false);
+    };
+
+    const handleCancel = () => {
+        setInputDisplayname(profileInfo.displayname);
+        setInputNewEmail('');
     };
 
     const confirmNewEmail = async () => {
@@ -160,7 +175,7 @@ export default function Account() {
                 router.push('/account');
             })
             .catch(/** @param {MatrixError} error */(error) => {
-                setFeedbackMessage(error.message);
+                setFeedbackMessage(error.data.error);
             })
             .finally(() => {
                 setIsSavingChanges(false);
@@ -184,11 +199,11 @@ export default function Account() {
         return (
             <>
                 <h2>/account</h2>
-                <p>{ t('Please enter your account password to confirm adding the given email address to your account:') }</p>
+                <p>{ t('Please enter your account password to confirm adding the given email address:') }</p>
                 <br />
                 <form onSubmit={(event) => { event.preventDefault(); confirmNewEmail(); }}>
                     <input type="password" placeholder={t('password')} onChange={(event) => { setInputPassword(event.target.value);}} />
-                    <button type="submit" disabled={isSavingChanges}>{ t('Confirm') }</button>
+                    <ConfirmCancelButtons disabled={isSavingChanges} onCancel={() => setInputPassword('')} />
                 </form>
                 { feedbackMessage && (<p>❗️ { feedbackMessage }</p>) }
             </>
@@ -237,7 +252,7 @@ export default function Account() {
                         profileInfo.displayname !== inputDisplayname ||
                         inputNewEmail
                     ) && (
-                        <button type="submit" disabled={isSavingChanges}>{ t('Save changes') }</button>
+                        <ConfirmCancelButtons disabled={isSavingChanges} onCancel={handleCancel}>{ t('Save changes') }</ConfirmCancelButtons>
                     ) }
                     { feedbackMessage && (<p>❗️ { feedbackMessage }</p>) }
                 </form>

diff --git a/public/locales/de/_defaults.json b/public/locales/de/_defaults.json
@@ -1,6 +1,11 @@
 {
-    "Password": "Passwort",
-    "Select action": "Aktion wählen",
-    "What would you like to do?": "Was möchtest Du tun?",
-    "{{error}}, please wait {{time}} seconds.": "{{error}}, bitte warte {{time}} sekunden."
-}
+  "Cancel": "Abbrechen",
+  "Confirm": "Bestätigen",
+  "Delete": "Löschen",
+  "Password": "Passwort",
+  "Upload": "Hochladen",
+  "Save changes": "Änderungen speichern",
+  "Select action": "Aktion wählen",
+  "What would you like to do?": "Was möchtest Du tun?",
+  "{{error}}, please wait {{time}} seconds.": "{{error}}, bitte warte {{time}} Sekunden."
+}
diff --git a/public/locales/de/account.json b/public/locales/de/account.json
@@ -1,7 +1,6 @@
 {
-  "Upload": "Hochladen",
-  "Delete": "Löschen",
-  "add your email address": "e-mail adresse hinzufügen",
-  "add another email address": "weitere e-mail adressen hinzufügen",
-  "Save changes": "Änderungen speichern"
+  "We have sent a confirmation email to the provided address.": "Wir haben eine Bestätigungs-E-Mail an eingegebene Adresse gesendet.",
+  "Please enter your account password to confirm adding the given email address:": "Bitte bestätige das Hinzufügen der eingegebenen E-Mail-Adresse mit deinem Passwort:",
+  "add another email address": "weitere E-Mail-Adressen hinzufügen",
+  "add your email address": "E-Mail-Adresse hinzufügen"
 }