✨ Add Create user

code/frontend/src/PageSwitcher.js

@@ -8,16 +8,20 @@ import PageSandbox from "./routes/PageSandbox"
 import PageDashboard from "./routes/PageDashboard"
 import PageRoot from "./routes/PageRoot"
 import PageEdit from "./routes/PageEdit"
+import PageUsers from "./routes/PageUsers"
 
 
 export default function PageSwitcher({ ...props }) {
     return (
         <Switch {...props}>
+            <Route path={"/repositories/:id/edit"} exact={true}>
+                <PageEdit/>
+            </Route>
             <Route path={"/login"} exact={true}>
                 <PageLogin/>
             </Route>
-            <Route path={"/repositories/:id/edit"} exact={true}>
-                <PageEdit/>
+            <Route path={"/users"} exact={true}>
+                <PageUsers/>
             </Route>
             <Route path={"/repositories"} exact={true}>
                 <PageRepositories/>

code/frontend/src/components/interactive/BoxUserCreate.js

@@ -0,0 +1,74 @@
+import React, { useContext, useMemo, useState } from "react"
+import FormLabelled from "../base/FormLabelled"
+import FormLabel from "../base/formparts/FormLabel"
+import InputWithIcon from "../base/InputWithIcon"
+import { faEnvelope, faKey, faPlus, faUser } from "@fortawesome/free-solid-svg-icons"
+import FormButton from "../base/formparts/FormButton"
+import BoxFull from "../base/BoxFull"
+import useBackend from "../../hooks/useBackend"
+import ContextUser from "../../contexts/ContextUser"
+import FormAlert from "../base/formparts/FormAlert"
+
+
+export default function BoxUserCreate({ children, ...props }) {
+    const { fetchDataAuth } = useContext(ContextUser)
+    const [username, setUsername] = useState("")
+    const [email, setEmail] = useState("")
+    const [password, setPassword] = useState("")
+
+    const body = useMemo(
+        () => {
+            return {
+                "email": email,
+                "username": username,
+                "password": password,
+            }
+        },
+        [email, username, password],
+    )
+    const { error, fetchNow: createNow } = useBackend(fetchDataAuth, "POST", "/api/v1/users/", body)
+
+    return (
+        <BoxFull header={"Crea utente"} {...props}>
+            <FormLabelled>
+                <FormLabel text={"Username"}>
+                    <InputWithIcon
+                        icon={faUser}
+                        type={"text"}
+                        value={username}
+                        onChange={event => setUsername(event.target.value)}
+                    />
+                </FormLabel>
+                <FormLabel text={"Email"}>
+                    <InputWithIcon
+                        icon={faEnvelope}
+                        type={"text"}
+                        value={email}
+                        onChange={event => setEmail(event.target.value)}
+                    />
+                </FormLabel>
+                <FormLabel text={"Password"}>
+                    <InputWithIcon
+                        icon={faKey}
+                        type={"password"}
+                        value={password}
+                        onChange={event => setPassword(event.target.value)}
+                    />
+                </FormLabel>
+                {error ?
+                 <FormAlert color={"Red"}>
+                     {error.toString()}
+                 </FormAlert>
+                       : null}
+                <FormButton
+                    color={"Green"}
+                    icon={faPlus}
+                    onClick={() => createNow()}
+                >
+                    Create
+                </FormButton>
+            </FormLabelled>
+            {children}
+        </BoxFull>
+    )
+}

code/frontend/src/components/interactive/Sidebar.js

@@ -1,9 +1,17 @@
-import React, { Fragment, useContext } from "react"
+import React, { useContext } from "react"
 import Style from "./Sidebar.module.css"
 import classNames from "classnames"
 import Logo from "../interactive/Logo"
 import ButtonSidebar from "../base/ButtonSidebar"
-import { faCog, faExclamationTriangle, faFolder, faHome, faKey, faWrench } from "@fortawesome/free-solid-svg-icons"
+import {
+    faCog,
+    faExclamationTriangle,
+    faFolder,
+    faHome,
+    faKey,
+    faUser,
+    faWrench,
+} from "@fortawesome/free-solid-svg-icons"
 import ContextUser from "../../contexts/ContextUser"
 
 
@@ -24,16 +32,24 @@ export default function Sidebar({ className, ...props }) {
             <Logo/>
             {
                 user ?
-                <Fragment>
+                <>
                     <ButtonSidebar to={"/dashboard"} icon={faHome}>Dashboard</ButtonSidebar>
                     <ButtonSidebar to={"/repositories"} icon={faFolder}>Repositories</ButtonSidebar>
                     <ButtonSidebar to={"/alerts"} icon={faExclamationTriangle}>Alerts</ButtonSidebar>
                     <ButtonSidebar to={"/settings"} icon={faCog}>Settings</ButtonSidebar>
-                </Fragment>
+                </>
                      :
-                <Fragment>
+                <>
                     <ButtonSidebar to={"/login"} icon={faKey}>Login</ButtonSidebar>
-                </Fragment>
+                </>
+            }
+            {
+                user.isAdmin ?
+                <>
+                    <ButtonSidebar to={"/users"} icon={faUser}>Users</ButtonSidebar>
+                </>
+                             :
+                null
             }
             {
                 process.env.NODE_ENV === "development" ?

code/frontend/src/routes/PageUsers.js

@@ -1,15 +1,29 @@
-import React from "react"
+import React, { useContext } from "react"
 import Style from "./PageDashboard.module.css"
 import classNames from "classnames"
 import BoxHeader from "../components/base/BoxHeader"
+import BoxUserCreate from "../components/interactive/BoxUserCreate"
+import ContextUser from "../contexts/ContextUser"
+import BoxAlert from "../components/base/BoxAlert"
 
 
-export default function PageDashboard({ children, className, ...props }) {
+export default function PageUsers({ children, className, ...props }) {
+    const { user } = useContext(ContextUser)
+
+    if(!user.isAdmin) {
+        return (
+            <BoxAlert color={"Red"}>
+                Non sei un amministratore, pertanto non puoi gestire gli utenti della piattaforma.
+            </BoxAlert>
+        )
+    }
+
     return (
         <div className={classNames(Style.PageHome, className)} {...props}>
             <BoxHeader className={Style.Header}>
-                Manage users
+                Gestisci utenti
             </BoxHeader>
+            <BoxUserCreate/>
         </div>
     )
 }

code/frontend/src/routes/PageUsers.module.css

@@ -18,6 +18,14 @@
     grid-area: a;
 }
 
-.RepositoryEditor {
+.CreateUser {
     grid-area: b;
 }
+
+.DeleteUser {
+    grid-area: c;
+}
+
+.UserList {
+    grid-area: d;
+}