Bugs in Dashboard (#2931)

PBENCH-86 User management in Dashboard
distributed-system-analysis · Jul 5, 2022 · 2078f8b · 2078f8b
1 parent 1d2dd32
commit 2078f8b
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 40 deletions.
diff --git a/dashboard/src/actions/authActions.js b/dashboard/src/actions/authActions.js
@@ -3,6 +3,7 @@ import API from "../utils/axiosInstance";
 import * as CONSTANTS from "../assets/constants/authConstants";
 import Cookies from "js-cookie";
 import { uid } from "../utils/helper";
+import { constructToast } from "actions/toastActions";
 
 export const makeLoginRequest =
   (details, navigate) => async (dispatch, getState) => {
@@ -42,14 +43,8 @@ export const makeLoginRequest =
         });
 
         navigate("/");
-        const toast = {
-          variant: "success",
-          title: "Logged in successfully",
-        };
-        dispatch({
-          type: TYPES.SHOW_TOAST,
-          payload: toast,
-        });
+
+        dispatch(constructToast("success", "Logged in successfully!"));
       }
       dispatch({ type: TYPES.COMPLETED });
     } catch (error) {
@@ -106,7 +101,10 @@ export const registerUser =
       const response = await API.post(endpoints?.api?.register, {
         ...details,
       });
-      if (response.status === 200) {
+      if (response.status === 201) {
+        dispatch(
+          constructToast("success", "Account created!", "Login to continue")
+        );
         navigate("/login");
       }
       dispatch({ type: TYPES.COMPLETED });
@@ -164,6 +162,6 @@ export const logout = () => async (dispatch) => {
   }
   dispatch({ type: TYPES.COMPLETED });
   setTimeout(() => {
-    window.location.href = "login";
+    window.location.href = "auth";
   }, CONSTANTS.LOGOUT_DELAY_MS);
 };
diff --git a/dashboard/src/actions/toastActions.js b/dashboard/src/actions/toastActions.js
@@ -26,11 +26,9 @@ export const showFailureToast = () => async (dispatch) => {
   });
 };
 
-export const constructToast =
-  (variant, title, message = "") =>
-  async (dispatch) => {
-    dispatch({
-      type: TYPES.SHOW_TOAST,
-      payload: { variant, title, message },
-    });
+export const constructToast = (variant, title, message = "") => {
+  return {
+    type: TYPES.SHOW_TOAST,
+    payload: { variant, title, message },
   };
+};
diff --git a/dashboard/src/modules/components/AuthComponent/LoginForm.jsx b/dashboard/src/modules/components/AuthComponent/LoginForm.jsx
@@ -15,7 +15,13 @@ import {
   Alert,
 } from "@patternfly/react-core";
 import { makeLoginRequest, setUserLoggedInState } from "actions/authActions";
-import { Back, LoginHeader, NoLoginComponent } from "./common-components";
+import {
+  Back,
+  LoginHeader,
+  NoLoginComponent,
+  PasswordTextInput,
+} from "./common-components";
+import { EyeIcon, EyeSlashIcon } from "@patternfly/react-icons";
 
 const LoginForm = () => {
   const dispatch = useDispatch();
@@ -27,8 +33,11 @@ const LoginForm = () => {
     username: "",
   });
   const [btnDisabled, setBtnDisabled] = useState(true);
+  const [showPassword, setShowPassword] = useState(false);
+
   const { endpoints } = useSelector((state) => state.apiEndpoint);
   const isLoading = useSelector((state) => state.loading.isLoading);
+
   const primaryLoadingProps = {};
   if (isLoading) {
     primaryLoadingProps.spinnerAriaValueText = "Loading";
@@ -66,6 +75,9 @@ const LoginForm = () => {
   const checkBoxChangeHander = (value) => {
     dispatch(setUserLoggedInState(value));
   };
+  const onShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
   useEffect(() => {
     checkOkButton();
   }, [checkOkButton, details]);
@@ -83,7 +95,7 @@ const LoginForm = () => {
       </CardTitle>
       <CardBody>
         <Form>
-          <FormGroup label="Email address" isRequired fieldId="username">
+          <FormGroup label="Username" isRequired fieldId="username">
             <TextInput
               isRequired
               type="text"
@@ -94,14 +106,21 @@ const LoginForm = () => {
             />
           </FormGroup>
           <FormGroup label="Password" isRequired fieldId="password">
-            <TextInput
-              isRequired
-              type="password"
-              id="password"
-              name="password"
-              value={details.password}
-              onChange={handlePasswordChange}
-            />
+            <div className="password-holder">
+              <PasswordTextInput
+                isRequired
+                isShowPassword={showPassword}
+                id="password"
+                name="password"
+                value={details.password}
+                onChangeMethod={handlePasswordChange}
+              />
+              <Button
+                variant="control"
+                onClick={onShowPassword}
+                icon={showPassword ? <EyeSlashIcon /> : <EyeIcon />}
+              ></Button>
+            </div>
           </FormGroup>
           <Checkbox
             label="Keep me logged in"

diff --git a/dashboard/src/modules/components/AuthComponent/SignupForm.jsx b/dashboard/src/modules/components/AuthComponent/SignupForm.jsx
@@ -20,8 +20,10 @@ import {
   Back,
   LoginHeader,
   PasswordConstraints,
+  PasswordTextInput,
   NoLoginComponent,
 } from "./common-components";
+import { EyeIcon, EyeSlashIcon } from "@patternfly/react-icons";
 
 const SignupForm = () => {
   const dispatch = useDispatch();
@@ -30,6 +32,7 @@ const SignupForm = () => {
   const { alerts, isSignupBtnDisabled, passwordLength } = useSelector(
     (state) => state.userAuth
   );
+  const [showPassword, setShowPassword] = useState(false);
   const [userDetails, setUserDetails] = useState({
     firstName: "",
     lastName: "",
@@ -81,6 +84,10 @@ const SignupForm = () => {
     return true;
   }, [constraints, errors, userDetails]);
 
+  const onShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
   useEffect(() => {
     if (validateForm() && Object.keys(endpoints).length > 0) {
       dispatch(toggleSignupBtn(false));
@@ -155,15 +162,37 @@ const SignupForm = () => {
                 isRequired={formItem.isRequired}
                 fieldId={formItem.id}
               >
-                <TextInput
-                  isRequired={formItem.isRequired}
-                  type={formItem.type}
-                  id={formItem.id}
-                  aria-describedby="horizontal-form-name-helper"
-                  name={formItem.name}
-                  value={userDetails[formItem.name]}
-                  onChange={(val) => changeHandler(val, formItem.name)}
-                />
+                <div className="password-holder">
+                  {formItem.name === "password" ? (
+                    <PasswordTextInput
+                      isRequired={formItem.isRequired}
+                      isShowPassword={showPassword}
+                      id={formItem.id}
+                      name={formItem.name}
+                      value={userDetails[formItem.name]}
+                      onChangeMethod={(val) =>
+                        changeHandler(val, formItem.name)
+                      }
+                    />
+                  ) : (
+                    <TextInput
+                      isRequired={formItem.isRequired}
+                      type={formItem.type}
+                      id={formItem.id}
+                      aria-describedby="horizontal-form-name-helper"
+                      name={formItem.name}
+                      value={userDetails[formItem.name]}
+                      onChange={(val) => changeHandler(val, formItem.name)}
+                    />
+                  )}
+                  {formItem.name === "password" && (
+                    <Button
+                      variant="control"
+                      onClick={onShowPassword}
+                      icon={showPassword ? <EyeSlashIcon /> : <EyeIcon />}
+                    ></Button>
+                  )}
+                </div>
                 <p className="error">{errors[formItem.name]}</p>
               </FormGroup>
             );

diff --git a/dashboard/src/modules/components/AuthComponent/common-components.jsx b/dashboard/src/modules/components/AuthComponent/common-components.jsx
@@ -12,6 +12,7 @@ import {
   FlexItem,
   HelperText,
   HelperTextItem,
+  TextInput,
 } from "@patternfly/react-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
@@ -167,3 +168,18 @@ export const NoLoginComponent = () => {
     </div>
   );
 };
+
+export const PasswordTextInput = (props) => {
+  const { isRequired, id, name, onChangeMethod, value, isShowPassword } = props;
+  return (
+    <TextInput
+      isRequired={isRequired}
+      type={isShowPassword ? "text" : "password"}
+      id={id}
+      aria-describedby="horizontal-form-name-helper"
+      name={name}
+      value={value}
+      onChange={(val) => onChangeMethod(val, name)}
+    />
+  );
+};
diff --git a/dashboard/src/modules/components/AuthComponent/index.less b/dashboard/src/modules/components/AuthComponent/index.less
@@ -9,6 +9,9 @@
                 width: 100%;
             }
         }
+        .password-holder {
+            display: flex;
+        }
         .logo {
             width: 75px;
         }

diff --git a/dashboard/src/modules/components/TableComponent/common-components.jsx b/dashboard/src/modules/components/TableComponent/common-components.jsx
@@ -77,12 +77,19 @@ export const SearchBox = ({
     setPublicData(filterData(dataArray, startDate, endDate, searchKey));
     setDatasetName(searchKey);
   };
+  const handleKeyPress = (e) => {
+    const key = e.key;
+    if (key === "Enter") {
+      search();
+    }
+  };
   return (
     <InputGroup className="searchInputGroup">
       <TextInput
         aria-label="search"
         type="text"
         placeholder="Search"
+        onKeyPress={(e) => handleKeyPress(e)}
         onChange={(e) => setSearchKey(e)}
       ></TextInput>
       <Button variant="control" onClick={search} aria-label="searchButton">

diff --git a/dashboard/src/modules/components/TableComponent/index.jsx b/dashboard/src/modules/components/TableComponent/index.jsx
@@ -142,7 +142,7 @@ const TableWithFavorite = () => {
               message="Want to see your own data?"
               link="Login or Create an account"
               onCloseMethod={onCloseLoginHint}
-              redirect="login"
+              redirect="auth"
             />
           )}
           <div className="table-container" variant={PageSectionVariants.light}>
@@ -196,11 +196,11 @@ const TableWithFavorite = () => {
                   >
                     <Thead>
                       <Tr>
-                        <Th sort={getSortParams(1)}>{columnNames.name}</Th>
-                        <Th sort={getSortParams(2)}>
+                        <Th sort={getSortParams(0)}>{columnNames.name}</Th>
+                        <Th sort={getSortParams(1)}>
                           {columnNames.creationDate}
                         </Th>
-                        <Th sort={getSortParams(3)}></Th>
+                        <Th sort={getSortParams(2)}></Th>
                       </Tr>
                     </Thead>
                     <Tbody>