github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'chore/auth-onboarding-improvement' of gurusainath:makeplane/plane into chore-admin-file-structure

Browse Source
This commit is contained in:
gurusainath 2024-04-30 17:05:06 +05:30
commit e8711dc4cc
28 changed files with 2631 additions and 659 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
space/components/accounts/auth-forms/password.tsx
View File

@ -180,7 +180,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
)} )}
</div> </div>
{!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && ( {!!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> </div>
)} )}

2
space/components/accounts/onboarding-form.tsx
View File

@ -210,7 +210,7 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
disabled={isButtonDisabled} disabled={isButtonDisabled}
loading={isSubmitting} loading={isSubmitting}
> >
{isSubmitting ? "Updating..." : "Continue"} Continue
</Button> </Button>
</form> </form>
); );

2
space/pages/accounts/reset-password.tsx
View File

@ -181,7 +181,7 @@ const ResetPasswordPage: NextPage = () => {
)} )}
</div> </div>
{!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && ( {!!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> </div>
)} )}

2
web/components/account/auth-forms/password.tsx
View File

@ -181,7 +181,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
)} )}
</div> </div>
{!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && ( {!!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> </div>
)} )}

23
web/components/onboarding/create-or-join-workspaces.tsx
View File

@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import Image from "next/image"; import Image from "next/image";
// icons // icons
import { Sparkles } from "lucide-react"; import { useTheme } from "next-themes";
// types // types
import { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types"; import { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types";
// ui // ui
@ -12,7 +12,8 @@ import { Invitations, OnboardingHeader, SwitchOrDeleteAccountDropdown, CreateWor
// hooks // hooks
import { useUser } from "@/hooks/store"; import { useUser } from "@/hooks/store";
// assets // 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 { export enum ECreateOrJoinWorkspaceViews {
WORKSPACE_CREATE = "WORKSPACE_CREATE", WORKSPACE_CREATE = "WORKSPACE_CREATE",
@ -31,6 +32,8 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null); const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
// store hooks // store hooks
const { data: user } = useUser(); const { data: user } = useUser();
// hooks
const { resolvedTheme } = useTheme();
useEffect(() => { useEffect(() => {
if (invitations.length > 0) { if (invitations.length > 0) {
@ -47,7 +50,7 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
return ( return (
<div className="flex h-full w-full"> <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"> <div className="flex items-center justify-between">
<OnboardingHeader currentStep={2} totalSteps={totalSteps} /> <OnboardingHeader currentStep={2} totalSteps={totalSteps} />
<div className="shrink-0 lg:hidden"> <div className="shrink-0 lg:hidden">
@ -74,14 +77,14 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
)} )}
</div> </div>
</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 /> <SwitchOrDeleteAccountDropdown />
<div className="absolute right-0 bottom-0 flex flex-col items-start justify-end w-2/3 "> <div className="absolute inset-0 z-0">
<div className="flex gap-2 pb-1 pr-2 text-base text-custom-primary-300 font-medium self-end"> <Image
<Sparkles className="h-6 w-6" /> src={resolvedTheme === "dark" ? CreateJoinWorkspaceDark : CreateJoinWorkspace}
Workspace is the hub for all work happening in your company. className="h-screen w-auto float-end object-cover"
</div> alt="Profile setup"
<Image src={createJoinWorkspace} alt="create-join-workspace" /> />
</div> </div>
</div> </div>
</div> </div>

16
web/components/onboarding/create-workspace.tsx
View File

@ -141,7 +141,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
<div className="text-center space-y-1 py-4 mx-auto"> <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> <h3 className="text-3xl font-bold text-onboarding-text-100">Create a workspace</h3>
<p className="font-medium text-onboarding-text-400"> <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> </p>
</div> </div>
<form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}> <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 } }) => ( 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 <Input
id="name" id="name"
name="name" name="name"
@ -176,7 +176,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
placeholder="Enter workspace name..." placeholder="Enter workspace name..."
ref={ref} ref={ref}
hasError={Boolean(errors.name)} 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> </div>
)} )}
@ -185,16 +185,16 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="slug"> <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="slug">
Workspace url Workspace URL
</label> </label>
<Controller <Controller
control={control} control={control}
name="slug" name="slug"
render={({ field: { value, ref, onChange } }) => ( render={({ field: { value, ref, onChange } }) => (
<div <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" invalidSlug ? "border-red-500" : "border-onboarding-border-100"
} `} }`}
> >
<span className="whitespace-nowrap text-sm">{window && window.location.host}/</span> <span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
<Input <Input
@ -213,7 +213,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
</div> </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>} {slugError && <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>}
{invalidSlug && ( {invalidSlug && (
<span className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & alphanumeric characters.`}</span> <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> <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 input
optionsClassName="w-full" optionsClassName="w-full"
> >

1
web/components/onboarding/index.ts
View File

@ -4,7 +4,6 @@ export * from "./create-or-join-workspaces";
export * from "./profile-setup"; export * from "./profile-setup";
export * from "./create-workspace"; export * from "./create-workspace";
export * from "./invitations"; export * from "./invitations";
export * from "./onboarding-sidebar";
export * from "./step-indicator"; export * from "./step-indicator";
export * from "./switch-or-delete-account-dropdown"; export * from "./switch-or-delete-account-dropdown";
export * from "./switch-delete-account-modal"; export * from "./switch-delete-account-modal";

64
web/components/onboarding/invite-members.tsx
View File

@ -30,10 +30,8 @@ import useDynamicDropdownPosition from "@/hooks/use-dynamic-dropdown";
// services // services
import { WorkspaceService } from "@/services/workspace.service"; import { WorkspaceService } from "@/services/workspace.service";
// assets // assets
import userDark from "public/onboarding/user-dark.svg"; import InviteMembersDark from "public/onboarding/invite-members-dark.svg";
import userLight from "public/onboarding/user-light.svg"; import InviteMembersLight from "public/onboarding/invite-members-light.svg";
import user1 from "public/users/user-1.png";
import user2 from "public/users/user-2.png";
// components // components
import { OnboardingHeader } from "./header"; import { OnboardingHeader } from "./header";
import { SwitchOrDeleteAccountDropdown } from "./switch-or-delete-account-dropdown"; import { SwitchOrDeleteAccountDropdown } from "./switch-or-delete-account-dropdown";
@ -136,7 +134,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
return ( return (
<div> <div>
<div className="group relative grid grid-cols-10 gap-4"> <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 <Controller
control={control} control={control}
name={`emails.${index}.email`} name={`emails.${index}.email`}
@ -164,7 +162,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
)} )}
/> />
</div> </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 <Controller
control={control} control={control}
name={`emails.${index}.role`} name={`emails.${index}.role`}
@ -184,10 +182,10 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
type="button" type="button"
ref={buttonRef} ref={buttonRef}
onClick={() => setIsDropdownOpen((prev) => !prev)} 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 <span
className={`text-xs ${ className={`text-sm ${
!getValues(`emails.${index}.role_active`) !getValues(`emails.${index}.role_active`)
? "text-onboarding-text-400" ? "text-onboarding-text-400"
: "text-onboarding-text-100" : "text-onboarding-text-100"
@ -197,7 +195,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
</span> </span>
<ChevronDown <ChevronDown
className={`h-4 w-4 ${ className={`size-3 ${
!getValues(`emails.${index}.role_active`) !getValues(`emails.${index}.role_active`)
? "stroke-onboarding-text-400" ? "stroke-onboarding-text-400"
: "stroke-onboarding-text-100" : "stroke-onboarding-text-100"
@ -365,7 +363,7 @@ export const InviteMembers: React.FC<Props> = (props) => {
return ( return (
<div className="flex w-full h-full"> <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"> <div className="flex items-center justify-between">
{/* Since this will always be the last step */} {/* Since this will always be the last step */}
<OnboardingHeader currentStep={totalSteps} totalSteps={totalSteps} /> <OnboardingHeader currentStep={totalSteps} totalSteps={totalSteps} />
@ -437,46 +435,14 @@ export const InviteMembers: React.FC<Props> = (props) => {
</form> </form>
</div> </div>
</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 /> <SwitchOrDeleteAccountDropdown />
<div <div className="absolute inset-0 z-0">
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`} <Image
> src={resolvedTheme === "dark" ? InviteMembersDark : InviteMembersLight}
<p className="text-base font-semibold text-onboarding-text-400">Members</p> className="h-screen w-auto float-end object-cover"
alt="Profile setup"
{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> </div>
</div> </div>
</div> </div>

291
web/components/onboarding/onboarding-sidebar.tsx
View File

@ -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>
);
};

237
web/components/onboarding/profile-setup.tsx
View File

@ -1,8 +1,9 @@
import React, { useMemo, useState } from "react"; import React, { useMemo, useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import Image from "next/image"; import Image from "next/image";
import { useTheme } from "next-themes";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { Eye, EyeOff, Sparkles } from "lucide-react"; import { Eye, EyeOff } from "lucide-react";
// types // types
import { IUser, TUserProfile, TOnboardingSteps } from "@plane/types"; import { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
// ui // ui
@ -21,7 +22,10 @@ import { useEventTracker, useUser, useUserProfile } from "@/hooks/store";
import { AuthService } from "@/services/auth.service"; import { AuthService } from "@/services/auth.service";
import { FileService } from "@/services/file.service"; import { FileService } from "@/services/file.service";
// assets // 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 = { type TProfileSetupFormValues = {
first_name: string; first_name: string;
@ -29,6 +33,7 @@ type TProfileSetupFormValues = {
avatar?: string | null; avatar?: string | null;
password?: string; password?: string;
confirm_password?: string; confirm_password?: string;
role?: string;
use_case?: string; use_case?: string;
}; };
@ -38,6 +43,7 @@ const defaultValues: Partial<TProfileSetupFormValues> = {
avatar: "", avatar: "",
password: undefined, password: undefined,
confirm_password: undefined, confirm_password: undefined,
role: undefined,
use_case: undefined, use_case: undefined,
}; };
@ -48,15 +54,25 @@ type Props = {
finishOnboarding: () => Promise<void>; finishOnboarding: () => Promise<void>;
}; };
const USE_CASES = [ enum EProfileSetupSteps {
"Build Products", ALL = "ALL",
"Manage Feedbacks", USER_DETAILS = "USER_DETAILS",
"Service delivery", USER_PERSONALIZATION = "USER_PERSONALIZATION",
"Field force management", }
"Code Repository Integration",
"Bug Tracking", const USER_ROLE = ["Individual contributor", "Senior Leader", "Manager", "Executive", "Freelancer", "Student"];
"Test Case Management",
"Resource allocation", const USER_DOMAIN = [
"Engineering",
"Product",
"Marketing",
"Sales",
"Operations",
"Legal",
"Finance",
"Human Resources",
"Project",
"Other",
]; ];
const fileService = new FileService(); const fileService = new FileService();
@ -65,10 +81,15 @@ const authService = new AuthService();
export const ProfileSetup: React.FC<Props> = observer((props) => { export const ProfileSetup: React.FC<Props> = observer((props) => {
const { user, totalSteps, stepChange, finishOnboarding } = props; const { user, totalSteps, stepChange, finishOnboarding } = props;
// states // states
const [profileSetupStep, setProfileSetupStep] = useState<EProfileSetupSteps>(
user?.is_password_autoset ? EProfileSetupSteps.USER_DETAILS : EProfileSetupSteps.ALL
);
const [isRemoving, setIsRemoving] = useState(false); const [isRemoving, setIsRemoving] = useState(false);
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false); const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false); const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
// hooks
const { resolvedTheme } = useTheme();
// store hooks // store hooks
const { updateCurrentUser } = useUser(); const { updateCurrentUser } = useUser();
const { updateUserProfile } = useUserProfile(); const { updateUserProfile } = useUserProfile();
@ -91,37 +112,25 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
mode: "onChange", 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 handleSetPassword = async (password: string) => {
const token = await authService.requestCSRFToken().then((data) => data?.csrf_token); const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
await authService.setPassword(token, { password }); await authService.setPassword(token, { password });
}; };
const onSubmit = async (formData: TProfileSetupFormValues) => { const handleSubmitProfileSetup = async (formData: TProfileSetupFormValues) => {
if (!user) return;
const userDetailsPayload: Partial<IUser> = { const userDetailsPayload: Partial<IUser> = {
first_name: formData.first_name, first_name: formData.first_name,
last_name: formData.last_name, last_name: formData.last_name,
avatar: formData.avatar, avatar: formData.avatar,
}; };
const profileUpdatePayload: Partial<TUserProfile> = { const profileUpdatePayload: Partial<TUserProfile> = {
use_case: formData.use_case, use_case: formData.use_case,
role: formData.role,
}; };
try { try {
await Promise.all([ await Promise.all([
handleUserDetailUpdate(userDetailsPayload), updateCurrentUser(userDetailsPayload),
handleUserProfileUpdate(profileUpdatePayload), updateUserProfile(profileUpdatePayload),
formData.password ? handleSetPassword(formData.password) : Promise.resolve(),
stepChange({ profile_complete: true }), stepChange({ profile_complete: true }),
]).then(() => { ]).then(() => {
captureEvent(USER_DETAILS, { captureEvent(USER_DETAILS, {
@ -133,7 +142,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
title: "Success", title: "Success",
message: "Profile setup completed!", message: "Profile setup completed!",
}); });
if (totalSteps === 1) { // For Invited Users, they will skip all other steps and finish onboarding.
if (totalSteps <= 2) {
finishOnboarding(); 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) => { const handleDelete = (url: string | null | undefined) => {
if (!url) return; if (!url) return;
@ -168,6 +243,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
const isValidPassword = (password: string, confirmPassword?: string) => const isValidPassword = (password: string, confirmPassword?: string) =>
getPasswordStrength(password) >= 3 && password === confirmPassword; 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( const isButtonDisabled = useMemo(
() => () =>
isValid && isValid &&
@ -183,23 +260,33 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
[isValid, isPasswordAlreadySetup, isSignUpUsingMagicCode, password, confirmPassword] [isValid, isPasswordAlreadySetup, isSignUpUsingMagicCode, password, confirmPassword]
); );
const isCurrentStepUserPersonalization = profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION;
return ( return (
<div className="flex h-full w-full"> <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"> <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"> <div className="shrink-0 lg:hidden">
<SwitchOrDeleteAccountDropdown fullName={`${watch("first_name")} ${watch("last_name")}`} /> <SwitchOrDeleteAccountDropdown fullName={`${watch("first_name")} ${watch("last_name")}`} />
</div> </div>
</div> </div>
<div className="flex flex-col w-full items-center justify-center p-8 mt-6"> <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"> <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"> <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> </p>
</div> </div>
<form onSubmit={handleSubmit(onSubmit)} className="w-full mx-auto mt-2 space-y-4 sm:w-96"> <form onSubmit={handleSubmit(onSubmit)} className="w-full mx-auto mt-2 space-y-4 sm:w-96">
{profileSetupStep !== EProfileSetupSteps.USER_PERSONALIZATION && (
<>
<Controller <Controller
control={control} control={control}
name="avatar" name="avatar"
@ -242,7 +329,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
)} )}
</button> </button>
</div> </div>
<div className="flex gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="space-y-1"> <div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name"> <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
First name First name
@ -268,7 +355,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
ref={ref} ref={ref}
hasError={Boolean(errors.first_name)} hasError={Boolean(errors.first_name)}
placeholder="RWilbur" 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} ref={ref}
hasError={Boolean(errors.last_name)} hasError={Boolean(errors.last_name)}
placeholder="Wright" 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, required: isSignUpUsingMagicCode ? "Password is required" : false,
}} }}
render={({ field: { value, onChange, ref } }) => ( 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 <Input
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
name="password" name="password"
@ -327,7 +414,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
ref={ref} ref={ref}
hasError={Boolean(errors.password)} hasError={Boolean(errors.password)}
placeholder="New 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)} onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)} onBlur={() => setIsPasswordInputFocused(false)}
/> />
@ -358,10 +445,10 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
control={control} control={control}
name="confirm_password" name="confirm_password"
rules={{ rules={{
validate: (value) => value === password || "Password doesn't match", validate: (value) => value === password || "Passwords don't match",
}} }}
render={({ field: { value, onChange, ref } }) => ( 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 <Input
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
name="confirm_password" name="confirm_password"
@ -370,7 +457,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
ref={ref} ref={ref}
hasError={Boolean(errors.password)} hasError={Boolean(errors.password)}
placeholder="Confirm 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 ? ( {showPassword ? (
<EyeOff <EyeOff
@ -391,9 +478,41 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
)} )}
</div> </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"> <div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="use_case"> <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> </label>
<Controller <Controller
control={control} control={control}
@ -403,15 +522,15 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
}} }}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<div className="flex flex-wrap gap-2 py-2 overflow-auto break-all"> <div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
{USE_CASES.map((useCase) => ( {USER_DOMAIN.map((userDomain) => (
<div <div
key={useCase} key={userDomain}
className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-onboarding-background-300/30 ${ 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`} } rounded px-3 py-1.5 text-sm font-medium`}
onClick={() => onChange(useCase)} onClick={() => onChange(userDomain)}
> >
{useCase} {userDomain}
</div> </div>
))} ))}
</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>} {errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
</div> </div>
</>
)}
<Button <Button
variant="primary" variant="primary"
type="submit" type="submit"
@ -427,19 +548,27 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
disabled={isButtonDisabled} disabled={isButtonDisabled}
loading={isSubmitting} loading={isSubmitting}
> >
{isSubmitting ? "Updating..." : "Continue"} Continue
</Button> </Button>
</form> </form>
</div> </div>
</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")}`} /> <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="absolute inset-0 z-0">
<div className="flex gap-2 pb-1 pr-2 text-base text-custom-primary-300 font-medium w-3/4 self-end"> {profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION ? (
<Sparkles className="h-6 w-6" /> <Image
Let your team assign, mention and discuss how your work is progressing. src={resolvedTheme === "dark" ? UserPersonalizationDark : UserPersonalizationLight}
</div> className="h-screen w-auto float-end object-cover"
<Image src={profileSetup} alt="profile-setup" /> alt="User Personalization"
/>
) : (
<Image
src={resolvedTheme === "dark" ? ProfileSetupDark : ProfileSetupLight}
className="h-screen w-auto float-end object-cover"
alt="Profile setup"
/>
)}
</div> </div>
</div> </div>
</div> </div>

4
web/components/onboarding/switch-or-delete-account-dropdown.tsx
View File

@ -23,7 +23,7 @@ export const SwitchOrDeleteAccountDropdown: FC<TSwithOrDeleteAccountDropdownProp
return ( return (
<div className="flex w-full shrink-0 justify-end"> <div className="flex w-full shrink-0 justify-end">
<SwitchOrDeleteAccountModal isOpen={showDeleteAccountModal} onClose={() => setShowDeleteAccountModal(false)} /> <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 && ( {user?.avatar && (
<Avatar <Avatar
name={ name={
@ -42,7 +42,7 @@ export const SwitchOrDeleteAccountDropdown: FC<TSwithOrDeleteAccountDropdownProp
)} )}
<div> <div>
<Menu> <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"> <span className="text-sm font-medium">
<p className="text-sm font-medium text-custom-text-200"> <p className="text-sm font-medium text-custom-text-200">
{user?.first_name {user?.first_name

6
web/components/project/projects-mobile-header.tsx
View File

@ -5,7 +5,7 @@ import { ChevronDown, ListFilter } from "lucide-react";
// types // types
import { TProjectFilters } from "@plane/types"; import { TProjectFilters } from "@plane/types";
// hooks // hooks
import { useApplication, useMember, useProjectFilter } from "@/hooks/store"; import { useAppRouter, useMember, useProjectFilter } from "@/hooks/store";
// components // components
import { FiltersDropdown } from "../issues"; import { FiltersDropdown } from "../issues";
import { ProjectFiltersSelection, ProjectOrderByDropdown } from "./dropdowns"; import { ProjectFiltersSelection, ProjectOrderByDropdown } from "./dropdowns";
@ -18,9 +18,7 @@ const ProjectsMobileHeader = observer(() => {
updateFilters, updateFilters,
} = useProjectFilter(); } = useProjectFilter();
const { const { workspaceSlug } = useAppRouter();
router: { workspaceSlug },
} = useApplication();
const { const {
workspace: { workspaceMemberIds }, workspace: { workspaceMemberIds },

6
web/layouts/settings-layout/profile/preferences/layout.tsx
View File

@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
// layout // layout
import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle"; import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
import { PreferencesMobileHeader } from "@/components/profile/preferences/preferences-mobile-header"; 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"; import { ProfileSettingsLayout } from "@/layouts/settings-layout";
// local components // local components
import { ProfilePreferenceSettingsSidebar } from "./sidebar"; import { ProfilePreferenceSettingsSidebar } from "./sidebar";
@ -14,13 +14,13 @@ interface IProfilePreferenceSettingsLayout {
export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => { export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => {
const { children, header } = props; const { children, header } = props;
const { theme: themeStore } = useApplication(); const { toggleSidebar } = useAppTheme();
return ( return (
<ProfileSettingsLayout <ProfileSettingsLayout
header={ header={
<div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4"> <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> </div>
} }
> >

4
web/pages/accounts/reset-password.tsx
View File

@ -195,7 +195,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
)} )}
</div> </div>
{!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && ( {!!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> </div>
)} )}
@ -216,5 +216,3 @@ ResetPasswordPage.getLayout = function getLayout(page: ReactElement) {
}; };
export default ResetPasswordPage; export default ResetPasswordPage;

2
web/pages/accounts/set-password.tsx
View File

@ -211,7 +211,7 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
</div> </div>
{!!passwordFormData.confirm_password && {!!passwordFormData.confirm_password &&
passwordFormData.password !== 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> </div>
)} )}

16
web/pages/onboarding/index.tsx
View File

@ -91,8 +91,16 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
}; };
useEffect(() => { 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); else setTotalSteps(3);
}
// eslint-disable-next-line react-hooks/exhaustive-deps // 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. // 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)) { if (onboardingStep.profile_complete && !(onboardingStep.workspace_join || onboardingStep.workspace_create)) {
setStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN); setStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
@ -143,7 +151,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
return ( return (
<> <>
<PageHead title="Onboarding" /> <PageHead title="Onboarding" />
{user && totalSteps && step !== null ? ( {user && totalSteps && step !== null && invitations ? (
<div className={`flex h-full w-full flex-col`}> <div className={`flex h-full w-full flex-col`}>
{step === EOnboardingSteps.PROFILE_SETUP ? ( {step === EOnboardingSteps.PROFILE_SETUP ? (
<ProfileSetup <ProfileSetup
@ -152,7 +160,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
stepChange={stepChange} stepChange={stepChange}
finishOnboarding={finishOnboarding} finishOnboarding={finishOnboarding}
/> />
) : step === EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN && invitations ? ( ) : step === EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN ? (
<CreateOrJoinWorkspaces invitations={invitations} totalSteps={totalSteps} stepChange={stepChange} /> <CreateOrJoinWorkspaces invitations={invitations} totalSteps={totalSteps} stepChange={stepChange} />
) : step === EOnboardingSteps.WORKSPACE_INVITE ? ( ) : step === EOnboardingSteps.WORKSPACE_INVITE ? (
<InviteMembers <InviteMembers

278
web/public/onboarding/create-join-workspace-dark.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 458 KiB

BIN
web/public/onboarding/create-join-workspace.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

331
web/public/onboarding/create-join-workspace.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 464 KiB

224
web/public/onboarding/invite-members-dark.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 284 KiB

240
web/public/onboarding/invite-members-light.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 285 KiB

381
web/public/onboarding/profile-setup-dark.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 949 KiB

395
web/public/onboarding/profile-setup-light.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 948 KiB

BIN
web/public/onboarding/profile-setup.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 80 KiB

14
web/public/onboarding/user-dark.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

14
web/public/onboarding/user-light.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

179
web/public/onboarding/user-personalization-dark.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 209 KiB

162
web/public/onboarding/user-personalization-light.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 169 KiB