diff --git a/frontend/src/components/Modals/Password/MultiUserAuth.jsx b/frontend/src/components/Modals/Password/MultiUserAuth.jsx
index 630c01caa8b2f4d4352fd2190a73a8e0c2fcd686..f088266d335fe4c0c368349390e9960036507856 100644
--- a/frontend/src/components/Modals/Password/MultiUserAuth.jsx
+++ b/frontend/src/components/Modals/Password/MultiUserAuth.jsx
@@ -1,10 +1,12 @@
import React, { useState } from "react";
import System from "../../../models/system";
import { AUTH_TOKEN, AUTH_USER } from "../../../utils/constants";
+import useLogo from "../../../hooks/useLogo";
export default function MultiUserAuth() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
+ const { logo: _initLogo } = useLogo();
const handleLogin = async (e) => {
setError(null);
setLoading(true);
@@ -29,9 +31,12 @@ export default function MultiUserAuth() {
<form onSubmit={handleLogin}>
<div className="relative bg-white rounded-lg shadow dark:bg-stone-700">
<div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
- <h3 className="text-md md:text-xl font-semibold text-gray-900 dark:text-white">
- This instance is password protected.
- </h3>
+ <div className="flex items-center flex-col">
+ <img src={_initLogo} alt="Logo" className="w-1/2" />
+ <h3 className="text-md md:text-xl font-semibold text-gray-900 dark:text-white">
+ This instance is password protected.
+ </h3>
+ </div>
</div>
<div className="p-6 space-y-6 flex h-full w-full">
<div className="w-full flex flex-col gap-y-4">
diff --git a/frontend/src/components/Modals/Password/SingleUserAuth.jsx b/frontend/src/components/Modals/Password/SingleUserAuth.jsx
index c930289a6552f9e1af8c83580ff369e1306db177..1327a278764cbe2bdbe4a00980ad1ee05163eb60 100644
--- a/frontend/src/components/Modals/Password/SingleUserAuth.jsx
+++ b/frontend/src/components/Modals/Password/SingleUserAuth.jsx
@@ -1,10 +1,12 @@
import React, { useState } from "react";
import System from "../../../models/system";
import { AUTH_TOKEN } from "../../../utils/constants";
+import useLogo from "../../../hooks/useLogo";
export default function SingleUserAuth() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
+ const { logo: _initLogo } = useLogo();
const handleLogin = async (e) => {
setError(null);
setLoading(true);
@@ -28,9 +30,12 @@ export default function SingleUserAuth() {
<form onSubmit={handleLogin}>
<div className="relative bg-white rounded-lg shadow dark:bg-stone-700">
<div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
- <h3 className="text-md md:text-xl font-semibold text-gray-900 dark:text-white">
- This workspace is password protected.
- </h3>
+ <div className="flex items-center flex-col">
+ <img src={_initLogo} alt="Logo" className="w-1/2" />
+ <h3 className="text-md md:text-xl font-semibold text-gray-900 dark:text-white">
+ This instance is password protected.
+ </h3>
+ </div>
</div>
<div className="p-6 space-y-6 flex h-full w-full">
<div className="w-full flex flex-col gap-y-4">
diff --git a/frontend/src/components/Modals/Password/index.jsx b/frontend/src/components/Modals/Password/index.jsx
index ec5a0b44e54a0c98724d4b3087b2daf7f05b3684..6be4b3f6aa9c83db332934d8e54f13ea975de754 100644
--- a/frontend/src/components/Modals/Password/index.jsx
+++ b/frontend/src/components/Modals/Password/index.jsx
@@ -6,7 +6,7 @@ import { AUTH_TOKEN, AUTH_USER } from "../../../utils/constants";
export default function PasswordModal({ mode = "single" }) {
return (
- <div className="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] h-full bg-black bg-opacity-50 flex items-center justify-center">
+ <div className="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] h-full bg-gray-600 dark:bg-stone-800 flex items-center justify-center">
<div className="flex fixed top-0 left-0 right-0 w-full h-full" />
<div className="relative w-full max-w-2xl max-h-full">
{mode === "single" ? <SingleUserAuth /> : <MultiUserAuth />}
diff --git a/frontend/src/pages/Main/index.jsx b/frontend/src/pages/Main/index.jsx
index d65881812a1acfe26819ef6322d3c60e58a970f3..bfef421f4ca89ee677f1b520703282feddd3320d 100644
--- a/frontend/src/pages/Main/index.jsx
+++ b/frontend/src/pages/Main/index.jsx
@@ -1,8 +1,6 @@
import React from "react";
import DefaultChatContainer from "../../components/DefaultChat";
import Sidebar from "../../components/Sidebar";
-import SidebarPlaceholder from "../../components/Sidebar/Placeholder";
-import ChatPlaceholder from "../../components/WorkspaceChat/LoadingChat";
import PasswordModal, {
usePasswordModal,
} from "../../components/Modals/Password";
@@ -10,16 +8,9 @@ import { isMobile } from "react-device-detect";
export default function Main() {
const { requiresAuth, mode } = usePasswordModal();
- if (requiresAuth === null || requiresAuth) {
- return (
- <>
- {requiresAuth && <PasswordModal mode={mode} />}
- <div className="w-screen h-screen overflow-hidden bg-orange-100 dark:bg-stone-700 flex">
- {!isMobile && <SidebarPlaceholder />}
- <ChatPlaceholder />
- </div>
- </>
- );
+
+ if (requiresAuth !== false) {
+ return <>{requiresAuth !== null && <PasswordModal mode={mode} />}</>;
}
return (
diff --git a/frontend/src/pages/WorkspaceChat/index.jsx b/frontend/src/pages/WorkspaceChat/index.jsx
index 612b51a0be65ba2b4fa41aa6c6cb34d2e4df3189..db065cd2a6ee2fdffccb7385c190811c3f637e58 100644
--- a/frontend/src/pages/WorkspaceChat/index.jsx
+++ b/frontend/src/pages/WorkspaceChat/index.jsx
@@ -3,8 +3,6 @@ import { default as WorkspaceChatContainer } from "../../components/WorkspaceCha
import Sidebar from "../../components/Sidebar";
import { useParams } from "react-router-dom";
import Workspace from "../../models/workspace";
-import SidebarPlaceholder from "../../components/Sidebar/Placeholder";
-import ChatPlaceholder from "../../components/WorkspaceChat/LoadingChat";
import PasswordModal, {
usePasswordModal,
} from "../../components/Modals/Password";
@@ -12,16 +10,9 @@ import { isMobile } from "react-device-detect";
export default function WorkspaceChat() {
const { requiresAuth, mode } = usePasswordModal();
- if (requiresAuth === null || requiresAuth) {
- return (
- <>
- {requiresAuth && <PasswordModal mode={mode} />}
- <div className="w-screen h-screen overflow-hidden bg-orange-100 dark:bg-stone-700 flex">
- {!isMobile && <SidebarPlaceholder />}
- <ChatPlaceholder />
- </div>
- </>
- );
+
+ if (requiresAuth !== false) {
+ return <>{requiresAuth !== null && <PasswordModal mode={mode} />}</>;
}
return <ShowWorkspaceChat />;