github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: auth UI consistency in web, space and admin.

Browse Source
This commit is contained in:
Prateek Shourya 2024-05-02 14:02:48 +05:30
parent 2d42d316a0
commit 2b32fd44d1
11 changed files with 71 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
admin/app/login/components/sign-in-form.tsx
View File

@ -92,8 +92,8 @@ export const InstanceSignInForm: FC = (props) => {
);
return (
<div className="relative w-full h-full overflow-hidden container mx-auto px-5 md:px-0 flex justify-center items-center">
<div className="w-full md:w-4/6 lg:w-3/6 xl:w-2/6 space-y-10">
<div className="relative w-full h-full overflow-hidden container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 flex flex-col justify-center items-center">
<div className="relative flex flex-col space-y-6">
<div className="text-center space-y-1">
<h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
Manage your Plane instance

4
admin/app/setup/components/sign-up-form.tsx
View File

@ -122,8 +122,8 @@ export const InstanceSignUpForm: FC = (props) => {
);
return (
<div className="relative w-full min-h-full h-auto overflow-hidden container mx-auto px-5 lg:px-0 flex justify-center items-center">
<div className="w-full md:w-4/6 lg:w-3/6 xl:w-2/6 space-y-10">
<div className="relative w-full h-full overflow-hidden container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 flex flex-col justify-center items-center">
<div className="relative flex flex-col space-y-6">
<div className="text-center space-y-1">
<h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
Setup your Plane Instance

2
admin/components/instance/instance-not-ready.tsx
View File

@ -11,7 +11,7 @@ export const InstanceNotReady: FC = () => (
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
<div className="w-auto max-w-2xl relative space-y-8 py-10">
<div className="relative flex flex-col justify-center items-center space-y-4">
<h1 className="text-3xl font-bold">Welcome aboard Plane!</h1>
<h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
<Image src={PlaneTakeOffImage} alt="Plane Logo" />
<p className="font-medium text-base text-onboarding-text-400">
Get started by setting up your instance and workspace

27
admin/layouts/default-layout.tsx
View File

@ -10,30 +10,33 @@ import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
type TDefaultLayout = {
children: ReactNode;
withoutBackground?: boolean;
};
export const DefaultLayout: FC<TDefaultLayout> = (props) => {
const { children } = props;
const { children, withoutBackground = false } = props;
// hooks
const { resolvedTheme } = useTheme();
return (
<div className="relative">
<div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
<div className="container h-[100px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
<div className="flex items-center gap-x-2">
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
<div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
<div className="flex items-center gap-x-2 py-10">
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
</div>
</div>
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
className="w-screen h-full object-cover"
alt="Plane background pattern"
/>
</div>
<div className="relative z-10 w-full px-5 lg:px-0 mb-[100px] flex-grow">{children}</div>
{!withoutBackground && (
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
className="w-screen h-full object-cover"
alt="Plane background pattern"
/>
</div>
)}
<div className="relative z-10 mb-[110px] flex-grow">{children}</div>
</div>
</div>
);

2
admin/lib/wrappers/instance-wrapper.tsx
View File

@ -46,7 +46,7 @@ export const InstanceWrapper: FC<TInstanceWrapper> = observer((props) => {
if (instance?.instance?.is_setup_done === false && authEnabled === "1")
return (
<DefaultLayout>
<DefaultLayout withoutBackground>
<InstanceNotReady />
</DefaultLayout>
);

2
space/components/accounts/auth-forms/email.tsx
View File

@ -40,7 +40,7 @@ export const EmailForm: React.FC<Props> = (props) => {
};
return (
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-8 space-y-4 w-5/6 sm:w-96">
<form onSubmit={handleSubmit(handleFormSubmit)} className="mt-8 space-y-4">
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
Email

2
space/components/accounts/auth-forms/password.tsx
View File

@ -96,7 +96,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
return (
<form
className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
className="mt-5 space-y-4"
method="POST"
action={`${API_BASE_URL}/auth/spaces/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`}
onSubmit={() => setIsSubmitting(true)}

70
space/components/accounts/auth-forms/root.tsx
View File

@ -117,44 +117,42 @@ export const AuthRoot = observer(() => {
const isOAuthEnabled =
instance?.config && (instance?.config?.is_google_enabled || instance?.config?.is_github_enabled);
return (
<>
<div className="mx-auto flex flex-col">
<div className="text-center space-y-1 py-4 mx-auto sm:w-96">
<h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">{header}</h3>
<p className="font-medium text-onboarding-text-400">{subHeader}</p>
</div>
{authStep === EAuthSteps.EMAIL && <EmailForm onSubmit={handelEmailVerification} />}
{authMode && (
<>
{authStep === EAuthSteps.PASSWORD && (
<PasswordForm
email={email}
mode={authMode}
handleEmailClear={() => {
setEmail("");
setAuthMode(null);
setAuthStep(EAuthSteps.EMAIL);
}}
handleStepChange={(step) => setAuthStep(step)}
/>
)}
{authStep === EAuthSteps.UNIQUE_CODE && (
<UniqueCodeForm
email={email}
mode={authMode}
handleEmailClear={() => {
setEmail("");
setAuthMode(null);
setAuthStep(EAuthSteps.EMAIL);
}}
submitButtonText="Continue"
/>
)}
</>
)}
<div className="relative flex flex-col space-y-6">
<div className="space-y-1 text-center">
<h3 className="text-3xl font-bold text-onboarding-text-100">{header}</h3>
<p className="font-medium text-onboarding-text-400">{subHeader}</p>
</div>
{authStep === EAuthSteps.EMAIL && <EmailForm onSubmit={handelEmailVerification} />}
{authMode && (
<>
{authStep === EAuthSteps.PASSWORD && (
<PasswordForm
email={email}
mode={authMode}
handleEmailClear={() => {
setEmail("");
setAuthMode(null);
setAuthStep(EAuthSteps.EMAIL);
}}
handleStepChange={(step) => setAuthStep(step)}
/>
)}
{authStep === EAuthSteps.UNIQUE_CODE && (
<UniqueCodeForm
email={email}
mode={authMode}
handleEmailClear={() => {
setEmail("");
setAuthMode(null);
setAuthStep(EAuthSteps.EMAIL);
}}
submitButtonText="Continue"
/>
)}
</>
)}
{isOAuthEnabled && <OAuthOptions />}
<TermsAndConditions mode={authMode} />
</>
</div>
);
});

2
space/components/accounts/auth-forms/unique-code.tsx
View File

@ -104,7 +104,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
return (
<form
className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
className="mt-5 space-y-4"
method="POST"
action={`${API_BASE_URL}/auth/spaces/${mode === EAuthModes.SIGN_IN ? "magic-sign-in" : "magic-sign-up"}/`}
onSubmit={() => setIsSubmitting(true)}

14
space/components/views/auth.tsx
View File

@ -46,7 +46,7 @@ export const AuthView = observer(() => {
{currentUser ? (
<UserLoggedIn />
) : (
<div className="relative w-full h-screen overflow-hidden">
<div className="relative w-screen h-screen overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
@ -54,17 +54,15 @@ export const AuthView = observer(() => {
alt="Plane background pattern"
/>
</div>
<div className="relative z-10">
<div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
<div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
<div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
<div className="flex items-center gap-x-2 py-10">
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
</div>
</div>
<div className="mx-auto h-full">
<div className="h-full overflow-auto px-7 pt-4 sm:px-0">
<AuthRoot />
</div>
<div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
<AuthRoot />
</div>
</div>
</div>

17
web/components/instance/not-ready-view.tsx
View File

@ -1,34 +1,31 @@
import { FC } from "react";
import Image from "next/image";
import { useTheme } from "next-themes";
import { Button } from "@plane/ui";
// images
import PlaneBlackLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.svg";
import PlaneWhiteLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.svg";
import PlaneTakeOffImage from "@/public/plane-takeoff.png";
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
export const InstanceNotReady: FC = () => {
const { resolvedTheme } = useTheme();
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
const planeGodModeUrl = `${process.env.NEXT_PUBLIC_GOD_MODE_URL}/god-mode/setup/?auth_enabled=0`;
return (
<div className="relative h-screen max-h-max w-full overflow-hidden overflow-y-auto flex flex-col">
<div className="flex-shrink-0 h-[120px]">
<div className="flex-shrink-0 h-[100px]">
<div className="relative h-full container mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
<div className="flex items-center gap-x-2">
<Image src={planeLogo} className="h-[24px] w-full" alt="Plane logo" />
<div className="flex items-center gap-x-2 py-10">
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
</div>
</div>
</div>
<div className="w-full flex-grow">
<div className="w-full flex-grow px-5 lg:px-0 mb-[100px]">
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
<div className="w-auto max-w-2xl relative space-y-8 py-10">
<div className="relative flex flex-col justify-center items-center space-y-4">
<h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
<Image src={PlaneTakeOffImage} alt="Plane Logo" />
<p className="font-medium text-base text-custom-text-400">
<p className="font-medium text-base text-onboarding-text-400">
Get started by setting up your instance and workspace
</p>
</div>