File size: 4,644 Bytes
f8b5d42 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | import React, { useState, useEffect } from "react";
import System from "../../../models/system";
import SingleUserAuth from "./SingleUserAuth";
import MultiUserAuth from "./MultiUserAuth";
import {
AUTH_TOKEN,
AUTH_USER,
AUTH_TIMESTAMP,
} from "../../../utils/constants";
import useLogo from "../../../hooks/useLogo";
import illustration from "@/media/illustrations/login-illustration.svg";
export default function PasswordModal({ mode = "single" }) {
const { loginLogo } = useLogo();
return (
<div className="fixed top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] h-full bg-theme-bg-primary flex flex-col md:flex-row items-center justify-center">
<div
style={{
background: `
radial-gradient(circle at center, transparent 40%, black 100%),
linear-gradient(180deg, #85F8FF 0%, #65A6F2 100%)
`,
width: "575px",
filter: "blur(150px)",
opacity: "0.4",
}}
className="absolute left-0 top-0 z-0 h-full w-full"
/>
<div className="hidden md:flex md:w-1/2 md:h-full md:items-center md:justify-center">
<img
className="w-full h-full object-contain z-50"
src={illustration}
alt="login illustration"
/>
</div>
<div className="flex flex-col items-center justify-center h-full w-full md:w-1/2 z-50 relative md:-mt-20 mt-0 !border-none bg-theme-bg-secondary md:bg-transparent">
<img
src={loginLogo}
alt="Logo"
className={`hidden relative md:flex rounded-2xl w-fit m-4 z-30 ${
mode === "single" ? "md:top-2" : "md:top-12"
} absolute max-h-[65px]`}
style={{ objectFit: "contain" }}
/>
{mode === "single" ? <SingleUserAuth /> : <MultiUserAuth />}
</div>
</div>
);
}
export function usePasswordModal(notry = false) {
const [auth, setAuth] = useState({
loading: true,
requiresAuth: false,
mode: "single",
});
useEffect(() => {
async function checkAuthReq() {
if (!window) return;
// If the last validity check is still valid
// we can skip the loading.
if (!System.needsAuthCheck() && notry === false) {
setAuth({
loading: false,
requiresAuth: false,
mode: "multi",
});
return;
}
const settings = await System.keys();
if (settings?.MultiUserMode) {
const currentToken = window.localStorage.getItem(AUTH_TOKEN);
if (!!currentToken) {
const valid = notry ? false : await System.checkAuth(currentToken);
if (!valid) {
setAuth({
loading: false,
requiresAuth: true,
mode: "multi",
});
window.localStorage.removeItem(AUTH_USER);
window.localStorage.removeItem(AUTH_TOKEN);
window.localStorage.removeItem(AUTH_TIMESTAMP);
return;
} else {
setAuth({
loading: false,
requiresAuth: false,
mode: "multi",
});
return;
}
} else {
setAuth({
loading: false,
requiresAuth: true,
mode: "multi",
});
return;
}
} else {
// Running token check in single user Auth mode.
// If Single user Auth is disabled - skip check
const requiresAuth = settings?.RequiresAuth || false;
if (!requiresAuth) {
setAuth({
loading: false,
requiresAuth: false,
mode: "single",
});
return;
}
const currentToken = window.localStorage.getItem(AUTH_TOKEN);
if (!!currentToken) {
const valid = notry ? false : await System.checkAuth(currentToken);
if (!valid) {
setAuth({
loading: false,
requiresAuth: true,
mode: "single",
});
window.localStorage.removeItem(AUTH_TOKEN);
window.localStorage.removeItem(AUTH_USER);
window.localStorage.removeItem(AUTH_TIMESTAMP);
return;
} else {
setAuth({
loading: false,
requiresAuth: false,
mode: "single",
});
return;
}
} else {
setAuth({
loading: false,
requiresAuth: true,
mode: "single",
});
return;
}
}
}
checkAuthReq();
}, []);
return auth;
}
|