From d58d734bb9227507b5fd4cced0531f4b1ab99097 Mon Sep 17 00:00:00 2001
From: Krishna Mahato <krishhtrishh9304@gmail.com>
Date: Sun, 14 Aug 2022 13:52:29 +0530
Subject: [PATCH] feature(ui): ui and styling for the edit user page

Signed-off-by: Krishna Mahato <krishhtrishh9304@gmail.com>
---
 src/Routes.jsx                                |   6 +
 src/api/auth.js                               |   4 +-
 src/api/users.js                              |  37 ++
 src/components/Header/index.jsx               |   8 +
 .../Upload/CommonFields/AccessLevel/index.jsx |   2 +-
 src/components/Widgets/Input/index.jsx        |   2 +-
 src/components/Widgets/Modal/index.css        |  40 ++
 src/components/Widgets/Modal/index.jsx        |  51 +++
 src/constants/constants.js                    |  18 +-
 src/constants/endpoints.js                    |   3 +
 src/constants/routes.js                       |   1 +
 src/pages/Admin/Users/Edit/index.css          |  26 ++
 src/pages/Admin/Users/Edit/index.jsx          | 427 ++++++++++++++++++
 src/pages/Admin/Users/Edit/token_space.jsx    | 390 ++++++++++++++++
 src/services/users.js                         |  36 ++
 src/utils/index.js                            |  29 ++
 16 files changed, 1075 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Widgets/Modal/index.css
 create mode 100644 src/components/Widgets/Modal/index.jsx
 create mode 100644 src/pages/Admin/Users/Edit/index.css
 create mode 100644 src/pages/Admin/Users/Edit/index.jsx
 create mode 100644 src/pages/Admin/Users/Edit/token_space.jsx
 create mode 100644 src/utils/index.js

diff --git a/src/Routes.jsx b/src/Routes.jsx
index e5661a031..2705f4105 100644
--- a/src/Routes.jsx
+++ b/src/Routes.jsx
@@ -93,6 +93,7 @@ const GroupCreate = React.lazy(() => import("pages/Admin/Group/Create"));
 const DeleteGroup = React.lazy(() => import("pages/Admin/Group/Delete"));
 const DeleteUser = React.lazy(() => import("pages/Admin/Users/Delete"));
 const AddUser = React.lazy(() => import("pages/Admin/Users/Add"));
+const EditUser = React.lazy(() => import("pages/Admin/Users/Edit"));
 const AddLicense = React.lazy(() => import("pages/Admin/License/Create"));
 const SelectLicense = React.lazy(() =>
   import("pages/Admin/License/SelectLicense")
@@ -311,6 +312,11 @@ const Routes = () => {
             path={routes.admin.users.add}
             component={AddUser}
           />
+          <AdminLayout
+            exact
+            path={routes.admin.users.edit}
+            component={EditUser}
+          />
 
           <AdminLayout
             exact
diff --git a/src/api/auth.js b/src/api/auth.js
index 065c97374..dbbd22eae 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -27,12 +27,12 @@ import { randomString, getDate } from "shared/helper";
 // Function for calling the fetch function for the APIs
 import sendRequest from "./sendRequest";
 
-const fetchTokenApi = (username, password) => {
+const fetchTokenApi = (username, password, tokenDetails = null) => {
   const url = endpoints.auth.tokens();
   return sendRequest({
     url,
     method: "POST",
-    body: {
+    body: tokenDetails || {
       username,
       password,
       token_name: randomString(tokenNameLength),
diff --git a/src/api/users.js b/src/api/users.js
index ecc25ee83..b3c41d404 100644
--- a/src/api/users.js
+++ b/src/api/users.js
@@ -73,3 +73,40 @@ export const deleteUserApi = (id) => {
     },
   });
 };
+
+// Modifying user PUT request
+export const editUserByIdApi = (id, editedUserDetails) => {
+  const url = endpoints.users.edit(id);
+  return sendRequest({
+    url,
+    method: "PUT",
+    body: editedUserDetails,
+    headers: {
+      Authorization: getToken(),
+    },
+  });
+};
+
+// Getting user by id
+export const getUserByIdAapi = (id) => {
+  const url = endpoints.users.getSingle(id);
+  return sendRequest({
+    url,
+    method: "GET",
+    headers: {
+      Authorization: getToken(),
+    },
+  });
+};
+
+// Getting REST API Tokens based on token type (active | expired)
+export const getTokensApi = (type) => {
+  const url = endpoints.users.getTokens(type);
+  return sendRequest({
+    url,
+    method: "GET",
+    headers: {
+      Authorization: getToken(),
+    },
+  });
+};
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index d35360447..bc6b0f47c 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -275,6 +275,14 @@ const Header = () => {
                           Add User
                         </NavDropdown.Item>
                       </div>
+                      <div className="bg-secondaryColor text-white font-12">
+                        <NavDropdown.Item
+                          as={Link}
+                          to={routes.admin.users.edit}
+                        >
+                          Edit User Account
+                        </NavDropdown.Item>
+                      </div>
                       <div className="bg-secondaryColor text-white font-12">
                         <NavDropdown.Item
                           as={Link}
diff --git a/src/components/Upload/CommonFields/AccessLevel/index.jsx b/src/components/Upload/CommonFields/AccessLevel/index.jsx
index 754df1d80..6c18e9ac1 100644
--- a/src/components/Upload/CommonFields/AccessLevel/index.jsx
+++ b/src/components/Upload/CommonFields/AccessLevel/index.jsx
@@ -24,7 +24,7 @@ import { InputContainer, Tooltip } from "components/Widgets";
 
 function AccessLevel({ accessLevel, handleChange }) {
   return (
-    <div id="upload-access-level" className="mt-1">
+    <div id="upload-access-level">
       <InputContainer
         type="radio"
         value="private"
diff --git a/src/components/Widgets/Input/index.jsx b/src/components/Widgets/Input/index.jsx
index e1a404435..5a9722626 100644
--- a/src/components/Widgets/Input/index.jsx
+++ b/src/components/Widgets/Input/index.jsx
@@ -57,7 +57,7 @@ const InputContainer = ({
   }
   if (type === "select") {
     return (
-      <div className="my-0 py-0">
+      <div className="my-1 py-0">
         {children && (
           <label htmlFor={id} className="font-demi">
             {children}
diff --git a/src/components/Widgets/Modal/index.css b/src/components/Widgets/Modal/index.css
new file mode 100644
index 000000000..846e323db
--- /dev/null
+++ b/src/components/Widgets/Modal/index.css
@@ -0,0 +1,40 @@
+/*
+ Copyright (C) 2022 Krishna Mahato (krishhtrishh9304@gmail.com)
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+.modal-container {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.334);
+}
+
+.modal-body {
+  max-width: 400px;
+  background-color: white;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 20px;
+  gap: 20px;
+}
diff --git a/src/components/Widgets/Modal/index.jsx b/src/components/Widgets/Modal/index.jsx
new file mode 100644
index 000000000..6ec66a3a2
--- /dev/null
+++ b/src/components/Widgets/Modal/index.jsx
@@ -0,0 +1,51 @@
+/*
+ Copyright (C) 2022 Krishna Mahato (krishhtrishh9304@gmail.com)
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+import PropTypes from "prop-types";
+import React from "react";
+import { Button } from "..";
+
+// css
+import "./index.css";
+
+const Modal = ({ show, setShow, children }) => {
+  return (
+    show && (
+      <div className="modal-container">
+        <div className="modal-body">
+          {children}
+          <Button
+            className="bg-light border text-dark"
+            type="button"
+            onClick={() => setShow(false)}
+          >
+            Close
+          </Button>
+        </div>
+      </div>
+    )
+  );
+};
+
+Modal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  setShow: PropTypes.func.isRequired,
+  children: PropTypes.element,
+};
+
+export default Modal;
diff --git a/src/constants/constants.js b/src/constants/constants.js
index f5bf6427b..dc4cd7f2b 100644
--- a/src/constants/constants.js
+++ b/src/constants/constants.js
@@ -260,6 +260,7 @@ export const initialMantainanceFields = {
   rmvRepoOldFiles1: false,
   rmvRepoOldFiles2: false,
 };
+
 export const accessLevels = [
   {
     id: 0,
@@ -293,9 +294,24 @@ export const accessLevels = [
   },
 ];
 
+export const userStatus = [
+  {
+    id: 0,
+    name: "Active",
+    disabled: false,
+    value: "active",
+  },
+  {
+    id: 1,
+    name: "Inactive",
+    disabled: false,
+    value: "inactive",
+  },
+];
+
 export const initialAddUserData = {
   name: "",
-  user_pass: "",
+  user_pass: null,
   description: "",
   accessLevel: "",
   rootFolderId: 0,
diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index dcfde6a46..634ddc553 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -42,6 +42,9 @@ const endpoints = {
     getSingle: (userId) => `${apiUrl}/users/${userId}`,
     delete: (userId) => `${apiUrl}/users/${userId}`,
     add: () => `${apiUrl}/users`,
+    edit: (userId) => `${apiUrl}/users/${userId}`,
+    createToken: () => `${apiUrl}/users/tokens`,
+    getTokens: (type) => `${apiUrl}/users/tokens/${type}`,
   },
   folders: {
     getAll: () => `${apiUrl}/folders`,
diff --git a/src/constants/routes.js b/src/constants/routes.js
index 792e0f05a..832858e97 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -71,6 +71,7 @@ const routes = {
     users: {
       add: "/admin/users/add",
       delete: "/admin/users/delete",
+      edit: "/admin/users/edit",
     },
     license: {
       create: "/admin/license/create",
diff --git a/src/pages/Admin/Users/Edit/index.css b/src/pages/Admin/Users/Edit/index.css
new file mode 100644
index 000000000..97ece0dce
--- /dev/null
+++ b/src/pages/Admin/Users/Edit/index.css
@@ -0,0 +1,26 @@
+/*
+ Copyright (C) 2022 Krishna Mahato (krishhtrishh9304@gmail.com)
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+.token_row {
+  cursor: pointer;
+}
+
+.token_row:hover {
+  background-color: #d1d1d1;
+  color: rgb(0, 0, 0);
+}
diff --git a/src/pages/Admin/Users/Edit/index.jsx b/src/pages/Admin/Users/Edit/index.jsx
new file mode 100644
index 000000000..faf4d2b5a
--- /dev/null
+++ b/src/pages/Admin/Users/Edit/index.jsx
@@ -0,0 +1,427 @@
+/*
+ Copyright (C) 2022 Krishna Mahato (krishhtrishh9304@gmail.com)
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+import React, { useEffect, useState } from "react";
+import Title from "components/Title";
+
+// widgets
+import { Alert, Button, InputContainer, Spinner } from "components/Widgets";
+
+// services
+import { getAllFolders } from "services/folders";
+
+// predefined common fields components
+import CommonFields from "components/Upload/CommonFields";
+
+// constants
+import {
+  accessLevels,
+  agents,
+  bucketPool,
+  initialAddUserData,
+  userStatus,
+} from "constants/constants";
+import { editUserById, getAllUsersName, getUserById } from "services/users";
+import { isAdmin } from "shared/authHelper";
+import TokenSpace from "./token_space";
+
+const EditUser = () => {
+  const initialMessage = {
+    type: "success",
+    text: "",
+  };
+
+  // initializing all the local states
+  const [editUserData, setEditUserData] = useState({
+    ...initialAddUserData,
+    rootFolderId: 1,
+    defaultFolderId: 1,
+    defaultGroup: null,
+    noPass: false,
+    user_status: "active",
+  });
+  const [allUsers, setAllUsers] = useState([
+    {
+      id: JSON.parse(localStorage.getItem("user")).id,
+      name: "",
+      disabled: false,
+    },
+  ]);
+
+  const [selectedUserId, setSelectedUserId] = useState(allUsers[0].id);
+  const [folderlist, setFolderlist] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState(initialMessage);
+  const [showMessage, setShowMessage] = useState(false);
+  const [rePass, setRePass] = useState({
+    pass1: "",
+    pass2: "",
+  });
+
+  // handle change event for all the input fields
+  const handleChange = (e) => {
+    switch (e.target.name) {
+      case "accessLevel":
+        setEditUserData({ ...editUserData, defaultVisibility: e.target.value });
+        break;
+      case "permission":
+        setEditUserData({ ...editUserData, accessLevel: e.target.value });
+        break;
+      case "pass1":
+        setRePass({ ...rePass, pass1: e.target.value });
+        break;
+      case "pass2":
+        setRePass({ ...rePass, pass2: e.target.value });
+        break;
+      default:
+        setEditUserData({
+          ...editUserData,
+          [e.target.name]:
+            e.target.type === "checkbox" ? e.target.checked : e.target.value,
+        });
+        break;
+    }
+
+    // separate case for agents checkboxes
+    if (
+      e.target.type === "checkbox" &&
+      e.target.name !== "emailNotification" &&
+      e.target.name !== "noPass"
+    ) {
+      editUserData.agents[e.target.name] = e.target.checked;
+      setEditUserData({ ...editUserData });
+    }
+  };
+
+  const handleChangeForUsers = (e) => {
+    setSelectedUserId(e.target.value);
+  };
+
+  // getting all the folders from the server
+  useEffect(() => {
+    getAllFolders()
+      .then((folders) => {
+        setFolderlist(() =>
+          folders.map((f) => ({ id: f.id, name: f.name, disabled: false }))
+        );
+      })
+      .catch((error) => {
+        setMessage({ type: "danger", text: error.message });
+        setShowMessage(true);
+      });
+  }, []);
+
+  const fetchAllUsers = async () => {
+    let allUsersTemp = await getAllUsersName();
+    allUsersTemp = allUsersTemp.map((user) => ({ ...user, disabled: false }));
+    setAllUsers(allUsersTemp);
+    setSelectedUserId(JSON.parse(localStorage.getItem("user")).id);
+  };
+
+  // getting the list of all the users
+  useEffect(() => {
+    fetchAllUsers();
+  }, []);
+
+  const getUserInfo = async () => {
+    try {
+      const currUserInfo = await getUserById(selectedUserId);
+      if (currUserInfo && currUserInfo.agents) {
+        currUserInfo.agents.mime = currUserInfo.agents.mimetype;
+        delete currUserInfo.agents.mimetype;
+        setEditUserData({
+          ...editUserData,
+          ...currUserInfo,
+          agents: {
+            ...editUserData.agents,
+            ...currUserInfo.agents,
+          },
+        });
+      } else if (currUserInfo && !currUserInfo.agents) {
+        setEditUserData({ ...editUserData, ...currUserInfo });
+      }
+    } catch (error) {
+      setTimeout(() => {
+        setShowMessage(false);
+      }, 2000);
+      setMessage({ type: "danger", text: error.message });
+      setShowMessage(true);
+    }
+  };
+
+  useEffect(() => {
+    getUserInfo();
+  }, [selectedUserId]);
+
+  // API call to add user
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    setTimeout(() => {
+      setLoading(false);
+      setShowMessage(false);
+    }, 2000);
+
+    try {
+      if (rePass.pass1 === rePass.pass2) {
+        // setting the request payload
+        const finalUserData = {
+          ...editUserData,
+          _blank_pass: editUserData.noPass,
+        };
+        delete finalUserData.noPass;
+        if (rePass.pass1.length !== 0) finalUserData.user_pass = rePass.pass1;
+
+        setLoading(true);
+        const res = await editUserById(selectedUserId, finalUserData);
+        await getUserInfo();
+        setRePass({ pass1: "", pass2: "" });
+        setMessage({ type: "success", text: res.message });
+        setShowMessage(true);
+        setLoading(false);
+      } else {
+        setMessage({ type: "danger", text: "Passwords do not match!" });
+        setShowMessage(true);
+      }
+    } catch (error) {
+      setMessage({ type: "danger", text: error.message });
+      setShowMessage(true);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Title title="Edit User Account" />
+      <div className="main-container my-3">
+        {/* Alert message for any error or success */}
+        {showMessage && (
+          <Alert
+            type={message.type}
+            setShow={setShowMessage}
+            message={message.text}
+          />
+        )}
+        <h1 className="font-size-main-heading">Edit A User</h1>
+        {isAdmin() && (
+          <>
+            <InputContainer
+              type="select"
+              name="permission"
+              id="access-level"
+              onChange={handleChangeForUsers}
+              options={allUsers}
+              property="name"
+              valueProperty="id"
+            >
+              Select a user
+            </InputContainer>
+            <hr />
+          </>
+        )}
+        <div className="row">
+          <div className="col-12 col-lg-8">
+            <form>
+              <InputContainer
+                name="name"
+                id="name"
+                type="text"
+                onChange={handleChange}
+                value={editUserData.name}
+              >
+                Username
+              </InputContainer>
+              <InputContainer
+                name="description"
+                id="description"
+                type="text"
+                onChange={handleChange}
+                value={editUserData.description}
+              >
+                Description, full name, contact, etc. (optional)
+              </InputContainer>
+              <InputContainer
+                name="email"
+                id="email"
+                type="email"
+                onChange={handleChange}
+                value={editUserData.email}
+              >
+                Email address
+              </InputContainer>
+              {isAdmin() && (
+                <>
+                  <InputContainer
+                    type="select"
+                    name="permission"
+                    id="permission"
+                    onChange={handleChange}
+                    options={accessLevels}
+                    property="name"
+                    value={editUserData.accessLevel}
+                    valueProperty="value"
+                  >
+                    Select the user's access level.
+                  </InputContainer>
+                  <InputContainer
+                    type="select"
+                    name="user_status"
+                    id="user_status"
+                    onChange={handleChange}
+                    options={userStatus}
+                    property="name"
+                    value={editUserData.user_status}
+                    valueProperty="value"
+                  >
+                    Select the user's status.
+                  </InputContainer>
+                </>
+              )}
+              <InputContainer
+                type="select"
+                name="rootFolderId"
+                id="rootFolderId"
+                onChange={handleChange}
+                options={folderlist}
+                property="name"
+                value={editUserData.rootFolder}
+              >
+                Select the user's default folder. Root for Upload and Browse
+                will be this folder.
+              </InputContainer>
+              {isAdmin() && (
+                <>
+                  <InputContainer
+                    type="select"
+                    name="defaultFolderId"
+                    id="defaultFolderId"
+                    onChange={handleChange}
+                    options={folderlist}
+                    property="name"
+                    value={editUserData.defaultFolderId}
+                  >
+                    Select the user's top-level folder. Access is restricted to
+                    this folder.
+                  </InputContainer>
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "5px",
+                    }}
+                  >
+                    <InputContainer
+                      type="checkbox"
+                      checked={editUserData.noPass}
+                      name="noPass"
+                      id="noPass"
+                      onChange={handleChange}
+                    />
+                    <p className="font-demi">Require No-Password</p>
+                  </div>
+                </>
+              )}
+              <InputContainer
+                name="pass1"
+                id="pass1"
+                type="password"
+                onChange={handleChange}
+                value={rePass.pass1}
+              >
+                Password (optional)
+              </InputContainer>
+              <InputContainer
+                name="pass2"
+                id="pass2"
+                type="password"
+                onChange={handleChange}
+                value={rePass.pass2}
+              >
+                Re-enter password
+              </InputContainer>
+              <InputContainer
+                type="checkbox"
+                checked={editUserData.emailNotification}
+                name="emailNotification"
+                id="emailNotification"
+                onChange={handleChange}
+              >
+                E-mail notification on job completion
+              </InputContainer>
+
+              <p className="font-demi mt-1">Default upload visibility</p>
+              <CommonFields
+                accessLevel={editUserData.defaultVisibility}
+                handleChange={handleChange}
+              />
+
+              <label htmlFor="agents" className="font-demi my-1">
+                Default agents selected when uploading data.
+                {Object.keys(editUserData.agents).map((key) => {
+                  return (
+                    <InputContainer
+                      key={key}
+                      type="checkbox"
+                      checked={editUserData.agents[key]}
+                      name={key}
+                      id={key}
+                      onChange={handleChange}
+                    >
+                      {agents[key]}
+                    </InputContainer>
+                  );
+                })}
+              </label>
+              <InputContainer
+                type="select"
+                name="defaultBucketpool"
+                id="defaultBucketpool"
+                onChange={handleChange}
+                options={bucketPool}
+                property="name"
+                value={editUserData.defaultBucketpool}
+              >
+                Default bucketpool
+              </InputContainer>
+              <Button type="submit" onClick={handleSubmit} className="mt-4">
+                {loading ? (
+                  <Spinner
+                    as="span"
+                    animation="border"
+                    size="sm"
+                    role="status"
+                    aria-hidden="true"
+                  />
+                ) : (
+                  "Update User"
+                )}
+              </Button>
+            </form>
+            <hr />
+            <TokenSpace
+              setMessage={setMessage}
+              setShowMessage={setShowMessage}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default EditUser;
diff --git a/src/pages/Admin/Users/Edit/token_space.jsx b/src/pages/Admin/Users/Edit/token_space.jsx
new file mode 100644
index 000000000..4b0d8c802
--- /dev/null
+++ b/src/pages/Admin/Users/Edit/token_space.jsx
@@ -0,0 +1,390 @@
+/*
+ Copyright (C) 2022 Krishna Mahato (krishhtrishh9304@gmail.com)
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+import React, { useState, useEffect } from "react";
+
+// widgets
+import { Button, InputContainer, Spinner } from "components/Widgets";
+import Modal from "components/Widgets/Modal";
+import PropTypes from "prop-types";
+
+// utils
+import formatDate from "utils";
+
+// css
+import "./index.css";
+import { createToken, getTokens } from "services/users";
+import { Col, Form, Row } from "react-bootstrap";
+
+const TokenSpace = ({ setMessage, setShowMessage }) => {
+  // local states
+  const [loading, setLoading] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [currTokenVal, setCurrTokenVal] = useState("");
+
+  // child IDs = token_val, validate
+  const CHILD_IDS = {
+    TOKEN: "token_val",
+    VALIDATE: "validate",
+  };
+  const [modalChildId, setModalChildId] = useState(CHILD_IDS.TOKEN);
+
+  const initialTokenInfo = {
+    username: JSON.parse(localStorage.getItem("user"))?.name,
+    password: "",
+    tokenName: "",
+    accessScope: "read",
+    tokenExpDate: formatDate(new Date()),
+  };
+  const [newTokenInfo, setNewTokenInfo] = useState(initialTokenInfo);
+
+  const initialTokenState = {
+    name: "Some dummy token name",
+    created: "yyyy-mm-dd",
+    expire: "yyyy-mm-dd",
+    scope: "read/write",
+    token: "Some dummy token value",
+  };
+
+  const [activeAccessTokens, setActiveAccessTokens] = useState([
+    initialTokenState,
+  ]);
+
+  const [expiredAccessTokens, setExpiredAccessTokens] = useState([
+    initialTokenState,
+  ]);
+
+  const handleChange = (e) => {
+    if (e.target.type === "date") {
+      setNewTokenInfo({
+        ...newTokenInfo,
+        [e.target.name]: formatDate(e.target.valueAsDate),
+      });
+    } else {
+      setNewTokenInfo({
+        ...newTokenInfo,
+        [e.target.name]: e.target.value,
+      });
+    }
+  };
+
+  // fetching all the active and the expired Tokens
+  const fetchTokens = async () => {
+    try {
+      const res1 = await getTokens("active");
+      const res2 = await getTokens("expired");
+      const activeTokens = res1.active_tokens;
+      const expiredTokens = res2.expired_tokens;
+      setActiveAccessTokens(activeTokens);
+      setExpiredAccessTokens(expiredTokens);
+    } catch (error) {
+      setMessage({ type: "danger", text: error.message });
+      setShowMessage(true);
+    }
+  };
+
+  useEffect(() => {
+    fetchTokens();
+  }, []);
+
+  // API Call to create a new Token
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      // setting the request payload
+      const finalTokenDetails = {
+        token_name: newTokenInfo.tokenName,
+        token_scope: newTokenInfo.accessScope,
+        token_expire: newTokenInfo.tokenExpDate,
+        username: newTokenInfo.username,
+        password: newTokenInfo.password,
+      };
+      const res = await createToken(finalTokenDetails);
+      if (res.Authorization) {
+        setMessage({ type: "success", text: "Token created successfully!" });
+        setShowMessage(true);
+      }
+      await fetchTokens();
+    } catch (error) {
+      setMessage({ type: "danger", text: error.message });
+      setShowMessage(true);
+    }
+    setNewTokenInfo(initialTokenInfo);
+    setShowModal(false);
+    setTimeout(() => {
+      setShowMessage(false);
+    }, 2000);
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <Modal setShow={setShowModal} show={showModal}>
+        {modalChildId === CHILD_IDS.VALIDATE ? (
+          <ValidateForm
+            handleChange={handleChange}
+            handleSubmit={handleSubmit}
+            loading={loading}
+            newTokenInfo={newTokenInfo}
+          />
+        ) : (
+          <textarea
+            style={{
+              width: "100%",
+              minHeight: "100px",
+            }}
+            name="tokenValue"
+            id="tokenValue"
+            value={currTokenVal}
+            readOnly
+          />
+        )}
+      </Modal>
+      <div>
+        <h1 className="font-size-main-heading">REST API Tokens</h1>
+        <p>
+          You can create/manage your tokens here for using FOSSology's REST API.
+        </p>
+        <hr />
+        <h1 className="font-size-main-heading">Create a new token</h1>
+        <form>
+          <InputContainer
+            name="tokenName"
+            id="tokenName"
+            type="text"
+            onChange={handleChange}
+            value={newTokenInfo.tokenName}
+          >
+            Name
+          </InputContainer>
+          <div className="mb-1">
+            <p className="font-demi my-1">Expires at</p>
+            <input
+              value={newTokenInfo.tokenExpDate}
+              type="date"
+              onChange={handleChange}
+              name="tokenExpDate"
+              id="tokenExpDate"
+            />
+          </div>
+          <p className="font-demi mt-1">Access scope</p>
+          <InputContainer
+            type="radio"
+            value="read"
+            name="accessScope"
+            id="read_only_scope"
+            checked={newTokenInfo.accessScope === "read"}
+            onChange={handleChange}
+          >
+            Read only access (Limited only to "GET" calls)
+          </InputContainer>
+          <InputContainer
+            type="radio"
+            value="write"
+            name="accessScope"
+            id="read_write_scope"
+            checked={newTokenInfo.accessScope === "write"}
+            onChange={handleChange}
+          >
+            Read/Write access Required for calls other than "GET"
+          </InputContainer>
+          <Button
+            type="submit"
+            onClick={(e) => {
+              e.preventDefault();
+              setShowModal(true);
+              setModalChildId(CHILD_IDS.VALIDATE);
+            }}
+            className="mt-4"
+          >
+            {loading ? (
+              <Spinner
+                as="span"
+                animation="border"
+                size="sm"
+                role="status"
+                aria-hidden="true"
+              />
+            ) : (
+              "Create new token"
+            )}
+          </Button>
+        </form>
+        <hr />
+        <div>
+          <h1 className="font-size-main-heading">
+            Active access tokens ({activeAccessTokens.length})
+          </h1>
+          <table className="table table-striped text-primary-color font-size-medium table-bordered">
+            <thead>
+              <tr className="font-bold">
+                <th>Token name</th>
+                <th>Created on</th>
+                <th>Expiry</th>
+                <th>Scope</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {activeAccessTokens.map((token) => {
+                return (
+                  <tr key={token.name} className="token_row">
+                    <td>{token.name}</td>
+                    <td>{token.created}</td>
+                    <td>{token.expire}</td>
+                    <td>{token.scope === "w" ? "read/write" : "read-only"}</td>
+                    <td>
+                      <Button
+                        type="button"
+                        onClick={() => {
+                          setShowModal(true);
+                          setCurrTokenVal(token.token);
+                          setModalChildId(CHILD_IDS.TOKEN);
+                        }}
+                      >
+                        Reveal
+                      </Button>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+        <hr />
+        <div>
+          <h1 className="font-size-main-heading">
+            Expired access tokens ({expiredAccessTokens.length})
+          </h1>
+          <table className="table table-striped text-primary-color font-size-medium table-bordered">
+            <thead>
+              <tr className="font-bold">
+                <th>Token name</th>
+                <th>Created on</th>
+                <th>Expired</th>
+                <th>Scope</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {expiredAccessTokens.map((token) => {
+                return (
+                  <tr key={token.name} className="token_row">
+                    <td>{token.name}</td>
+                    <td>{token.created}</td>
+                    <td>{token.expire}</td>
+                    <td>{token.scope === "w" ? "read/write" : "read-only"}</td>
+                    <td>
+                      <Button
+                        type="button"
+                        onClick={() => {
+                          setShowModal(true);
+                          setCurrTokenVal(token.token);
+                          setModalChildId(CHILD_IDS.TOKEN);
+                        }}
+                      >
+                        Reveal
+                      </Button>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const ValidateForm = ({
+  handleChange,
+  handleSubmit,
+  newTokenInfo,
+  loading,
+}) => {
+  return (
+    <Form>
+      <Form.Group as={Row} controlId="loginUsername">
+        <Form.Label column sm="4">
+          Username
+        </Form.Label>
+        <Col sm="8">
+          <Form.Label className="font-bold" column>
+            {newTokenInfo.username}
+          </Form.Label>
+        </Col>
+      </Form.Group>
+      <Form.Group as={Row} controlId="loginPassword">
+        <Form.Label column sm="4">
+          Password
+        </Form.Label>
+        <Col sm="8">
+          <input
+            id="password"
+            type="password"
+            name="password"
+            placeholder="Enter Password"
+            onChange={handleChange}
+            value={newTokenInfo.password}
+          />
+        </Col>
+      </Form.Group>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <Button type="submit" onClick={handleSubmit} className="d-block">
+          {loading ? (
+            <Spinner
+              as="span"
+              animation="border"
+              size="sm"
+              role="status"
+              aria-hidden="true"
+            />
+          ) : (
+            "Auhtorize"
+          )}
+        </Button>
+      </div>
+    </Form>
+  );
+};
+
+const validationInfo = {
+  username: PropTypes.string,
+  password: PropTypes.string,
+};
+
+ValidateForm.propTypes = {
+  handleChange: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
+  newTokenInfo: PropTypes.shape(validationInfo),
+};
+
+TokenSpace.propTypes = {
+  setMessage: PropTypes.func.isRequired,
+  setShowMessage: PropTypes.func.isRequired,
+};
+
+export default TokenSpace;
diff --git a/src/services/users.js b/src/services/users.js
index a0c6d82e2..7fde1f2d7 100644
--- a/src/services/users.js
+++ b/src/services/users.js
@@ -16,11 +16,15 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
+import fetchTokenApi from "api/auth";
 import {
   getUserSelfApi,
   getAllUsersApi,
   deleteUserApi,
   addUserApi,
+  getUserByIdAapi,
+  editUserByIdApi,
+  getTokensApi,
 } from "api/users";
 import { setLocalStorage } from "shared/storageHelper";
 
@@ -61,9 +65,41 @@ export const getAllUsersName = () => {
   });
 };
 
+// fetching a single user by id
+export const getUserById = (id) => {
+  return getUserByIdAapi(id).then((res) => {
+    return res;
+  });
+};
+
+// modifying user details by id
+export const editUserById = (id, editedUserDetails) => {
+  return editUserByIdApi(id, editedUserDetails).then((res) => {
+    return res;
+  });
+};
+
 // Deleting the user info
 export const deleteUser = (id) => {
   return deleteUserApi(id).then((res) => {
     return res;
   });
 };
+
+// Getting REST API Tokens based on token type (active | expired)
+export const getTokens = (type) => {
+  return getTokensApi(type).then((res) => {
+    return res;
+  });
+};
+
+// Creating a customized rest API token
+export const createToken = (tokenDetails) => {
+  return fetchTokenApi(
+    tokenDetails.username,
+    tokenDetails.password,
+    tokenDetails
+  ).then((res) => {
+    return res;
+  });
+};
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 000000000..94f5d77e2
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,29 @@
+/*
+ Copyright (C) 2022 Krishna Mahato (krishhtrishh9304@gmail.com)
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+export default function formatDate(date) {
+  const d = new Date(date);
+  let month = `${d.getMonth() + 1}`;
+  let day = `${d.getDate()}`;
+  const year = d.getFullYear();
+
+  if (month.length < 2) month = `0${month}`;
+  if (day.length < 2) day = `0${day}`;
+
+  return [year, month, day].join("-");
+}