Feat: God Mode UI Updates and More Config Settings (#2877)
* feat: Images in Plane config screen. * feat: Enable/ Disable Magic Login config toggle. * style: UX copy and design updates across all screens. * style: SSO and OAuth Screen revamp. * style: Enter God Mode button for Profile Settings sidebar. * fix: update input type to password for password fields.
This commit is contained in:
Prateek Shourya
sriram veeraghanta
parent
bf060cc8eb
commit
398f35d36d
19 changed files with 672 additions and 360 deletions
|
|
@ -1,19 +1,17 @@
|
|||
import { ReactElement, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import useSWR from "swr";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// layouts
|
||||
import { InstanceAdminHeader, InstanceAdminLayout } from "layouts/admin-layout";
|
||||
import { InstanceAdminLayout } from "layouts/admin-layout";
|
||||
// types
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
// store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// icons
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
// ui
|
||||
import { Loader, ToggleSwitch } from "@plane/ui";
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
// components
|
||||
import { InstanceGoogleConfigForm } from "components/instance/google-config-form";
|
||||
import { InstanceGithubConfigForm } from "components/instance/github-config-form";
|
||||
|
|
@ -33,12 +31,17 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
|
|||
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
|
||||
|
||||
const enableSignup = formattedConfig?.ENABLE_SIGNUP ?? "0";
|
||||
const enableMagicLogin = formattedConfig?.ENABLE_MAGIC_LINK_LOGIN ?? "0";
|
||||
// const enableEmailPassword = formattedConfig?.ENABLE_EMAIL_PASSWORD ?? "0";
|
||||
|
||||
const updateConfig = async (value: string) => {
|
||||
const updateConfig = async (
|
||||
key: "ENABLE_SIGNUP" | "ENABLE_MAGIC_LINK_LOGIN" | "ENABLE_EMAIL_PASSWORD",
|
||||
value: string
|
||||
) => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
const payload = {
|
||||
ENABLE_SIGNUP: value,
|
||||
[key]: value,
|
||||
};
|
||||
|
||||
await updateInstanceConfigurations(payload)
|
||||
|
|
@ -46,7 +49,7 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
|
|||
setToastAlert({
|
||||
title: "Success",
|
||||
type: "success",
|
||||
message: "Authorization Settings updated successfully",
|
||||
message: "SSO and OAuth Settings updated successfully",
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
})
|
||||
|
|
@ -55,102 +58,121 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
|
|||
setToastAlert({
|
||||
title: "Error",
|
||||
type: "error",
|
||||
message: "Failed to update Authorization Settings",
|
||||
message: "Failed to update SSO and OAuth Settings",
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col gap-8 my-8 mx-12">
|
||||
<div className="pb-3 mb-2 border-b border-custom-border-100">
|
||||
<div className="text-custom-text-100 font-medium text-xl pb-1">Single sign-on and OAuth</div>
|
||||
<div className="text-custom-text-300 font-normal text-sm">
|
||||
Make your teams life easy by letting them sign-up with their Google and GitHub accounts, and below are the
|
||||
settings.
|
||||
</div>
|
||||
</div>
|
||||
{formattedConfig ? (
|
||||
<div className="flex flex-col gap-8 m-8 w-4/5">
|
||||
<div className="pb-2 mb-2 border-b border-custom-border-100">
|
||||
<div className="text-custom-text-100 font-medium text-lg">Authorization</div>
|
||||
<div className="text-custom-text-300 font-normal text-sm">
|
||||
Make your teams life easy by letting them sign-up with their Google and GitHub accounts, and below are the
|
||||
settings.
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-8 pb-4 border-b border-custom-border-100">
|
||||
<div>
|
||||
<div className="text-custom-text-100 font-medium text-sm">Enable sign-up</div>
|
||||
<div className="text-custom-text-300 font-normal text-xs">
|
||||
Keep the doors open so people can join your workspaces.
|
||||
<>
|
||||
<div className="flex flex-col gap-12 w-full lg:w-2/5 pb-8 border-b border-custom-border-100">
|
||||
<div className="flex items-center gap-14 mr-4">
|
||||
<div className="grow">
|
||||
<div className="text-custom-text-100 font-medium text-sm">
|
||||
Turn Magic Links {Boolean(parseInt(enableMagicLogin)) ? "off" : "on"}
|
||||
</div>
|
||||
<div className="text-custom-text-300 font-normal text-xs">
|
||||
<p>Slack-like emails for authentication.</p>
|
||||
You need to have set up email{" "}
|
||||
<Link href="email">
|
||||
<a className="text-custom-primary-100 hover:underline">here</a>
|
||||
</Link>{" "}
|
||||
to enable this.
|
||||
</div>
|
||||
</div>
|
||||
<div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
|
||||
<ToggleSwitch
|
||||
value={Boolean(parseInt(enableMagicLogin))}
|
||||
onChange={() => {
|
||||
Boolean(parseInt(enableMagicLogin)) === true
|
||||
? updateConfig("ENABLE_MAGIC_LINK_LOGIN", "0")
|
||||
: updateConfig("ENABLE_MAGIC_LINK_LOGIN", "1");
|
||||
}}
|
||||
size="sm"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={isSubmitting ? "opacity-70" : ""}>
|
||||
<ToggleSwitch
|
||||
value={Boolean(parseInt(enableSignup))}
|
||||
onChange={() => {
|
||||
Boolean(parseInt(enableSignup)) === true ? updateConfig("0") : updateConfig("1");
|
||||
}}
|
||||
size="sm"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<div className="flex items-center gap-14 mr-4">
|
||||
<div className="grow">
|
||||
<div className="text-custom-text-100 font-medium text-sm">
|
||||
Let your users log in via the methods below
|
||||
</div>
|
||||
<div className="text-custom-text-300 font-normal text-xs">
|
||||
Toggling this off will disable all previous configs. Users will only be able to login with an e-mail
|
||||
and password combo.
|
||||
</div>
|
||||
</div>
|
||||
<div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
|
||||
<ToggleSwitch
|
||||
value={Boolean(parseInt(enableSignup))}
|
||||
onChange={() => {
|
||||
Boolean(parseInt(enableSignup)) === true
|
||||
? updateConfig("ENABLE_SIGNUP", "0")
|
||||
: updateConfig("ENABLE_SIGNUP", "1");
|
||||
}}
|
||||
size="sm"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="flex items-center gap-14 mr-4">
|
||||
<div className="grow">
|
||||
<div className="text-custom-text-100 font-medium text-sm">
|
||||
Turn Email Password {Boolean(parseInt(enableEmailPassword)) ? "off" : "on"}
|
||||
</div>
|
||||
<div className="text-custom-text-300 font-normal text-xs">UX Copy Required!</div>
|
||||
</div>
|
||||
<div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
|
||||
<ToggleSwitch
|
||||
value={Boolean(parseInt(enableEmailPassword))}
|
||||
onChange={() => {
|
||||
Boolean(parseInt(enableEmailPassword)) === true
|
||||
? updateConfig("ENABLE_EMAIL_PASSWORD", "0")
|
||||
: updateConfig("ENABLE_EMAIL_PASSWORD", "1");
|
||||
}}
|
||||
size="sm"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="flex flex-col gap-y-6 py-2">
|
||||
<Disclosure as="div">
|
||||
{({ open }) => (
|
||||
<div className="w-full">
|
||||
<Disclosure.Button
|
||||
as="button"
|
||||
type="button"
|
||||
className="flex items-center justify-between w-full py-2 border-b border-custom-border-100"
|
||||
>
|
||||
<span className="text-lg font-medium tracking-tight">Google</span>
|
||||
{open ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
show={open}
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform opacity-0"
|
||||
enterTo="transform opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform opacity-100"
|
||||
leaveTo="transform opacity-0"
|
||||
>
|
||||
<Disclosure.Panel className="flex flex-col gap-8 px-2 py-8">
|
||||
<InstanceGoogleConfigForm config={formattedConfig} />
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure>
|
||||
<Disclosure as="div">
|
||||
{({ open }) => (
|
||||
<div className="w-full">
|
||||
<Disclosure.Button
|
||||
as="button"
|
||||
type="button"
|
||||
className="flex items-center justify-between w-full py-2 border-b border-custom-border-100"
|
||||
>
|
||||
<span className="text-lg font-medium tracking-tight">Github</span>
|
||||
{open ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
show={open}
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform opacity-0"
|
||||
enterTo="transform opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform opacity-100"
|
||||
leaveTo="transform opacity-0"
|
||||
>
|
||||
<Disclosure.Panel className="flex flex-col gap-8 px-2 py-8">
|
||||
<InstanceGithubConfigForm config={formattedConfig} />
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center justify-between py-2 border-b border-custom-border-100">
|
||||
<span className="text-lg font-medium tracking-tight">Google</span>
|
||||
</div>
|
||||
<div className="px-2 py-6">
|
||||
<InstanceGoogleConfigForm config={formattedConfig} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center justify-between py-2 border-b border-custom-border-100">
|
||||
<span className="text-lg font-medium tracking-tight">Github</span>
|
||||
</div>
|
||||
<div className="px-2 py-6">
|
||||
<InstanceGithubConfigForm config={formattedConfig} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Loader className="space-y-4 m-8">
|
||||
<Loader.Item height="50px" />
|
||||
<Loader className="space-y-4">
|
||||
<Loader.Item height="50px" width="50%" />
|
||||
<Loader.Item height="50px" width="50%" />
|
||||
<Loader.Item height="50px" width="50%" />
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" width="25%" />
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" width="25%" />
|
||||
</Loader>
|
||||
|
|
@ -160,7 +182,7 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
|
|||
});
|
||||
|
||||
InstanceAdminAuthorizationPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <InstanceAdminLayout header={<InstanceAdminHeader title="Authorization" />}>{page}</InstanceAdminLayout>;
|
||||
return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
|
||||
};
|
||||
|
||||
export default InstanceAdminAuthorizationPage;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue