|
|
|
@ -104,94 +104,92 @@ const SignIn = () => {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="flex flex-row justify-center items-center w-full h-full dark:bg-zinc-800">
|
|
|
|
|
<div className="w-80 max-w-full h-full min-h-screen py-4 flex flex-col justify-start items-center">
|
|
|
|
|
<div className="w-full py-4 grow flex flex-col justify-center items-center">
|
|
|
|
|
<div className="w-full flex flex-row justify-center items-center mb-6">
|
|
|
|
|
<img className="h-14 w-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />
|
|
|
|
|
<p className="ml-2 text-5xl text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
|
|
|
|
|
</div>
|
|
|
|
|
{!disablePasswordLogin && (
|
|
|
|
|
<>
|
|
|
|
|
<form className="w-full mt-2" onSubmit={handleFormSubmit}>
|
|
|
|
|
<div className="flex flex-col justify-start items-start w-full gap-4">
|
|
|
|
|
<div className="w-full flex flex-col justify-start items-start gap-2">
|
|
|
|
|
<span className="leading-8 text-gray-600">{t("common.username")}</span>
|
|
|
|
|
<Input
|
|
|
|
|
className="w-full"
|
|
|
|
|
size="lg"
|
|
|
|
|
type="text"
|
|
|
|
|
readOnly={actionBtnLoadingState.isLoading}
|
|
|
|
|
placeholder={t("common.username")}
|
|
|
|
|
value={username}
|
|
|
|
|
onChange={handleUsernameInputChanged}
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="w-full flex flex-col justify-start items-start gap-2">
|
|
|
|
|
<span className="leading-8 text-gray-600">{t("common.password")}</span>
|
|
|
|
|
<Input
|
|
|
|
|
className="w-full"
|
|
|
|
|
size="lg"
|
|
|
|
|
type="password"
|
|
|
|
|
readOnly={actionBtnLoadingState.isLoading}
|
|
|
|
|
placeholder={t("common.password")}
|
|
|
|
|
value={password}
|
|
|
|
|
onChange={handlePasswordInputChanged}
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex flex-row justify-start items-center w-full mt-6">
|
|
|
|
|
<Checkbox label={t("common.remember-me")} checked={remember} onChange={(e) => setRemember(e.target.checked)} />
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex flex-row justify-end items-center w-full mt-6">
|
|
|
|
|
<Button
|
|
|
|
|
<div className="pt-12 pb-8 w-80 max-w-full h-auto mx-auto flex flex-col justify-start items-center">
|
|
|
|
|
<div className="w-full py-4 grow flex flex-col justify-center items-center">
|
|
|
|
|
<div className="w-full flex flex-row justify-center items-center mb-6">
|
|
|
|
|
<img className="h-14 w-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />
|
|
|
|
|
<p className="ml-2 text-5xl text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
|
|
|
|
|
</div>
|
|
|
|
|
{!disablePasswordLogin && (
|
|
|
|
|
<>
|
|
|
|
|
<form className="w-full mt-2" onSubmit={handleFormSubmit}>
|
|
|
|
|
<div className="flex flex-col justify-start items-start w-full gap-4">
|
|
|
|
|
<div className="w-full flex flex-col justify-start items-start gap-2">
|
|
|
|
|
<span className="leading-8 text-gray-600">{t("common.username")}</span>
|
|
|
|
|
<Input
|
|
|
|
|
className="w-full"
|
|
|
|
|
size="md"
|
|
|
|
|
type="submit"
|
|
|
|
|
disabled={actionBtnLoadingState.isLoading}
|
|
|
|
|
loading={actionBtnLoadingState.isLoading}
|
|
|
|
|
onClick={handleSignInButtonClick}
|
|
|
|
|
>
|
|
|
|
|
{t("common.sign-in")}
|
|
|
|
|
</Button>
|
|
|
|
|
size="lg"
|
|
|
|
|
type="text"
|
|
|
|
|
readOnly={actionBtnLoadingState.isLoading}
|
|
|
|
|
placeholder={t("common.username")}
|
|
|
|
|
value={username}
|
|
|
|
|
onChange={handleUsernameInputChanged}
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
{systemStatus.allowSignUp && (
|
|
|
|
|
<p className="w-full mt-4 text-sm">
|
|
|
|
|
<span className="dark:text-gray-500">{t("auth.sign-up-tip")}</span>
|
|
|
|
|
<Link to="/auth/signup" className="cursor-pointer ml-2 text-blue-600 hover:underline">
|
|
|
|
|
{t("common.sign-up")}
|
|
|
|
|
</Link>
|
|
|
|
|
</p>
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
{identityProviderList.length > 0 && (
|
|
|
|
|
<>
|
|
|
|
|
{!disablePasswordLogin && <Divider className="!my-4">{t("common.or")}</Divider>}
|
|
|
|
|
<div className="w-full flex flex-col space-y-2">
|
|
|
|
|
{identityProviderList.map((identityProvider) => (
|
|
|
|
|
<Button
|
|
|
|
|
key={identityProvider.id}
|
|
|
|
|
variant="outlined"
|
|
|
|
|
color="neutral"
|
|
|
|
|
<div className="w-full flex flex-col justify-start items-start gap-2">
|
|
|
|
|
<span className="leading-8 text-gray-600">{t("common.password")}</span>
|
|
|
|
|
<Input
|
|
|
|
|
className="w-full"
|
|
|
|
|
size="md"
|
|
|
|
|
onClick={() => handleSignInWithIdentityProvider(identityProvider)}
|
|
|
|
|
>
|
|
|
|
|
{t("common.sign-in-with", { provider: identityProvider.name })}
|
|
|
|
|
</Button>
|
|
|
|
|
))}
|
|
|
|
|
size="lg"
|
|
|
|
|
type="password"
|
|
|
|
|
readOnly={actionBtnLoadingState.isLoading}
|
|
|
|
|
placeholder={t("common.password")}
|
|
|
|
|
value={password}
|
|
|
|
|
onChange={handlePasswordInputChanged}
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex flex-row items-center justify-center w-full gap-2">
|
|
|
|
|
<LocaleSelect value={locale} onChange={handleLocaleSelectChange} />
|
|
|
|
|
<AppearanceSelect value={appearance} onChange={handleAppearanceSelectChange} />
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex flex-row justify-start items-center w-full mt-6">
|
|
|
|
|
<Checkbox label={t("common.remember-me")} checked={remember} onChange={(e) => setRemember(e.target.checked)} />
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex flex-row justify-end items-center w-full mt-6">
|
|
|
|
|
<Button
|
|
|
|
|
className="w-full"
|
|
|
|
|
size="md"
|
|
|
|
|
type="submit"
|
|
|
|
|
disabled={actionBtnLoadingState.isLoading}
|
|
|
|
|
loading={actionBtnLoadingState.isLoading}
|
|
|
|
|
onClick={handleSignInButtonClick}
|
|
|
|
|
>
|
|
|
|
|
{t("common.sign-in")}
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
{systemStatus.allowSignUp && (
|
|
|
|
|
<p className="w-full mt-4 text-sm">
|
|
|
|
|
<span className="dark:text-gray-500">{t("auth.sign-up-tip")}</span>
|
|
|
|
|
<Link to="/auth/signup" className="cursor-pointer ml-2 text-blue-600 hover:underline">
|
|
|
|
|
{t("common.sign-up")}
|
|
|
|
|
</Link>
|
|
|
|
|
</p>
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
{identityProviderList.length > 0 && (
|
|
|
|
|
<>
|
|
|
|
|
{!disablePasswordLogin && <Divider className="!my-4">{t("common.or")}</Divider>}
|
|
|
|
|
<div className="w-full flex flex-col space-y-2">
|
|
|
|
|
{identityProviderList.map((identityProvider) => (
|
|
|
|
|
<Button
|
|
|
|
|
key={identityProvider.id}
|
|
|
|
|
variant="outlined"
|
|
|
|
|
color="neutral"
|
|
|
|
|
className="w-full"
|
|
|
|
|
size="md"
|
|
|
|
|
onClick={() => handleSignInWithIdentityProvider(identityProvider)}
|
|
|
|
|
>
|
|
|
|
|
{t("common.sign-in-with", { provider: identityProvider.name })}
|
|
|
|
|
</Button>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="mt-4 flex flex-row items-center justify-center w-full gap-2">
|
|
|
|
|
<LocaleSelect value={locale} onChange={handleLocaleSelectChange} />
|
|
|
|
|
<AppearanceSelect value={appearance} onChange={handleAppearanceSelectChange} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|