From bb822a8ab30f15e92e9a263b3e77d1a40864bb73 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Wed, 13 Sep 2023 13:44:36 -0700
Subject: [PATCH] Improve UI for login modal (#235)
* removed loading skeleton from password authentication modal background
* added logo to login modals
* change BG colors for dark/light mode support
---------
Co-authored-by: timothycarambat <rambat1010@gmail.com>
---
.../components/Modals/Password/MultiUserAuth.jsx | 11 ++++++++---
.../components/Modals/Password/SingleUserAuth.jsx | 11 ++++++++---
frontend/src/components/Modals/Password/index.jsx | 2 +-
frontend/src/pages/Main/index.jsx | 15 +++------------
frontend/src/pages/WorkspaceChat/index.jsx | 15 +++------------
5 files changed, 23 insertions(+), 31 deletions(-)
diff --git a/frontend/src/components/Modals/Password/MultiUserAuth.jsx b/frontend/src/components/Modals/Password/MultiUserAuth.jsx
index 630c01caa..f088266d3 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 c930289a6..1327a2787 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 ec5a0b44e..6be4b3f6a 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 d65881812..bfef421f4 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 612b51a0b..db065cd2a 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 />;
--
GitLab