feat: Add confirm password field in the install form

Author: CodexX

i18n/en_US.yaml

@@ -1695,6 +1695,10 @@ ui:
       msg: Password cannot be empty.
       msg_min_length: Password must be at least 8 characters in length.
       msg_max_length: Password must be at maximum 32 characters in length.
+    admin_confirm_password:
+      label: "Confirm Password"
+      text: "Please re-enter your password to confirm."
+      msg: "Confirm password does not match."
     admin_email:
       label: Email
       text: You will need this email to log in.

ui/src/pages/Install/components/FourthStep/index.tsx

@@ -36,7 +36,15 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
 
   const checkValidated = (): boolean => {
     let bol = true;
-    const { site_name, site_url, contact_email, name, password, email } = data;
+    const {
+      site_name,
+      site_url,
+      confirm_password,
+      contact_email,
+      name,
+      password,
+      email,
+    } = data;
 
     if (!site_name.value) {
       bol = false;
@@ -150,6 +158,15 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
       };
     }
 
+    if (confirm_password.value !== password.value) {
+      bol = false;
+      data.confirm_password = {
+        value: '',
+        isInvalid: true,
+        errorMsg: t('admin_confirm_password.msg'),
+      };
+    }
+
     if (!email.value) {
       bol = false;
       data.email = {
@@ -316,6 +333,29 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
         </Form.Control.Feedback>
       </Form.Group>
 
+      <Form.Group controlId="confirm_password" className="mb-3">
+        <Form.Label>{t('admin_confirm_password.label')}</Form.Label>
+        <Form.Control
+          required
+          type="password"
+          value={data.confirm_password.value}
+          isInvalid={data.confirm_password.isInvalid}
+          onChange={(e) => {
+            changeCallback({
+              confirm_password: {
+                value: e.target.value,
+                isInvalid: false,
+                errorMsg: '',
+              },
+            });
+          }}
+        />
+        <Form.Text>{t('admin_confirm_password.text')}</Form.Text>
+        <Form.Control.Feedback type="invalid">
+          {data.confirm_password.errorMsg}
+        </Form.Control.Feedback>
+      </Form.Group>
+
       <Form.Group controlId="email" className="mb-3">
         <Form.Label>{t('admin_email.label')}</Form.Label>
         <Form.Control

ui/src/pages/Install/index.tsx

@@ -125,6 +125,11 @@ const Index: FC = () => {
       isInvalid: false,
       errorMsg: '',
     },
+    confirm_password: {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    },
     email: {
       value: '',
       isInvalid: false,