forked from github/plane
style: updated the UI of the instance admin setup and the sign in workflow (#2962)
* 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
Aaryan Khandelwal
parent
8d021389a0
commit
0ff5f9ef62
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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) => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleForgotPassword}
|
||||
className="text-xs font-medium text-right w-full text-custom-primary-100"
|
||||
>
|
||||
Forgot your password?
|
||||
</button>
|
||||
<div className="w-full text-right">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleForgotPassword}
|
||||
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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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)}
|
||||
|
||||
@ -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,19 +111,23 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
size="xl"
|
||||
onClick={handleSendNewLink}
|
||||
disabled={!isValid}
|
||||
loading={isSendingNewLink}
|
||||
>
|
||||
{isSendingNewLink ? "Sending new link..." : "Get link again"}
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
size="xl"
|
||||
onClick={handleSendNewLink}
|
||||
disabled={!isValid}
|
||||
loading={isSendingNewLink}
|
||||
>
|
||||
{isSendingNewLink ? "Sending new link..." : "Get link again"}
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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,20 +200,24 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRequestNewCode}
|
||||
className={`text-xs text-right w-full text-onboarding-text-200 ${
|
||||
isRequestNewCodeDisabled ? "" : "hover:text-custom-primary-100"
|
||||
}`}
|
||||
disabled={isRequestNewCodeDisabled}
|
||||
>
|
||||
{resendTimerCode > 0
|
||||
? `Request new code in ${resendTimerCode}s`
|
||||
: isRequestingNewCode
|
||||
? "Requesting new code..."
|
||||
: "Request new code"}
|
||||
</button>
|
||||
<div className="w-full text-right">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRequestNewCode}
|
||||
className={`text-xs ${
|
||||
isRequestNewCodeDisabled
|
||||
? "text-onboarding-text-300"
|
||||
: "text-onboarding-text-200 hover:text-custom-primary-100"
|
||||
}`}
|
||||
disabled={isRequestNewCodeDisabled}
|
||||
>
|
||||
{resendTimerCode > 0
|
||||
? `Request new code in ${resendTimerCode}s`
|
||||
: isRequestingNewCode
|
||||
? "Requesting new code..."
|
||||
: "Request new code"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,34 +1,35 @@
|
||||
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 ">
|
||||
<Image
|
||||
src={signInIssues}
|
||||
alt="Plane Issues"
|
||||
className={`flex object-cover rounded-md ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
<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={latestFeatures}
|
||||
alt="Plane Issues"
|
||||
className={`rounded-md h-full ml-8 -mt-2 ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -27,71 +27,69 @@ 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 ${
|
||||
active ? "bg-custom-primary/5" : " "
|
||||
} ${issue.issue_inbox[0].status !== -2 ? "opacity-60" : ""}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-2">
|
||||
<p className="flex-shrink-0 text-custom-text-200 text-xs">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
</p>
|
||||
<h5 className="truncate text-sm">{issue.name}</h5>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
|
||||
<PriorityIcon priority={issue.priority ?? null} className="h-3.5 w-3.5" />
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
tooltipHeading="Created on"
|
||||
tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
|
||||
>
|
||||
<div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
|
||||
<CalendarDays size={12} strokeWidth={1.5} />
|
||||
<span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className={`text-xs flex items-center justify-end gap-1 w-full ${
|
||||
issueStatus === 0 && new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date()
|
||||
? "text-red-500"
|
||||
: INBOX_STATUS.find((s) => s.value === issueStatus)?.textColor
|
||||
}`}
|
||||
>
|
||||
{issueStatus === -2 ? (
|
||||
<>
|
||||
<AlertTriangle size={14} strokeWidth={2} />
|
||||
<span>Pending</span>
|
||||
</>
|
||||
) : issueStatus === -1 ? (
|
||||
<>
|
||||
<XCircle size={14} strokeWidth={2} />
|
||||
<span>Declined</span>
|
||||
</>
|
||||
) : issueStatus === 0 ? (
|
||||
<>
|
||||
<Clock size={14} strokeWidth={2} />
|
||||
<span>
|
||||
{new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date() ? "Snoozed date passed" : "Snoozed"}
|
||||
</span>
|
||||
</>
|
||||
) : issueStatus === 1 ? (
|
||||
<>
|
||||
<CheckCircle2 size={14} strokeWidth={2} />
|
||||
<span>Accepted</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy size={14} strokeWidth={2} />
|
||||
<span>Duplicate</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<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 ${
|
||||
active ? "bg-custom-primary/5" : " "
|
||||
} ${issue.issue_inbox[0].status !== -2 ? "opacity-60" : ""}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-2">
|
||||
<p className="flex-shrink-0 text-custom-text-200 text-xs">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
</p>
|
||||
<h5 className="truncate text-sm">{issue.name}</h5>
|
||||
</div>
|
||||
</span>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
|
||||
<PriorityIcon priority={issue.priority ?? null} className="h-3.5 w-3.5" />
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
tooltipHeading="Created on"
|
||||
tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
|
||||
>
|
||||
<div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
|
||||
<CalendarDays size={12} strokeWidth={1.5} />
|
||||
<span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className={`text-xs flex items-center justify-end gap-1 w-full ${
|
||||
issueStatus === 0 && new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date()
|
||||
? "text-red-500"
|
||||
: INBOX_STATUS.find((s) => s.value === issueStatus)?.textColor
|
||||
}`}
|
||||
>
|
||||
{issueStatus === -2 ? (
|
||||
<>
|
||||
<AlertTriangle size={14} strokeWidth={2} />
|
||||
<span>Pending</span>
|
||||
</>
|
||||
) : issueStatus === -1 ? (
|
||||
<>
|
||||
<XCircle size={14} strokeWidth={2} />
|
||||
<span>Declined</span>
|
||||
</>
|
||||
) : issueStatus === 0 ? (
|
||||
<>
|
||||
<Clock size={14} strokeWidth={2} />
|
||||
<span>
|
||||
{new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date() ? "Snoozed date passed" : "Snoozed"}
|
||||
</span>
|
||||
</>
|
||||
) : issueStatus === 1 ? (
|
||||
<>
|
||||
<CheckCircle2 size={14} strokeWidth={2} />
|
||||
<span>Accepted</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy size={14} strokeWidth={2} />
|
||||
<span>Duplicate</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
<Button variant="primary" size="sm">
|
||||
<LayoutGrid width={16} height={16} />
|
||||
To the workspace
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
</div>
|
||||
export const InstanceSetupDone = () => {
|
||||
// states
|
||||
const [isRedirecting, setIsRedirecting] = useState(false);
|
||||
// next-themes
|
||||
const { resolvedTheme } = useTheme();
|
||||
// mobx store
|
||||
const {
|
||||
instance: { fetchInstanceInfo },
|
||||
} = useMobxStore();
|
||||
|
||||
<div className="flex items-center justify-center">
|
||||
<Image src={instanceSetupDone} height={360} width={444} alt="image" />
|
||||
</div>
|
||||
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
|
||||
|
||||
<div className="flex flex-col gap-8 items-center py-12 w-full">
|
||||
<span className="text-xl font-medium">
|
||||
Your instance is now ready for more security, more controls, and more intelligence.
|
||||
</span>
|
||||
<Button size="lg" prependIcon={<UserCog2 />}>
|
||||
Go to God Mode
|
||||
</Button>
|
||||
const redirectToGodMode = async () => {
|
||||
setIsRedirecting(true);
|
||||
|
||||
<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.🕷️
|
||||
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="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 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.
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
<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">
|
||||
<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">
|
||||
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,51 +116,44 @@ 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">
|
||||
<button
|
||||
type="button"
|
||||
className="w-fit pb-2 text-xs outline-none cursor-pointer text-custom-primary-100"
|
||||
onClick={resendMagicCode}
|
||||
disabled={isResendDisabled}
|
||||
>
|
||||
<span className="font-medium">Resend</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full text-right">
|
||||
<button
|
||||
type="button"
|
||||
onClick={resendMagicCode}
|
||||
className={`text-xs ${
|
||||
isResendDisabled ? "text-onboarding-text-300" : "text-onboarding-text-200 hover:text-custom-primary-100"
|
||||
}`}
|
||||
disabled={isResendDisabled}
|
||||
>
|
||||
{timer > 0
|
||||
? `Request new code in ${timer}s`
|
||||
: isSubmitting
|
||||
? "Requesting new code..."
|
||||
: "Request new code"}
|
||||
</button>
|
||||
</div>
|
||||
<Controller
|
||||
name="token"
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className={`flex items-center relative rounded-md bg-onboarding-background-200 mb-4`}>
|
||||
<Input
|
||||
id="token"
|
||||
name="token"
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="gets-sets-flys"
|
||||
className="border-onboarding-border-100 h-[46px] w-full "
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Verifying..." : "Next step"}
|
||||
</Button>
|
||||
</div>
|
||||
<Controller
|
||||
name="token"
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className={`flex items-center relative rounded-md bg-onboarding-background-200 mb-4`}>
|
||||
<Input
|
||||
id="token"
|
||||
name="token"
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="gets-sets-fays"
|
||||
className="border-onboarding-border-100 h-[46px] w-full "
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Verifying..." : "Next step"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
||||
@ -44,61 +44,59 @@ 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>
|
||||
<p className="text-center text-sm text-onboarding-text-200 mt-3">
|
||||
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">
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Email address is required",
|
||||
validate: (value) =>
|
||||
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
||||
value
|
||||
) || "Email address is not valid",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className={`w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12`}
|
||||
<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.
|
||||
</p>
|
||||
<div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Email address is required",
|
||||
validate: (value) =>
|
||||
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
||||
value
|
||||
) || "Email address is not valid",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className={`w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12`}
|
||||
/>
|
||||
{value.length > 0 && (
|
||||
<XCircle
|
||||
className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
|
||||
onClick={() => setValue("email", "")}
|
||||
/>
|
||||
{value.length > 0 && (
|
||||
<XCircle
|
||||
className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
|
||||
onClick={() => setValue("email", "")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<p className="text-xs text-custom-text-400 mt-0 py-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}>
|
||||
{isSubmitting ? "Sending code..." : "Send unique code"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<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" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Sending code..." : "Send unique code"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
/>
|
||||
<p className="text-xs mt-3 text-onboarding-text-200 pb-2">
|
||||
Whatever you choose now will be your account{"'"}s password
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs mt-2 text-onboarding-text-200">
|
||||
{"Whatever you choose now will be your account's password"}
|
||||
</p>
|
||||
<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>
|
||||
|
||||
@ -21,13 +21,11 @@ export const InstanceSetupFormRoot = () => {
|
||||
return (
|
||||
<>
|
||||
{setupStep === EInstanceSetupSteps.DONE ? (
|
||||
<div>
|
||||
<InstanceSetupDone />
|
||||
</div>
|
||||
<InstanceSetupDone />
|
||||
) : (
|
||||
<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) => {
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -59,33 +59,31 @@ 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>
|
||||
<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">
|
||||
<div className="flex items-center gap-2">
|
||||
<Tooltip tooltipContent={getFileName(file.attributes.name)}>
|
||||
<span className="text-sm">{truncateText(`${getFileName(file.attributes.name)}`, 10)}</span>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
tooltipContent={`${
|
||||
people?.find((person) => person.member.id === file.updated_by)?.member.display_name ?? ""
|
||||
} uploaded on ${renderLongDateFormat(file.updated_at)}`}
|
||||
>
|
||||
<span>
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<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">
|
||||
<div className="flex items-center gap-2">
|
||||
<Tooltip tooltipContent={getFileName(file.attributes.name)}>
|
||||
<span className="text-sm">{truncateText(`${getFileName(file.attributes.name)}`, 10)}</span>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
tooltipContent={`${
|
||||
people?.find((person) => person.member.id === file.updated_by)?.member.display_name ?? ""
|
||||
} uploaded on ${renderLongDateFormat(file.updated_at)}`}
|
||||
>
|
||||
<span>
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 text-xs text-custom-text-200">
|
||||
<span>{getFileExtension(file.asset).toUpperCase()}</span>
|
||||
<span>{convertBytesToSize(file.attributes.size)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-xs text-custom-text-200">
|
||||
<span>{getFileExtension(file.asset).toUpperCase()}</span>
|
||||
<span>{convertBytesToSize(file.attributes.size)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<button
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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,24 +108,21 @@ 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 ">
|
||||
<Image
|
||||
src={signInIssues}
|
||||
alt="Plane Issues"
|
||||
className={`flex object-cover rounded-md ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
<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={latestFeatures}
|
||||
alt="Plane Issues"
|
||||
className={`rounded-md h-full ml-8 -mt-2 ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -157,145 +157,143 @@ 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">
|
||||
<FileText className="h-4 w-4 shrink-0" />
|
||||
<p className="mr-2 truncate text-sm text-custom-text-100">{page.name}</p>
|
||||
{page.label_details.length > 0 &&
|
||||
page.label_details.map((label) => (
|
||||
<div
|
||||
key={label.id}
|
||||
className="group flex items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs"
|
||||
<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">
|
||||
<FileText className="h-4 w-4 shrink-0" />
|
||||
<p className="mr-2 truncate text-sm text-custom-text-100">{page.name}</p>
|
||||
{page.label_details.length > 0 &&
|
||||
page.label_details.map((label) => (
|
||||
<div
|
||||
key={label.id}
|
||||
className="group flex items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs"
|
||||
style={{
|
||||
backgroundColor: `${label?.color}20`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: `${label?.color}20`,
|
||||
backgroundColor: label?.color,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label?.color,
|
||||
}}
|
||||
/>
|
||||
{label.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2.5">
|
||||
{page.archived_at ? (
|
||||
<Tooltip
|
||||
tooltipContent={`Archived at ${render24HourFormatTime(page.archived_at)} on ${renderShortDate(
|
||||
page.archived_at
|
||||
)}`}
|
||||
>
|
||||
<p className="text-sm text-custom-text-200">{render24HourFormatTime(page.archived_at)}</p>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip
|
||||
tooltipContent={`Last updated at ${render24HourFormatTime(page.updated_at)} on ${renderShortDate(
|
||||
page.updated_at
|
||||
)}`}
|
||||
>
|
||||
<p className="text-sm text-custom-text-200">{render24HourFormatTime(page.updated_at)}</p>
|
||||
</Tooltip>
|
||||
)}
|
||||
{!page.archived_at && userCanEdit && (
|
||||
<Tooltip tooltipContent={`${page.is_favorite ? "Remove from favorites" : "Mark as favorite"}`}>
|
||||
{page.is_favorite ? (
|
||||
<button type="button" onClick={handleRemoveFromFavorites}>
|
||||
<Star className="h-3.5 w-3.5 text-orange-400 fill-orange-400" />
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" onClick={handleAddToFavorites}>
|
||||
<Star className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</Tooltip>
|
||||
)}
|
||||
{!page.archived_at && userCanEdit && (
|
||||
<Tooltip
|
||||
tooltipContent={`${
|
||||
page.access
|
||||
? "This page is only visible to you"
|
||||
: "This page can be viewed by anyone in the project"
|
||||
}`}
|
||||
>
|
||||
{page.access ? (
|
||||
<button type="button" onClick={handleMakePublic}>
|
||||
<Lock className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" onClick={handleMakePrivate}>
|
||||
<Globe2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</Tooltip>
|
||||
)}
|
||||
/>
|
||||
{label.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2.5">
|
||||
{page.archived_at ? (
|
||||
<Tooltip
|
||||
position="top-right"
|
||||
tooltipContent={`Created by ${
|
||||
projectMembers?.find((projectMember) => projectMember.member.id === page.created_by)?.member
|
||||
.display_name ?? ""
|
||||
} on ${renderLongDateFormat(`${page.created_at}`)}`}
|
||||
tooltipContent={`Archived at ${render24HourFormatTime(page.archived_at)} on ${renderShortDate(
|
||||
page.archived_at
|
||||
)}`}
|
||||
>
|
||||
<AlertCircle className="h-3.5 w-3.5" />
|
||||
<p className="text-sm text-custom-text-200">{render24HourFormatTime(page.archived_at)}</p>
|
||||
</Tooltip>
|
||||
{page.archived_at ? (
|
||||
<CustomMenu width="auto" placement="bottom-end" className="!-m-1" verticalEllipsis>
|
||||
{userCanEdit && (
|
||||
<>
|
||||
<CustomMenu.MenuItem onClick={handleRestorePage}>
|
||||
<div className="flex items-center gap-2">
|
||||
<ArchiveRestoreIcon className="h-3 w-3" />
|
||||
<span>Restore page</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={handleDeletePage}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
<span>Delete page</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={handleCopyUrl}>
|
||||
<div className="flex items-center gap-2">
|
||||
<LinkIcon className="h-3 w-3" />
|
||||
<span>Copy page link</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
) : (
|
||||
<CustomMenu width="auto" placement="bottom-end" className="!-m-1" verticalEllipsis>
|
||||
{userCanEdit && (
|
||||
<>
|
||||
<CustomMenu.MenuItem onClick={handleEditPage}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
<span>Edit page</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={handleArchivePage}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Archive className="h-3 w-3" />
|
||||
<span>Archive page</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={handleCopyUrl}>
|
||||
<div className="flex items-center gap-2">
|
||||
<LinkIcon className="h-3 w-3" />
|
||||
<span>Copy page link</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Tooltip
|
||||
tooltipContent={`Last updated at ${render24HourFormatTime(page.updated_at)} on ${renderShortDate(
|
||||
page.updated_at
|
||||
)}`}
|
||||
>
|
||||
<p className="text-sm text-custom-text-200">{render24HourFormatTime(page.updated_at)}</p>
|
||||
</Tooltip>
|
||||
)}
|
||||
{!page.archived_at && userCanEdit && (
|
||||
<Tooltip tooltipContent={`${page.is_favorite ? "Remove from favorites" : "Mark as favorite"}`}>
|
||||
{page.is_favorite ? (
|
||||
<button type="button" onClick={handleRemoveFromFavorites}>
|
||||
<Star className="h-3.5 w-3.5 text-orange-400 fill-orange-400" />
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" onClick={handleAddToFavorites}>
|
||||
<Star className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</Tooltip>
|
||||
)}
|
||||
{!page.archived_at && userCanEdit && (
|
||||
<Tooltip
|
||||
tooltipContent={`${
|
||||
page.access
|
||||
? "This page is only visible to you"
|
||||
: "This page can be viewed by anyone in the project"
|
||||
}`}
|
||||
>
|
||||
{page.access ? (
|
||||
<button type="button" onClick={handleMakePublic}>
|
||||
<Lock className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" onClick={handleMakePrivate}>
|
||||
<Globe2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip
|
||||
position="top-right"
|
||||
tooltipContent={`Created by ${
|
||||
projectMembers?.find((projectMember) => projectMember.member.id === page.created_by)?.member
|
||||
.display_name ?? ""
|
||||
} on ${renderLongDateFormat(`${page.created_at}`)}`}
|
||||
>
|
||||
<AlertCircle className="h-3.5 w-3.5" />
|
||||
</Tooltip>
|
||||
{page.archived_at ? (
|
||||
<CustomMenu width="auto" placement="bottom-end" className="!-m-1" verticalEllipsis>
|
||||
{userCanEdit && (
|
||||
<>
|
||||
<CustomMenu.MenuItem onClick={handleRestorePage}>
|
||||
<div className="flex items-center gap-2">
|
||||
<ArchiveRestoreIcon className="h-3 w-3" />
|
||||
<span>Restore page</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={handleDeletePage}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
<span>Delete page</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={handleCopyUrl}>
|
||||
<div className="flex items-center gap-2">
|
||||
<LinkIcon className="h-3 w-3" />
|
||||
<span>Copy page link</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
) : (
|
||||
<CustomMenu width="auto" placement="bottom-end" className="!-m-1" verticalEllipsis>
|
||||
{userCanEdit && (
|
||||
<>
|
||||
<CustomMenu.MenuItem onClick={handleEditPage}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
<span>Edit page</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={handleArchivePage}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Archive className="h-3 w-3" />
|
||||
<span>Archive page</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={handleCopyUrl}>
|
||||
<div className="flex items-center gap-2">
|
||||
<LinkIcon className="h-3 w-3" />
|
||||
<span>Copy page link</span>
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -21,7 +21,6 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = observer((props) => {
|
||||
fetchCurrentUser,
|
||||
fetchCurrentUserInstanceAdminStatus,
|
||||
fetchCurrentUserSettings,
|
||||
|
||||
},
|
||||
workspace: { fetchWorkspaces },
|
||||
} = useMobxStore();
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -102,18 +102,19 @@ 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}`}
|
||||
className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="flex-shrink-0 grid place-items-center h-5 w-5">
|
||||
<ChevronLeft className="h-5 w-5" strokeWidth={1} />
|
||||
</span>
|
||||
{!sidebarCollapsed && (
|
||||
<h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
|
||||
)}
|
||||
<Link href={`/${redirectWorkspaceSlug}`}>
|
||||
<div
|
||||
className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="flex-shrink-0 grid place-items-center h-5 w-5">
|
||||
<ChevronLeft className="h-5 w-5" strokeWidth={1} />
|
||||
</span>
|
||||
{!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 && (
|
||||
|
||||
@ -50,17 +50,15 @@ 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)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</div>
|
||||
</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)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -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,13 +93,16 @@ const HomePage: NextPageWithLayout = () => {
|
||||
new_password: formData.password,
|
||||
};
|
||||
|
||||
await authService.resetPassword(uidb64.toString(), token.toString(), payload).catch((err) =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: err?.error ?? "Something went wrong. Please try again.",
|
||||
})
|
||||
);
|
||||
await authService
|
||||
.resetPassword(uidb64.toString(), token.toString(), payload)
|
||||
.then(() => mutateUserInfo())
|
||||
.catch((err) =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: err?.error ?? "Something went wrong. Please try again.",
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -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,25 +188,21 @@ 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 ">
|
||||
<Image
|
||||
src={signInIssues}
|
||||
alt="Plane Issues"
|
||||
className={`flex object-cover rounded-md ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
<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={latestFeatures}
|
||||
alt="Plane Issues"
|
||||
className={`rounded-md h-full ml-8 -mt-2 ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
62
web/public/onboarding/onboarding-pages.svg
Normal file
62
web/public/onboarding/onboarding-pages.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 527 KiB |
@ -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);
|
||||
|
||||
@ -71,7 +71,7 @@ export class InstanceStore implements IInstanceStore {
|
||||
}
|
||||
|
||||
/**
|
||||
* fetch instace info from API
|
||||
* fetch instance info from API
|
||||
*/
|
||||
fetchInstanceInfo = async () => {
|
||||
try {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user