Added Login/Logout func and buttons

ideaconsult · Oct 15, 2024 · 80f226c · 80f226c
1 parent 46ab48f
commit 80f226c
Show file tree

Hide file tree

Showing 10 changed files with 278 additions and 38 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,13 +17,15 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
+    "@react-keycloak/web": "^3.4.0",
     "@tanstack/react-table": "^8.13.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "easy-autocomplete": "^1.3.5",
     "framer-motion": "^10.18.0",
     "jquery": "^3.7.1",
     "json-format-highlight": "^1.0.4",
+    "keycloak-js": "^26.0.0",
     "lucide-react": "^0.350.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/DialogComp/styles.css b/src/DialogComp/styles.css
@@ -137,6 +137,31 @@ button[disabled] {
   color: #919191;
 }
 
+.buttonLogin {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 9px;
+  padding: 0.3rem 1rem;
+  border: 1px solid #def4ff !important;
+  background: #fff;
+  color: #282828;
+  white-space: nowrap;
+  border-radius: 6px;
+}
+.buttonLogin:hover {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 9px;
+  padding: 0.3rem 1rem;
+  border: 1px solid #def4ff !important;
+  background: #def4ff !important;
+  color: #282828;
+  white-space: nowrap;
+  border-radius: 6px;
+}
+
 .IconButton {
   font-family: inherit;
   border-radius: 100%;

diff --git a/src/MenuBar/LogoBar.tsx b/src/MenuBar/LogoBar.tsx
@@ -1,19 +1,31 @@
 import React, { useState } from "react";
-import { Navigate } from "react-router-dom";
 import "./Header.css";
 
-import PreferencesDialog from "@/DialogComp/PreferencesDialog";
+import { useKeycloak } from "@react-keycloak/web";
 
-import { useSetUuid, useSetIsShosen } from "../store/store";
 import { Link } from "react-router-dom";
-import Button from "@/ui/Button";
+import { useSetIsShosen, useSetUuid } from "../store/store";
 
 export default function LogoBar({ startScreen, uuid, setProjectID }) {
   const setUUID = useSetUuid();
   const setIdShosen = useSetIsShosen();
   const [projectName, setProjectName] = useState(() =>
     localStorage.getItem("project")
   );
+
+  const { keycloak } = useKeycloak();
+
+  const username = keycloak.tokenParsed?.preferred_username
+    ? keycloak.tokenParsed?.preferred_username
+    : localStorage.getItem("username");
+
+  const stored_token = localStorage.getItem("token");
+
+  const logoutHandle = () => {
+    localStorage.removeItem("username");
+    localStorage.removeItem("token");
+    localStorage.removeItem("refreshToken");
+  };
   return (
     <div className={startScreen ? "headerStartScreen" : "header"}>
       <div>
@@ -32,19 +44,31 @@ export default function LogoBar({ startScreen, uuid, setProjectID }) {
           </h1>
         </Link>
       </div>
-      <div style={{ display: "flex", gap: "22px", alignItems: "center" }}>
-        {projectName ? (
-          <div className="projectName">
-            <span className="projectLabel">Project:</span>
-            <span>{projectName}</span>
-          </div>
+      <div className="userInfo">
+        <div className="username">
+          {keycloak.authenticated || username ? username : ""}
+        </div>
+        {keycloak.authenticated || stored_token ? (
+          <button
+            onClick={() => {
+              keycloak.logout();
+              logoutHandle();
+            }}
+            className="buttonLogin"
+          >
+            Log out
+          </button>
         ) : (
-          <p className="projectPromt">Project is not selected</p>
+          <button
+            onClick={() => {
+              // navigate("/");
+              keycloak.login();
+            }}
+            className="buttonLogin"
+          >
+            Log in
+          </button>
         )}
-        <PreferencesDialog
-          setProjectName={setProjectName}
-          projectName={projectName}
-        />
       </div>
     </div>
   );

diff --git a/src/MenuBar/TopMenuBar.tsx b/src/MenuBar/TopMenuBar.tsx
@@ -6,9 +6,9 @@ import "./Header.css";
 
 import config from "../utils/config";
 
-import { useIntermediateData, useUuid, useProjectID } from "../store/store";
+import { useIntermediateData, useProjectID, useUuid } from "../store/store";
 
-import { postRequestUUID, downloadFile } from "../lib/request";
+import { downloadFile, postRequestUUID } from "../lib/request";
 
 export default function TopMenuBar() {
   const [copied, setCopied] = useState(false);

diff --git a/src/StartScreenComp/StartScreenComp.css b/src/StartScreenComp/StartScreenComp.css
@@ -3,11 +3,23 @@
   background-color: #fff;
   padding: 0 2rem;
 }
+.description {
+  line-height: 1.6rem;
+}
 .descriptionNew {
-  margin: 2rem;
+  margin: 1rem 0 2rem 2rem;
   display: flex;
   gap: 60px;
-  align-items: flex-start;
+  align-items: center;
+  gap: 120px;
+  justify-content: space-between;
+}
+
+.topBarAuth {
+  /* display: flex; */
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
 }
 
 .underDev {
@@ -19,6 +31,19 @@
   padding: 0.3rem 0.8rem;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
+  margin-top: -30px;
+}
+.userInfo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.username {
+  color: #6d6d6d;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: capitalize;
 }
 
 .createNewBtn {