Merge pull request #236 from krishna9304/ui/edit-user-page

feature(ui): ui and styling for the `edit user page`

Reviewed-by: [email protected]
tested-by: [email protected]

Author: shaheemazmalmmd

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

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),

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(),
+    },
+  });
+};

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}

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"

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}

src/components/Widgets/Modal/index.css

@@ -0,0 +1,40 @@
+/*
+ Copyright (C) 2022 Krishna Mahato ([email protected])
+
+ 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;
+}

src/components/Widgets/Modal/index.jsx

@@ -0,0 +1,51 @@
+/*
+ Copyright (C) 2022 Krishna Mahato ([email protected])
+
+ 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;

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,

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`,