added password and username lengths

src/Pages/Login/index.js

@@ -18,7 +18,12 @@ export default function Login({ setUserSession }) {
   };
 
   const handleSubmit = () => {
-    if (username === "" || password === "") {
+    if (
+      username.length > Constants.GLOBALS.MAX_USERNAME_LENGTH ||
+      username.length < Constants.GLOBALS.MIN_USERNAME_LENGTH ||
+      password.length > Constants.GLOBALS.MAX_PASSWORD_LENGTH ||
+      password.length < Constants.GLOBALS.MIN_PASSWORD_LENGTH
+    ) {
       showErrorNotification();
       return;
     }
@@ -70,7 +75,16 @@ export default function Login({ setUserSession }) {
         }
       >
         <Form>
-          <Form.Item name="username">
+          <Form.Item
+            name="username"
+            rules={[
+              { required: true, message: "Please input your username!" },
+              {
+                min: Constants.GLOBALS.MIN_USERNAME_LENGTH,
+                message: `Please enter a username length of at least ${Constants.GLOBALS.MIN_USERNAME_LENGTH}!`,
+              },
+            ]}
+          >
             <Input
               prefix={<UserOutlined className="site-form-item-icon" />}
               placeholder="Username"
@@ -79,11 +93,16 @@ export default function Login({ setUserSession }) {
           </Form.Item>
           <Form.Item
             name="password"
+            required
             rules={[
               {
                 required: true,
                 message: "Please input your Password!",
               },
+              {
+                min: Constants.GLOBALS.MIN_PASSWORD_LENGTH,
+                message: `Please enter a password length of at least ${Constants.GLOBALS.MIN_PASSWORD_LENGTH}!`,
+              },
             ]}
           >
             <Input
@@ -91,6 +110,8 @@ export default function Login({ setUserSession }) {
               type="password"
               placeholder="Password"
               onChange={(e) => setPassword(e.target.value)}
+              minLength={Constants.GLOBALS.MIN_PASSWORD_LENGTH}
+              maxLength={Constants.GLOBALS.MAX_PASSWORD_LENGTH}
             />
           </Form.Item>
         </Form>

src/utils.js

@@ -24,6 +24,12 @@ export const Constants = {
     FAILED: 4,
     INPUT_REQUIRED: 5,
   },
+  GLOBALS: {
+    MIN_USERNAME_LENGTH: 2,
+    MAX_USERNAME_LENGTH: 20,
+    MIN_PASSWORD_LENGTH: 6,
+    MAX_PASSWORD_LENGTH: 64,
+  },
 };
 
 /**