From a8ef10eeb9211e64cec9bb87ac0a9e36f3218f78 Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Sun, 7 Jul 2024 16:32:00 +0100
Subject: [PATCH] login+signup fix , remove babel warning

---
 tracknow/web/package-lock.json                | 26 ++++++++--
 tracknow/web/package.json                     |  1 +
 .../web/src/components/User/UserLogin.tsx     | 44 ++++++++++------
 .../web/src/components/User/UserSignUp.tsx    | 51 ++++++++++++-------
 4 files changed, 87 insertions(+), 35 deletions(-)

diff --git a/tracknow/web/package-lock.json b/tracknow/web/package-lock.json
index 53af130..f8dff47 100644
--- a/tracknow/web/package-lock.json
+++ b/tracknow/web/package-lock.json
@@ -32,6 +32,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@types/react-slick": "^0.23.13",
         "ajv": "^7.2.4"
       }
@@ -694,9 +695,17 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "version": "7.21.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -1939,6 +1948,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
diff --git a/tracknow/web/package.json b/tracknow/web/package.json
index 96cb8ea..c2ba0d0 100644
--- a/tracknow/web/package.json
+++ b/tracknow/web/package.json
@@ -48,6 +48,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/react-slick": "^0.23.13",
     "ajv": "^7.2.4"
   }
diff --git a/tracknow/web/src/components/User/UserLogin.tsx b/tracknow/web/src/components/User/UserLogin.tsx
index efc8219..80c8a0d 100644
--- a/tracknow/web/src/components/User/UserLogin.tsx
+++ b/tracknow/web/src/components/User/UserLogin.tsx
@@ -1,9 +1,11 @@
 import * as React from "react";
-import { Flex, Input, Button, Image, Text, Link, useToast } from "@chakra-ui/react";
+import { Flex, Input, Button, Image, Text, Link, useToast, InputRightElement, InputGroup } from "@chakra-ui/react";
 import { Link as ReactRouterLink, useNavigate } from 'react-router-dom';
 import { Navbar } from "../Navbar/Navbar";
 import API from "../../hooks/API";
 
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
+
 export const UserLogin = () => {
 
     const [username, setUsername] = React.useState("");
@@ -13,6 +15,7 @@ export const UserLogin = () => {
     const [passwordValid, setPasswordValid] = React.useState(false);
 
     const [isLoading, setIsLoading] = React.useState(false);
+    const [showPassword, setShowPassword] = React.useState(false);
 
     const navigate = useNavigate();
     const toast = useToast();
@@ -65,9 +68,8 @@ export const UserLogin = () => {
                     <Image boxSize="80px" alignSelf="center" src='./web_svg/arrow_done.svg' alt='track-bnow img' />
 
                     <Text marginBottom="10px" alignSelf="center" fontSize='xs'>Welcome, driver. Sign in to continue</Text>
-
                     <Input
-                        focusBorderColor='red.500'
+                        focusBorderColor='grey'
                         placeholder="Username"
                         type="text"
                         variant="outline"
@@ -79,18 +81,30 @@ export const UserLogin = () => {
 
                         }}
                     />
-                    <Input
-                        focusBorderColor='red.500'
-                        placeholder="Password"
-                        type="password"
-                        variant="outline"
-                        mb={3}
-                        value={password}
-                        onChange={(e) => {
-                            setPassword(e.target.value)
-                            setPasswordValid(e.target.value.length > 0)
-                        }}
-                    />
+                    <InputGroup>
+                        <Input
+                            focusBorderColor='grey'
+                            placeholder="Password"
+                            type={showPassword ? 'text' : 'password'}
+                            variant="outline"
+                            mb={3}
+                            value={password}
+                            onChange={(e) => {
+                                setPassword(e.target.value)
+                                setPasswordValid(e.target.value.length > 0)
+                            }}
+                        />
+                        <InputRightElement >
+                            <Button
+                                color={'red'}
+                                variant={'ghost'}
+                                colorScheme='black'
+                                onClick={() => setShowPassword((showPassword) => !showPassword)}>
+                                {showPassword ? <ViewIcon /> : <ViewOffIcon />}
+                            </Button>
+                        </InputRightElement>
+                    </InputGroup>
+
                     <Button
                         colorScheme="red"
                         mb={3}
diff --git a/tracknow/web/src/components/User/UserSignUp.tsx b/tracknow/web/src/components/User/UserSignUp.tsx
index b7f9381..5e03957 100644
--- a/tracknow/web/src/components/User/UserSignUp.tsx
+++ b/tracknow/web/src/components/User/UserSignUp.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
-import { Flex, Input, Button, Image, Text, Link, useToast } from "@chakra-ui/react";
+import { Flex, Input, Button, Image, Text, Link, useToast, InputRightElement, InputGroup } from "@chakra-ui/react";
 import { Link as ReactRouterLink, useNavigate } from "react-router-dom";
 import { Navbar } from "../Navbar/Navbar";
 import API from "../../hooks/API"
+import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
 
 export const UserSignUp = () => {
 
@@ -13,6 +14,7 @@ export const UserSignUp = () => {
     const [passwordValid, setPasswordValid] = React.useState(false);
 
     const [isLoading, setIsLoading] = React.useState(false);
+    const [showPassword, setShowPassword] = React.useState(false);
 
     const navigate = useNavigate();
     const toast = useToast();
@@ -87,25 +89,40 @@ export const UserSignUp = () => {
                             setUsername(e.target.value);
                             setUsernameValid(e.target.value.length >= 5 && e.target.value.length <= 10);
                         }}
-                        borderColor={usernameValid ? "green.500" : "red.500"}
+                        borderColor={'grey'}
                     />
-                    <Text fontSize="xs" color={usernameValid ? "green.500" : "red.500"} mb={2}>
+                    <Text fontSize="10px" color={usernameValid ? "green.500" : "red.500"} mb={2}>
                         Username must be between 5 and 10 characters long.
                     </Text>
-                    <Input
-                        focusBorderColor="grey"
-                        placeholder="Password"
-                        type="password"
-                        variant="outline"
-                        mb={3}
-                        value={password}
-                        onChange={(e) => {
-                            setPassword(e.target.value);
-                            setPasswordValid(e.target.value.length >= 8);
-                        }}
-                        borderColor={passwordValid ? "green.500" : "red.500"}
-                    />
-                    <Text fontSize="xs" color={passwordValid ? "green.500" : "red.500"} mb={2}>
+                    <InputGroup>
+                        <Input
+                            focusBorderColor="grey"
+                            placeholder="Password"
+                            type={showPassword ? 'text' : 'password'}
+                            variant="outline"
+                            mb={3}
+                            value={password}
+                            onChange={(e) => {
+                                setPassword(e.target.value);
+                                setPasswordValid(e.target.value.length >= 8);
+                            }}
+                            borderColor={'grey'}
+                        />
+                        <InputRightElement>
+                            <Button
+                                color={'red'}
+                                variant={'ghost'}
+                                colorScheme='black'
+                                onClick={() => setShowPassword((showPassword) => !showPassword)}>
+                                {showPassword ? <ViewIcon /> : <ViewOffIcon />}
+
+                            </Button>
+
+
+                        </InputRightElement>
+                    </InputGroup>
+
+                    <Text fontSize="10px" color={passwordValid ? "green.500" : "red.500"} mb={2}>
                         Password must be at least 8 characters long.
                     </Text>
                     <Button