frontend: Add confirm password field when changing the password or creating an accoung

fix #200

Author: ffreddow

frontend/src/components/password_component.tsx

@@ -4,7 +4,7 @@ import { Eye, EyeOff } from "react-feather";
 import { useTranslation } from "react-i18next";
 
 interface PasswordComponentProps {
-    onChange: (e: Event) => void,
+    onChange: (e: string) => void,
     isInvalid?: boolean,
     invalidMessage?: string,
 }
@@ -16,7 +16,7 @@ export function PasswordComponent(props: PasswordComponentProps) {
         <Form.Control
             placeholder={t("password")}
             type={showPassword ? "text" : "password"}
-            onChange={props.onChange}
+            onChange={(e) => props.onChange((e.target as HTMLInputElement).value)}
             isInvalid={props.isInvalid} />
         <Button
             variant="outline-primary"

frontend/src/components/register.tsx

@@ -24,6 +24,8 @@ interface RegisterState {
     accepted: boolean,
     password: string,
     passwordValid: boolean,
+    confirmPassword: string,
+    confirmPasswordValid: boolean,
     name: string,
     nameValid: boolean,
     email: string,
@@ -44,6 +46,8 @@ export class Register extends Component<{}, RegisterState> {
             accepted: false,
             password: "",
             passwordValid: true,
+            confirmPassword: "",
+            confirmPasswordValid: true,
             name: "",
             nameValid: true,
             email: "",
@@ -63,13 +67,24 @@ export class Register extends Component<{}, RegisterState> {
     showModal: Signal<boolean>;
 
     checkPassword() {
+        let res = true;
 
-        const res = PASSWORD_PATTERN.test(this.state.password);
-        if (!res) {
+        const passwordPatternValid = PASSWORD_PATTERN.test(this.state.password);
+        if (!passwordPatternValid) {
             this.setState({passwordValid: false});
+            res = false;
         } else {
             this.setState({passwordValid: true});
         }
+
+        const passwordsMatch = this.state.password === this.state.confirmPassword;
+        if (!passwordsMatch) {
+            this.setState({confirmPasswordValid: false});
+            res = false;
+        } else {
+            this.setState({confirmPasswordValid: true});
+        }
+
         return res;
     }
 
@@ -210,10 +225,27 @@ export class Register extends Component<{}, RegisterState> {
                 <Form.Group className="mb-3" controlId="registerPassword">
                     <Form.Label>{t("password")}</Form.Label>
                     <PasswordComponent isInvalid={!this.state.passwordValid} onChange={(e) => {
-                        this.setState({password: (e.target as HTMLInputElement).value});
+                        const password = e;
+                        this.setState({password}, () => {
+                            if (!this.state.confirmPasswordValid || !this.state.passwordValid) {
+                                this.checkPassword();
+                            }
+                        });
                     }}
                     invalidMessage={t("password_error_message")} />
                 </Form.Group>
+                <Form.Group className="mb-3" controlId="registerConfirmPassword">
+                    <Form.Label>{t("confirm_password")}</Form.Label>
+                    <PasswordComponent isInvalid={!this.state.confirmPasswordValid} onChange={(e) => {
+                        const confirmPassword = e;
+                        this.setState({confirmPassword}, () => {
+                            if (!this.state.confirmPasswordValid || !this.state.passwordValid) {
+                                this.checkPassword();
+                            }
+                        });
+                    }}
+                    invalidMessage={t("confirm_password_error_message")} />
+                </Form.Group>
                 <Form.Group className="mb-3" onClick={() => this.setState({acceptPrivacyChecked: !this.state.acceptPrivacyChecked})}>
                     <Form.Check checked={this.state.acceptPrivacyChecked} type="checkbox" label={<Trans i18nKey="register.accept_privacy_notice" ><a target="__blank" href={privacy_notice}>link</a></Trans>} isInvalid={!this.state.acceptPrivacyValid}/>
                 </Form.Group>

frontend/src/locales/de.ts

@@ -19,6 +19,8 @@ export const de ={
         "current_password_error_message": "Darf nicht leer sein.",
         "new_password": "Neues Passwort",
         "new_password_error_message": "Muss mindestens 8 Zeichen lang sein und jeweils mindestens einen Klein- und Großbuchstaben sowie ein Sonderzeichen enthalten.",
+        "confirm_new_password": "Neues Passwort bestätigen",
+        "confirm_new_password_error_message": "Passwörter stimmen nicht überein",
         "close": "Schließen",
         "delete_user": "Konto löschen",
         "password": "Passwort",
@@ -99,6 +101,8 @@ export const de ={
         "email_error_message": "Die E-Mail-Adresse, darf nicht leer sein",
         "password": "Passwort",
         "password_error_message": "Muss mindestens 8 Zeichen lang sein und jeweils mindestens einen Klein- und Großbuchstaben sowie eine Zahl enthalten.",
+        "confirm_password": "Passwort bestätigen",
+        "confirm_password_error_message": "Passwörter stimmen nicht überein",
         "accept_privacy_notice": "Ich habe die <0>Datenschutzerklärung</0> gelesen, verstanden und stimme zu.",
         "accept_terms_and_conditions": "Ich habe die <0>AGB</0> gelesen, verstanden und stimme zu.",
         "accept_privacy_notice_alpha": "Ich verstehe, dass dies eine Alpha-Version ist und stimme der verarbeitung meiner Daten wie <0>hier</0> beschrieben zu.",

frontend/src/locales/en.ts

@@ -18,6 +18,8 @@ export const en = {
         "current_password_error_message": "Must not be empty.",
         "new_password": "New password",
         "new_password_error_message": "Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters",
+        "confirm_new_password": "Confirm new password",
+        "confirm_new_password_error_message": "Passwords do not match",
         "close": "Close",
         "delete_user": "Delete account",
         "password": "Password",
@@ -103,6 +105,8 @@ export const en = {
         "email_error_message": "The email-address must not be empty",
         "password": "Password",
         "password_error_message": "Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters",
+        "confirm_password": "Confirm password",
+        "confirm_password_error_message": "Passwords do not match",
         "accept_privacy_notice": "I have read, understood and I am accepting the <0>privacy notice</0>.",
         "accept_terms_and_conditions": "I have read, understood and I am accepting the <0>terms and conditions</0>.",
         "accept_privacy_notice_alpha": "I understand that this is an alpha-version and accept the usage of my data as described <0>here</0>.",

frontend/src/pages/user.tsx

@@ -149,14 +149,16 @@ export function User() {
     const [currentPasswordIsValid, setCurrentPasswordIsValid] = useState(true);
     const [newPassword, setNewPassword] = useState("");
     const [newPasswordIsValid, setNewPasswordIsValid] = useState(true);
+    const [confirmNewPassword, setConfirmNewPassword] = useState("");
+    const [confirmNewPasswordIsValid, setConfirmNewPasswordIsValid] = useState(true);
     const validated = signal(false);
 
     const handleUpdatePasswordClose = () => setShowPasswordReset(false);
     const handleUpdatePasswordShow = () => setShowPasswordReset(true);
     const handleDelteUserClose = () => setDeleteUser({...deleteUser, show: false});
     const handleDeleteUserShow = () => setDeleteUser({...deleteUser, show: true});
 
-    const checkPasswords = () => {
+    const checkPasswords = (newPassword: string, confirmNewPassword: string) => {
         let ret = true;
         if (!PASSWORD_PATTERN.test(newPassword)) {
             setNewPasswordIsValid(false);
@@ -165,6 +167,13 @@ export function User() {
             setNewPasswordIsValid(true);
         }
 
+        if (newPassword !== confirmNewPassword) {
+            setConfirmNewPasswordIsValid(false);
+            ret = false;
+        } else {
+            setConfirmNewPasswordIsValid(true);
+        }
+
         if (currentPassword.length === 0) {
             setCurrentPasswordIsValid(false);
             ret = false;
@@ -181,7 +190,7 @@ export function User() {
         e.preventDefault();
         e.stopPropagation();
 
-        if (!checkPasswords()) {
+        if (!checkPasswords(newPassword, confirmNewPassword)) {
             return;
         }
 
@@ -323,7 +332,7 @@ export function User() {
                 <Modal.Body>
                     <Form.Group className="pb-3" controlId="deleteUserPassword">
                         <Form.Label>{t("password")}</Form.Label>
-                        <PasswordComponent onChange={(e) => setDeleteUser({...deleteUser, password: (e.target as HTMLInputElement).value})} isInvalid={!deleteUser.password_valid} invalidMessage={t("password_invalid")} />
+                        <PasswordComponent onChange={(e) => setDeleteUser({...deleteUser, password: e})} isInvalid={!deleteUser.password_valid} invalidMessage={t("password_invalid")} />
                     </Form.Group>
                 </Modal.Body>
                 <Modal.Footer>
@@ -349,12 +358,26 @@ export function User() {
                     <Form.Group className="pb-3" controlId="oldPassword">
                         <Form.Label>{t("current_password")}</Form.Label>
                         <PasswordComponent isInvalid={!currentPasswordIsValid} onChange={(e) => {
-                            setCurrentPassword((e.target as HTMLInputElement).value);
+                            setCurrentPassword(e);
                         }} />
                     </Form.Group>
                     <Form.Group className="pb-3" controlId="newPassword">
                         <Form.Label>{t("new_password")}</Form.Label>
-                        <PasswordComponent onChange={(e) => setNewPassword((e.target as HTMLInputElement).value)} isInvalid={!newPasswordIsValid} invalidMessage={t("new_password_error_message")} />
+                        <PasswordComponent onChange={(e) => {
+                            setNewPassword(e);
+                            if (!confirmNewPasswordIsValid || !newPasswordIsValid) {
+                                checkPasswords(e, confirmNewPassword);
+                            }
+                        }} isInvalid={!newPasswordIsValid} invalidMessage={t("new_password_error_message")} />
+                    </Form.Group>
+                    <Form.Group className="pb-3" controlId="confirmNewPassword">
+                        <Form.Label>{t("confirm_new_password")}</Form.Label>
+                        <PasswordComponent onChange={(e) => {
+                            setConfirmNewPassword(e);
+                            if (!confirmNewPasswordIsValid) {
+                                checkPasswords(newPassword, e);
+                            }
+                        }} isInvalid={!confirmNewPasswordIsValid} invalidMessage={t("confirm_new_password_error_message")} />
                     </Form.Group>
                 </Modal.Body>
                 <Modal.Footer>