thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: updated the UI of the instance admin setup and the sign in workflow (#2962)

Browse Source 
* style: updated the UI of the signin and instance setups

* fix: form validations and mutations

* fix: updated Link tags in accordance to next v14

* chore: latest features image, reset password redirection
This commit is contained in:
Aaryan Khandelwal 2023-12-01 15:50:01 +05:30 committed by Aaryan Khandelwal
parent 8d021389a0
commit 0ff5f9ef62
39 changed files with 717 additions and 575 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/components/account/sign-in-forms/create-password.tsx
View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// services // services
import { AuthService } from "services/auth.service"; import { AuthService } from "services/auth.service";
@ -74,7 +75,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
return ( return (
<> <>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100"> <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
Let{"'"}s get a new password Let{"'"}s get a new password
</h1> </h1>
@ -117,16 +118,23 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
hasError={Boolean(errors.password)} hasError={Boolean(errors.password)}
placeholder="Create password" placeholder="Create password"
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12" className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
minLength={8}
/> />
)} )}
/> />
<p className="text-xs text-onboarding-text-200 mt-3"> <p className="text-xs text-onboarding-text-200 mt-3 pb-2">
Whatever you choose now will be your account{"'"}s password until you change it. Whatever you choose now will be your account{"'"}s password until you change it.
</p> </p>
</div> </div>
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}> <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
{isSubmitting ? "Submitting..." : "Go to workspace"} {isSubmitting ? "Submitting..." : "Go to workspace"}
</Button> </Button>
<p className="text-xs text-onboarding-text-200">
When you click the button above, you agree with our{" "}
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
<span className="font-semibold underline">terms and conditions of service.</span>
</Link>
</p>
</form> </form>
</> </>
); );

4
web/components/account/sign-in-forms/email-form.tsx
View File

@ -83,10 +83,10 @@ export const EmailForm: React.FC<Props> = (props) => {
return ( return (
<> <>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100"> <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
Get on your flight deck! Get on your flight deck!
</h1> </h1>
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-3"> <p className="text-center text-sm text-onboarding-text-200 mt-3">
Sign in with the email you used to sign up for Plane Sign in with the email you used to sign up for Plane
</p> </p>

15
web/components/account/sign-in-forms/optional-set-password.tsx
View File

@ -1,4 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// ui // ui
import { Button, Input } from "@plane/ui"; import { Button, Input } from "@plane/ui";
@ -37,12 +38,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
return ( return (
<> <>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">Set a password</h1> <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Set a password</h1>
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-3"> <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
If you{"'"}d to do away with codes, set a password here. If you{"'"}d to do away with codes, set a password here
</p> </p>
<form className="mt-5 sm:w-96 mx-auto"> <form className="mt-5 sm:w-96 mx-auto space-y-4">
<Controller <Controller
control={control} control={control}
name="email" name="email"
@ -65,7 +66,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
/> />
)} )}
/> />
<div className="grid grid-cols-2 gap-2.5 mt-4"> <div className="grid grid-cols-2 gap-2.5">
<Button <Button
type="button" type="button"
variant="primary" variant="primary"
@ -88,6 +89,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
{isGoingToWorkspace ? "Going to app..." : "Go to workspace"} {isGoingToWorkspace ? "Going to app..." : "Go to workspace"}
</Button> </Button>
</div> </div>
<p className="text-xs text-onboarding-text-200">
When you click <span className="text-custom-primary-100">Go to workspace</span> above, you agree with our{" "}
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
<span className="font-semibold underline">terms and conditions of service.</span>
</Link>
</p>
</form> </form>
</> </>
); );

11
web/components/account/sign-in-forms/password.tsx
View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { XCircle } from "lucide-react"; import { XCircle } from "lucide-react";
// services // services
@ -184,17 +185,25 @@ export const PasswordForm: React.FC<Props> = (props) => {
/> />
)} )}
/> />
<div className="w-full text-right">
<button <button
type="button" type="button"
onClick={handleForgotPassword} onClick={handleForgotPassword}
className="text-xs font-medium text-right w-full text-custom-primary-100" className="text-xs font-medium text-custom-primary-100"
> >
Forgot your password? Forgot your password?
</button> </button>
</div> </div>
</div>
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}> <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
{isSubmitting ? "Signing in..." : "Go to workspace"} {isSubmitting ? "Signing in..." : "Go to workspace"}
</Button> </Button>
<p className="text-xs text-onboarding-text-200">
When you click the button above, you agree with our{" "}
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
<span className="font-semibold underline">terms and conditions of service.</span>
</Link>
</p>
</form> </form>
</> </>
); );

4
web/components/account/sign-in-forms/root.tsx
View File

@ -23,6 +23,8 @@ type Props = {
handleSignInRedirection: () => Promise<void>; handleSignInRedirection: () => Promise<void>;
}; };
const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
export const SignInRoot: React.FC<Props> = (props) => { export const SignInRoot: React.FC<Props> = (props) => {
const { handleSignInRedirection } = props; const { handleSignInRedirection } = props;
// states // states
@ -72,7 +74,7 @@ export const SignInRoot: React.FC<Props> = (props) => {
/> />
)} )}
</div> </div>
{signInStep !== ESignInSteps.OPTIONAL_SET_PASSWORD && ( {!OAUTH_HIDDEN_STEPS.includes(signInStep) && (
<OAuthOptions <OAuthOptions
updateEmail={(newEmail) => setEmail(newEmail)} updateEmail={(newEmail) => setEmail(newEmail)}
handleStepChange={(step: ESignInSteps) => setSignInStep(step)} handleStepChange={(step: ESignInSteps) => setSignInStep(step)}

24
web/components/account/sign-in-forms/set-password-link.tsx
View File

@ -1,4 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { XCircle } from "lucide-react"; import { XCircle } from "lucide-react";
// services // services
@ -48,6 +49,13 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
await authService await authService
.emailCheck(payload) .emailCheck(payload)
.then(() =>
setToastAlert({
type: "success",
title: "Success!",
message: "We have sent a new link to your email.",
})
)
.catch((err) => .catch((err) =>
setToastAlert({ setToastAlert({
type: "error", type: "error",
@ -60,15 +68,15 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
return ( return (
<> <>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100"> <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
Get on your flight deck! Get on your flight deck
</h1> </h1>
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-3"> <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
We have sent a link to <span className="font-medium text-custom-primary-100">{email},</span> so you can set a We have sent a link to <span className="font-semibold text-custom-primary-100">{email},</span> so you can set a
password password
</p> </p>
<form className="mt-5 sm:w-96 mx-auto"> <form className="mt-5 sm:w-96 mx-auto space-y-4">
<div className="space-y-1"> <div className="space-y-1">
<Controller <Controller
control={control} control={control}
@ -103,7 +111,6 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
)} )}
/> />
</div> </div>
<div className="mt-4">
<Button <Button
type="button" type="button"
variant="primary" variant="primary"
@ -115,7 +122,12 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
> >
{isSendingNewLink ? "Sending new link..." : "Get link again"} {isSendingNewLink ? "Sending new link..." : "Get link again"}
</Button> </Button>
</div> <p className="text-xs text-onboarding-text-200">
When you click the button above, you agree with our{" "}
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
<span className="font-semibold underline">terms and conditions of service.</span>
</Link>
</p>
</form> </form>
</> </>
); );

25
web/components/account/sign-in-forms/unique-code.tsx
View File

@ -1,4 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { CornerDownLeft, XCircle } from "lucide-react"; import { CornerDownLeft, XCircle } from "lucide-react";
// services // services
@ -44,7 +45,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
// toast alert // toast alert
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// timer // timer
const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(); const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
// form info // form info
const { const {
control, control,
@ -131,11 +132,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
return ( return (
<> <>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100"> <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Moving to the runway</h1>
Moving to the runway <p className="text-center text-sm text-onboarding-text-200 mt-3">
</h1> Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
Paste the code you got at <span className="font-medium text-custom-primary-100">{email}</span> below.
</p> </p>
<form onSubmit={handleSubmit(handleFormSubmit)} className="mt-5 sm:w-96 mx-auto space-y-4"> <form onSubmit={handleSubmit(handleFormSubmit)} className="mt-5 sm:w-96 mx-auto space-y-4">
@ -201,11 +200,14 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
/> />
)} )}
/> />
<div className="w-full text-right">
<button <button
type="button" type="button"
onClick={handleRequestNewCode} onClick={handleRequestNewCode}
className={`text-xs text-right w-full text-onboarding-text-200 ${ className={`text-xs ${
isRequestNewCodeDisabled ? "" : "hover:text-custom-primary-100" isRequestNewCodeDisabled
? "text-onboarding-text-300"
: "text-onboarding-text-200 hover:text-custom-primary-100"
}`} }`}
disabled={isRequestNewCodeDisabled} disabled={isRequestNewCodeDisabled}
> >
@ -216,6 +218,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
: "Request new code"} : "Request new code"}
</button> </button>
</div> </div>
</div>
<Button <Button
type="submit" type="submit"
variant="primary" variant="primary"
@ -226,6 +229,12 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
> >
{isSubmitting ? "Signing in..." : "Confirm"} {isSubmitting ? "Signing in..." : "Confirm"}
</Button> </Button>
<p className="text-xs text-onboarding-text-200">
When you click Confirm above, you agree with our{" "}
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
<span className="font-semibold underline">terms and conditions of service.</span>
</Link>
</p>
</form> </form>
</> </>
); );

25
web/components/common/latest-feature-block.tsx
View File

@ -1,35 +1,36 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
// icons // icons
import { Lightbulb } from "lucide-react"; import { Lightbulb } from "lucide-react";
// images // images
import signInIssues from "public/onboarding/onboarding-issues.svg"; import latestFeatures from "public/onboarding/onboarding-pages.svg";
export const LatestFeatureBlock = () => { export const LatestFeatureBlock = () => {
const { resolvedTheme } = useTheme(); const { resolvedTheme } = useTheme();
return ( return (
<> <>
<div <div className="flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16">
className={`flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16`}
>
<Lightbulb className="h-7 w-7 mr-2 mx-3" /> <Lightbulb className="h-7 w-7 mr-2 mx-3" />
<p className={`text-sm text-left text-onboarding-text-100`}> <p className="text-sm text-left text-onboarding-text-100">
Try the latest features, like Tiptap editor, to write compelling responses.{" "} Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
<span className="font-medium text-sm underline hover:cursor-pointer" onClick={() => {}}> <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
See new features <span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
</span> </Link>
</p> </p>
</div> </div>
<div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 "> <div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
<div className="h-[90%]">
<Image <Image
src={signInIssues} src={latestFeatures}
alt="Plane Issues" alt="Plane Issues"
className={`flex object-cover rounded-md ${ className={`rounded-md h-full ml-8 -mt-2 ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70" resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
} `} } `}
/> />
</div> </div>
</div>
</> </>
); );
}; };

9
web/components/cycles/cycles-board-card.tsx
View File

@ -33,7 +33,10 @@ export interface ICyclesBoardCard {
export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => { export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
const { cycle, workspaceSlug, projectId } = props; const { cycle, workspaceSlug, projectId } = props;
// store // store
const { cycle: cycleStore, trackEvent: { setTrackElement } } = useMobxStore(); const {
cycle: cycleStore,
trackEvent: { setTrackElement },
} = useMobxStore();
// toast // toast
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// states // states
@ -152,7 +155,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
/> />
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<span className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px] text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md"> <div className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px] text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-3 truncate"> <div className="flex items-center gap-3 truncate">
<span className="flex-shrink-0"> <span className="flex-shrink-0">
@ -268,7 +271,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
</div> </div>
</div> </div>
</div> </div>
</span> </div>
</Link> </Link>
</div> </div>
); );

4
web/components/cycles/cycles-list-item.tsx
View File

@ -153,7 +153,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
projectId={projectId} projectId={projectId}
/> />
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<span className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90"> <div className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
<div className="flex items-center gap-3 w-full truncate"> <div className="flex items-center gap-3 w-full truncate">
<div className="flex items-center gap-4 truncate"> <div className="flex items-center gap-4 truncate">
<span className="flex-shrink-0"> <span className="flex-shrink-0">
@ -262,7 +262,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
</CustomMenu> </CustomMenu>
</div> </div>
</span> </div>
</Link> </Link>
</> </>
); );

2
web/components/inbox/issue-card.tsx
View File

@ -27,7 +27,6 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
return ( return (
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.issue_inbox[0].id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.issue_inbox[0].id}`}>
<span>
<div <div
id={issue.id} id={issue.id}
className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-200 hover:bg-custom-primary/5 ${ className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-200 hover:bg-custom-primary/5 ${
@ -91,7 +90,6 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
)} )}
</div> </div>
</div> </div>
</span>
</Link> </Link>
); );
}; };

4
web/components/instance/help-section.tsx
View File

@ -98,12 +98,12 @@ export const InstanceHelpSection: FC = () => {
if (href) if (href)
return ( return (
<Link href={href} key={name} target="_blank"> <Link href={href} key={name} target="_blank">
<span className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"> <div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
<div className="grid place-items-center flex-shrink-0"> <div className="grid place-items-center flex-shrink-0">
<Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} /> <Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} />
</div> </div>
<span className="text-xs">{name}</span> <span className="text-xs">{name}</span>
</span> </div>
</Link> </Link>
); );
else else

2
web/components/instance/instance-admin-restriction.tsx
View File

@ -67,12 +67,10 @@ export const InstanceAdminRestriction: FC<InstanceAdminRestrictionProps> = ({ re
</div> </div>
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<Link href={`/${redirectWorkspaceSlug}`}> <Link href={`/${redirectWorkspaceSlug}`}>
<span>
<Button variant="primary" size="sm"> <Button variant="primary" size="sm">
<LayoutGrid width={16} height={16} /> <LayoutGrid width={16} height={16} />
To the workspace To the workspace
</Button> </Button>
</span>
</Link> </Link>
</div> </div>
</div> </div>

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

@ -1,29 +1,29 @@
import React from "react"; import React from "react";
import Image from "next/image"; import Image from "next/image";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
// image // images
import instanceNotReady from "public/instance/plane-instance-not-ready.webp"; import instanceNotReady from "public/instance/plane-instance-not-ready.webp";
import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
import PlaneDarkLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; import PlaneBlackLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
export const InstanceNotReady = () => { export const InstanceNotReady = () => {
const { resolvedTheme } = useTheme(); const { resolvedTheme } = useTheme();
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneDarkLogo; const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
return ( return (
<div className="h-screen w-full overflow-y-auto bg-onboarding-gradient-100"> <div className="h-screen w-full overflow-y-auto bg-onboarding-gradient-100">
<div className={`h-screen w-full pt-24`}> <div className="h-full w-full pt-24">
<div className="h-auto bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 p-4 rounded-md mx-auto shadow-sm border border-custom-border-100 "> <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-100">
<div className={`relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-md`}> <div className="relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md">
<div className="flex items-center py-10 justify-center"> <div className="flex items-center py-10 justify-center">
<Image src={planeLogo} className="h-44 w-full" alt="image" /> <Image src={planeLogo} className="h-44 w-full" alt="Plane logo" />
</div> </div>
<div className="mt-20"> <div className="mt-20">
<Image src={instanceNotReady} className="h-46 w-full" alt="image" /> <Image src={instanceNotReady} className="h-56 w-full" alt="Instance not ready" />
</div> </div>
<div className="flex flex-col gap-5 items-center py-12 pb-20 w-full"> <div className="flex flex-col gap-5 items-center py-12 pb-20 w-full">
<h3 className="text-2xl font-medium">Your Plane instance isn’t ready yet</h3> <h3 className="text-2xl font-medium">Your Plane instance isn{"'"}t ready yet</h3>
<p className="text-sm">Ask your Instance Admin to complete set-up first.</p> <p className="text-sm">Ask your Instance Admin to complete set-up first.</p>
</div> </div>
</div> </div>

73
web/components/instance/setup-done-view.tsx
View File

@ -1,43 +1,66 @@
import React from "react"; import React, { useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { useTheme } from "next-themes";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
import { UserCog2 } from "lucide-react"; import { UserCog2 } from "lucide-react";
// image // images
import instanceSetupDone from "public/instance-setup-done.svg"; import instanceSetupDone from "public/instance-setup-done.svg";
import PlaneLogo from "public/plane-logos/blue-without-text.png"; 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 { useMobxStore } from "lib/mobx/store-provider";
export const InstanceSetupDone = () => ( export const InstanceSetupDone = () => {
<div className="h-screen w-full overflow-hidden"> // states
<div className={`bg-onboarding-gradient-100 h-screen w-full pt-12`}> const [isRedirecting, setIsRedirecting] = useState(false);
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 "> // next-themes
<div const { resolvedTheme } = useTheme();
className={`flex flex-col items-center relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md overflow-auto`} // mobx store
> const {
<div className="flex items-center gap-5 py-10 justify-center"> instance: { fetchInstanceInfo },
<Image src={PlaneLogo} height={44} width={44} alt="image" /> } = useMobxStore();
<span className="text-4xl font-semibold">To the stratosphere now!</span>
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
const redirectToGodMode = async () => {
setIsRedirecting(true);
await fetchInstanceInfo().finally(() => setIsRedirecting(false));
};
return (
<div className="h-full w-full overflow-hidden">
<div className="bg-onboarding-gradient-100 h-full w-full pt-12 overflow-hidden">
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 overflow-hidden">
<div className="flex flex-col items-center relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md overflow-y-auto pb-8">
<div className="flex py-10 justify-center">
<div className="h-[30px]">
<Image src={planeLogo} className="h-full w-full" alt="Plane logo" />
</div>
</div> </div>
<div className="flex items-center justify-center"> <div className="grid place-items-center my-8">
<Image src={instanceSetupDone} height={360} width={444} alt="image" /> <div className="w-[444px]">
<Image src={instanceSetupDone} className="h-full w-full" alt="image" />
</div>
</div> </div>
<div className="flex flex-col gap-8 items-center py-12 w-full"> <div className="flex flex-col gap-8 items-center w-full sm:px-4">
<span className="text-xl font-medium"> <div className="bg-purple-500/20 border border-purple-500 py-2.5 px-3 rounded text-center space-y-3">
<h6 className="text-base font-semibold">
Your instance is now ready for more security, more controls, and more intelligence. Your instance is now ready for more security, more controls, and more intelligence.
</span> </h6>
<Button size="lg" prependIcon={<UserCog2 />}> <p className="text-xs font-medium">
Go to God Mode Use this wisely. Remember, with great power comes great responsibility.
</Button> </p>
<div className="flex p-2.5 text-custom-primary-100 bg-custom-primary-10 border border-custom-primary-100 text-sm text-left mx-auto rounded">
Use this wisely. Remember, with great power comes great responsibility.🕷️
</div> </div>
<Button size="lg" prependIcon={<UserCog2 />} onClick={redirectToGodMode} loading={isRedirecting}>
{isRedirecting ? "Redirecting..." : "Go to God Mode"}
</Button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
};

83
web/components/instance/setup-form/email-code-form.tsx
View File

@ -1,4 +1,4 @@
import { FC } from "react"; import { FC, useState } from "react";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
// ui // ui
import { Input, Button } from "@plane/ui"; import { Input, Button } from "@plane/ui";
@ -24,6 +24,8 @@ export interface IInstanceSetupEmailCodeForm {
export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (props) => { export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (props) => {
const { handleNextStep, email, moveBack } = props; const { handleNextStep, email, moveBack } = props;
// states
const [isResendingCode, setIsResendingCode] = useState(false);
// form info // form info
const { const {
control, control,
@ -40,10 +42,10 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { timer, setTimer } = useTimer(30); const { timer, setTimer } = useTimer(30);
// computed // computed
const isResendDisabled = timer > 0 || isSubmitting; const isResendDisabled = timer > 0 || isResendingCode;
const handleEmailCodeFormSubmit = (formValues: InstanceSetupEmailCodeFormValues) => const handleEmailCodeFormSubmit = async (formValues: InstanceSetupEmailCodeFormValues) =>
authService await authService
.instanceMagicSignIn({ key: `magic_${formValues.email}`, token: formValues.token }) .instanceMagicSignIn({ key: `magic_${formValues.email}`, token: formValues.token })
.then(() => { .then(() => {
reset(); reset();
@ -51,42 +53,40 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
}) })
.catch((err) => { .catch((err) => {
setToastAlert({ setToastAlert({
title: "Oops!",
type: "error", type: "error",
message: err?.error, title: "Error!",
message: err?.error ?? "Something went wrong. Please try again.",
}); });
}); });
const resendMagicCode = () => { const resendMagicCode = async () => {
setTimer(30); setIsResendingCode(true);
authService
await authService
.instanceAdminEmailCode({ email }) .instanceAdminEmailCode({ email })
.then(() => { .then(() => setTimer(30))
// setCodeResending(false);
setTimer(30);
})
.catch((err) => { .catch((err) => {
setToastAlert({ setToastAlert({
title: "Oops!",
type: "error", type: "error",
message: err?.error, title: "Error!",
}); message: err?.error ?? "Something went wrong. Please try again.",
}); });
})
.finally(() => setIsResendingCode(false));
}; };
return ( return (
<form onSubmit={handleSubmit(handleEmailCodeFormSubmit)}> <form onSubmit={handleSubmit(handleEmailCodeFormSubmit)}>
<div className="pb-2"> <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100"> Let{"'"}s secure your instance
Let’s secure your instance
</h1> </h1>
<div className="text-center text-sm text-onboarding-text-200 mt-3"> <p className="text-center text-sm text-onboarding-text-200 mt-3">
<p>Paste the code you got at </p> Paste the code you got at
<span className="text-center text-sm text-custom-primary-80 mt-1 font-semibold ">{email}</span> <br />
<span className="text-onboarding-text-200">below.</span> <span className="text-custom-primary-100 font-semibold">{email}</span> below.
</div> </p>
<div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
<div className="relative mt-10 w-full sm:w-[360px] mx-auto"> <div>
<Controller <Controller
name="email" name="email"
control={control} control={control}
@ -98,7 +98,7 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
) || "Email address is not valid", ) || "Email address is not valid",
}} }}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<div className={`flex items-center relative rounded-md bg-onboarding-background-200 mb-4`}> <div className="flex items-center relative rounded-md bg-onboarding-background-200">
<Input <Input
id="email" id="email"
name="email" name="email"
@ -116,27 +116,22 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
</div> </div>
)} )}
/> />
<div <div className="w-full text-right">
className={`flex w-full justify-end text-xs outline-none ${
isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
} `}
>
{timer > 0 ? (
<span className="text-right">Request new code in {timer}s</span>
) : isSubmitting ? (
"Sending new code..."
) : (
<div className="flex justify-end w-full">
<button <button
type="button" type="button"
className="w-fit pb-2 text-xs outline-none cursor-pointer text-custom-primary-100"
onClick={resendMagicCode} onClick={resendMagicCode}
className={`text-xs ${
isResendDisabled ? "text-onboarding-text-300" : "text-onboarding-text-200 hover:text-custom-primary-100"
}`}
disabled={isResendDisabled} disabled={isResendDisabled}
> >
<span className="font-medium">Resend</span> {timer > 0
? `Request new code in ${timer}s`
: isSubmitting
? "Requesting new code..."
: "Request new code"}
</button> </button>
</div> </div>
)}
</div> </div>
<Controller <Controller
name="token" name="token"
@ -150,18 +145,16 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
type="text" type="text"
value={value} value={value}
onChange={onChange} onChange={onChange}
placeholder="gets-sets-flys" placeholder="gets-sets-fays"
className="border-onboarding-border-100 h-[46px] w-full " className="border-onboarding-border-100 h-[46px] w-full "
/> />
</div> </div>
)} )}
/> />
<Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
{isSubmitting ? "Verifying..." : "Next step"} {isSubmitting ? "Verifying..." : "Next step"}
</Button> </Button>
</div> </div>
</div>
</form> </form>
); );
}; };

22
web/components/instance/setup-form/email-form.tsx
View File

@ -44,23 +44,23 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
}) })
.catch((err) => { .catch((err) => {
setToastAlert({ setToastAlert({
title: "Oops!",
type: "error", type: "error",
message: err?.error, title: "Error!",
message: err?.error ?? "Something went wrong. Please try again.",
}); });
}); });
return ( return (
<form onSubmit={handleSubmit(handleEmailFormSubmit)}> <form onSubmit={handleSubmit(handleEmailFormSubmit)}>
<div className="pb-2"> <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100"> Let{"'"}s secure your instance
Let’s secure your instance
</h1> </h1>
<p className="text-center text-sm text-onboarding-text-200 mt-3"> <p className="text-center text-sm text-onboarding-text-200 mt-3">
Explore privacy options. Get AI features. Secure access. <br /> Takes 2 minutes. Explore privacy options. Get AI features. Secure access.
<br />
Takes 2 minutes.
</p> </p>
<div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
<div className="relative mt-10 w-full sm:w-[360px] mx-auto">
<Controller <Controller
name="email" name="email"
control={control} control={control}
@ -91,15 +91,13 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
</div> </div>
)} )}
/> />
<p className="text-xs text-custom-text-400 mt-0 py-2"> <p className="text-xs text-custom-text-200 pb-2">
Use your email address if you are the instance admin. <br /> Use your admin’s e-mail if you are not. Use your email address if you are the instance admin. <br /> Use your admin’s e-mail if you are not.
</p> </p>
<Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
{isSubmitting ? "Sending code..." : "Send unique code"} {isSubmitting ? "Sending code..." : "Send unique code"}
</Button> </Button>
</div> </div>
</div>
</form> </form>
); );
}; };

24
web/components/instance/setup-form/password-form.tsx
View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import Link from "next/link";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
// ui // ui
import { Input, Button } from "@plane/ui"; import { Input, Button } from "@plane/ui";
@ -43,14 +44,14 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
return ( return (
<form onSubmit={handleSubmit(handlePasswordSubmit)}> <form onSubmit={handleSubmit(handlePasswordSubmit)}>
<div className="pb-2"> <div className="pb-2">
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100"> <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
Moving to the runway Moving to the runway
</h1> </h1>
<p className="text-center text-sm text-onboarding-text-200 mt-3"> <p className="text-center text-sm text-onboarding-text-200 mt-3">
{"Let's set a password so you can do away with codes."} Let{"'"}s set a password so you can do away with codes.
</p> </p>
<div className="relative mt-10 w-full sm:w-[360px] mx-auto"> <div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
<Controller <Controller
control={control} control={control}
name="email" name="email"
@ -79,8 +80,7 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
</div> </div>
)} )}
/> />
<div>
<div className="mt-4">
<Controller <Controller
control={control} control={control}
name="password" name="password"
@ -106,13 +106,19 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
</div> </div>
)} )}
/> />
</div> <p className="text-xs mt-3 text-onboarding-text-200 pb-2">
<p className="text-xs mt-2 text-onboarding-text-200"> Whatever you choose now will be your account{"'"}s password
{"Whatever you choose now will be your account's password"}
</p> </p>
</div>
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}> <Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
{isSubmitting ? "Submitting..." : "Next Step"} {isSubmitting ? "Submitting..." : "Next step"}
</Button> </Button>
<p className="text-xs text-onboarding-text-200">
When you click the button above, you agree with our{" "}
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
<span className="font-semibold underline">terms and conditions of service.</span>
</Link>
</p>
</div> </div>
</div> </div>
</form> </form>

6
web/components/instance/setup-form/root.tsx
View File

@ -21,13 +21,11 @@ export const InstanceSetupFormRoot = () => {
return ( return (
<> <>
{setupStep === EInstanceSetupSteps.DONE ? ( {setupStep === EInstanceSetupSteps.DONE ? (
<div>
<InstanceSetupDone /> <InstanceSetupDone />
</div>
) : ( ) : (
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200"> <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200">
<div className={`px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto`}> <div className="bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
<div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200"> <div className="mx-auto flex flex-col">
{setupStep === EInstanceSetupSteps.EMAIL && ( {setupStep === EInstanceSetupSteps.EMAIL && (
<InstanceSetupEmailForm <InstanceSetupEmailForm
handleNextStep={(email) => { handleNextStep={(email) => {

2
web/components/instance/setup-view.tsx
View File

@ -24,7 +24,7 @@ export const InstanceSetupView = observer(() => {
return ( return (
<> <>
<div className={`bg-onboarding-gradient-100 h-full w-full`}> <div className="bg-onboarding-gradient-100 h-full w-full flex flex-col">
<div className="flex items-center justify-between sm:py-5 px-8 pb-4 sm:px-16 lg:px-28 "> <div className="flex items-center justify-between sm:py-5 px-8 pb-4 sm:px-16 lg:px-28 ">
<div className="flex gap-x-2 py-10 items-center"> <div className="flex gap-x-2 py-10 items-center">
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" /> <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />

4
web/components/instance/sidebar-menu.tsx
View File

@ -54,7 +54,7 @@ export const InstanceAdminSidebarMenu = () => {
return ( return (
<Link key={index} href={item.href}> <Link key={index} href={item.href}>
<span className="block w-full"> <div>
<Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!sidebarCollapsed}> <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!sidebarCollapsed}>
<div <div
className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${ className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
@ -84,7 +84,7 @@ export const InstanceAdminSidebarMenu = () => {
)} )}
</div> </div>
</Tooltip> </Tooltip>
</span> </div>
</Link> </Link>
); );
})} })}

4
web/components/issues/attachment/attachments.tsx
View File

@ -59,8 +59,7 @@ export const IssueAttachments = () => {
key={file.id} key={file.id}
className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm" className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm"
> >
<Link href={file.asset} target="_blank"> <Link href={file.asset} target="_blank" rel="noopener noreferrer">
<span>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="h-7 w-7">{getFileIcon(getFileExtension(file.asset))}</div> <div className="h-7 w-7">{getFileIcon(getFileExtension(file.asset))}</div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
@ -85,7 +84,6 @@ export const IssueAttachments = () => {
</div> </div>
</div> </div>
</div> </div>
</span>
</Link> </Link>
<button <button

4
web/components/issues/main-content.tsx
View File

@ -108,7 +108,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
<Link <Link
href={`/${workspaceSlug}/projects/${issueDetails.parent_detail?.project_detail.id}/issues/${issueDetails.parent}`} href={`/${workspaceSlug}/projects/${issueDetails.parent_detail?.project_detail.id}/issues/${issueDetails.parent}`}
> >
<a className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<span <span
className="block h-2 w-2 rounded-full" className="block h-2 w-2 rounded-full"
@ -123,7 +123,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
<span className="truncate text-custom-text-100"> <span className="truncate text-custom-text-100">
{issueDetails.parent_detail?.name.substring(0, 50)} {issueDetails.parent_detail?.name.substring(0, 50)}
</span> </span>
</a> </div>
</Link> </Link>
<CustomMenu ellipsis optionsClassName="px-1.5"> <CustomMenu ellipsis optionsClassName="px-1.5">

4
web/components/modules/module-card-item.tsx
View File

@ -139,7 +139,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
)} )}
<DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} /> <DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}> <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<span className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px] text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md"> <div className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px] text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
<div> <div>
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<Tooltip tooltipContent={module.name} position="top"> <Tooltip tooltipContent={module.name} position="top">
@ -249,7 +249,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
</div> </div>
</span> </div>
</Link> </Link>
</> </>
); );

4
web/components/modules/module-list-item.tsx
View File

@ -128,7 +128,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
)} )}
<DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} /> <DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}> <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<span className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90"> <div className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
<div className="flex items-center gap-3 w-full truncate"> <div className="flex items-center gap-3 w-full truncate">
<div className="flex items-center gap-4 truncate"> <div className="flex items-center gap-4 truncate">
<span className="flex-shrink-0"> <span className="flex-shrink-0">
@ -225,7 +225,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
</CustomMenu> </CustomMenu>
</div> </div>
</span> </div>
</Link> </Link>
</> </>
); );

19
web/components/page-views/signin.tsx
View File

@ -13,7 +13,7 @@ import { SignInRoot } from "components/account";
import { Loader, Spinner } from "@plane/ui"; import { Loader, Spinner } from "@plane/ui";
// images // images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
import signInIssues from "public/onboarding/onboarding-issues.svg"; import latestFeatures from "public/onboarding/onboarding-pages.svg";
// types // types
import { IUser, IUserSettings } from "types"; import { IUser, IUserSettings } from "types";
@ -108,25 +108,22 @@ export const SignInView = observer(() => {
<Lightbulb className="h-7 w-7 mr-2 mx-3" /> <Lightbulb className="h-7 w-7 mr-2 mx-3" />
<p className="text-sm text-left text-onboarding-text-100"> <p className="text-sm text-left text-onboarding-text-100">
Pages gets a facelift! Write anything and use Galileo to help you start.{" "} Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
<Link <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
href="https://plane.so/changelog" <span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
target="_blank"
rel="noopener noreferrer"
className="font-medium text-sm underline hover:cursor-pointer"
>
Learn more
</Link> </Link>
</p> </p>
</div> </div>
<div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 "> <div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
<div className="h-[90%]">
<Image <Image
src={signInIssues} src={latestFeatures}
alt="Plane Issues" alt="Plane Issues"
className={`flex object-cover rounded-md ${ className={`rounded-md h-full ml-8 -mt-2 ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70" resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
} `} } `}
/> />
</div> </div>
</div>
</> </>
)} )}
</div> </div>

2
web/components/pages/pages-list/list-item.tsx
View File

@ -157,7 +157,6 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
<DeletePageModal isOpen={deletePageModal} onClose={() => setDeletePageModal(false)} data={page} /> <DeletePageModal isOpen={deletePageModal} onClose={() => setDeletePageModal(false)} data={page} />
<li> <li>
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
<span>
<div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80"> <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex overflow-hidden items-center gap-2"> <div className="flex overflow-hidden items-center gap-2">
@ -295,7 +294,6 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
</div> </div>
</div> </div>
</div> </div>
</span>
</Link> </Link>
</li> </li>
</> </>

4
web/components/views/view-list-item.tsx
View File

@ -57,7 +57,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
<DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} /> <DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200"> <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
<Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
<span className="flex items-center justify-between relative rounded p-4 w-full"> <div className="flex items-center justify-between relative rounded p-4 w-full">
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4 overflow-hidden"> <div className="flex items-center gap-4 overflow-hidden">
<div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100"> <div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
@ -128,7 +128,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
</div> </div>
</span> </div>
</Link> </Link>
</div> </div>
</> </>

4
web/components/workspace/views/default-view-list-item.tsx
View File

@ -18,7 +18,7 @@ export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
return ( return (
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200"> <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
<Link href={`/${workspaceSlug}/workspace-views/${view.key}`}> <Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
<span className="flex items-center justify-between relative rounded px-5 py-4 w-full"> <div className="flex items-center justify-between relative rounded px-5 py-4 w-full">
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100"> <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
@ -29,7 +29,7 @@ export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
</div> </div>
</span> </div>
</Link> </Link>
</div> </div>
); );

4
web/components/workspace/views/view-list-item.tsx
View File

@ -32,7 +32,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
<DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} /> <DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200"> <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
<Link href={`/${workspaceSlug}/workspace-views/${view.id}`}> <Link href={`/${workspaceSlug}/workspace-views/${view.id}`}>
<span className="flex items-center justify-between relative rounded p-4 w-full"> <div className="flex items-center justify-between relative rounded p-4 w-full">
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100"> <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
@ -77,7 +77,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
</div> </div>
</span> </div>
</Link> </Link>
</div> </div>
</> </>

13
web/layouts/admin-layout/layout.tsx
View File

@ -1,4 +1,5 @@
import { FC, ReactNode } from "react"; import { FC, ReactNode } from "react";
import { observer } from "mobx-react-lite";
// layouts // layouts
import { AdminAuthWrapper, UserAuthWrapper } from "layouts/auth-layout"; import { AdminAuthWrapper, UserAuthWrapper } from "layouts/auth-layout";
// components // components
@ -12,20 +13,14 @@ export interface IInstanceAdminLayout {
children: ReactNode; children: ReactNode;
} }
export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => { export const InstanceAdminLayout: FC<IInstanceAdminLayout> = observer((props) => {
const { children } = props; const { children } = props;
// store // store
const { const {
instance: { instance }, instance: { instance },
user: { currentUser },
} = useMobxStore(); } = useMobxStore();
// fetch
console.log("instance", instance); if (instance?.is_setup_done === false) return <InstanceSetupView />;
if (instance?.is_setup_done === false) {
return <InstanceSetupView />;
}
return ( return (
<> <>
@ -46,4 +41,4 @@ export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
</UserAuthWrapper> </UserAuthWrapper>
</> </>
); );
}; });

1
web/layouts/auth-layout/user-wrapper.tsx
View File

@ -21,7 +21,6 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = observer((props) => {
fetchCurrentUser, fetchCurrentUser,
fetchCurrentUserInstanceAdminStatus, fetchCurrentUserInstanceAdminStatus,
fetchCurrentUserSettings, fetchCurrentUserSettings,
}, },
workspace: { fetchWorkspaces }, workspace: { fetchWorkspaces },
} = useMobxStore(); } = useMobxStore();

4
web/layouts/instance-layout/index.tsx
View File

@ -24,7 +24,9 @@ const InstanceLayout: FC<Props> = observer(({ children }) => {
const router = useRouter(); const router = useRouter();
const isGodMode = router.pathname.includes("god-mode"); const isGodMode = router.pathname.includes("god-mode");
useSWR("INSTANCE_INFO", () => fetchInstanceInfo()); useSWR("INSTANCE_INFO", () => fetchInstanceInfo(), {
revalidateOnFocus: false,
});
useEffect(() => { useEffect(() => {
if (instance?.is_activated === false) { if (instance?.is_activated === false) {

5
web/layouts/settings-layout/profile/sidebar.tsx
View File

@ -102,8 +102,8 @@ export const ProfileLayoutSidebar = observer(() => {
} ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`} } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
> >
<div className="h-full w-full flex flex-col gap-y-4"> <div className="h-full w-full flex flex-col gap-y-4">
<Link <Link href={`/${redirectWorkspaceSlug}`}>
href={`/${redirectWorkspaceSlug}`} <div
className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${ className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
sidebarCollapsed ? "justify-center" : "" sidebarCollapsed ? "justify-center" : ""
}`} }`}
@ -114,6 +114,7 @@ export const ProfileLayoutSidebar = observer(() => {
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4> <h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
)} )}
</div>
</Link> </Link>
<div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4"> <div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4">
{!sidebarCollapsed && ( {!sidebarCollapsed && (

2
web/layouts/settings-layout/project/sidebar.tsx
View File

@ -50,7 +50,6 @@ export const ProjectSettingsSidebar = () => {
<div className="flex flex-col gap-1 w-full"> <div className="flex flex-col gap-1 w-full">
{projectLinks.map((link) => ( {projectLinks.map((link) => (
<Link key={link.href} href={link.href}> <Link key={link.href} href={link.href}>
<span>
<div <div
className={`px-4 py-2 text-sm font-medium rounded-md ${ className={`px-4 py-2 text-sm font-medium rounded-md ${
(link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href) (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
@ -60,7 +59,6 @@ export const ProjectSettingsSidebar = () => {
> >
{link.label} {link.label}
</div> </div>
</span>
</Link> </Link>
))} ))}
</div> </div>

71
web/pages/accounts/password.tsx
View File

@ -1,4 +1,4 @@
import { ReactElement } from "react"; import { ReactElement, useCallback } from "react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -15,11 +15,14 @@ import DefaultLayout from "layouts/default-layout";
import { Button, Input } from "@plane/ui"; import { Button, Input } from "@plane/ui";
// images // images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
import signInIssues from "public/onboarding/onboarding-issues.svg"; import latestFeatures from "public/onboarding/onboarding-pages.svg";
// helpers // helpers
import { checkEmailValidity } from "helpers/string.helper"; import { checkEmailValidity } from "helpers/string.helper";
// type // type
import { NextPageWithLayout } from "types/app"; import { NextPageWithLayout } from "types/app";
import { useMobxStore } from "lib/mobx/store-provider";
// types
import { IUser, IUserSettings } from "types";
type TResetPasswordFormValues = { type TResetPasswordFormValues = {
email: string; email: string;
@ -42,6 +45,10 @@ const HomePage: NextPageWithLayout = () => {
const { resolvedTheme } = useTheme(); const { resolvedTheme } = useTheme();
// toast // toast
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// mobx store
const {
user: { fetchCurrentUser, fetchCurrentUserSettings },
} = useMobxStore();
// form info // form info
const { const {
control, control,
@ -54,6 +61,31 @@ const HomePage: NextPageWithLayout = () => {
}, },
}); });
const handleSignInRedirection = useCallback(
async (user: IUser) => {
// if the user is not onboarded, redirect them to the onboarding page
if (!user.is_onboarded) {
router.push("/onboarding");
return;
}
// if the user is onboarded, fetch their last workspace details
await fetchCurrentUserSettings().then((userSettings: IUserSettings) => {
const workspaceSlug =
userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
if (workspaceSlug) router.push(`/${workspaceSlug}`);
else router.push("/profile");
});
},
[fetchCurrentUserSettings, router]
);
const mutateUserInfo = useCallback(async () => {
await fetchCurrentUser().then(async (user) => {
await handleSignInRedirection(user);
});
}, [fetchCurrentUser, handleSignInRedirection]);
const handleResetPassword = async (formData: TResetPasswordFormValues) => { const handleResetPassword = async (formData: TResetPasswordFormValues) => {
if (!uidb64 || !token || !email) return; if (!uidb64 || !token || !email) return;
@ -61,7 +93,10 @@ const HomePage: NextPageWithLayout = () => {
new_password: formData.password, new_password: formData.password,
}; };
await authService.resetPassword(uidb64.toString(), token.toString(), payload).catch((err) => await authService
.resetPassword(uidb64.toString(), token.toString(), payload)
.then(() => mutateUserInfo())
.catch((err) =>
setToastAlert({ setToastAlert({
type: "error", type: "error",
title: "Error!", title: "Error!",
@ -82,7 +117,7 @@ const HomePage: NextPageWithLayout = () => {
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 "> <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
<div className="px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto"> <div className="px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
<div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200"> <div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200">
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100"> <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
Let{"'"}s get a new password Let{"'"}s get a new password
</h1> </h1>
<form onSubmit={handleSubmit(handleResetPassword)} className="mt-11 sm:w-96 mx-auto space-y-4"> <form onSubmit={handleSubmit(handleResetPassword)} className="mt-11 sm:w-96 mx-auto space-y-4">
@ -123,6 +158,7 @@ const HomePage: NextPageWithLayout = () => {
hasError={Boolean(errors.password)} hasError={Boolean(errors.password)}
placeholder="Choose password" placeholder="Choose password"
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12" className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
minLength={8}
/> />
)} )}
/> />
@ -142,13 +178,8 @@ const HomePage: NextPageWithLayout = () => {
</Button> </Button>
<p className="text-xs text-onboarding-text-200"> <p className="text-xs text-onboarding-text-200">
When you click the button above, you agree with our{" "} When you click the button above, you agree with our{" "}
<Link <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
href="https://plane.so/terms-and-conditions" <span className="font-semibold underline">terms and conditions of service.</span>
target="_blank"
rel="noopener noreferrer"
className="font-semibold underline"
>
terms and conditions of service.
</Link> </Link>
</p> </p>
</form> </form>
@ -157,22 +188,17 @@ const HomePage: NextPageWithLayout = () => {
<Lightbulb className="h-7 w-7 mr-2 mx-3" /> <Lightbulb className="h-7 w-7 mr-2 mx-3" />
<p className="text-sm text-left text-onboarding-text-100"> <p className="text-sm text-left text-onboarding-text-100">
Try the latest features, like Tiptap editor, to write compelling responses.{" "} Try the latest features, like Tiptap editor, to write compelling responses.{" "}
<Link href="https://plane.so/changelog"> <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
<a <span className="font-medium text-sm underline hover:cursor-pointer">See new features</span>
target="_blank"
rel="noopener noreferrer"
className="font-medium text-sm underline hover:cursor-pointer"
>
See new features
</a>
</Link> </Link>
</p> </p>
</div> </div>
<div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 "> <div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
<div className="h-[90%]">
<Image <Image
src={signInIssues} src={latestFeatures}
alt="Plane Issues" alt="Plane Issues"
className={`flex object-cover rounded-md ${ className={`rounded-md h-full ml-8 -mt-2 ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70" resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
} `} } `}
/> />
@ -180,6 +206,7 @@ const HomePage: NextPageWithLayout = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}; };

62
web/public/onboarding/onboarding-pages.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 527 KiB

2
web/services/auth.service.ts
View File

@ -55,7 +55,7 @@ export class AuthService extends APIService {
new_password: string; new_password: string;
} }
): Promise<ILoginTokenResponse> { ): Promise<ILoginTokenResponse> {
return this.post(`/api/reset-password/${uidb64}/${token}/`, data) return this.post(`/api/reset-password/${uidb64}/${token}/`, data, { headers: {} })
.then((response) => { .then((response) => {
if (response?.status === 200) { if (response?.status === 200) {
this.setAccessToken(response?.data?.access_token); this.setAccessToken(response?.data?.access_token);

2
web/store/instance/instance.store.ts
View File

@ -71,7 +71,7 @@ export class InstanceStore implements IInstanceStore {
} }
/** /**
* fetch instace info from API * fetch instance info from API
*/ */
fetchInstanceInfo = async () => { fetchInstanceInfo = async () => {
try { try {