Skip to content

Commit d317755

Browse files
anmolsinghbhatiaanmolsinghbhatia
authored
[WEB-4542] feat: god mode auth revamp and code refactor (#7563)
* chore: auth color updated and remove unused tokens * chore: god-mode brand revamp * fix: space app spinner logo
1 parent 047080a commit d317755

File tree

17 files changed

+334
-394
lines changed

17 files changed

+334
-394
lines changed

‎apps/admin/app/(all)/(home)/auth-header.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
"use client";
2+
3+
import Link from "next/link";
4+
import { PlaneLockup } from "@plane/ui";
5+
6+
export const AuthHeader = () => (
7+
<div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
8+
<Link href="/">
9+
<PlaneLockup height={20} width={95} className="text-custom-text-100" />
10+
</Link>
11+
</div>
12+
);

‎apps/admin/app/(all)/(home)/layout.tsx‎

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,9 @@
11
"use client";
22

3-
import Image from "next/image";
4-
import Link from "next/link";
5-
import { useTheme } from "next-themes";
6-
// logo assets
7-
import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
8-
import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
9-
import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.png";
10-
import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.png";
11-
123
export default function RootLayout({ children }: { children: React.ReactNode }) {
13-
const { resolvedTheme } = useTheme();
14-
15-
const patternBackground = resolvedTheme === "light" ? PlaneBackgroundPattern : PlaneBackgroundPatternDark;
16-
const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
17-
184
return (
19-
<div className="relative">
20-
<div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
21-
<div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
22-
<div className="flex items-center gap-x-2 py-10">
23-
<Link href={`/`} className="h-[30px] w-[133px]">
24-
<Image src={logo} alt="Plane logo" />
25-
</Link>
26-
</div>
27-
</div>
28-
<div className="absolute inset-0 z-0">
29-
<Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
30-
</div>
31-
<div className="relative z-10 flex-grow">{children}</div>
32-
</div>
5+
<div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
6+
{children}
337
</div>
348
);
359
}

‎apps/admin/app/(all)/(home)/page.tsx‎

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
import { observer } from "mobx-react";
44
// components
5+
import { LogoSpinner } from "@/components/common/logo-spinner";
56
import { InstanceFailureView } from "@/components/instance/failure";
6-
import { InstanceLoading } from "@/components/instance/loading";
77
import { InstanceSetupForm } from "@/components/instance/setup-form";
88
// hooks
99
import { useInstance } from "@/hooks/store";
@@ -17,46 +17,24 @@ const HomePage = () => {
1717
// if instance is not fetched, show loading
1818
if (!instance && !error) {
1919
return (
20-
<div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
21-
<InstanceLoading />
20+
<div className="flex items-center justify-center h-screen w-full">
21+
<LogoSpinner />
2222
</div>
2323
);
2424
}
2525

2626
// if instance fetch fails, show failure view
2727
if (error) {
28-
return (
29-
<div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
30-
<InstanceFailureView />
31-
</div>
32-
);
28+
return <InstanceFailureView />;
3329
}
3430

3531
// if instance is fetched and setup is not done, show setup form
3632
if (instance && !instance?.is_setup_done) {
37-
return (
38-
<div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
39-
<InstanceSetupForm />
40-
</div>
41-
);
33+
return <InstanceSetupForm />;
4234
}
4335

4436
// if instance is fetched and setup is done, show sign in form
45-
return (
46-
<div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
47-
<div className="relative flex flex-col space-y-6">
48-
<div className="text-center space-y-1">
49-
<h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
50-
Manage your Plane instance
51-
</h3>
52-
<p className="font-medium text-onboarding-text-400">
53-
Configure instance-wide settings to secure your instance
54-
</p>
55-
</div>
56-
<InstanceSignInForm />
57-
</div>
58-
</div>
59-
);
37+
return <InstanceSignInForm />;
6038
};
6139

6240
export default observer(HomePage);

‎apps/admin/app/(all)/(home)/sign-in-form.tsx‎

Lines changed: 85 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import { Button, Input, Spinner } from "@plane/ui";
1010
// components
1111
import { Banner } from "@/components/common/banner";
1212
// local components
13+
import { FormHeader } from "../../../core/components/instance/form-header";
1314
import { AuthBanner } from "./auth-banner";
15+
import { AuthHeader } from "./auth-header";
1416
import { authErrorHandler } from "./auth-helpers";
1517

1618
// service initialization
@@ -101,78 +103,91 @@ export const InstanceSignInForm: FC = () => {
101103
}, [errorCode]);
102104

103105
return (
104-
<form
105-
className="space-y-4"
106-
method="POST"
107-
action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
108-
onSubmit={() => setIsSubmitting(true)}
109-
onError={() => setIsSubmitting(false)}
110-
>
111-
{errorData.type && errorData?.message ? (
112-
<Banner type="error" message={errorData?.message} />
113-
) : (
114-
<>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
115-
)}
116-
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
117-
118-
<div className="w-full space-y-1">
119-
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
120-
Email <span className="text-red-500">*</span>
121-
</label>
122-
<Input
123-
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
124-
id="email"
125-
name="email"
126-
type="email"
127-
inputSize="md"
128-
placeholder="[email protected]"
129-
value={formData.email}
130-
onChange={(e) => handleFormChange("email", e.target.value)}
131-
autoComplete="on"
132-
autoFocus
133-
/>
134-
</div>
135-
136-
<div className="w-full space-y-1">
137-
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
138-
Password <span className="text-red-500">*</span>
139-
</label>
140-
<div className="relative">
141-
<Input
142-
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
143-
id="password"
144-
name="password"
145-
type={showPassword ? "text" : "password"}
146-
inputSize="md"
147-
placeholder="Enter your password"
148-
value={formData.password}
149-
onChange={(e) => handleFormChange("password", e.target.value)}
150-
autoComplete="on"
106+
<>
107+
<AuthHeader />
108+
<div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
109+
<div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
110+
<FormHeader
111+
heading="Manage your Plane instance"
112+
subHeading="Configure instance-wide settings to secure your instance"
151113
/>
152-
{showPassword ? (
153-
<button
154-
type="button"
155-
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
156-
onClick={() => setShowPassword(false)}
157-
>
158-
<EyeOff className="h-4 w-4" />
159-
</button>
160-
) : (
161-
<button
162-
type="button"
163-
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
164-
onClick={() => setShowPassword(true)}
165-
>
166-
<Eye className="h-4 w-4" />
167-
</button>
168-
)}
114+
<form
115+
className="space-y-4"
116+
method="POST"
117+
action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
118+
onSubmit={() => setIsSubmitting(true)}
119+
onError={() => setIsSubmitting(false)}
120+
>
121+
{errorData.type && errorData?.message ? (
122+
<Banner type="error" message={errorData?.message} />
123+
) : (
124+
<>
125+
{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}
126+
</>
127+
)}
128+
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
129+
130+
<div className="w-full space-y-1">
131+
<label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
132+
Email <span className="text-red-500">*</span>
133+
</label>
134+
<Input
135+
className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
136+
id="email"
137+
name="email"
138+
type="email"
139+
inputSize="md"
140+
placeholder="[email protected]"
141+
value={formData.email}
142+
onChange={(e) => handleFormChange("email", e.target.value)}
143+
autoComplete="on"
144+
autoFocus
145+
/>
146+
</div>
147+
148+
<div className="w-full space-y-1">
149+
<label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
150+
Password <span className="text-red-500">*</span>
151+
</label>
152+
<div className="relative">
153+
<Input
154+
className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
155+
id="password"
156+
name="password"
157+
type={showPassword ? "text" : "password"}
158+
inputSize="md"
159+
placeholder="Enter your password"
160+
value={formData.password}
161+
onChange={(e) => handleFormChange("password", e.target.value)}
162+
autoComplete="on"
163+
/>
164+
{showPassword ? (
165+
<button
166+
type="button"
167+
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
168+
onClick={() => setShowPassword(false)}
169+
>
170+
<EyeOff className="h-4 w-4" />
171+
</button>
172+
) : (
173+
<button
174+
type="button"
175+
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
176+
onClick={() => setShowPassword(true)}
177+
>
178+
<Eye className="h-4 w-4" />
179+
</button>
180+
)}
181+
</div>
182+
</div>
183+
<div className="py-2">
184+
<Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
185+
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
186+
</Button>
187+
</div>
188+
</form>
169189
</div>
170190
</div>
171-
<div className="py-2">
172-
<Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
173-
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
174-
</Button>
175-
</div>
176-
</form>
191+
</>
177192
);
178193
};

‎apps/admin/core/components/common/logo-spinner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
77
export const LogoSpinner = () => {
88
const { resolvedTheme } = useTheme();
99

10-
const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
10+
const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
1111

1212
return (
1313
<div className="flex items-center justify-center">
14-
<Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
14+
<Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
1515
</div>
1616
);
1717
};

‎apps/admin/core/components/instance/failure.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
"use client";
22
import { FC } from "react";
3+
import { observer } from "mobx-react";
34
import Image from "next/image";
45
import { useTheme } from "next-themes";
56
import { Button } from "@plane/ui";
67
// assets
8+
import { AuthHeader } from "@/app/(all)/(home)/auth-header";
79
import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
810
import InstanceFailureImage from "@/public/instance/instance-failure.svg";
911

10-
export const InstanceFailureView: FC = () => {
12+
export const InstanceFailureView: FC = observer(() => {
1113
const { resolvedTheme } = useTheme();
1214

1315
const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
@@ -17,22 +19,24 @@ export const InstanceFailureView: FC = () => {
1719
};
1820

1921
return (
20-
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
21-
<div className="w-auto max-w-2xl relative space-y-8 py-10">
22-
<div className="relative flex flex-col justify-center items-center space-y-4">
23-
<Image src={instanceImage} alt="Plane Logo" />
24-
<h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
25-
<p className="font-medium text-base text-center">
26-
We were unable to fetch the details of the instance. <br />
27-
Fret not, it might just be a connectivity issue.
28-
</p>
29-
</div>
30-
<div className="flex justify-center">
31-
<Button size="md" onClick={handleRetry}>
32-
Retry
33-
</Button>
22+
<>
23+
<AuthHeader />
24+
<div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
25+
<div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
26+
<div className="relative flex flex-col justify-center items-center space-y-4">
27+
<Image src={instanceImage} alt="Plane Logo" />
28+
<h3 className="font-medium text-2xl text-white text-center">Unable to fetch instance details.</h3>
29+
<p className="font-medium text-base text-center">
30+
We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.
31+
</p>
32+
</div>
33+
<div className="flex justify-center">
34+
<Button size="md" onClick={handleRetry}>
35+
Retry
36+
</Button>
37+
</div>
3438
</div>
3539
</div>
36-
</div>
40+
</>
3741
);
38-
};
42+
});

‎apps/admin/core/components/instance/form-header.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
"use client";
2+
3+
export const FormHeader = ({ heading, subHeading }: { heading: string; subHeading: string }) => (
4+
<div className="flex flex-col gap-1">
5+
<span className="text-2xl font-semibold text-custom-text-100 leading-7">{heading}</span>
6+
<span className="text-lg font-semibold text-custom-text-400 leading-7">{subHeading}</span>
7+
</div>
8+
);

‎apps/admin/core/components/instance/instance-not-ready.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const InstanceNotReady: FC = () => (
1313
<div className="relative flex flex-col justify-center items-center space-y-4">
1414
<h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
1515
<Image src={PlaneTakeOffImage} alt="Plane Logo" />
16-
<p className="font-medium text-base text-onboarding-text-400">
16+
<p className="font-medium text-base text-custom-text-400">
1717
Get started by setting up your instance and workspace
1818
</p>
1919
</div>

‎apps/admin/core/components/instance/loading.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,12 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
66

77
export const InstanceLoading = () => {
88
const { resolvedTheme } = useTheme();
9-
const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
9+
10+
const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
1011

1112
return (
12-
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
13-
<div className="w-auto max-w-2xl relative space-y-8 py-10">
14-
<div className="relative flex flex-col justify-center items-center space-y-4">
15-
<Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
16-
<h3 className="font-medium text-2xl text-white ">Fetching instance details...</h3>
17-
</div>
18-
</div>
13+
<div className="flex items-center justify-center">
14+
<Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
1915
</div>
2016
);
2117
};

0 commit comments

Comments
 (0)