mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
Merge branch 'chore/auth-onboarding-improvement' of gurusainath:makeplane/plane into chore-admin-file-structure
This commit is contained in:
gurusainath
commit
e8711dc4cc
@ -180,7 +180,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
||||
)}
|
||||
</div>
|
||||
{!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && (
|
||||
<span className="text-sm text-red-500">Password doesn{"'"}t match</span>
|
||||
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -210,7 +210,7 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
|
||||
disabled={isButtonDisabled}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Updating..." : "Continue"}
|
||||
Continue
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
|
||||
@ -181,7 +181,7 @@ const ResetPasswordPage: NextPage = () => {
|
||||
)}
|
||||
</div>
|
||||
{!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && (
|
||||
<span className="text-sm text-red-500">Password doesn{"'"}t match</span>
|
||||
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -181,7 +181,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
|
||||
)}
|
||||
</div>
|
||||
{!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && (
|
||||
<span className="text-sm text-red-500">Password doesn{"'"}t match</span>
|
||||
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import Image from "next/image";
|
||||
// icons
|
||||
import { Sparkles } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
// types
|
||||
import { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types";
|
||||
// ui
|
||||
@ -12,7 +12,8 @@ import { Invitations, OnboardingHeader, SwitchOrDeleteAccountDropdown, CreateWor
|
||||
// hooks
|
||||
import { useUser } from "@/hooks/store";
|
||||
// assets
|
||||
import createJoinWorkspace from "public/onboarding/create-join-workspace.png";
|
||||
import CreateJoinWorkspaceDark from "public/onboarding/create-join-workspace-dark.svg";
|
||||
import CreateJoinWorkspace from "public/onboarding/create-join-workspace.svg";
|
||||
|
||||
export enum ECreateOrJoinWorkspaceViews {
|
||||
WORKSPACE_CREATE = "WORKSPACE_CREATE",
|
||||
@ -31,6 +32,8 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
|
||||
const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
|
||||
// store hooks
|
||||
const { data: user } = useUser();
|
||||
// hooks
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
if (invitations.length > 0) {
|
||||
@ -47,7 +50,7 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full">
|
||||
<div className="w-full lg:w-3/5 h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="flex items-center justify-between">
|
||||
<OnboardingHeader currentStep={2} totalSteps={totalSteps} />
|
||||
<div className="shrink-0 lg:hidden">
|
||||
@ -74,14 +77,14 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:block relative w-2/5 px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28 bg-onboarding-gradient-100">
|
||||
<div className="hidden lg:block relative w-2/5 h-screen overflow-hidden px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<SwitchOrDeleteAccountDropdown />
|
||||
<div className="absolute right-0 bottom-0 flex flex-col items-start justify-end w-2/3 ">
|
||||
<div className="flex gap-2 pb-1 pr-2 text-base text-custom-primary-300 font-medium self-end">
|
||||
<Sparkles className="h-6 w-6" />
|
||||
Workspace is the hub for all work happening in your company.
|
||||
</div>
|
||||
<Image src={createJoinWorkspace} alt="create-join-workspace" />
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? CreateJoinWorkspaceDark : CreateJoinWorkspace}
|
||||
className="h-screen w-auto float-end object-cover"
|
||||
alt="Profile setup"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -141,7 +141,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
|
||||
<div className="text-center space-y-1 py-4 mx-auto">
|
||||
<h3 className="text-3xl font-bold text-onboarding-text-100">Create a workspace</h3>
|
||||
<p className="font-medium text-onboarding-text-400">
|
||||
To start using plane, you need to create or join a workspace
|
||||
To start using Plane, you need to create or join a workspace.
|
||||
</p>
|
||||
</div>
|
||||
<form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
|
||||
@ -162,7 +162,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
|
||||
},
|
||||
}}
|
||||
render={({ field: { value, ref, onChange } }) => (
|
||||
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
|
||||
<div className="relative flex items-center rounded-md">
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
@ -176,7 +176,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
|
||||
placeholder="Enter workspace name..."
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.name)}
|
||||
className="w-full border-onboarding-border-100 text-base placeholder:text-base placeholder:text-custom-text-400/50"
|
||||
className="w-full border-onboarding-border-100 placeholder:text-custom-text-400"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@ -185,16 +185,16 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="slug">
|
||||
Workspace url
|
||||
Workspace URL
|
||||
</label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="slug"
|
||||
render={({ field: { value, ref, onChange } }) => (
|
||||
<div
|
||||
className={`relative flex items-center rounded-md border bg-onboarding-background-200 px-3 ${
|
||||
className={`relative flex items-center rounded-md border-[0.5px] px-3 ${
|
||||
invalidSlug ? "border-red-500" : "border-onboarding-border-100"
|
||||
} `}
|
||||
}`}
|
||||
>
|
||||
<span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
|
||||
<Input
|
||||
@ -213,7 +213,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<p className="text-sm text-onboarding-text-300">You can only edit the slug of the url</p>
|
||||
<p className="text-sm text-onboarding-text-300">You can only edit the slug of the URL</p>
|
||||
{slugError && <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>}
|
||||
{invalidSlug && (
|
||||
<span className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & alphanumeric characters.`}</span>
|
||||
@ -238,7 +238,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
|
||||
<span className="text-custom-text-400">Select organization size</span>
|
||||
)
|
||||
}
|
||||
buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
|
||||
buttonClassName="!border-[0.5px] !border-onboarding-border-100 !shadow-none !rounded-md"
|
||||
input
|
||||
optionsClassName="w-full"
|
||||
>
|
||||
|
||||
@ -4,7 +4,6 @@ export * from "./create-or-join-workspaces";
|
||||
export * from "./profile-setup";
|
||||
export * from "./create-workspace";
|
||||
export * from "./invitations";
|
||||
export * from "./onboarding-sidebar";
|
||||
export * from "./step-indicator";
|
||||
export * from "./switch-or-delete-account-dropdown";
|
||||
export * from "./switch-delete-account-modal";
|
||||
|
||||
@ -30,10 +30,8 @@ import useDynamicDropdownPosition from "@/hooks/use-dynamic-dropdown";
|
||||
// services
|
||||
import { WorkspaceService } from "@/services/workspace.service";
|
||||
// assets
|
||||
import userDark from "public/onboarding/user-dark.svg";
|
||||
import userLight from "public/onboarding/user-light.svg";
|
||||
import user1 from "public/users/user-1.png";
|
||||
import user2 from "public/users/user-2.png";
|
||||
import InviteMembersDark from "public/onboarding/invite-members-dark.svg";
|
||||
import InviteMembersLight from "public/onboarding/invite-members-light.svg";
|
||||
// components
|
||||
import { OnboardingHeader } from "./header";
|
||||
import { SwitchOrDeleteAccountDropdown } from "./switch-or-delete-account-dropdown";
|
||||
@ -136,7 +134,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="group relative grid grid-cols-10 gap-4">
|
||||
<div className="col-span-6 ml-8 rounded-md bg-onboarding-background-200">
|
||||
<div className="col-span-6 ml-8">
|
||||
<Controller
|
||||
control={control}
|
||||
name={`emails.${index}.email`}
|
||||
@ -164,7 +162,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4 mr-8 flex items-center rounded-md border border-onboarding-border-100 bg-onboarding-background-200">
|
||||
<div className="col-span-4 mr-8">
|
||||
<Controller
|
||||
control={control}
|
||||
name={`emails.${index}.role`}
|
||||
@ -184,10 +182,10 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
|
||||
type="button"
|
||||
ref={buttonRef}
|
||||
onClick={() => setIsDropdownOpen((prev) => !prev)}
|
||||
className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-xs duration-300"
|
||||
className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-sm border-[0.5px] border-onboarding-border-100"
|
||||
>
|
||||
<span
|
||||
className={`text-xs ${
|
||||
className={`text-sm ${
|
||||
!getValues(`emails.${index}.role_active`)
|
||||
? "text-onboarding-text-400"
|
||||
: "text-onboarding-text-100"
|
||||
@ -197,7 +195,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
|
||||
</span>
|
||||
|
||||
<ChevronDown
|
||||
className={`h-4 w-4 ${
|
||||
className={`size-3 ${
|
||||
!getValues(`emails.${index}.role_active`)
|
||||
? "stroke-onboarding-text-400"
|
||||
: "stroke-onboarding-text-100"
|
||||
@ -365,7 +363,7 @@ export const InviteMembers: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<div className="flex w-full h-full">
|
||||
<div className="w-full lg:w-3/5 h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Since this will always be the last step */}
|
||||
<OnboardingHeader currentStep={totalSteps} totalSteps={totalSteps} />
|
||||
@ -437,46 +435,14 @@ export const InviteMembers: React.FC<Props> = (props) => {
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:block w-2/5 px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28 bg-onboarding-gradient-100">
|
||||
<div className="hidden lg:block relative w-2/5 h-screen overflow-hidden px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<SwitchOrDeleteAccountDropdown />
|
||||
<div
|
||||
className={`fixed mt-16 ml-16 hidden h-fit w-1/5 rounded border-x border-t border-onboarding-border-300 border-opacity-10 bg-onboarding-gradient-300 p-4 pb-40 lg:block`}
|
||||
>
|
||||
<p className="text-base font-semibold text-onboarding-text-400">Members</p>
|
||||
|
||||
{Array.from({ length: 4 }).map((i, index) => (
|
||||
<div key={index} className="mt-6 flex items-center gap-2">
|
||||
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full">
|
||||
<Image src={resolvedTheme === "dark" ? userDark : userLight} alt="user" className="object-cover" />
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="my-2 h-2.5 w-1/2 rounded-md bg-onboarding-background-400" />
|
||||
<div className="h-2 w-1/3 rounded-md bg-onboarding-background-100" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="relative mt-20">
|
||||
<div className="absolute right-24 mt-1 flex w-full gap-x-2 rounded-full border border-onboarding-border-100 bg-onboarding-background-200 p-2 shadow-onboarding-shadow-sm">
|
||||
<div className="h-10 w-10 flex-shrink-0 rounded-full bg-custom-primary-10">
|
||||
<Image src={user2} alt="user" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Murphy cooper</p>
|
||||
<p className="text-sm text-onboarding-text-400">murphy@plane.so</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute right-12 mt-16 flex w-full gap-x-2 rounded-full border border-onboarding-border-100 bg-onboarding-background-200 p-2 shadow-onboarding-shadow-sm">
|
||||
<div className="h-10 w-10 flex-shrink-0 rounded-full bg-custom-primary-10">
|
||||
<Image src={user1} alt="user" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Else Thompson</p>
|
||||
<p className="text-sm text-onboarding-text-400">Elsa@plane.so</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? InviteMembersDark : InviteMembersLight}
|
||||
className="h-screen w-auto float-end object-cover"
|
||||
alt="Profile setup"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,291 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
import { Control, Controller, UseFormSetValue, UseFormWatch } from "react-hook-form";
|
||||
import {
|
||||
BarChart2,
|
||||
Bell,
|
||||
Briefcase,
|
||||
CheckCircle,
|
||||
ChevronDown,
|
||||
ContrastIcon,
|
||||
FileText,
|
||||
Home,
|
||||
LayersIcon,
|
||||
PenSquare,
|
||||
Search,
|
||||
Settings,
|
||||
} from "lucide-react";
|
||||
import { IWorkspace } from "@plane/types";
|
||||
import { Avatar, DiceIcon, PhotoFilterIcon } from "@plane/ui";
|
||||
// hooks
|
||||
import { useUser, useWorkspace } from "@/hooks/store";
|
||||
// types
|
||||
import projectEmoji from "public/emoji/project-emoji.svg";
|
||||
// assets
|
||||
|
||||
const workspaceLinks = [
|
||||
{
|
||||
Icon: Home,
|
||||
name: "Home",
|
||||
},
|
||||
{
|
||||
Icon: BarChart2,
|
||||
name: "Analytics",
|
||||
},
|
||||
{
|
||||
Icon: Briefcase,
|
||||
name: "Projects",
|
||||
},
|
||||
{
|
||||
Icon: CheckCircle,
|
||||
name: "All Issues",
|
||||
},
|
||||
{
|
||||
Icon: Bell,
|
||||
name: "Notifications",
|
||||
},
|
||||
];
|
||||
|
||||
const projectLinks = [
|
||||
{
|
||||
name: "Issues",
|
||||
Icon: LayersIcon,
|
||||
},
|
||||
{
|
||||
name: "Cycles",
|
||||
|
||||
Icon: ContrastIcon,
|
||||
},
|
||||
{
|
||||
name: "Modules",
|
||||
Icon: DiceIcon,
|
||||
},
|
||||
{
|
||||
name: "Views",
|
||||
|
||||
Icon: PhotoFilterIcon,
|
||||
},
|
||||
{
|
||||
name: "Pages",
|
||||
|
||||
Icon: FileText,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
|
||||
Icon: Settings,
|
||||
},
|
||||
];
|
||||
|
||||
type Props = {
|
||||
workspaceName: string;
|
||||
showProject: boolean;
|
||||
control?: Control<IWorkspace, any>;
|
||||
setValue?: UseFormSetValue<IWorkspace>;
|
||||
watch?: UseFormWatch<IWorkspace>;
|
||||
userFullName?: string;
|
||||
};
|
||||
|
||||
let timer: number = 0;
|
||||
let lastWorkspaceName: string = "";
|
||||
|
||||
export const OnboardingSidebar: React.FC<Props> = (props) => {
|
||||
const { workspaceName, showProject, control, setValue, watch, userFullName } = props;
|
||||
// store hooks
|
||||
const { data: currentUser } = useUser();
|
||||
const { workspaces } = useWorkspace();
|
||||
const workspaceDetails = Object.values(workspaces ?? {})?.[0];
|
||||
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const handleZoomWorkspace = (value: string) => {
|
||||
if (lastWorkspaceName === value) return;
|
||||
lastWorkspaceName = value;
|
||||
if (timer > 0) {
|
||||
timer += 2;
|
||||
timer = Math.min(timer, 2);
|
||||
} else {
|
||||
timer = 2;
|
||||
timer = Math.min(timer, 2);
|
||||
const interval = setInterval(() => {
|
||||
if (timer < 0) {
|
||||
setValue!("name", lastWorkspaceName);
|
||||
clearInterval(interval);
|
||||
}
|
||||
timer--;
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (watch) {
|
||||
watch("name");
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="relative h-full border-r border-onboarding-border-100 ">
|
||||
<div>
|
||||
{control && setValue ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name="name"
|
||||
render={({ field: { value } }) => {
|
||||
if (value.length > 0) {
|
||||
handleZoomWorkspace(value);
|
||||
} else {
|
||||
lastWorkspaceName = "";
|
||||
}
|
||||
return timer > 0 ? (
|
||||
<div
|
||||
className={`top-3 ml-6 mt-4 flex w-full max-w-screen-sm items-center border-[6px] bg-onboarding-background-200 transition-all ${
|
||||
resolvedTheme == "dark" ? "border-onboarding-background-100" : "border-custom-primary-20"
|
||||
} rounded-xl`}
|
||||
>
|
||||
<div className="w-full rounded-lg border border-onboarding-background-400 py-6 pl-4">
|
||||
<div
|
||||
className={`${
|
||||
resolvedTheme == "light" ? "bg-[#F5F5F5]" : "bg-[#363A40]"
|
||||
} flex w-full items-center p-1`}
|
||||
>
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={value.length > 0 ? value : "New Workspace"}
|
||||
src={""}
|
||||
size={30}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="black"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="ml-2 truncate text-xl font-medium text-onboarding-text-100">{value}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex w-full items-center gap-y-2 truncate border border-transparent px-4 pt-6 transition-all">
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={value.length > 0 ? value : workspaceDetails ? workspaceDetails.name : "New Workspace"}
|
||||
src={""}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="black"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
</div>
|
||||
<div className="mx-2 flex w-full flex-shrink items-center justify-between truncate">
|
||||
<h4 className="truncate text-base font-medium text-custom-text-100">{workspaceName}</h4>
|
||||
<ChevronDown className={`mx-1 h-4 w-4 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
|
||||
</div>
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={currentUser?.email}
|
||||
src={currentUser?.avatar || undefined}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="#FCBE1D"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex w-full items-center gap-y-2 truncate px-4 pt-6 transition-all">
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={workspaceDetails ? workspaceDetails.name : "New Workspace"}
|
||||
src={""}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="black"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
</div>
|
||||
<div className="mx-2 flex w-full flex-shrink items-center justify-between truncate">
|
||||
<h4 className="truncate text-base font-medium text-custom-text-100">{workspaceName}</h4>
|
||||
<ChevronDown className={`mx-1 h-4 w-4 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
|
||||
</div>
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={userFullName ?? currentUser?.email}
|
||||
src={currentUser?.avatar || undefined}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="#FCBE1D"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`space-y-1 p-4`}>
|
||||
<div className={`mb-3 mt-4 flex w-full items-center justify-between gap-2 px-1 `}>
|
||||
<div
|
||||
className={`group relative flex w-full items-center justify-between gap-1 rounded border border-onboarding-border-100 px-3 shadow-custom-shadow-2xs`}
|
||||
>
|
||||
<div className={`relative flex flex-shrink-0 flex-grow items-center gap-2 rounded py-1.5 outline-none`}>
|
||||
<PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
|
||||
{<span className="text-sm font-medium">New Issue</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`flex flex-shrink-0 items-center justify-center rounded border border-onboarding-border-100
|
||||
p-2 shadow-custom-shadow-2xs outline-none
|
||||
`}
|
||||
>
|
||||
<Search className="h-4 w-4 text-onboarding-text-200" />
|
||||
</div>
|
||||
</div>
|
||||
{workspaceLinks.map((link) => (
|
||||
<a className="block w-full" key={link.name}>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium text-onboarding-text-200
|
||||
outline-none focus:bg-custom-sidebar-background-80
|
||||
`}
|
||||
>
|
||||
{<link.Icon className="h-4 w-4" />}
|
||||
{link.name}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{showProject && (
|
||||
<div className="px-4 pt-4">
|
||||
<p className="pb-4 text-base font-semibold text-custom-text-300">Projects</p>
|
||||
|
||||
<div className="px-3">
|
||||
{" "}
|
||||
<div className="mb-3 flex w-4/5 items-center justify-between text-base font-medium text-custom-text-200">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Image src={projectEmoji} alt="Plane Logo" className="h-4 w-4" />
|
||||
<span> Plane</span>
|
||||
</div>
|
||||
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</div>
|
||||
{projectLinks.map((link) => (
|
||||
<a className="ml-6 block w-full" key={link.name}>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium text-custom-sidebar-text-200
|
||||
outline-none focus:bg-custom-sidebar-background-80
|
||||
`}
|
||||
>
|
||||
{<link.Icon className="h-4 w-4" />}
|
||||
{link.name}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { Eye, EyeOff, Sparkles } from "lucide-react";
|
||||
import { Eye, EyeOff } from "lucide-react";
|
||||
// types
|
||||
import { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
|
||||
// ui
|
||||
@ -21,7 +22,10 @@ import { useEventTracker, useUser, useUserProfile } from "@/hooks/store";
|
||||
import { AuthService } from "@/services/auth.service";
|
||||
import { FileService } from "@/services/file.service";
|
||||
// assets
|
||||
import profileSetup from "public/onboarding/profile-setup.png";
|
||||
import ProfileSetupDark from "public/onboarding/profile-setup-dark.svg";
|
||||
import ProfileSetupLight from "public/onboarding/profile-setup-light.svg";
|
||||
import UserPersonalizationDark from "public/onboarding/user-personalization-dark.svg";
|
||||
import UserPersonalizationLight from "public/onboarding/user-personalization-light.svg";
|
||||
|
||||
type TProfileSetupFormValues = {
|
||||
first_name: string;
|
||||
@ -29,6 +33,7 @@ type TProfileSetupFormValues = {
|
||||
avatar?: string | null;
|
||||
password?: string;
|
||||
confirm_password?: string;
|
||||
role?: string;
|
||||
use_case?: string;
|
||||
};
|
||||
|
||||
@ -38,6 +43,7 @@ const defaultValues: Partial<TProfileSetupFormValues> = {
|
||||
avatar: "",
|
||||
password: undefined,
|
||||
confirm_password: undefined,
|
||||
role: undefined,
|
||||
use_case: undefined,
|
||||
};
|
||||
|
||||
@ -48,15 +54,25 @@ type Props = {
|
||||
finishOnboarding: () => Promise<void>;
|
||||
};
|
||||
|
||||
const USE_CASES = [
|
||||
"Build Products",
|
||||
"Manage Feedbacks",
|
||||
"Service delivery",
|
||||
"Field force management",
|
||||
"Code Repository Integration",
|
||||
"Bug Tracking",
|
||||
"Test Case Management",
|
||||
"Resource allocation",
|
||||
enum EProfileSetupSteps {
|
||||
ALL = "ALL",
|
||||
USER_DETAILS = "USER_DETAILS",
|
||||
USER_PERSONALIZATION = "USER_PERSONALIZATION",
|
||||
}
|
||||
|
||||
const USER_ROLE = ["Individual contributor", "Senior Leader", "Manager", "Executive", "Freelancer", "Student"];
|
||||
|
||||
const USER_DOMAIN = [
|
||||
"Engineering",
|
||||
"Product",
|
||||
"Marketing",
|
||||
"Sales",
|
||||
"Operations",
|
||||
"Legal",
|
||||
"Finance",
|
||||
"Human Resources",
|
||||
"Project",
|
||||
"Other",
|
||||
];
|
||||
|
||||
const fileService = new FileService();
|
||||
@ -65,10 +81,15 @@ const authService = new AuthService();
|
||||
export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
const { user, totalSteps, stepChange, finishOnboarding } = props;
|
||||
// states
|
||||
const [profileSetupStep, setProfileSetupStep] = useState<EProfileSetupSteps>(
|
||||
user?.is_password_autoset ? EProfileSetupSteps.USER_DETAILS : EProfileSetupSteps.ALL
|
||||
);
|
||||
const [isRemoving, setIsRemoving] = useState(false);
|
||||
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
|
||||
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
// hooks
|
||||
const { resolvedTheme } = useTheme();
|
||||
// store hooks
|
||||
const { updateCurrentUser } = useUser();
|
||||
const { updateUserProfile } = useUserProfile();
|
||||
@ -91,37 +112,25 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
mode: "onChange",
|
||||
});
|
||||
|
||||
const handleUserDetailUpdate = async (data: Partial<IUser>) => {
|
||||
await updateCurrentUser(data);
|
||||
};
|
||||
|
||||
const handleUserProfileUpdate = async (data: Partial<TUserProfile>) => {
|
||||
await updateUserProfile(data);
|
||||
};
|
||||
|
||||
const handleSetPassword = async (password: string) => {
|
||||
const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
|
||||
await authService.setPassword(token, { password });
|
||||
};
|
||||
|
||||
const onSubmit = async (formData: TProfileSetupFormValues) => {
|
||||
if (!user) return;
|
||||
|
||||
const handleSubmitProfileSetup = async (formData: TProfileSetupFormValues) => {
|
||||
const userDetailsPayload: Partial<IUser> = {
|
||||
first_name: formData.first_name,
|
||||
last_name: formData.last_name,
|
||||
avatar: formData.avatar,
|
||||
};
|
||||
|
||||
const profileUpdatePayload: Partial<TUserProfile> = {
|
||||
use_case: formData.use_case,
|
||||
role: formData.role,
|
||||
};
|
||||
|
||||
try {
|
||||
await Promise.all([
|
||||
handleUserDetailUpdate(userDetailsPayload),
|
||||
handleUserProfileUpdate(profileUpdatePayload),
|
||||
formData.password ? handleSetPassword(formData.password) : Promise.resolve(),
|
||||
updateCurrentUser(userDetailsPayload),
|
||||
updateUserProfile(profileUpdatePayload),
|
||||
stepChange({ profile_complete: true }),
|
||||
]).then(() => {
|
||||
captureEvent(USER_DETAILS, {
|
||||
@ -133,7 +142,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
title: "Success",
|
||||
message: "Profile setup completed!",
|
||||
});
|
||||
if (totalSteps === 1) {
|
||||
// For Invited Users, they will skip all other steps and finish onboarding.
|
||||
if (totalSteps <= 2) {
|
||||
finishOnboarding();
|
||||
}
|
||||
});
|
||||
@ -150,6 +160,71 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmitUserDetail = async (formData: TProfileSetupFormValues) => {
|
||||
const userDetailsPayload: Partial<IUser> = {
|
||||
first_name: formData.first_name,
|
||||
last_name: formData.last_name,
|
||||
avatar: formData.avatar,
|
||||
};
|
||||
try {
|
||||
await Promise.all([
|
||||
updateCurrentUser(userDetailsPayload),
|
||||
formData.password ? handleSetPassword(formData.password) : Promise.resolve(),
|
||||
]).then(() => setProfileSetupStep(EProfileSetupSteps.USER_PERSONALIZATION));
|
||||
} catch {
|
||||
captureEvent(USER_DETAILS, {
|
||||
state: "FAILED",
|
||||
element: "Onboarding",
|
||||
});
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error",
|
||||
message: "User details update failed. Please try again!",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
|
||||
const profileUpdatePayload: Partial<TUserProfile> = {
|
||||
use_case: formData.use_case,
|
||||
role: formData.role,
|
||||
};
|
||||
try {
|
||||
await Promise.all([updateUserProfile(profileUpdatePayload), stepChange({ profile_complete: true })]).then(() => {
|
||||
captureEvent(USER_DETAILS, {
|
||||
state: "SUCCESS",
|
||||
element: "Onboarding",
|
||||
});
|
||||
setToast({
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
title: "Success",
|
||||
message: "Profile setup completed!",
|
||||
});
|
||||
// For Invited Users, they will skip all other steps and finish onboarding.
|
||||
if (totalSteps <= 2) {
|
||||
finishOnboarding();
|
||||
}
|
||||
});
|
||||
} catch {
|
||||
captureEvent(USER_DETAILS, {
|
||||
state: "FAILED",
|
||||
element: "Onboarding",
|
||||
});
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error",
|
||||
message: "Profile setup failed. Please try again!",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (formData: TProfileSetupFormValues) => {
|
||||
if (!user) return;
|
||||
if (profileSetupStep === EProfileSetupSteps.ALL) await handleSubmitProfileSetup(formData);
|
||||
if (profileSetupStep === EProfileSetupSteps.USER_DETAILS) await handleSubmitUserDetail(formData);
|
||||
if (profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION) await handleSubmitUserPersonalization(formData);
|
||||
};
|
||||
|
||||
const handleDelete = (url: string | null | undefined) => {
|
||||
if (!url) return;
|
||||
|
||||
@ -168,6 +243,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
const isValidPassword = (password: string, confirmPassword?: string) =>
|
||||
getPasswordStrength(password) >= 3 && password === confirmPassword;
|
||||
|
||||
// Check for all available fields validation and if password field is available, then checks for password validation (strength + confirmation).
|
||||
// Also handles the condition for optional password i.e if password field is optional it only checks for above validation if it's not empty.
|
||||
const isButtonDisabled = useMemo(
|
||||
() =>
|
||||
isValid &&
|
||||
@ -183,23 +260,33 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
[isValid, isPasswordAlreadySetup, isSignUpUsingMagicCode, password, confirmPassword]
|
||||
);
|
||||
|
||||
const isCurrentStepUserPersonalization = profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION;
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full">
|
||||
<div className="w-full lg:w-3/5 h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="flex items-center justify-between">
|
||||
<OnboardingHeader currentStep={1} totalSteps={totalSteps} />
|
||||
<OnboardingHeader currentStep={isCurrentStepUserPersonalization ? 2 : 1} totalSteps={totalSteps} />
|
||||
<div className="shrink-0 lg:hidden">
|
||||
<SwitchOrDeleteAccountDropdown fullName={`${watch("first_name")} ${watch("last_name")}`} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-full items-center justify-center p-8 mt-6">
|
||||
<div className="text-center space-y-1 py-4 mx-auto">
|
||||
<h3 className="text-3xl font-bold text-onboarding-text-100">Welcome to Plane!</h3>
|
||||
<h3 className="text-3xl font-bold text-onboarding-text-100">
|
||||
{isCurrentStepUserPersonalization
|
||||
? `Looking good${user?.first_name && `, ${user.first_name}`}!`
|
||||
: "Welcome to Plane!"}
|
||||
</h3>
|
||||
<p className="font-medium text-onboarding-text-400">
|
||||
Let’s setup your profile, tell us a bit about yourself.
|
||||
{isCurrentStepUserPersonalization
|
||||
? "Let’s personalize Plane for you."
|
||||
: "Let’s setup your profile, tell us a bit about yourself."}
|
||||
</p>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="w-full mx-auto mt-2 space-y-4 sm:w-96">
|
||||
{profileSetupStep !== EProfileSetupSteps.USER_PERSONALIZATION && (
|
||||
<>
|
||||
<Controller
|
||||
control={control}
|
||||
name="avatar"
|
||||
@ -242,7 +329,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
|
||||
First name
|
||||
@ -268,7 +355,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.first_name)}
|
||||
placeholder="RWilbur"
|
||||
className="w-full border-onboarding-border-100 focus:border-custom-primary-100"
|
||||
className="w-full border-onboarding-border-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@ -298,7 +385,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.last_name)}
|
||||
placeholder="Wright"
|
||||
className="w-full border-onboarding-border-100 focus:border-custom-primary-100"
|
||||
className="w-full border-onboarding-border-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@ -318,7 +405,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
required: isSignUpUsingMagicCode ? "Password is required" : false,
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
|
||||
<div className="relative flex items-center rounded-md">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
name="password"
|
||||
@ -327,7 +414,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.password)}
|
||||
placeholder="New password..."
|
||||
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
||||
className="w-full border-[0.5px] border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
|
||||
onFocus={() => setIsPasswordInputFocused(true)}
|
||||
onBlur={() => setIsPasswordInputFocused(false)}
|
||||
/>
|
||||
@ -358,10 +445,10 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
control={control}
|
||||
name="confirm_password"
|
||||
rules={{
|
||||
validate: (value) => value === password || "Password doesn't match",
|
||||
validate: (value) => value === password || "Passwords don't match",
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
|
||||
<div className="relative flex items-center rounded-md">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
name="confirm_password"
|
||||
@ -370,7 +457,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.password)}
|
||||
placeholder="Confirm password..."
|
||||
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
||||
className="w-full border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
|
||||
/>
|
||||
{showPassword ? (
|
||||
<EyeOff
|
||||
@ -391,9 +478,41 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{profileSetupStep !== EProfileSetupSteps.USER_DETAILS && (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="role">
|
||||
What role are you working on? Choose one.
|
||||
</label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="role"
|
||||
rules={{
|
||||
required: "This field is required",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
|
||||
{USER_ROLE.map((userRole) => (
|
||||
<div
|
||||
key={userRole}
|
||||
className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-onboarding-background-300/30 ${
|
||||
value === userRole ? "border-custom-primary-100" : "border-onboarding-border-100"
|
||||
} rounded px-3 py-1.5 text-sm font-medium`}
|
||||
onClick={() => onChange(userRole)}
|
||||
>
|
||||
{userRole}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
{errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="use_case">
|
||||
How will you use Plane? Choose one.
|
||||
What is your domain expertise? Choose one.
|
||||
</label>
|
||||
<Controller
|
||||
control={control}
|
||||
@ -403,15 +522,15 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
|
||||
{USE_CASES.map((useCase) => (
|
||||
{USER_DOMAIN.map((userDomain) => (
|
||||
<div
|
||||
key={useCase}
|
||||
key={userDomain}
|
||||
className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-onboarding-background-300/30 ${
|
||||
value === useCase ? "border-custom-primary-100" : "border-onboarding-border-100"
|
||||
value === userDomain ? "border-custom-primary-100" : "border-onboarding-border-100"
|
||||
} rounded px-3 py-1.5 text-sm font-medium`}
|
||||
onClick={() => onChange(useCase)}
|
||||
onClick={() => onChange(userDomain)}
|
||||
>
|
||||
{useCase}
|
||||
{userDomain}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -419,6 +538,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
/>
|
||||
{errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
variant="primary"
|
||||
type="submit"
|
||||
@ -427,19 +548,27 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
disabled={isButtonDisabled}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Updating..." : "Continue"}
|
||||
Continue
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:block relative w-2/5 px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28 bg-onboarding-gradient-100">
|
||||
<div className="hidden lg:block relative w-2/5 h-screen overflow-hidden px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<SwitchOrDeleteAccountDropdown fullName={`${watch("first_name")} ${watch("last_name")}`} />
|
||||
<div className="absolute right-0 bottom-0 flex flex-col items-start justify-end w-3/4 ">
|
||||
<div className="flex gap-2 pb-1 pr-2 text-base text-custom-primary-300 font-medium w-3/4 self-end">
|
||||
<Sparkles className="h-6 w-6" />
|
||||
Let your team assign, mention and discuss how your work is progressing.
|
||||
</div>
|
||||
<Image src={profileSetup} alt="profile-setup" />
|
||||
<div className="absolute inset-0 z-0">
|
||||
{profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION ? (
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? UserPersonalizationDark : UserPersonalizationLight}
|
||||
className="h-screen w-auto float-end object-cover"
|
||||
alt="User Personalization"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? ProfileSetupDark : ProfileSetupLight}
|
||||
className="h-screen w-auto float-end object-cover"
|
||||
alt="Profile setup"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@ export const SwitchOrDeleteAccountDropdown: FC<TSwithOrDeleteAccountDropdownProp
|
||||
return (
|
||||
<div className="flex w-full shrink-0 justify-end">
|
||||
<SwitchOrDeleteAccountModal isOpen={showDeleteAccountModal} onClose={() => setShowDeleteAccountModal(false)} />
|
||||
<div className="flex items-center gap-x-2 pr-4">
|
||||
<div className="flex items-center gap-x-2 pr-4 z-10">
|
||||
{user?.avatar && (
|
||||
<Avatar
|
||||
name={
|
||||
@ -42,7 +42,7 @@ export const SwitchOrDeleteAccountDropdown: FC<TSwithOrDeleteAccountDropdownProp
|
||||
)}
|
||||
<div>
|
||||
<Menu>
|
||||
<Menu.Button className={"flex items-center gap-x-1"}>
|
||||
<Menu.Button className={"flex items-center gap-x-1 z-10"}>
|
||||
<span className="text-sm font-medium">
|
||||
<p className="text-sm font-medium text-custom-text-200">
|
||||
{user?.first_name
|
||||
|
||||
@ -5,7 +5,7 @@ import { ChevronDown, ListFilter } from "lucide-react";
|
||||
// types
|
||||
import { TProjectFilters } from "@plane/types";
|
||||
// hooks
|
||||
import { useApplication, useMember, useProjectFilter } from "@/hooks/store";
|
||||
import { useAppRouter, useMember, useProjectFilter } from "@/hooks/store";
|
||||
// components
|
||||
import { FiltersDropdown } from "../issues";
|
||||
import { ProjectFiltersSelection, ProjectOrderByDropdown } from "./dropdowns";
|
||||
@ -18,9 +18,7 @@ const ProjectsMobileHeader = observer(() => {
|
||||
updateFilters,
|
||||
} = useProjectFilter();
|
||||
|
||||
const {
|
||||
router: { workspaceSlug },
|
||||
} = useApplication();
|
||||
const { workspaceSlug } = useAppRouter();
|
||||
|
||||
const {
|
||||
workspace: { workspaceMemberIds },
|
||||
|
||||
@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
|
||||
// layout
|
||||
import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
|
||||
import { PreferencesMobileHeader } from "@/components/profile/preferences/preferences-mobile-header";
|
||||
import { useApplication } from "@/hooks/store";
|
||||
import { useAppTheme } from "@/hooks/store";
|
||||
import { ProfileSettingsLayout } from "@/layouts/settings-layout";
|
||||
// local components
|
||||
import { ProfilePreferenceSettingsSidebar } from "./sidebar";
|
||||
@ -14,13 +14,13 @@ interface IProfilePreferenceSettingsLayout {
|
||||
|
||||
export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => {
|
||||
const { children, header } = props;
|
||||
const { theme: themeStore } = useApplication();
|
||||
const { toggleSidebar } = useAppTheme();
|
||||
|
||||
return (
|
||||
<ProfileSettingsLayout
|
||||
header={
|
||||
<div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
|
||||
<SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
|
||||
<SidebarHamburgerToggle onClick={toggleSidebar} />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
||||
@ -195,7 +195,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
|
||||
)}
|
||||
</div>
|
||||
{!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && (
|
||||
<span className="text-sm text-red-500">Password doesn{"'"}t match</span>
|
||||
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@ -216,5 +216,3 @@ ResetPasswordPage.getLayout = function getLayout(page: ReactElement) {
|
||||
};
|
||||
|
||||
export default ResetPasswordPage;
|
||||
|
||||
|
||||
|
||||
@ -211,7 +211,7 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
|
||||
</div>
|
||||
{!!passwordFormData.confirm_password &&
|
||||
passwordFormData.password !== passwordFormData.confirm_password && (
|
||||
<span className="text-sm text-red-500">Password doesn{"'"}t match</span>
|
||||
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -91,8 +91,16 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (workspacesList && workspacesList?.length > 0) setTotalSteps(1);
|
||||
// If user is already invited to a workspace, only show profile setup steps.
|
||||
if (workspacesList && workspacesList?.length > 0) {
|
||||
// If password is auto set then show two different steps for profile setup, else merge them.
|
||||
if (user?.is_password_autoset) setTotalSteps(2);
|
||||
else setTotalSteps(1);
|
||||
} else {
|
||||
// If password is auto set then total steps will increase to 4 due to extra step at profile setup stage.
|
||||
if (user?.is_password_autoset) setTotalSteps(4);
|
||||
else setTotalSteps(3);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
@ -122,7 +130,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
}
|
||||
|
||||
// For Invited Users, they will skip all other steps.
|
||||
if (totalSteps && totalSteps === 1) return;
|
||||
if (totalSteps && totalSteps <= 2) return;
|
||||
|
||||
if (onboardingStep.profile_complete && !(onboardingStep.workspace_join || onboardingStep.workspace_create)) {
|
||||
setStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
|
||||
@ -143,7 +151,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
return (
|
||||
<>
|
||||
<PageHead title="Onboarding" />
|
||||
{user && totalSteps && step !== null ? (
|
||||
{user && totalSteps && step !== null && invitations ? (
|
||||
<div className={`flex h-full w-full flex-col`}>
|
||||
{step === EOnboardingSteps.PROFILE_SETUP ? (
|
||||
<ProfileSetup
|
||||
@ -152,7 +160,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
stepChange={stepChange}
|
||||
finishOnboarding={finishOnboarding}
|
||||
/>
|
||||
) : step === EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN && invitations ? (
|
||||
) : step === EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN ? (
|
||||
<CreateOrJoinWorkspaces invitations={invitations} totalSteps={totalSteps} stepChange={stepChange} />
|
||||
) : step === EOnboardingSteps.WORKSPACE_INVITE ? (
|
||||
<InviteMembers
|
||||
|
||||
278
web/public/onboarding/create-join-workspace-dark.svg
Normal file
278
web/public/onboarding/create-join-workspace-dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 458 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
331
web/public/onboarding/create-join-workspace.svg
Normal file
331
web/public/onboarding/create-join-workspace.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 464 KiB |
224
web/public/onboarding/invite-members-dark.svg
Normal file
224
web/public/onboarding/invite-members-dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 284 KiB |
240
web/public/onboarding/invite-members-light.svg
Normal file
240
web/public/onboarding/invite-members-light.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 285 KiB |
381
web/public/onboarding/profile-setup-dark.svg
Normal file
381
web/public/onboarding/profile-setup-dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 949 KiB |
395
web/public/onboarding/profile-setup-light.svg
Normal file
395
web/public/onboarding/profile-setup-light.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 948 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
@ -1,14 +0,0 @@
|
||||
<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_422_19191)">
|
||||
<rect width="30" height="29" rx="14.5" fill="#5B6069"/>
|
||||
<path d="M24.6255 24.1658C24.6255 21.8239 23.4282 19.578 21.6591 17.9221C19.8899 16.2662 17.4904 15.3359 14.9884 15.3359C12.4864 15.3359 10.0869 16.2662 8.31776 17.9221C6.5486 19.578 5.55469 21.8239 5.55469 24.1658" fill="#43484F"/>
|
||||
<path d="M24.6255 24.1658C24.6255 21.8239 23.4282 19.578 21.6591 17.9221C19.8899 16.2662 17.4904 15.3359 14.9884 15.3359C12.4864 15.3359 10.0869 16.2662 8.31776 17.9221C6.5486 19.578 5.55469 21.8239 5.55469 24.1658C6.80126 28.8931 22.7194 29.9478 24.6255 24.1658Z" stroke="#43484F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24.5002 23.2546C24.799 24.4372 23.5063 25.9588 21.7371 26.9349C19.9679 27.911 17.8578 28.3064 15.3558 28.3064C12.8538 28.3064 10.4543 27.758 8.68516 26.7819C6.85637 26.0934 5.00781 24.3616 5.92208 23.1016L15.3558 23.1016L24.5002 23.2546Z" fill="#43484F"/>
|
||||
<path d="M15.0029 14.9375C18.1095 14.9375 20.6279 12.4191 20.6279 9.3125C20.6279 6.2059 18.1095 3.6875 15.0029 3.6875C11.8963 3.6875 9.37793 6.2059 9.37793 9.3125C9.37793 12.4191 11.8963 14.9375 15.0029 14.9375Z" fill="#43484F"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_422_19191">
|
||||
<rect width="30" height="29" rx="14.5" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,14 +0,0 @@
|
||||
<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_11_12473)">
|
||||
<rect width="30" height="29" rx="14.5" fill="#ECF1FF"/>
|
||||
<path d="M24.6255 24.1658C24.6255 21.8239 23.4282 19.578 21.6591 17.9221C19.8899 16.2662 17.4904 15.3359 14.9884 15.3359C12.4864 15.3359 10.0869 16.2662 8.31776 17.9221C6.5486 19.578 5.55469 21.8239 5.55469 24.1658" fill="#C2D0F2"/>
|
||||
<path d="M24.6255 24.1658C24.6255 21.8239 23.4282 19.578 21.6591 17.9221C19.8899 16.2662 17.4904 15.3359 14.9884 15.3359C12.4864 15.3359 10.0869 16.2662 8.31776 17.9221C6.5486 19.578 5.55469 21.8239 5.55469 24.1658C6.80126 28.8931 22.7194 29.9478 24.6255 24.1658Z" stroke="#C2D0F2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24.5002 23.2546C24.799 24.4372 23.5063 25.9588 21.7371 26.9349C19.9679 27.911 17.8578 28.3064 15.3558 28.3064C12.8538 28.3064 10.4543 27.758 8.68516 26.7819C6.85637 26.0934 5.00781 24.3616 5.92208 23.1016L15.3558 23.1016L24.5002 23.2546Z" fill="#C2D0F2"/>
|
||||
<path d="M15.0029 14.9375C18.1095 14.9375 20.6279 12.4191 20.6279 9.3125C20.6279 6.2059 18.1095 3.6875 15.0029 3.6875C11.8963 3.6875 9.37793 6.2059 9.37793 9.3125C9.37793 12.4191 11.8963 14.9375 15.0029 14.9375Z" fill="#CAD9FF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_11_12473">
|
||||
<rect width="30" height="29" rx="14.5" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
179
web/public/onboarding/user-personalization-dark.svg
Normal file
179
web/public/onboarding/user-personalization-dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 209 KiB |
162
web/public/onboarding/user-personalization-light.svg
Normal file
162
web/public/onboarding/user-personalization-light.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 169 KiB |
Loading…
Reference in New Issue
Block a user