forked from github/plane
style: onboarding light version
This commit is contained in:
LAKHAN BAHETI
parent
7f42566207
commit
8551faf314
112
web/components/account/delete-account-modal.tsx
Normal file
112
web/components/account/delete-account-modal.tsx
Normal file
@ -0,0 +1,112 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
// components
|
||||
import { Button } from "@plane/ui";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// services
|
||||
import { AuthService } from "services/auth.service";
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
heading: string;
|
||||
};
|
||||
|
||||
const authService = new AuthService();
|
||||
|
||||
const DeleteAccountModal: React.FC<Props> = (props) => {
|
||||
const { isOpen, onClose, heading } = props;
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleSignOut = async () => {
|
||||
await authService
|
||||
.signOut()
|
||||
.then(() => {
|
||||
router.push("/");
|
||||
})
|
||||
.catch(() =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Failed to sign out. Please try again.",
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="">
|
||||
<div className="flex items-center gap-x-4">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<Dialog.Title as="h3" className="text-2xl font-medium leading-6 text-custom-text-100">
|
||||
{heading}
|
||||
</Dialog.Title>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 px-4">
|
||||
<p className="text-custom-text-400 font-normal text-base">
|
||||
<li>Delete this account if you have another and won’t use this account.</li>
|
||||
<li>Switch to another account if you’d like to come back to this account another time.</li>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-4 p-4 mb-2 sm:px-6">
|
||||
<span className="text-sm font-medium hover:cursor-pointer" onClick={handleSignOut}>
|
||||
Switch account
|
||||
</span>
|
||||
<Button variant="outline-danger" size="sm" tabIndex={1} loading={isDeleteLoading}>
|
||||
{isDeleteLoading ? "Deleting..." : "Delete account"}
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteAccountModal;
|
||||
@ -7,6 +7,8 @@ import { AuthService } from "services/auth.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useTimer from "hooks/use-timer";
|
||||
// icons
|
||||
import { XCircle } from "lucide-react";
|
||||
|
||||
// types
|
||||
type EmailCodeFormValues = {
|
||||
@ -23,6 +25,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
|
||||
const [isCodeResending, setIsCodeResending] = useState(false);
|
||||
const [errorResendingCode, setErrorResendingCode] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [sentEmail, setSentEmail] = useState<string>("");
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
|
||||
@ -52,6 +55,8 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
|
||||
await authService
|
||||
.emailCode({ email })
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
setSentEmail(email);
|
||||
setValue("key", res.key);
|
||||
setCodeSent(true);
|
||||
})
|
||||
@ -99,29 +104,54 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
|
||||
handleSubmit(onSubmit)().then(() => {
|
||||
setResendCodeTimer(30);
|
||||
});
|
||||
} else if (
|
||||
codeSent &&
|
||||
sentEmail != getValues("email") &&
|
||||
getValues("email").length > 0 &&
|
||||
(e.key === "Enter" || e.key === "Tab")
|
||||
) {
|
||||
e.preventDefault();
|
||||
console.log("resend");
|
||||
onSubmit({ email: getValues("email") }).then(() => {
|
||||
setCodeResent(true);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (!codeSent) {
|
||||
window.addEventListener("keydown", submitForm);
|
||||
}
|
||||
window.addEventListener("keydown", submitForm);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", submitForm);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [handleSubmit, codeSent]);
|
||||
}, [handleSubmit, codeSent, sentEmail]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{(codeSent || codeResent) && (
|
||||
<p className="text-center mt-4">
|
||||
We have sent the sign in code.
|
||||
<br />
|
||||
Please check your inbox at <span className="font-medium">{watch("email")}</span>
|
||||
</p>
|
||||
{codeSent || codeResent ? (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
|
||||
Moving to the runway
|
||||
</h1>
|
||||
<div className="text-center text-sm text-custom-text-100 mt-3">
|
||||
<p>Paste the code you got at </p>
|
||||
<span className="text-center text-sm text-custom-primary-80 mt-1 font-semibold ">{sentEmail} </span>
|
||||
<span>below.</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
|
||||
Let’s get you prepped!
|
||||
</h1>
|
||||
<p className="text-center text-sm text-custom-text-100 mt-3">
|
||||
This whole thing will take less than two minutes.
|
||||
</p>
|
||||
<p className="text-center text-sm text-custom-text-100 mt-1">Promise!</p>
|
||||
</>
|
||||
)}
|
||||
<form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
|
||||
|
||||
<form className="mt-5 sm:w-96 mx-auto">
|
||||
<div className="space-y-1">
|
||||
<Controller
|
||||
control={control}
|
||||
@ -134,23 +164,46 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
|
||||
) || "Email address is not valid",
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="Enter your email address..."
|
||||
className="border-custom-border-300 h-[46px] w-full"
|
||||
/>
|
||||
<div className="flex items-center relative rounded-md bg-white">
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className="w-full h-[46px] placeholder:text-custom-text-400/50 border-custom-border-200 pr-12"
|
||||
></Input>
|
||||
{value.length > 0 && (
|
||||
<XCircle
|
||||
className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
|
||||
onClick={() => setValue("email", "")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{codeSent && (
|
||||
<>
|
||||
<div>
|
||||
{codeResent && sentEmail === getValues("email") ? (
|
||||
<div className="text-sm my-2.5 text-custom-text-400 m-0">
|
||||
You got a new code at <span className="font-semibold text-custom-primary-80">{sentEmail}</span>.
|
||||
</div>
|
||||
) : sentEmail != getValues("email") && getValues("email").length > 0 ? (
|
||||
<div className="text-sm my-2.5 text-custom-text-400 m-0">
|
||||
Hit enter
|
||||
<span> ↵ </span>or <span className="italic">Tab</span> to get a new code
|
||||
</div>
|
||||
) : (
|
||||
<div className="my-4" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="token"
|
||||
@ -166,54 +219,45 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
|
||||
onChange={onChange}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.token)}
|
||||
placeholder="Enter code..."
|
||||
className="border-custom-border-300 h-[46px] w-full"
|
||||
placeholder="get-set-fly"
|
||||
className="border-custom-border-300 bg-white h-[46px] w-full"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={`flex w-full justify-end text-xs outline-none ${
|
||||
isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
|
||||
} `}
|
||||
onClick={() => {
|
||||
setIsCodeResending(true);
|
||||
onSubmit({ email: getValues("email") }).then(() => {
|
||||
setCodeResent(true);
|
||||
setIsCodeResending(false);
|
||||
setResendCodeTimer(30);
|
||||
});
|
||||
}}
|
||||
disabled={isResendDisabled}
|
||||
>
|
||||
{resendCodeTimer > 0 ? (
|
||||
<span className="text-right">Request new code in {resendCodeTimer} seconds</span>
|
||||
) : isCodeResending ? (
|
||||
"Sending new code..."
|
||||
) : errorResendingCode ? (
|
||||
"Please try again later"
|
||||
) : (
|
||||
<span className="font-medium">Resend code</span>
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{codeSent ? (
|
||||
<Button
|
||||
variant="primary"
|
||||
type="submit"
|
||||
className="w-full"
|
||||
size="xl"
|
||||
onClick={handleSubmit(handleSignin)}
|
||||
disabled={!isValid && isDirty}
|
||||
loading={isLoading}
|
||||
>
|
||||
{isLoading ? "Signing in..." : "Sign in"}
|
||||
</Button>
|
||||
<div className="my-4">
|
||||
{" "}
|
||||
<Button
|
||||
variant="primary"
|
||||
type="submit"
|
||||
className="w-full"
|
||||
size="xl"
|
||||
onClick={handleSubmit(handleSignin)}
|
||||
disabled={!isValid && isDirty}
|
||||
loading={isLoading}
|
||||
>
|
||||
{isLoading ? "Signing in..." : "Next step"}
|
||||
</Button>
|
||||
<div className="w-[70%] my-4 mx-auto">
|
||||
<p className="text-xs text-custom-text-200">
|
||||
When you click the button above, you agree with our{" "}
|
||||
<a
|
||||
href="https://plane.so/terms-and-conditions"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium underline"
|
||||
>
|
||||
terms and conditions of service.
|
||||
</a>{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
className="w-full mt-4"
|
||||
size="xl"
|
||||
onClick={() => {
|
||||
handleSubmit(onSubmit)().then(() => {
|
||||
@ -223,7 +267,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
|
||||
disabled={!isValid && isDirty}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Sending code..." : "Send sign in code"}
|
||||
{isSubmitting ? "Sending code..." : "Send unique code"}
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
// react
|
||||
import { useEffect, useState, FC } from "react";
|
||||
// next
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
@ -41,7 +43,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
|
||||
<Link
|
||||
href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
|
||||
>
|
||||
<button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
|
||||
<button className="flex w-full items-center justify-center gap-2 rounded border border-custom-primary-20 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
|
||||
<Image
|
||||
src={theme === "dark" ? githubWhiteImage : githubBlackImage}
|
||||
height={20}
|
||||
|
||||
@ -29,7 +29,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
|
||||
theme: "outline",
|
||||
size: "large",
|
||||
logo_alignment: "center",
|
||||
width: 360,
|
||||
width: 384,
|
||||
text: "signin_with",
|
||||
} as GsiButtonConfiguration // customization attributes
|
||||
);
|
||||
|
||||
267
web/components/account/sidebar.tsx
Normal file
267
web/components/account/sidebar.tsx
Normal file
@ -0,0 +1,267 @@
|
||||
import React from "react";
|
||||
import { Avatar, DiceIcon, PhotoFilterIcon } from "@plane/ui";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// react-hook-form
|
||||
import { Control, Controller, UseFormSetValue } from "react-hook-form";
|
||||
// types
|
||||
import { IWorkspace } from "types";
|
||||
// icons
|
||||
import {
|
||||
BarChart2,
|
||||
Briefcase,
|
||||
CheckCircle,
|
||||
ChevronDown,
|
||||
ContrastIcon,
|
||||
FileText,
|
||||
LayersIcon,
|
||||
LayoutGrid,
|
||||
PenSquare,
|
||||
Search,
|
||||
Settings,
|
||||
} from "lucide-react";
|
||||
|
||||
const workspaceLinks = [
|
||||
{
|
||||
Icon: LayoutGrid,
|
||||
name: "Dashboard",
|
||||
},
|
||||
{
|
||||
Icon: BarChart2,
|
||||
name: "Analytics",
|
||||
},
|
||||
{
|
||||
Icon: Briefcase,
|
||||
name: "Projects",
|
||||
},
|
||||
{
|
||||
Icon: CheckCircle,
|
||||
name: "All Issues",
|
||||
},
|
||||
{
|
||||
Icon: CheckCircle,
|
||||
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>;
|
||||
};
|
||||
var timer: number = 0;
|
||||
var lastWorkspaceName: string = "";
|
||||
const DummySidebar: React.FC<Props> = (props) => {
|
||||
const { workspaceName, showProject, control, setValue } = props;
|
||||
const { workspace: workspaceStore, user: userStore } = useMobxStore();
|
||||
|
||||
const workspace = workspaceStore.workspaces ? workspaceStore.workspaces[0] : null;
|
||||
|
||||
const handleZoomWorkspace = (value: string) => {
|
||||
// console.log(lastWorkspaceName,value);
|
||||
if (lastWorkspaceName === value) return;
|
||||
lastWorkspaceName = value;
|
||||
if (timer > 0) {
|
||||
timer += 2;
|
||||
timer = Math.min(timer, 4);
|
||||
} else {
|
||||
timer = 2;
|
||||
timer = Math.min(timer, 4);
|
||||
const interval = setInterval(() => {
|
||||
if (timer < 0) {
|
||||
setValue!("name", lastWorkspaceName);
|
||||
clearInterval(interval);
|
||||
}
|
||||
timer--;
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
console.log("CALLED");
|
||||
return (
|
||||
<div className="border-r relative ">
|
||||
<div>
|
||||
{control && setValue ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name="name"
|
||||
render={({ field: { value } }) => {
|
||||
if (value.length > 0) {
|
||||
handleZoomWorkspace(value);
|
||||
}
|
||||
return timer > 0 ? (
|
||||
<div className="py-6 pl-4 top-3 mt-4 transition-all bg-custom-background-100 w-full max-w-screen-sm flex items-center ml-6 border-8 border-custom-primary-20 rounded-md">
|
||||
<div className="bg-slate-200 w-full p-1 flex items-center">
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={value.length > 0 ? value[0].toLocaleUpperCase() : "N"}
|
||||
src={""}
|
||||
size={30}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="black"
|
||||
className="!text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="text-xl font-medium text-custom-text-300 ml-2 truncate">{value}</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex transition-all w-full items-center gap-y-2 px-4 pt-6 truncate">
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={value.length > 0 ? value : workspace ? workspace.name[0].toLocaleUpperCase() : "N"}
|
||||
src={""}
|
||||
size={24}
|
||||
shape="square"
|
||||
className="!text-base"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full mx-2 items-center flex justify-between flex-shrink truncate">
|
||||
<h4 className="text-custom-text-100 font-medium text-base truncate">{workspaceName}</h4>
|
||||
<ChevronDown className={`h-4 w-4 mx-1 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
|
||||
</div>
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={"N"}
|
||||
src={workspace && workspace.logo ? workspace.logo : ""}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="#FCBE1D"
|
||||
className="!text-base"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex transition-all w-full items-center gap-y-2 px-4 pt-6 truncate">
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={workspace ? workspace.name[0].toLocaleUpperCase() : "N"}
|
||||
src={""}
|
||||
size={24}
|
||||
shape="square"
|
||||
className="!text-base"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full mx-2 items-center flex justify-between flex-shrink truncate">
|
||||
<h4 className="text-custom-text-100 font-medium text-base truncate">{workspaceName}</h4>
|
||||
<ChevronDown className={`h-4 w-4 mx-1 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
|
||||
</div>
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={"N"}
|
||||
src={workspace && workspace.logo ? workspace.logo : ""}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="#FCBE1D"
|
||||
className="!text-base"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`space-y-1 p-4`}>
|
||||
<div className={`flex items-center justify-between w-full px-1 mb-3 gap-2 mt-4 `}>
|
||||
<div
|
||||
className={`relative flex items-center justify-between w-full rounded gap-1 group
|
||||
px-3 shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200
|
||||
`}
|
||||
>
|
||||
<div className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 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 items-center justify-center rounded flex-shrink-0 p-2 outline-none
|
||||
"shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200"
|
||||
`}
|
||||
>
|
||||
<Search className="h-4 w-4 text-custom-sidebar-text-300" />
|
||||
</div>
|
||||
</div>
|
||||
{workspaceLinks.map((link) => {
|
||||
return (
|
||||
<a className="block w-full">
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium outline-none
|
||||
text-custom-sidebar-text-200 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="text-base pb-4 font-semibold text-custom-text-300">Projects</p>
|
||||
|
||||
<div className="px-3">
|
||||
{" "}
|
||||
<div className="w-4/5 flex items-center text-base font-medium text-custom-text-200 mb-3 justify-between">
|
||||
<span> Plane web</span>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</div>
|
||||
{projectLinks.map((link) => {
|
||||
return (
|
||||
<a className="block w-full">
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium outline-none
|
||||
text-custom-sidebar-text-200 focus:bg-custom-sidebar-background-80
|
||||
`}
|
||||
>
|
||||
{<link.Icon className="h-4 w-4" />}
|
||||
{link.name}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DummySidebar;
|
||||
23
web/components/account/step-indicator.tsx
Normal file
23
web/components/account/step-indicator.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import React from "react";
|
||||
|
||||
const OnboardingStepIndicator = ({ step }: { step: number }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="h-4 w-4 rounded-full bg-custom-primary-100 z-10" />
|
||||
<div className={`h-1 w-14 -ml-1 ${step >= 2 ? "bg-custom-primary-100" : "bg-custom-primary-20"}`} />
|
||||
<div
|
||||
className={` z-10 -ml-1 rounded-full ${
|
||||
step >= 2 ? "bg-custom-primary-100 h-4 w-4" : " h-3 w-3 bg-custom-primary-20"
|
||||
}`}
|
||||
/>
|
||||
<div className={`h-1 w-14 -ml-1 ${step >= 3 ? "bg-custom-primary-100" : "bg-custom-primary-20"}`} />
|
||||
<div
|
||||
className={`rounded-full -ml-1 z-10 ${
|
||||
step >= 3 ? "bg-custom-primary-100 h-4 w-4" : "h-3 w-3 bg-custom-primary-20"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingStepIndicator;
|
||||
@ -50,10 +50,8 @@ export const ImageUploadModal: React.FC<Props> = observer((props) => {
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!image || (!workspaceSlug && router.pathname != "/onboarding")) return;
|
||||
setIsImageUploading(true);
|
||||
|
||||
if (!image || !workspaceSlug) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("asset", image);
|
||||
formData.append("attributes", JSON.stringify({}));
|
||||
@ -183,7 +181,13 @@ export const ImageUploadModal: React.FC<Props> = observer((props) => {
|
||||
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" size="sm" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleSubmit}
|
||||
disabled={!image}
|
||||
loading={isImageUploading}
|
||||
>
|
||||
{isImageUploading ? "Uploading..." : "Upload & Save"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
115
web/components/onboarding/invitations.tsx
Normal file
115
web/components/onboarding/invitations.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
// components
|
||||
import { Button } from "@plane/ui";
|
||||
|
||||
// helpers
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
// mobx
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// services
|
||||
import { WorkspaceService } from "services/workspace.service";
|
||||
// swr
|
||||
import useSWR, { mutate } from "swr";
|
||||
// contants
|
||||
import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
|
||||
import { ROLE } from "constants/workspace";
|
||||
// types
|
||||
import { IWorkspaceMemberInvitation } from "types";
|
||||
// icons
|
||||
import { CheckCircle2 } from "lucide-react";
|
||||
|
||||
type Props = {
|
||||
handleNextStep: () => void;
|
||||
updateLastWorkspace: () => void;
|
||||
};
|
||||
const workspaceService = new WorkspaceService();
|
||||
|
||||
const Invitations: React.FC<Props> = (props) => {
|
||||
const { handleNextStep, updateLastWorkspace } = props;
|
||||
const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
|
||||
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
|
||||
|
||||
const { workspace: workspaceStore } = useMobxStore();
|
||||
|
||||
const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
|
||||
workspaceService.userWorkspaceInvitations()
|
||||
);
|
||||
|
||||
const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
|
||||
if (action === "accepted") {
|
||||
setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
|
||||
} else if (action === "withdraw") {
|
||||
setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
|
||||
}
|
||||
};
|
||||
|
||||
const submitInvitations = async () => {
|
||||
if (invitationsRespond.length <= 0) return;
|
||||
|
||||
setIsJoiningWorkspaces(true);
|
||||
|
||||
await workspaceService
|
||||
.joinWorkspaces({ invitations: invitationsRespond })
|
||||
.then(async () => {
|
||||
await mutateInvitations();
|
||||
await workspaceStore.fetchWorkspaces();
|
||||
await mutate(USER_WORKSPACES);
|
||||
await updateLastWorkspace();
|
||||
await handleNextStep();
|
||||
})
|
||||
.finally(() => setIsJoiningWorkspaces(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<p className="font-semibold pb-2 text-xl sm:text-2xl">Choose a workspace to join </p>
|
||||
<div>
|
||||
{invitations &&
|
||||
invitations.map((invitation) => {
|
||||
const isSelected = invitationsRespond.includes(invitation.id);
|
||||
return (
|
||||
<div
|
||||
key={invitation.id}
|
||||
className={`flex cursor-pointer items-center gap-2 border p-3.5 rounded ${
|
||||
isSelected ? "border-custom-primary-100" : "border-custom-border-200 hover:bg-custom-primary-10"
|
||||
}`}
|
||||
onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<div className="grid place-items-center h-9 w-9 rounded">
|
||||
{invitation.workspace.logo && invitation.workspace.logo !== "" ? (
|
||||
<img
|
||||
src={invitation.workspace.logo}
|
||||
height="100%"
|
||||
width="100%"
|
||||
className="rounded"
|
||||
alt={invitation.workspace.name}
|
||||
/>
|
||||
) : (
|
||||
<span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
|
||||
{invitation.workspace.name[0]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
|
||||
<p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
|
||||
</div>
|
||||
<span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
|
||||
<CheckCircle2 className="h-5 w-5" />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Button variant="primary" onClick={submitInvitations}>
|
||||
{isJoiningWorkspaces ? "Joining..." : "Join your team"}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Invitations;
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// react-hook-form
|
||||
@ -13,11 +12,12 @@ import { Button, Input } from "@plane/ui";
|
||||
// hooks
|
||||
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
|
||||
// icons
|
||||
import { Check, ChevronDown, Plus, X } from "lucide-react";
|
||||
import { Check, ChevronDown, Plus, X, XCircle } from "lucide-react";
|
||||
// types
|
||||
import { IUser, IWorkspace, TOnboardingSteps, TUserWorkspaceRole } from "types";
|
||||
// constants
|
||||
import { ROLE } from "constants/workspace";
|
||||
import OnboardingStepIndicator from "components/account/step-indicator";
|
||||
|
||||
type Props = {
|
||||
finishOnboarding: () => Promise<void>;
|
||||
@ -80,7 +80,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.emails?.[index]?.email)}
|
||||
placeholder="Enter their email..."
|
||||
className="text-xs sm:text-sm w-full"
|
||||
className="text-xs sm:text-sm w-full h-11 placeholder:text-custom-text-400/50"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@ -104,10 +104,11 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
|
||||
type="button"
|
||||
ref={buttonRef}
|
||||
onClick={() => setIsDropdownOpen((prev) => !prev)}
|
||||
className="flex items-center px-2.5 py-2 text-xs justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none"
|
||||
className="flex items-center px-2.5 h-11 py-2 text-xs justify-between gap-1 w-full rounded-md border border-custom-border-200 duration-300"
|
||||
>
|
||||
<span className="text-xs sm:text-sm">{ROLE[value]}</span>
|
||||
<ChevronDown className="h-3 w-3" aria-hidden="true" />
|
||||
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
@ -122,7 +123,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
|
||||
>
|
||||
<Listbox.Options
|
||||
ref={dropdownRef}
|
||||
className="fixed w-36 z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none max-h-48"
|
||||
className="fixed w-36 z-10 border border-custom-border-200 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none max-h-48"
|
||||
>
|
||||
<div className="space-y-1 p-2">
|
||||
{Object.entries(ROLE).map(([key, value]) => (
|
||||
@ -153,10 +154,10 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
|
||||
{fields.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
className="hidden group-hover:grid self-center place-items-center rounded -ml-3"
|
||||
className="hidden group-hover:grid self-center place-items-center rounded ml-3"
|
||||
onClick={() => remove(index)}
|
||||
>
|
||||
<X className="h-3.5 w-3.5 text-custom-text-200" />
|
||||
<XCircle className="h-3.5 w-3.5 text-custom-text-400" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@ -182,7 +183,6 @@ export const InviteMembers: React.FC<Props> = (props) => {
|
||||
const nextStep = async () => {
|
||||
const payload: Partial<TOnboardingSteps> = {
|
||||
workspace_invite: true,
|
||||
workspace_join: true,
|
||||
};
|
||||
|
||||
await stepChange(payload);
|
||||
@ -223,49 +223,86 @@ export const InviteMembers: React.FC<Props> = (props) => {
|
||||
}, [fields, append]);
|
||||
|
||||
return (
|
||||
<form
|
||||
className="w-full space-y-7 sm:space-y-10 overflow-hidden flex flex-col"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.code === "Enter") e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<h2 className="text-xl sm:text-2xl font-semibold">Invite people to collaborate</h2>
|
||||
<div className="md:w-3/5 text-sm h-full max-h-[40vh] flex flex-col overflow-hidden">
|
||||
<div className="grid grid-cols-11 gap-x-4 mb-1 text-sm">
|
||||
<h6 className="col-span-7">Co-workers Email</h6>
|
||||
<h6 className="col-span-4">Role</h6>
|
||||
<div className="flex py-14">
|
||||
<div className="hidden lg:block w-1/4 p-3 ml-auto rounded bg-gradient-to-b from-white to-custom-primary-10/30 border border-custom-border-100">
|
||||
<p className="text-base text-custom-text-400 font-semibold">Members</p>
|
||||
|
||||
{Array.from({ length: 4 }).map(() => (
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
<div className="w-8 h-8 flex-shrink-0 rounded-full bg-custom-primary-10"></div>
|
||||
<div className="w-full">
|
||||
<div className="rounded-md h-2.5 my-2 bg-custom-primary-30 w-2/3" />
|
||||
<div className="rounded-md h-2 bg-custom-primary-20 w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="relative mt-20 h-32">
|
||||
<div className="flex absolute bg-custom-background-100 p-2 rounded-full gap-x-2 border border-custom-border-200 w-full mt-1 -left-1/2">
|
||||
<div className="w-8 h-8 flex-shrink-0 rounded-full bg-custom-primary-10"></div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Murphy cooper</p>
|
||||
<p className="text-custom-text-400 text-sm">murphy@plane.so</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex absolute bg-custom-background-100 p-2 rounded-full gap-x-2 border border-custom-border-200 -left-1/3 mt-14 w-full">
|
||||
<div className="w-8 h-8 flex-shrink-0 rounded-full bg-custom-primary-10"></div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Else Thompson</p>
|
||||
<p className="text-custom-text-400 text-sm">Elsa@plane.so</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3 sm:space-y-4 mb-3 h-full overflow-y-auto">
|
||||
{fields.map((field, index) => (
|
||||
<InviteMemberForm
|
||||
control={control}
|
||||
errors={errors}
|
||||
field={field}
|
||||
fields={fields}
|
||||
index={index}
|
||||
remove={remove}
|
||||
key={field.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<form
|
||||
className="px-7 sm:px-0 md:w-4/5 lg:w-1/2 mx-auto space-y-7 sm:space-y-10 overflow-hidden flex flex-col"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.code === "Enter") e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold">Invite your team to work with you</h2>
|
||||
<OnboardingStepIndicator step={2} />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 outline-custom-primary-100 bg-transparent text-custom-primary-100 text-xs font-medium py-2 pr-3"
|
||||
onClick={appendField}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
Add another
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="primary" type="submit" disabled={!isValid} loading={isSubmitting} size="md">
|
||||
{isSubmitting ? "Sending..." : "Send Invite"}
|
||||
</Button>
|
||||
<Button variant="neutral-primary" size="md" onClick={nextStep}>
|
||||
Skip this step
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="md:w-4/5 text-sm flex flex-col overflow-hidden">
|
||||
<div className="space-y-3 sm:space-y-4 mb-3 h-full overflow-y-auto">
|
||||
{fields.map((field, index) => (
|
||||
<InviteMemberForm
|
||||
control={control}
|
||||
errors={errors}
|
||||
field={field}
|
||||
fields={fields}
|
||||
index={index}
|
||||
remove={remove}
|
||||
key={field.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 outline-custom-primary-100 bg-transparent text-custom-primary-100 text-sm font-semibold py-2 pr-3"
|
||||
onClick={appendField}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
Add another
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="primary" type="submit" disabled={!isValid} loading={isSubmitting} size="md">
|
||||
{isSubmitting ? "Sending..." : "Send Invite"}
|
||||
</Button>
|
||||
{/* <Button variant="outline-primary" size="md" onClick={nextStep}>
|
||||
Copy invite link
|
||||
</Button> */}
|
||||
|
||||
<span className="text-sm text-custom-text-400/50 hover:cursor-pointer" onClick={nextStep}>
|
||||
Do this later
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,135 +1,238 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// services
|
||||
import { WorkspaceService } from "services/workspace.service";
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// icons
|
||||
import { CheckCircle } from "lucide-react";
|
||||
// helpers
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
// components
|
||||
import Invitations from "./invitations";
|
||||
import DummySidebar from "components/account/sidebar";
|
||||
import OnboardingStepIndicator from "components/account/step-indicator";
|
||||
import { Button, Input } from "@plane/ui";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// mobx
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// types
|
||||
import { IWorkspaceMemberInvitation, TOnboardingSteps } from "types";
|
||||
// fetch-keys
|
||||
import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
|
||||
import { IWorkspace, TOnboardingSteps } from "types";
|
||||
// constants
|
||||
import { ROLE } from "constants/workspace";
|
||||
import { RESTRICTED_URLS, ROLE } from "constants/workspace";
|
||||
// react-hook-form
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// icons
|
||||
import { Search } from "lucide-react";
|
||||
|
||||
type Props = {
|
||||
finishOnboarding: () => Promise<void>;
|
||||
stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
|
||||
updateLastWorkspace: () => Promise<void>;
|
||||
setTryDiffAccount: () => void;
|
||||
};
|
||||
|
||||
// services
|
||||
const workspaceService = new WorkspaceService();
|
||||
|
||||
export const JoinWorkspaces: React.FC<Props> = ({ finishOnboarding, stepChange, updateLastWorkspace }) => {
|
||||
const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
|
||||
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
|
||||
|
||||
export const JoinWorkspaces: React.FC<Props> = ({ stepChange, updateLastWorkspace, setTryDiffAccount }) => {
|
||||
const [slugError, setSlugError] = useState(false);
|
||||
const [invalidSlug, setInvalidSlug] = useState(false);
|
||||
const { user } = useUser();
|
||||
|
||||
const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
|
||||
workspaceService.userWorkspaceInvitations()
|
||||
);
|
||||
|
||||
const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
|
||||
if (action === "accepted") {
|
||||
setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
|
||||
} else if (action === "withdraw") {
|
||||
setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
|
||||
}
|
||||
};
|
||||
const { workspace: workspaceStore } = useMobxStore();
|
||||
const { setToastAlert } = useToast();
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors, isSubmitting, isValid },
|
||||
} = useForm<IWorkspace>({
|
||||
defaultValues: {
|
||||
name: "",
|
||||
slug: `${window.location.host}/`,
|
||||
},
|
||||
mode: "onChange",
|
||||
});
|
||||
|
||||
const handleNextStep = async () => {
|
||||
if (!user) return;
|
||||
|
||||
await stepChange({ workspace_join: true });
|
||||
|
||||
if (user.onboarding_step.workspace_create && user.onboarding_step.workspace_invite) await finishOnboarding();
|
||||
await stepChange({ workspace_join: true, workspace_create: true });
|
||||
};
|
||||
|
||||
const submitInvitations = async () => {
|
||||
if (invitationsRespond.length <= 0) return;
|
||||
|
||||
setIsJoiningWorkspaces(true);
|
||||
|
||||
const handleCreateWorkspace = async (formData: IWorkspace) => {
|
||||
const slug = formData.slug.split("/");
|
||||
formData.slug = slug[slug.length - 1];
|
||||
// TODO: remove this after adding organization size in backend
|
||||
formData.organization_size = "Just myself";
|
||||
console.log(formData.slug);
|
||||
await workspaceService
|
||||
.joinWorkspaces({ invitations: invitationsRespond })
|
||||
.then(async () => {
|
||||
await mutateInvitations();
|
||||
await mutate(USER_WORKSPACES);
|
||||
await updateLastWorkspace();
|
||||
.workspaceSlugCheck(formData.slug)
|
||||
.then(async (res) => {
|
||||
if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
|
||||
setSlugError(false);
|
||||
|
||||
await handleNextStep();
|
||||
await workspaceStore
|
||||
.createWorkspace(formData)
|
||||
.then(async (res) => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Workspace created successfully.",
|
||||
});
|
||||
|
||||
const payload: Partial<TOnboardingSteps> = {
|
||||
workspace_create: true,
|
||||
workspace_join: true,
|
||||
};
|
||||
await updateLastWorkspace();
|
||||
await stepChange(payload);
|
||||
})
|
||||
.catch(() =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Workspace could not be created. Please try again.",
|
||||
})
|
||||
);
|
||||
} else setSlugError(true);
|
||||
})
|
||||
.finally(() => setIsJoiningWorkspaces(false));
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Some error occurred while creating workspace. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-7 sm:space-y-10">
|
||||
<h5 className="sm:text-lg">We see that someone has invited you to</h5>
|
||||
<h4 className="text-xl sm:text-2xl font-semibold">Join a workspace</h4>
|
||||
<div className="max-h-[37vh] overflow-y-auto md:w-3/5 space-y-4">
|
||||
{invitations &&
|
||||
invitations.map((invitation) => {
|
||||
const isSelected = invitationsRespond.includes(invitation.id);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={invitation.id}
|
||||
className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
|
||||
isSelected ? "border-custom-primary-100" : "border-custom-border-200 hover:bg-custom-background-80"
|
||||
}`}
|
||||
onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<div className="grid place-items-center h-9 w-9 rounded">
|
||||
{invitation.workspace.logo && invitation.workspace.logo !== "" ? (
|
||||
<img
|
||||
src={invitation.workspace.logo}
|
||||
height="100%"
|
||||
width="100%"
|
||||
className="rounded"
|
||||
alt={invitation.workspace.name}
|
||||
/>
|
||||
) : (
|
||||
<span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
|
||||
{invitation.workspace.name[0]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
|
||||
<p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
|
||||
</div>
|
||||
<span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
|
||||
<CheckCircle className="h-5 w-5" />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="flex h-full w-full overflow-y-auto">
|
||||
<div className="hidden lg:block w-3/12">
|
||||
<Controller
|
||||
control={control}
|
||||
name="name"
|
||||
render={({ field: { value, ref } }) => (
|
||||
<DummySidebar
|
||||
setValue={setValue}
|
||||
control={control}
|
||||
showProject={false}
|
||||
workspaceName={value.length > 0 ? value : "New Workspace"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="primary"
|
||||
type="submit"
|
||||
size="md"
|
||||
onClick={submitInvitations}
|
||||
disabled={invitationsRespond.length === 0}
|
||||
loading={isJoiningWorkspaces}
|
||||
>
|
||||
Accept & Join
|
||||
</Button>
|
||||
<Button variant="neutral-primary" size="md" onClick={handleNextStep}>
|
||||
Skip for now
|
||||
</Button>
|
||||
|
||||
<div className="lg:w-3/5 md:w-4/5 md:px-0 px-7 w-full my-16 mx-auto">
|
||||
<div className="flex justify-between items-center">
|
||||
<p className="font-semibold text-xl sm:text-2xl">What will your workspace </p>
|
||||
<OnboardingStepIndicator step={1} />
|
||||
</div>
|
||||
<form className="mt-5 md:w-2/3" onSubmit={handleSubmit(handleCreateWorkspace)}>
|
||||
<div className="mb-5">
|
||||
<p className="text-base text-custom-text-400 mb-1">Name it.</p>
|
||||
<Controller
|
||||
control={control}
|
||||
name="name"
|
||||
rules={{
|
||||
required: "Workspace name is required",
|
||||
validate: (value) =>
|
||||
/^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
|
||||
maxLength: {
|
||||
value: 80,
|
||||
message: "Workspace name should not exceed 80 characters",
|
||||
},
|
||||
}}
|
||||
render={({ field: { value, ref, onChange } }) => (
|
||||
<div className="flex items-center relative rounded-md bg-white">
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(event) => {
|
||||
onChange(event.target.value);
|
||||
setValue("name", event.target.value);
|
||||
if (window && window.location.host) {
|
||||
const host = window.location.host;
|
||||
const slug = event.currentTarget.value.split("/");
|
||||
setValue(
|
||||
"slug",
|
||||
`${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`
|
||||
);
|
||||
}
|
||||
}}
|
||||
placeholder="Enter workspace name..."
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.name)}
|
||||
className="w-full h-[46px] text-base placeholder:text-custom-text-400/50 placeholder:text-base border-custom-border-200"
|
||||
></Input>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
{errors.name && <span className="text-sm text-red-500">{errors.name.message}</span>}
|
||||
<p className="text-base text-custom-text-400 mt-4 mb-1">You can edit the slug.</p>
|
||||
<Controller
|
||||
control={control}
|
||||
name="slug"
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<div className="flex items-center relative rounded-md bg-white">
|
||||
<Input
|
||||
id="slug"
|
||||
name="slug"
|
||||
type="text"
|
||||
prefix="asdasdasdas"
|
||||
value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
|
||||
onChange={(e) => {
|
||||
const host = window.location.host;
|
||||
const slug = e.currentTarget.value.split("/");
|
||||
/^[a-zA-Z0-9_-]+$/.test(slug[slug.length - 1]) ? setInvalidSlug(false) : setInvalidSlug(true);
|
||||
setValue(
|
||||
"slug",
|
||||
`${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`
|
||||
);
|
||||
}}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.slug)}
|
||||
className="w-full h-[46px] border-custom-border-300"
|
||||
></Input>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
|
||||
Make it live
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="flex md:w-4/5 items-center my-5">
|
||||
<hr className="border-custom-border-200 w-full" />
|
||||
<p className="text-center text-sm text-custom-text-400 mx-3 flex-shrink-0">Or</p>
|
||||
<hr className="border-custom-border-200 w-full" />
|
||||
</div>
|
||||
<div className="md:w-2/3 w-full">
|
||||
<Invitations handleNextStep={handleNextStep} updateLastWorkspace={updateLastWorkspace} />
|
||||
</div>
|
||||
|
||||
<div className="py-3 px-4 mt-8 bg-custom-primary-10 rounded-sm flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
<span className="text-sm text-custom-text-200">Don't see your workspace?</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
className="bg-white py-3 text-center hover:cursor-pointer text-custom-text-200 rounded-md text-sm font-medium border border-custom-border-200"
|
||||
onClick={setTryDiffAccount}
|
||||
>
|
||||
Try a different email address
|
||||
</div>
|
||||
<p className="text-xs mt-2 text-custom-text-300">
|
||||
Your right e-mail address could be from a Google or GitHub login.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,22 +1,28 @@
|
||||
import { useEffect } from "react";
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
// next
|
||||
import Image from "next/image";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// ui
|
||||
import { Button, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
|
||||
// components
|
||||
import { Button, Input } from "@plane/ui";
|
||||
import DummySidebar from "components/account/sidebar";
|
||||
import OnboardingStepIndicator from "components/account/step-indicator";
|
||||
// types
|
||||
import { IUser } from "types";
|
||||
// helpers
|
||||
import { getUserTimeZoneFromWindow } from "helpers/date-time.helper";
|
||||
// constants
|
||||
import { USER_ROLES } from "constants/workspace";
|
||||
import { TIME_ZONES } from "constants/timezones";
|
||||
// assets
|
||||
import IssuesSvg from "public/onboarding/onboarding-issues.svg";
|
||||
import { ImageUploadModal } from "components/core";
|
||||
// icons
|
||||
import { Camera, User2 } from "lucide-react";
|
||||
|
||||
const defaultValues: Partial<IUser> = {
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
role: "",
|
||||
avatar: "",
|
||||
};
|
||||
|
||||
type Props = {
|
||||
@ -31,13 +37,16 @@ const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
|
||||
|
||||
export const UserDetails: React.FC<Props> = observer((props) => {
|
||||
const { user } = props;
|
||||
|
||||
const [isRemoving, setIsRemoving] = useState(false);
|
||||
const [selectedUsecase, setSelectedUsecase] = useState<number | null>();
|
||||
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
|
||||
const { user: userStore } = useMobxStore();
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
reset,
|
||||
watch,
|
||||
setValue,
|
||||
formState: { errors, isSubmitting, isValid },
|
||||
} = useForm<IUser>({
|
||||
defaultValues,
|
||||
@ -48,6 +57,8 @@ export const UserDetails: React.FC<Props> = observer((props) => {
|
||||
|
||||
const payload: Partial<IUser> = {
|
||||
...formData,
|
||||
first_name: formData.first_name.split(" ")[0],
|
||||
last_name: formData.first_name.split(" ")[1],
|
||||
onboarding_step: {
|
||||
...user.onboarding_step,
|
||||
profile_complete: true,
|
||||
@ -57,136 +68,123 @@ export const UserDetails: React.FC<Props> = observer((props) => {
|
||||
await userStore.updateCurrentUser(payload);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
reset({
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
role: user.role,
|
||||
user_timezone: getUserTimeZoneFromWindow(),
|
||||
});
|
||||
}
|
||||
}, [user, reset]);
|
||||
const useCases = [
|
||||
"Build Products",
|
||||
"Manage Feedbacks",
|
||||
"Service delivery",
|
||||
"Field force management",
|
||||
"Code Repository Integration",
|
||||
"Bug Tracking",
|
||||
"Test Case Management",
|
||||
"Rescource allocation",
|
||||
];
|
||||
|
||||
return (
|
||||
<form
|
||||
className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto sm:flex sm:flex-col sm:items-start sm:justify-center"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<div className="relative sm:text-lg">
|
||||
<div className="text-custom-primary-100 absolute -top-1 -left-3">{'"'}</div>
|
||||
<h5>Hey there 👋🏻</h5>
|
||||
<h5 className="mt-5 mb-6">Let{"'"}s get you onboard!</h5>
|
||||
<h4 className="text-xl sm:text-2xl font-semibold">Set up your Plane profile.</h4>
|
||||
<div className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto flex ">
|
||||
<div className="hidden lg:block w-3/12">
|
||||
<DummySidebar showProject workspaceName="New Workspace" />
|
||||
</div>
|
||||
<ImageUploadModal
|
||||
isOpen={isImageUploadModalOpen}
|
||||
onClose={() => setIsImageUploadModalOpen(false)}
|
||||
isRemoving={isRemoving}
|
||||
handleDelete={() => {}}
|
||||
onSuccess={(url) => {
|
||||
setValue("avatar", url);
|
||||
// handleSubmit(onSubmit)();
|
||||
setIsImageUploadModalOpen(false);
|
||||
}}
|
||||
value={watch("avatar") !== "" ? watch("avatar") : undefined}
|
||||
userImage
|
||||
/>
|
||||
<div className="flex lg:w-3/5 md:w-4/5 md:px-0 px-7 mx-auto flex-col">
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="md:w-11/12 mx-auto">
|
||||
<div className="flex justify-between items-center">
|
||||
<p className="font-semibold text-xl sm:text-2xl">What do we call you? </p>
|
||||
<OnboardingStepIndicator step={2} />
|
||||
</div>
|
||||
<div className="flex mt-5 w-full ">
|
||||
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
|
||||
{!watch("avatar") || watch("avatar") === "" ? (
|
||||
<div className="h-16 hover:cursor-pointer justify-center items-center flex w-16 rounded-full flex-shrink-0 mr-3 relative bg-custom-primary-20">
|
||||
<div className="h-6 w-6 flex justify-center items-center bottom-1 border border-custom-primary-10 -right-1 bg-custom-background-100 rounded-full absolute">
|
||||
<Camera className="h-4 w-4 stroke-custom-primary-40" />
|
||||
</div>
|
||||
<User2 className="h-10 w-10 stroke-custom-primary-20 fill-custom-primary-40" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative h-16 w-16 overflow-hidden mr-3">
|
||||
<img
|
||||
src={watch("avatar")}
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
|
||||
onClick={() => setIsImageUploadModalOpen(true)}
|
||||
alt={user?.display_name}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="space-y-7 sm:w-3/4 md:w-2/5">
|
||||
<div className="space-y-1 text-sm">
|
||||
<label htmlFor="firstName">First Name</label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="first_name"
|
||||
rules={{
|
||||
required: "First name is required",
|
||||
maxLength: {
|
||||
value: 24,
|
||||
message: "First name cannot exceed the limit of 24 characters",
|
||||
},
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<Input
|
||||
id="first_name"
|
||||
<div className="my-2 bg-custom-background-100 w-full mr-10 rounded-md flex text-sm">
|
||||
<Controller
|
||||
control={control}
|
||||
name="first_name"
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.first_name)}
|
||||
placeholder="Enter your first name..."
|
||||
className="w-full"
|
||||
rules={{
|
||||
required: "First name is required",
|
||||
maxLength: {
|
||||
value: 24,
|
||||
message: "First name cannot exceed the limit of 24 characters",
|
||||
},
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<Input
|
||||
id="first_name"
|
||||
name="first_name"
|
||||
type="text"
|
||||
value={value}
|
||||
autoFocus={true}
|
||||
onChange={onChange}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.first_name)}
|
||||
placeholder="Enter your full name..."
|
||||
className="w-full focus:border-custom-primary-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
<label htmlFor="lastName">Last Name</label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="last_name"
|
||||
rules={{
|
||||
required: "Last name is required",
|
||||
maxLength: {
|
||||
value: 24,
|
||||
message: "Last name cannot exceed the limit of 24 characters",
|
||||
},
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<Input
|
||||
id="last_name"
|
||||
name="last_name"
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.last_name)}
|
||||
placeholder="Enter your last name..."
|
||||
className="w-full"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
<span>What{"'"}s your role?</span>
|
||||
<div className="w-full">
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-14 mb-10">
|
||||
<Controller
|
||||
name="role"
|
||||
control={control}
|
||||
rules={{ required: "This field is required" }}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomSelect
|
||||
value={value}
|
||||
onChange={(val: any) => onChange(val)}
|
||||
label={value ? value.toString() : <span className="text-custom-text-400">Select your role...</span>}
|
||||
input
|
||||
width="w-full"
|
||||
name="first_name"
|
||||
render={({ field: { value } }) => (
|
||||
<p className="font-medium text-xl sm:text-2xl p-0">And how will you use Plane, {value} ?</p>
|
||||
)}
|
||||
/>
|
||||
|
||||
<p className="font-medium text-sm my-3">Choose just one</p>
|
||||
|
||||
<div className="flex flex-wrap break-all overflow-auto">
|
||||
{useCases.map((useCase, index) => (
|
||||
<div
|
||||
className={`border mb-3 hover:cursor-pointer hover:bg-custom-primary-10 flex-shrink-0 ${
|
||||
selectedUsecase === index ? "border-custom-primary-100" : "border-custom-primary-40"
|
||||
} mr-3 rounded-sm p-3 text-sm font-medium`}
|
||||
onClick={() => setSelectedUsecase(index)}
|
||||
>
|
||||
{USER_ROLES.map((item) => (
|
||||
<CustomSelect.Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
{errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
<span>What time zone are you in? </span>
|
||||
<div className="w-full">
|
||||
<Controller
|
||||
name="user_timezone"
|
||||
control={control}
|
||||
rules={{ required: "This field is required" }}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
|
||||
options={timeZoneOptions}
|
||||
onChange={onChange}
|
||||
optionsClassName="w-full"
|
||||
input
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors?.user_timezone && <span className="text-sm text-red-500">{errors.user_timezone.message}</span>}
|
||||
{useCase}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
|
||||
{isSubmitting ? "Updating..." : "Continue"}
|
||||
</Button>
|
||||
</form>
|
||||
<div className="mt-3 flex ml-auto">
|
||||
<Image src={IssuesSvg} className="w-2/3 h-[w-2/3] object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
|
||||
{isSubmitting ? "Updating..." : "Continue"}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -19,8 +19,11 @@ import {
|
||||
import { Loader, Spinner } from "@plane/ui";
|
||||
// images
|
||||
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
|
||||
import signInIssues from "public/onboarding/sign-in.svg";
|
||||
// types
|
||||
import { IUser, IUserSettings } from "types";
|
||||
// icons
|
||||
import { Lightbulb } from "lucide-react";
|
||||
|
||||
const authService = new AuthService();
|
||||
|
||||
@ -180,71 +183,74 @@ export const SignInView = observer(() => {
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
|
||||
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
|
||||
<div className="grid place-items-center bg-custom-background-100">
|
||||
<div className="h-[30px] w-[30px]">
|
||||
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
|
||||
</div>
|
||||
<div className="bg-gradient-to-r from-custom-primary-10/80 to-custom-primary-20/80 h-full overflow-y-auto">
|
||||
<div className="sm:py-5 pl-8 pb-4 sm:pl-16 lg:pl-28 ">
|
||||
<div className="flex text-3xl items-center mt-16 font-semibold">
|
||||
<div className="h-[30px] w-[30px] mr-2">
|
||||
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
|
||||
<div>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
|
||||
Sign in to Plane
|
||||
</h1>
|
||||
|
||||
{!envConfig ? (
|
||||
<div className="pt-10 w-ful">
|
||||
<Loader className="space-y-4 w-full pb-4">
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
</Loader>
|
||||
|
||||
<Loader className="space-y-4 w-full pt-4">
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
</Loader>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
{enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
|
||||
{envConfig?.magic_login && (
|
||||
<div className="flex flex-col divide-y divide-custom-border-200">
|
||||
<div className="pb-7">
|
||||
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
|
||||
{envConfig?.google_client_id && (
|
||||
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
|
||||
)}
|
||||
{envConfig?.github_client_id && (
|
||||
<GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
<p className="pt-16 text-custom-text-200 text-sm text-center">
|
||||
By signing up, you agree to the{" "}
|
||||
<a
|
||||
href="https://plane.so/terms-and-conditions"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium underline"
|
||||
>
|
||||
Terms & Conditions
|
||||
</a>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
Plane
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="md:w-2/3 sm:w-4/5 rounded-md mx-auto shadow-sm border border-custom-border-200">
|
||||
<div className=" bg-gradient-to-r from-custom-primary-10/80 to-custom-primary-20/30 p-4">
|
||||
<div className="bg-gradient-to-br px-7 sm:px-0 from-white/40 to-white/80 h-full pt-32 pb-20 rounded-md">
|
||||
{!envConfig ? (
|
||||
<div className="pt-10 w-ful">
|
||||
<Loader className="space-y-4 w-full pb-4">
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
</Loader>
|
||||
|
||||
<Loader className="space-y-4 w-full pt-4">
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
</Loader>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
{enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
|
||||
{envConfig?.magic_login && (
|
||||
<div className="flex flex-col divide-y divide-custom-border-200">
|
||||
<div className="pb-2">
|
||||
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex sm:w-[360px] items-center mt-4 mx-auto">
|
||||
<hr className="border-custom-border-200 w-full" />
|
||||
<p className="text-center text-sm text-custom-text-400 mx-3 flex-shrink-0">Or continue with</p>
|
||||
<hr className="border-custom-border-200 w-full" />
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-96 mx-auto overflow-hidden">
|
||||
{envConfig?.google_client_id && (
|
||||
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
|
||||
)}
|
||||
{envConfig?.github_client_id && (
|
||||
<GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
<div className="flex py-2 bg-custom-primary-10 mx-auto rounded-sm border border-custom-primary-20 sm:w-96 mt-16">
|
||||
<Lightbulb className="h-7 w-7 mr-2 mx-3" />
|
||||
<p className=" text-sm text-left">
|
||||
Try the latest features, like Tiptap editor, to write compelling responses.{" "}
|
||||
<span className="font-medium underline hover:cursor-pointer" onClick={() => {}}>
|
||||
See new features
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center sm:w-96 sm:h-64 object-cover mt-6 mx-auto rounded-md ">
|
||||
<Image src={signInIssues} alt="Plane Logo" className="sm:w-96 sm:h-64" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@ -247,7 +247,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
||||
{!sidebarCollapsed && (
|
||||
<Menu as="div" className="relative flex-shrink-0">
|
||||
<Menu.Button className="grid place-items-center outline-none">
|
||||
<Avatar
|
||||
<Avatar
|
||||
name={currentUser?.display_name}
|
||||
src={currentUser?.avatar}
|
||||
size={24}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useEffect, useState, ReactElement } from "react";
|
||||
import { useEffect, useState, ReactElement, Fragment } from "react";
|
||||
import Image from "next/image";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
@ -15,7 +15,7 @@ import { UserAuthWrapper } from "layouts/auth-layout";
|
||||
// components
|
||||
import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
|
||||
// ui
|
||||
import { Spinner } from "@plane/ui";
|
||||
import { Avatar, CustomMenu, Spinner } from "@plane/ui";
|
||||
// images
|
||||
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
|
||||
import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
|
||||
@ -23,12 +23,17 @@ import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-l
|
||||
// types
|
||||
import { IUser, TOnboardingSteps } from "types";
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { Menu, Popover, Transition } from "@headlessui/react";
|
||||
import DeleteAccountModal from "components/account/delete-account-modal";
|
||||
|
||||
// services
|
||||
const workspaceService = new WorkspaceService();
|
||||
|
||||
const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
const [step, setStep] = useState<number | null>(null);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [tryDiffAccount, setTryDiffAccount] = useState(false);
|
||||
|
||||
const {
|
||||
user: { currentUser, updateCurrentUser, updateUserOnBoard },
|
||||
@ -37,9 +42,8 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
|
||||
const user = currentUser ?? undefined;
|
||||
const workspaces = workspaceStore.workspaces;
|
||||
const userWorkspaces = workspaceStore.workspacesCreateByCurrentUser;
|
||||
|
||||
const { theme, setTheme } = useTheme();
|
||||
const { setTheme } = useTheme();
|
||||
|
||||
const {} = useUserAuth("onboarding");
|
||||
|
||||
@ -49,6 +53,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
|
||||
// update last active workspace details
|
||||
const updateLastWorkspace = async () => {
|
||||
console.log("Workspaces", workspaces);
|
||||
if (!workspaces) return;
|
||||
|
||||
await updateCurrentUser({
|
||||
@ -69,7 +74,6 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
|
||||
await updateCurrentUser(payload);
|
||||
};
|
||||
|
||||
// complete onboarding
|
||||
const finishOnboarding = async () => {
|
||||
if (!user) return;
|
||||
@ -87,17 +91,14 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
|
||||
const onboardingStep = user.onboarding_step;
|
||||
|
||||
if (!onboardingStep.profile_complete && step !== 1) setStep(1);
|
||||
if (!onboardingStep.workspace_join && !onboardingStep.workspace_create && step !== 1) setStep(1);
|
||||
|
||||
if (onboardingStep.profile_complete) {
|
||||
if (!onboardingStep.workspace_join && invitations.length > 0 && step !== 2 && step !== 4) setStep(4);
|
||||
else if (!onboardingStep.workspace_create && (step !== 4 || onboardingStep.workspace_join) && step !== 2)
|
||||
setStep(2);
|
||||
if (onboardingStep.workspace_join || onboardingStep.workspace_create) {
|
||||
if (!onboardingStep.profile_complete && step!==2) setStep(2);
|
||||
}
|
||||
|
||||
if (
|
||||
onboardingStep.profile_complete &&
|
||||
onboardingStep.workspace_create &&
|
||||
(onboardingStep.workspace_join || onboardingStep.workspace_create) &&
|
||||
!onboardingStep.workspace_invite &&
|
||||
step !== 3
|
||||
)
|
||||
@ -109,74 +110,92 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<DeleteAccountModal
|
||||
heading={tryDiffAccount ? "Try Different Email" : "Delete Account"}
|
||||
isOpen={showDeleteModal || tryDiffAccount}
|
||||
onClose={() => {
|
||||
setShowDeleteModal(false);
|
||||
setTryDiffAccount(false);
|
||||
}}
|
||||
/>
|
||||
{user && step !== null ? (
|
||||
<div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
|
||||
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
|
||||
<div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
|
||||
{step === 1 ? (
|
||||
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
|
||||
<div className="h-[30px] w-[30px]">
|
||||
<Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
|
||||
</div>
|
||||
<div className="bg-gradient-to-r from-custom-primary-10/80 to-custom-primary-20/80 h-full overflow-y-auto">
|
||||
<div className="sm:py-14 py-10 px-4 sm:px-7 md:px-14 lg:pl-28 lg:pr-24 flex items-center">
|
||||
<div className="w-full flex items-center justify-between font-semibold ">
|
||||
<div className="text-3xl flex items-center gap-x-1">
|
||||
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" height={30} width={30} />
|
||||
Plane
|
||||
</div>
|
||||
) : (
|
||||
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
|
||||
<div className="h-[30px] w-[133px]">
|
||||
{theme === "light" ? (
|
||||
<Image src={BlackHorizontalLogo} alt="Plane black logo" />
|
||||
) : (
|
||||
<Image src={WhiteHorizontalLogo} alt="Plane white logo" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
|
||||
{user?.email}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
|
||||
{step === 1 ? (
|
||||
<UserDetails user={user} />
|
||||
) : step === 2 ? (
|
||||
<Workspace
|
||||
finishOnboarding={finishOnboarding}
|
||||
stepChange={stepChange}
|
||||
updateLastWorkspace={updateLastWorkspace}
|
||||
user={user}
|
||||
workspaces={workspaces}
|
||||
/>
|
||||
) : step === 3 ? (
|
||||
<InviteMembers
|
||||
finishOnboarding={finishOnboarding}
|
||||
stepChange={stepChange}
|
||||
user={user}
|
||||
workspace={userWorkspaces?.[0]}
|
||||
/>
|
||||
) : (
|
||||
step === 4 && (
|
||||
<JoinWorkspaces
|
||||
finishOnboarding={finishOnboarding}
|
||||
stepChange={stepChange}
|
||||
updateLastWorkspace={updateLastWorkspace}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
{step !== 4 && (
|
||||
<div className="sticky sm:fixed bottom-0 md:bottom-14 md:right-16 py-6 md:py-0 flex justify-center md:justify-end bg-custom-background-100 md:bg-transparent pointer-events-none w-full z-[1]">
|
||||
<div className="w-3/4 md:w-1/5 space-y-1">
|
||||
<p className="text-xs text-custom-text-200">{step} of 3 steps</p>
|
||||
<div className="relative h-1 w-full rounded bg-custom-background-80">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-1 rounded bg-custom-primary-100 duration-300"
|
||||
style={{
|
||||
width: `${((step / 3) * 100).toFixed(0)}%`,
|
||||
}}
|
||||
|
||||
<div className="pr-4 flex gap-x-2 items-center">
|
||||
{step != 1 && (
|
||||
<Avatar
|
||||
name={workspaces ? workspaces[0].name : "N"}
|
||||
size={35}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="#FCBE1D"
|
||||
className="!text-base"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
{step != 1 && <p className="text-sm text-custom-text-200 font-medium">{currentUser?.first_name}</p>}
|
||||
|
||||
<Menu>
|
||||
<Menu.Button className={"flex items-center gap-x-2"}>
|
||||
<span className="text-base font-medium">{user.email}</span>
|
||||
<ChevronDown className="h-4 w-4 text-custom-text-300" />
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Menu.Items className={"absolute bg-slate-600 translate-x-full"}>
|
||||
<Menu.Item>
|
||||
<div
|
||||
className="absolute pr-28 hover:cursor-pointer bg-custom-background-100 mr-auto mt-2 rounded-md text-custom-text-300 text-base font-normal p-3 shadow-sm border border-custom-border-200"
|
||||
onClick={() => {
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-full lg:w-4/5 xl:w-3/4 sm:w-4/5 rounded-md mx-auto shadow-sm border border-custom-border-200">
|
||||
<div className=" bg-gradient-to-r from-custom-primary-10/80 to-custom-primary-20/30 p-4">
|
||||
<div className="bg-gradient-to-br from-white/40 to-white/80 h-full rounded-md">
|
||||
{step === 1 ? (
|
||||
<JoinWorkspaces
|
||||
setTryDiffAccount={() => {
|
||||
setTryDiffAccount(true);
|
||||
}}
|
||||
finishOnboarding={finishOnboarding}
|
||||
stepChange={stepChange}
|
||||
updateLastWorkspace={updateLastWorkspace}
|
||||
/>
|
||||
) : step === 2 ? (
|
||||
<UserDetails user={user} />
|
||||
) : (
|
||||
<InviteMembers
|
||||
finishOnboarding={finishOnboarding}
|
||||
stepChange={stepChange}
|
||||
user={user}
|
||||
workspace={workspaces?.[0]}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-screen w-full grid place-items-center">
|
||||
|
||||
592
web/public/onboarding/onboarding-issues.svg
Normal file
592
web/public/onboarding/onboarding-issues.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.7 MiB |
649
web/public/onboarding/sign-in.svg
Normal file
649
web/public/onboarding/sign-in.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.7 MiB |
@ -85,7 +85,7 @@ export class WorkspaceService extends APIService {
|
||||
data: IWorkspaceBulkInviteFormData,
|
||||
user: IUser | undefined
|
||||
): Promise<any> {
|
||||
return this.post(`/api/workspaces/${workspaceSlug}/invite/`, data)
|
||||
return this.post(`/api/workspaces/${workspaceSlug}/invitations/`, data)
|
||||
.then((response) => {
|
||||
trackEventService.trackWorkspaceEvent(response.data, "WORKSPACE_USER_INVITE", user as IUser);
|
||||
return response?.data;
|
||||
@ -109,7 +109,7 @@ export class WorkspaceService extends APIService {
|
||||
}
|
||||
|
||||
async joinWorkspaces(data: any): Promise<any> {
|
||||
return this.post("/api/users/me/invitations/workspaces/", data)
|
||||
return this.post("/api/users/me/workspaces/invitations/", data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
@ -125,7 +125,7 @@ export class WorkspaceService extends APIService {
|
||||
}
|
||||
|
||||
async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
|
||||
return this.get("/api/users/me/invitations/workspaces/")
|
||||
return this.get("/api/users/me/workspaces/invitations/")
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user