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 sriram veeraghanta
parent a515c59518
commit 1296b6af42
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 Link from "next/link";
import { Controller, useForm } from "react-hook-form";
// services
import { AuthService } from "services/auth.service";
@ -74,7 +75,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
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
</h1>
@ -117,16 +118,23 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
hasError={Boolean(errors.password)}
placeholder="Create password"
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.
</p>
</div>
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
{isSubmitting ? "Submitting..." : "Go to workspace"}
</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>
</>
);

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

@ -83,10 +83,10 @@ export const EmailForm: React.FC<Props> = (props) => {
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!
</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
</p>

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

@ -1,4 +1,5 @@
import React, { useState } from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form";
// ui
import { Button, Input } from "@plane/ui";
@ -37,12 +38,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
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">
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>
<form className="mt-5 sm:w-96 mx-auto">
<form className="mt-5 sm:w-96 mx-auto space-y-4">
<Controller
control={control}
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
type="button"
variant="primary"
@ -88,6 +89,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
{isGoingToWorkspace ? "Going to app..." : "Go to workspace"}
</Button>
</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>
</>
);

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

@ -1,4 +1,5 @@
import React from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form";
import { XCircle } from "lucide-react";
// services
@ -184,17 +185,25 @@ export const PasswordForm: React.FC<Props> = (props) => {
/>
)}
/>
<div className="w-full text-right">
<button
type="button"
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?
</button>
</div>
</div>
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
{isSubmitting ? "Signing in..." : "Go to workspace"}
</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>
</>
);

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

@ -23,6 +23,8 @@ type Props = {
handleSignInRedirection: () => Promise<void>;
};
const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
export const SignInRoot: React.FC<Props> = (props) => {
const { handleSignInRedirection } = props;
// states
@ -72,7 +74,7 @@ export const SignInRoot: React.FC<Props> = (props) => {
/>
)}
</div>
{signInStep !== ESignInSteps.OPTIONAL_SET_PASSWORD && (
{!OAUTH_HIDDEN_STEPS.includes(signInStep) && (
<OAuthOptions
updateEmail={(newEmail) => setEmail(newEmail)}
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 Link from "next/link";
import { Controller, useForm } from "react-hook-form";
import { XCircle } from "lucide-react";
// services
@ -48,6 +49,13 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
await authService
.emailCheck(payload)
.then(() =>
setToastAlert({
type: "success",
title: "Success!",
message: "We have sent a new link to your email.",
})
)
.catch((err) =>
setToastAlert({
type: "error",
@ -60,15 +68,15 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
return (
<>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
Get on your flight deck!
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
Get on your flight deck
</h1>
<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
</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">
<Controller
control={control}
@ -103,7 +111,6 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
)}
/>
</div>
<div className="mt-4">
<Button
type="button"
variant="primary"
@ -115,7 +122,12 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
>
{isSendingNewLink ? "Sending new link..." : "Get link again"}
</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>
</>
);

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

@ -1,4 +1,5 @@
import React, { useState } from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form";
import { CornerDownLeft, XCircle } from "lucide-react";
// services
@ -44,7 +45,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
// toast alert
const { setToastAlert } = useToast();
// timer
const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer();
const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
// form info
const {
control,
@ -131,11 +132,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
return (
<>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
Moving to the runway
</h1>
<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.
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Moving to the runway</h1>
<p className="text-center text-sm text-onboarding-text-200 mt-3">
Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below
</p>
<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
type="button"
onClick={handleRequestNewCode}
className={`text-xs text-right w-full text-onboarding-text-200 ${
isRequestNewCodeDisabled ? "" : "hover:text-custom-primary-100"
className={`text-xs ${
isRequestNewCodeDisabled
? "text-onboarding-text-300"
: "text-onboarding-text-200 hover:text-custom-primary-100"
}`}
disabled={isRequestNewCodeDisabled}
>
@ -216,6 +218,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
: "Request new code"}
</button>
</div>
</div>
<Button
type="submit"
variant="primary"
@ -226,6 +229,12 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
>
{isSubmitting ? "Signing in..." : "Confirm"}
</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>
</>
);

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

@ -1,35 +1,36 @@
import Image from "next/image";
import Link from "next/link";
import { useTheme } from "next-themes";
// icons
import { Lightbulb } from "lucide-react";
// images
import signInIssues from "public/onboarding/onboarding-issues.svg";
import latestFeatures from "public/onboarding/onboarding-pages.svg";
export const LatestFeatureBlock = () => {
const { resolvedTheme } = useTheme();
return (
<>
<div
className={`flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16`}
>
<div 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" />
<p className={`text-sm text-left text-onboarding-text-100`}>
Try the latest features, like Tiptap editor, to write compelling responses.{" "}
<span className="font-medium text-sm underline hover:cursor-pointer" onClick={() => {}}>
See new features
</span>
<p className="text-sm text-left text-onboarding-text-100">
Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
<span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
</Link>
</p>
</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
src={signInIssues}
src={latestFeatures}
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"
} `}
/>
</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) => {
const { cycle, workspaceSlug, projectId } = props;
// store
const { cycle: cycleStore, trackEvent: { setTrackElement } } = useMobxStore();
const {
cycle: cycleStore,
trackEvent: { setTrackElement },
} = useMobxStore();
// toast
const { setToastAlert } = useToast();
// states
@ -152,7 +155,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
/>
<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 gap-3 truncate">
<span className="flex-shrink-0">
@ -268,7 +271,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
</div>
</div>
</div>
</span>
</div>
</Link>
</div>
);

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

@ -153,7 +153,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
projectId={projectId}
/>
<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-4 truncate">
<span className="flex-shrink-0">
@ -262,7 +262,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</span>
</div>
</Link>
</>
);

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

@ -27,7 +27,6 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
return (
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.issue_inbox[0].id}`}>
<span>
<div
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 ${
@ -91,7 +90,6 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
)}
</div>
</div>
</span>
</Link>
);
};

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

@ -98,12 +98,12 @@ export const InstanceHelpSection: FC = () => {
if (href)
return (
<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">
<Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} />
</div>
<span className="text-xs">{name}</span>
</span>
</div>
</Link>
);
else

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

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

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

@ -1,29 +1,29 @@
import React from "react";
import Image from "next/image";
import { useTheme } from "next-themes";
// image
// images
import instanceNotReady from "public/instance/plane-instance-not-ready.webp";
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 = () => {
const { resolvedTheme } = useTheme();
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneDarkLogo;
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
return (
<div className="h-screen w-full overflow-y-auto bg-onboarding-gradient-100">
<div className={`h-screen 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={`relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-md`}>
<div className="h-full w-full pt-24">
<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-t-md">
<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 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 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>
</div>
</div>

75
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 { useTheme } from "next-themes";
// ui
import { Button } from "@plane/ui";
import { UserCog2 } from "lucide-react";
// image
// images
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 = () => (
<div className="h-screen w-full overflow-hidden">
<div className={`bg-onboarding-gradient-100 h-screen w-full pt-12`}>
<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={`flex flex-col items-center relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md overflow-auto`}
>
<div className="flex items-center gap-5 py-10 justify-center">
<Image src={PlaneLogo} height={44} width={44} alt="image" />
<span className="text-4xl font-semibold">To the stratosphere now!</span>
export const InstanceSetupDone = () => {
// states
const [isRedirecting, setIsRedirecting] = useState(false);
// next-themes
const { resolvedTheme } = useTheme();
// mobx store
const {
instance: { fetchInstanceInfo },
} = useMobxStore();
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 className="flex items-center justify-center">
<Image src={instanceSetupDone} height={360} width={444} alt="image" />
<div className="grid place-items-center my-8">
<div className="w-[444px]">
<Image src={instanceSetupDone} className="h-full w-full" alt="image" />
</div>
</div>
<div className="flex flex-col gap-8 items-center py-12 w-full">
<span className="text-xl font-medium">
<div className="flex flex-col gap-8 items-center w-full sm:px-4">
<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.
</span>
<Button size="lg" prependIcon={<UserCog2 />}>
Go to God Mode
</h6>
<p className="text-xs font-medium">
Use this wisely. Remember, with great power comes great responsibility.
</p>
</div>
<Button size="lg" prependIcon={<UserCog2 />} onClick={redirectToGodMode} loading={isRedirecting}>
{isRedirecting ? "Redirecting..." : "Go to God Mode"}
</Button>
<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>
</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";
// ui
import { Input, Button } from "@plane/ui";
@ -24,6 +24,8 @@ export interface IInstanceSetupEmailCodeForm {
export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (props) => {
const { handleNextStep, email, moveBack } = props;
// states
const [isResendingCode, setIsResendingCode] = useState(false);
// form info
const {
control,
@ -40,10 +42,10 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
const { setToastAlert } = useToast();
const { timer, setTimer } = useTimer(30);
// computed
const isResendDisabled = timer > 0 || isSubmitting;
const isResendDisabled = timer > 0 || isResendingCode;
const handleEmailCodeFormSubmit = (formValues: InstanceSetupEmailCodeFormValues) =>
authService
const handleEmailCodeFormSubmit = async (formValues: InstanceSetupEmailCodeFormValues) =>
await authService
.instanceMagicSignIn({ key: `magic_${formValues.email}`, token: formValues.token })
.then(() => {
reset();
@ -51,42 +53,40 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
})
.catch((err) => {
setToastAlert({
title: "Oops!",
type: "error",
message: err?.error,
title: "Error!",
message: err?.error ?? "Something went wrong. Please try again.",
});
});
const resendMagicCode = () => {
setTimer(30);
authService
const resendMagicCode = async () => {
setIsResendingCode(true);
await authService
.instanceAdminEmailCode({ email })
.then(() => {
// setCodeResending(false);
setTimer(30);
})
.then(() => setTimer(30))
.catch((err) => {
setToastAlert({
title: "Oops!",
type: "error",
message: err?.error,
});
title: "Error!",
message: err?.error ?? "Something went wrong. Please try again.",
});
})
.finally(() => setIsResendingCode(false));
};
return (
<form onSubmit={handleSubmit(handleEmailCodeFormSubmit)}>
<div className="pb-2">
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
Let’s secure your instance
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
Let{"'"}s secure your instance
</h1>
<div className="text-center text-sm text-onboarding-text-200 mt-3">
<p>Paste the code you got at </p>
<span className="text-center text-sm text-custom-primary-80 mt-1 font-semibold ">{email}</span>
<span className="text-onboarding-text-200">below.</span>
</div>
<div className="relative mt-10 w-full sm:w-[360px] mx-auto">
<p className="text-center text-sm text-onboarding-text-200 mt-3">
Paste the code you got at
<br />
<span className="text-custom-primary-100 font-semibold">{email}</span> below.
</p>
<div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
<div>
<Controller
name="email"
control={control}
@ -98,7 +98,7 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
) || "Email address is not valid",
}}
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
id="email"
name="email"
@ -116,27 +116,22 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
</div>
)}
/>
<div
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">
<div className="w-full text-right">
<button
type="button"
className="w-fit pb-2 text-xs outline-none cursor-pointer text-custom-primary-100"
onClick={resendMagicCode}
className={`text-xs ${
isResendDisabled ? "text-onboarding-text-300" : "text-onboarding-text-200 hover:text-custom-primary-100"
}`}
disabled={isResendDisabled}
>
<span className="font-medium">Resend</span>
{timer > 0
? `Request new code in ${timer}s`
: isSubmitting
? "Requesting new code..."
: "Request new code"}
</button>
</div>
)}
</div>
<Controller
name="token"
@ -150,18 +145,16 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
type="text"
value={value}
onChange={onChange}
placeholder="gets-sets-flys"
placeholder="gets-sets-fays"
className="border-onboarding-border-100 h-[46px] w-full "
/>
</div>
)}
/>
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
<Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
{isSubmitting ? "Verifying..." : "Next step"}
</Button>
</div>
</div>
</form>
);
};

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

@ -44,23 +44,23 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
})
.catch((err) => {
setToastAlert({
title: "Oops!",
type: "error",
message: err?.error,
title: "Error!",
message: err?.error ?? "Something went wrong. Please try again.",
});
});
return (
<form onSubmit={handleSubmit(handleEmailFormSubmit)}>
<div className="pb-2">
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
Let’s secure your instance
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
Let{"'"}s secure your instance
</h1>
<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>
<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
name="email"
control={control}
@ -91,15 +91,13 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
</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.
</p>
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
<Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
{isSubmitting ? "Sending code..." : "Send unique code"}
</Button>
</div>
</div>
</form>
);
};

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

@ -1,4 +1,5 @@
import React from "react";
import Link from "next/link";
import { useForm, Controller } from "react-hook-form";
// ui
import { Input, Button } from "@plane/ui";
@ -43,14 +44,14 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
return (
<form onSubmit={handleSubmit(handlePasswordSubmit)}>
<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
</h1>
<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>
<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
control={control}
name="email"
@ -79,8 +80,7 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
</div>
)}
/>
<div className="mt-4">
<div>
<Controller
control={control}
name="password"
@ -106,13 +106,19 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
</div>
)}
/>
</div>
<p className="text-xs mt-2 text-onboarding-text-200">
{"Whatever you choose now will be your account's password"}
<p className="text-xs mt-3 text-onboarding-text-200 pb-2">
Whatever you choose now will be your account{"'"}s password
</p>
</div>
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
{isSubmitting ? "Submitting..." : "Next Step"}
{isSubmitting ? "Submitting..." : "Next step"}
</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>
</form>

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

@ -21,13 +21,11 @@ export const InstanceSetupFormRoot = () => {
return (
<>
{setupStep === EInstanceSetupSteps.DONE ? (
<div>
<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={`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="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="bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
<div className="mx-auto flex flex-col">
{setupStep === EInstanceSetupSteps.EMAIL && (
<InstanceSetupEmailForm
handleNextStep={(email) => {

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

@ -24,7 +24,7 @@ export const InstanceSetupView = observer(() => {
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 gap-x-2 py-10 items-center">
<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 (
<Link key={index} href={item.href}>
<span className="block w-full">
<div>
<Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!sidebarCollapsed}>
<div
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>
</Tooltip>
</span>
</div>
</Link>
);
})}

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

@ -59,8 +59,7 @@ export const IssueAttachments = () => {
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"
>
<Link href={file.asset} target="_blank">
<span>
<Link href={file.asset} target="_blank" rel="noopener noreferrer">
<div className="flex items-center gap-3">
<div className="h-7 w-7">{getFileIcon(getFileExtension(file.asset))}</div>
<div className="flex flex-col gap-1">
@ -85,7 +84,6 @@ export const IssueAttachments = () => {
</div>
</div>
</div>
</span>
</Link>
<button

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

@ -108,7 +108,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
<Link
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">
<span
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">
{issueDetails.parent_detail?.name.substring(0, 50)}
</span>
</a>
</div>
</Link>
<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)} />
<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 className="flex items-center justify-between gap-2">
<Tooltip tooltipContent={module.name} position="top">
@ -249,7 +249,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
</div>
</div>
</div>
</span>
</div>
</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)} />
<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-4 truncate">
<span className="flex-shrink-0">
@ -225,7 +225,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</span>
</div>
</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";
// images
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
import { IUser, IUserSettings } from "types";
@ -108,25 +108,22 @@ export const SignInView = observer(() => {
<Lightbulb className="h-7 w-7 mr-2 mx-3" />
<p className="text-sm text-left text-onboarding-text-100">
Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
<Link
href="https://plane.so/changelog"
target="_blank"
rel="noopener noreferrer"
className="font-medium text-sm underline hover:cursor-pointer"
>
Learn more
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
<span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
</Link>
</p>
</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
src={signInIssues}
src={latestFeatures}
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"
} `}
/>
</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} />
<li>
<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="flex items-center justify-between">
<div className="flex overflow-hidden items-center gap-2">
@ -295,7 +294,6 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
</div>
</div>
</div>
</span>
</Link>
</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)} />
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
<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 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">
@ -128,7 +128,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
</div>
</div>
</div>
</span>
</div>
</Link>
</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 (
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
<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 gap-4">
<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>
</span>
</div>
</Link>
</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)} />
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
<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 gap-4">
<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>
</span>
</div>
</Link>
</div>
</>

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

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

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

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

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

@ -24,7 +24,9 @@ const InstanceLayout: FC<Props> = observer(({ children }) => {
const router = useRouter();
const isGodMode = router.pathname.includes("god-mode");
useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
useSWR("INSTANCE_INFO", () => fetchInstanceInfo(), {
revalidateOnFocus: false,
});
useEffect(() => {
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"}`}
>
<div className="h-full w-full flex flex-col gap-y-4">
<Link
href={`/${redirectWorkspaceSlug}`}
<Link href={`/${redirectWorkspaceSlug}`}>
<div
className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
sidebarCollapsed ? "justify-center" : ""
}`}
@ -114,6 +114,7 @@ export const ProfileLayoutSidebar = observer(() => {
{!sidebarCollapsed && (
<h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
)}
</div>
</Link>
<div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4">
{!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">
{projectLinks.map((link) => (
<Link key={link.href} href={link.href}>
<span>
<div
className={`px-4 py-2 text-sm font-medium rounded-md ${
(link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
@ -60,7 +59,6 @@ export const ProjectSettingsSidebar = () => {
>
{link.label}
</div>
</span>
</Link>
))}
</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 Link from "next/link";
import { useRouter } from "next/router";
@ -15,11 +15,14 @@ import DefaultLayout from "layouts/default-layout";
import { Button, Input } from "@plane/ui";
// images
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
import { checkEmailValidity } from "helpers/string.helper";
// type
import { NextPageWithLayout } from "types/app";
import { useMobxStore } from "lib/mobx/store-provider";
// types
import { IUser, IUserSettings } from "types";
type TResetPasswordFormValues = {
email: string;
@ -42,6 +45,10 @@ const HomePage: NextPageWithLayout = () => {
const { resolvedTheme } = useTheme();
// toast
const { setToastAlert } = useToast();
// mobx store
const {
user: { fetchCurrentUser, fetchCurrentUserSettings },
} = useMobxStore();
// form info
const {
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) => {
if (!uidb64 || !token || !email) return;
@ -61,7 +93,10 @@ const HomePage: NextPageWithLayout = () => {
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({
type: "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="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">
<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
</h1>
<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)}
placeholder="Choose password"
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>
<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"
className="font-semibold underline"
>
terms and conditions of service.
<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>
@ -157,22 +188,17 @@ const HomePage: NextPageWithLayout = () => {
<Lightbulb className="h-7 w-7 mr-2 mx-3" />
<p className="text-sm text-left text-onboarding-text-100">
Try the latest features, like Tiptap editor, to write compelling responses.{" "}
<Link href="https://plane.so/changelog">
<a
target="_blank"
rel="noopener noreferrer"
className="font-medium text-sm underline hover:cursor-pointer"
>
See new features
</a>
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
<span className="font-medium text-sm underline hover:cursor-pointer">See new features</span>
</Link>
</p>
</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
src={signInIssues}
src={latestFeatures}
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"
} `}
/>
@ -180,6 +206,7 @@ const HomePage: NextPageWithLayout = () => {
</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;
}
): Promise<ILoginTokenResponse> {
return this.post(`/api/reset-password/${uidb64}/${token}/`, data)
return this.post(`/api/reset-password/${uidb64}/${token}/`, data, { headers: {} })
.then((response) => {
if (response?.status === 200) {
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 () => {
try {