Fix UI : Fix password validation while creating account (#7807)

* Fix the password validation while creating account

* change error message for password validation

* remove multiple error on field

openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx

@@ -30,7 +30,11 @@ import React, { useRef, useState } from 'react';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import { generateRandomPwd } from '../../axiosAPIs/auth-API';
 import { getBotsPagePath, getUsersPagePath } from '../../constants/constants';
-import { validEmailRegEx } from '../../constants/regex.constants';
+import { passwordErrorMessage } from '../../constants/error-message';
+import {
+  passwordRegex,
+  validEmailRegEx,
+} from '../../constants/regex.constants';
 import { PageLayoutType } from '../../enums/layout.enum';
 import { CreatePasswordGenerator } from '../../enums/user.enum';
 import {
@@ -792,6 +796,10 @@ const CreateUser = ({
                   {
                     required: true,
                   },
+                  {
+                    pattern: passwordRegex,
+                    message: passwordErrorMessage,
+                  },
                 ]}>
                 <Input.Password
                   name="password"
@@ -805,9 +813,6 @@ const CreateUser = ({
                 label="Confirm Password"
                 name="confirmPassword"
                 rules={[
-                  {
-                    required: true,
-                  },
                   {
                     validator: (_, value) => {
                       if (value !== password) {

openmetadata-ui/src/main/resources/ui/src/components/Users/ChangePasswordForm.tsx

@@ -1,5 +1,7 @@
 import { Form, Input, Modal } from 'antd';
 import React from 'react';
+import { passwordErrorMessage } from '../../constants/error-message';
+import { passwordRegex } from '../../constants/regex.constants';
 import { ChangePasswordRequest } from '../../generated/auth/changePasswordRequest';
 
 type ChangePasswordForm = {
@@ -63,6 +65,10 @@ const ChangePasswordForm: React.FC<ChangePasswordForm> = ({
             {
               required: true,
             },
+            {
+              pattern: passwordRegex,
+              message: passwordErrorMessage,
+            },
           ]}>
           <Input.Password placeholder="Enter New Password" />
         </Form.Item>
@@ -70,9 +76,6 @@ const ChangePasswordForm: React.FC<ChangePasswordForm> = ({
           label="Confirm New Password"
           name="confirmPassword"
           rules={[
-            {
-              required: true,
-            },
             {
               validator: (_, value) => {
                 if (value !== newPassword) {

openmetadata-ui/src/main/resources/ui/src/constants/error-message.ts

@@ -0,0 +1,15 @@
+/*
+ *  Copyright 2022 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+export const passwordErrorMessage =
+  'Password must be a minimum of 8 and a maximum of 16 characters long and contain at least one uppercase and one lowercase letter (A, z), and one special character (such as !, %, @, or #)';

openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx

@@ -19,6 +19,8 @@ import loginBG from '../../assets/img/login-bg.png';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import { useBasicAuth } from '../../authentication/auth-provider/basic-auth.provider';
 import { ROUTES } from '../../constants/constants';
+import { passwordErrorMessage } from '../../constants/error-message';
+import { passwordRegex } from '../../constants/regex.constants';
 import { AuthTypes } from '../../enums/signin.enum';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import LoginCarousel from '../login/LoginCarousel';
@@ -111,17 +113,12 @@ const BasicSignUp = () => {
                           label="Password"
                           name="password"
                           rules={[
-                            { required: true },
                             {
-                              validator: (_, value) => {
+                              required: true,
-                                if (value < 8 && value > 16) {
+                            },
-                                  return Promise.reject(
+                            {
-                                    'Password must be of minimum 8 and maximum 16 characters, with one special , one upper, one lower case character'
+                              pattern: passwordRegex,
-                                  );
+                              message: passwordErrorMessage,
-                                }
-
-                                return Promise.resolve();
-                              },
                             },
                           ]}>
                           <Input.Password placeholder="Enter password" />