binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-4488] feat: brand revamp (#7544)

Browse source 
* chore: empty state asset and theme improvement (#7542)

* chore: empty state asset and theme improvement

* chore: upgrade modal improvement and code refactor

* feat: onboarding revamp and theme changes (#7541)

* refactor: consolidate password strength indicator into shared UI package

* chore: remove old password strength meter implementations

* chore: update package dependencies for password strength refactor

* chore: code refactor

* chore: brand logo added

* chore:  terms and conditions refactor

* chore: auth form refactor

* chore: oauth enhancements and refactor

* chore: plane new logos added

* chore: auth input form field added to ui package

* chore: password input component added

* chore: web auth refactor

* chore: update brand colors and remove onboarding-specific styles

* chore: clean up unused assets

* chore: profile menu text overflow

* chore: theme related changes

* chore: logo spinner updated

* chore: onboarding constant and types updated

* chore: theme changes and code refactor

* feat: onboarding flow revamp

* fix:  build error and code refactoring

* chore: code refactor

* fix: build error

* chore: consent option added to onboarding and code refactor

* fix: build fix

* chore: code refactor

* chore: auth screen revamp and code refactor

* chore: onboarding enhancements

* chore: code refactor

* chore: onboarding logic improvement

* chore: code refactor

* fix: onboarding pre release improvements

* chore: color token updated

* chore: color token updated

* chore: auth screen line height and size improvements

* chore: input height updated

* chore: n-progress theme updated

* chore: theme and logo enhancements

* chore: space auth and code refactor

* chore: update new brand empty states (#7543)

* [WEB-4585]chore: branding updates (#7540)

* chore: updated logo, og image, and loaders

* chore: updated branding colors

* chore: tour modal logo

* chore: updated logo spinner size

* chore: updated email templates logos and colors

* chore: code refactor

* fix: removed conditional hook render

* fix: space app loader

---------

Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Co-authored-by: vamsikrishnamathala <matalav55@gmail.com>
This commit is contained in:
Anmol Singh Bhatia 2025-08-06 22:24:47 +05:30 • committed by GitHub
parent 6450793d72
commit 51e146f8ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
345 changed files with 5158 additions and 2515 deletions
Download patch file Download diff file Expand all files Collapse all files

205
apps/web/app/(all)/accounts/forgot-password/page.tsx
View file

@ -1,203 +1,24 @@
"use client";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { useTheme } from "next-themes";
import { Controller, useForm } from "react-hook-form";
// icons
import { CircleCheck } from "lucide-react";
// plane imports
import { AUTH_TRACKER_ELEMENTS, AUTH_TRACKER_EVENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button, Input, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
import { cn, checkEmailValidity } from "@plane/utils";
// components
import { ForgotPasswordForm } from "@/components/account/auth-forms/forgot-password";
import { AuthHeader } from "@/components/auth-screens/header";
// helpers
import { EPageTypes } from "@/helpers/authentication.helper";
// hooks
import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
import { useInstance } from "@/hooks/store";
import useTimer from "@/hooks/use-timer";
// wrappers
import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper";
// layouts
import DefaultLayout from "@/layouts/default-layout";
import { AuthenticationWrapper } from "@/lib/wrappers";
// images
import PlaneBackgroundPatternDark from "@/public/auth/background-pattern-dark.svg";
import PlaneBackgroundPattern from "@/public/auth/background-pattern.svg";
import BlackHorizontalLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
// services
import { AuthService } from "@/services/auth.service";
type TForgotPasswordFormValues = {
email: string;
};
const defaultValues: TForgotPasswordFormValues = {
email: "",
};
// services
const authService = new AuthService();
const ForgotPasswordPage = observer(() => {
// search params
const searchParams = useSearchParams();
const email = searchParams.get("email");
// plane hooks
const { t } = useTranslation();
const { config } = useInstance();
// hooks
const { resolvedTheme } = useTheme();
// timer
const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);
// form info
const {
control,
formState: { errors, isSubmitting, isValid },
handleSubmit,
} = useForm<TForgotPasswordFormValues>({
defaultValues: {
...defaultValues,
email: email?.toString() ?? "",
},
});
const handleForgotPassword = async (formData: TForgotPasswordFormValues) => {
await authService
.sendResetPasswordLink({
email: formData.email,
})
.then(() => {
captureSuccess({
eventName: AUTH_TRACKER_EVENTS.forgot_password,
payload: {
email: formData.email,
},
});
setToast({
type: TOAST_TYPE.SUCCESS,
title: t("auth.forgot_password.toast.success.title"),
message: t("auth.forgot_password.toast.success.message"),
});
setResendCodeTimer(30);
})
.catch((err) => {
captureError({
eventName: AUTH_TRACKER_EVENTS.forgot_password,
payload: {
email: formData.email,
},
});
setToast({
type: TOAST_TYPE.ERROR,
title: t("auth.forgot_password.toast.error.title"),
message: err?.error ?? t("auth.forgot_password.toast.error.message"),
});
});
};
// derived values
const enableSignUpConfig = config?.enable_signup ?? false;
const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
return (
const ForgotPasswordPage = observer(() => (
<DefaultLayout>
<AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
<div className="relative w-screen h-screen overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
className="object-cover w-full h-full"
alt="Plane background pattern"
/>
</div>
<div className="relative z-10 flex flex-col w-screen h-screen overflow-hidden overflow-y-auto">
<div className="container relative flex items-center justify-between flex-shrink-0 min-w-full px-10 pb-4 transition-all lg:px-20 xl:px-36">
<div className="flex items-center py-10 gap-x-2">
<Link href={`/`} className="h-[30px] w-[133px]">
<Image src={logo} alt="Plane logo" />
</Link>
</div>
{enableSignUpConfig && (
<div className="flex flex-col items-end text-sm font-medium text-center sm:items-center sm:gap-2 sm:flex-row text-onboarding-text-300">
{t("auth.common.new_to_plane")}
<Link
href="/"
data-ph-element={AUTH_TRACKER_ELEMENTS.SIGNUP_FROM_FORGOT_PASSWORD}
className="font-semibold text-custom-primary-100 hover:underline"
>
{t("auth.common.create_account")}
</Link>
</div>
)}
</div>
<div className="container flex-grow max-w-lg px-10 py-10 mx-auto transition-all lg:max-w-md lg:px-5 lg:pt-28">
<div className="relative flex flex-col space-y-6">
<div className="py-4 space-y-1 text-center">
<h3 className="flex justify-center gap-4 text-3xl font-bold text-onboarding-text-100">
{t("auth.forgot_password.title")}
</h3>
<p className="font-medium text-onboarding-text-400">{t("auth.forgot_password.description")}</p>
</div>
<form onSubmit={handleSubmit(handleForgotPassword)} className="mt-5 space-y-4">
<div className="space-y-1">
<label className="text-sm font-medium text-onboarding-text-300" htmlFor="email">
{t("auth.common.email.label")}
</label>
<Controller
control={control}
name="email"
rules={{
required: t("auth.common.email.errors.required"),
validate: (value) => checkEmailValidity(value) || t("auth.common.email.errors.invalid"),
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="email"
name="email"
type="email"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
autoComplete="on"
disabled={resendTimerCode > 0}
/>
)}
/>
{resendTimerCode > 0 && (
<p className="flex items-start w-full gap-1 px-1 text-xs font-medium text-green-700">
<CircleCheck height={12} width={12} className="mt-0.5" />
{t("auth.forgot_password.email_sent")}
</p>
)}
</div>
<Button
type="submit"
variant="primary"
className="w-full"
size="lg"
disabled={!isValid}
loading={isSubmitting || resendTimerCode > 0}
>
{resendTimerCode > 0
? t("auth.common.resend_in", { seconds: resendTimerCode })
: t("auth.forgot_password.send_reset_link")}
</Button>
<Link href="/" className={cn("w-full", getButtonStyling("link-neutral", "lg"))}>
{t("auth.common.back_to_sign_in")}
</Link>
</form>
</div>
</div>
</div>
<div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
<AuthHeader type={EAuthModes.SIGN_IN} />
<ForgotPasswordForm />
</div>
</AuthenticationWrapper>
);
});
</DefaultLayout>
));
export default ForgotPasswordPage;

245
apps/web/app/(all)/accounts/reset-password/page.tsx
View file

@ -1,242 +1,25 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
// icons
import { useTheme } from "next-themes";
import { Eye, EyeOff } from "lucide-react";
// ui
import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button, Input, PasswordStrengthIndicator } from "@plane/ui";
// plane imports
import { EAuthModes } from "@plane/constants";
// components
import { getPasswordStrength } from "@plane/utils";
import { AuthBanner } from "@/components/account";
import { ResetPasswordForm } from "@/components/account";
import { AuthHeader } from "@/components/auth-screens/header";
// helpers
import {
EAuthenticationErrorCodes,
EErrorAlertType,
EPageTypes,
TAuthErrorInfo,
authErrorHandler,
} from "@/helpers/authentication.helper";
// wrappers
import { EPageTypes } from "@/helpers/authentication.helper";
// layouts
import DefaultLayout from "@/layouts/default-layout";
import { AuthenticationWrapper } from "@/lib/wrappers";
// services
// images
import PlaneBackgroundPatternDark from "@/public/auth/background-pattern-dark.svg";
import PlaneBackgroundPattern from "@/public/auth/background-pattern.svg";
import BlackHorizontalLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
import { AuthService } from "@/services/auth.service";
type TResetPasswordFormValues = {
email: string;
password: string;
confirm_password?: string;
};
const defaultValues: TResetPasswordFormValues = {
email: "",
password: "",
};
// services
const authService = new AuthService();
const ResetPasswordPage = observer(() => {
// search params
const searchParams = useSearchParams();
const uidb64 = searchParams.get("uidb64");
const token = searchParams.get("token");
const email = searchParams.get("email");
const error_code = searchParams.get("error_code");
// states
const [showPassword, setShowPassword] = useState({
password: false,
retypePassword: false,
});
const [resetFormData, setResetFormData] = useState<TResetPasswordFormValues>({
...defaultValues,
email: email ? email.toString() : "",
});
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
// plane hooks
const { t } = useTranslation();
// hooks
const { resolvedTheme } = useTheme();
const handleShowPassword = (key: keyof typeof showPassword) =>
setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
const handleFormChange = (key: keyof TResetPasswordFormValues, value: string) =>
setResetFormData((prev) => ({ ...prev, [key]: value }));
useEffect(() => {
if (csrfToken === undefined)
authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
}, [csrfToken]);
const isButtonDisabled = useMemo(
() =>
!!resetFormData.password &&
getPasswordStrength(resetFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
resetFormData.password === resetFormData.confirm_password
? false
: true,
[resetFormData]
);
useEffect(() => {
if (error_code) {
const errorhandler = authErrorHandler(error_code?.toString() as EAuthenticationErrorCodes);
if (errorhandler) {
setErrorInfo(errorhandler);
}
}
}, [error_code]);
const password = resetFormData?.password ?? "";
const confirmPassword = resetFormData?.confirm_password ?? "";
const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
return (
const ResetPasswordPage = () => (
<DefaultLayout>
<AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
<div className="relative w-screen h-screen overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
className="w-full h-full object-cover"
alt="Plane background pattern"
/>
</div>
<div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
<div className="container min-w-full px-10 lg:px-20 xl:px-36 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
<div className="flex items-center gap-x-2 py-10">
<Link href={`/`} className="h-[30px] w-[133px]">
<Image src={logo} alt="Plane logo" />
</Link>
</div>
</div>
<div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
<div className="relative flex flex-col space-y-6">
<div className="text-center space-y-1 py-4">
<h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
{t("auth.reset_password.title")}
</h3>
<p className="font-medium text-onboarding-text-400">{t("auth.reset_password.description")}</p>
</div>
{errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
<AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
)}
<form
className="mt-5 space-y-4"
method="POST"
action={`${API_BASE_URL}/auth/reset-password/${uidb64?.toString()}/${token?.toString()}/`}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
{t("auth.common.email.label")}
</label>
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<Input
id="email"
name="email"
type="email"
value={resetFormData.email}
//hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
autoComplete="on"
disabled
/>
</div>
</div>
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
{t("auth.common.password.label")}
</label>
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<Input
type={showPassword.password ? "text" : "password"}
name="password"
value={resetFormData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
//hasError={Boolean(errors.password)}
placeholder={t("auth.common.password.placeholder")}
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
minLength={8}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoFocus
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
</div>
<PasswordStrengthIndicator password={resetFormData.password} isFocused={isPasswordInputFocused} />
</div>
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
{t("auth.common.password.confirm_password.label")}
</label>
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<Input
type={showPassword.retypePassword ? "text" : "password"}
name="confirm_password"
value={resetFormData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}
</div>
{!!resetFormData.confirm_password &&
resetFormData.password !== resetFormData.confirm_password &&
renderPasswordMatchError && (
<span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
)}
</div>
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
{t("auth.common.password.submit")}
</Button>
</form>
</div>
</div>
</div>
<div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
<AuthHeader type={EAuthModes.SIGN_IN} />
<ResetPasswordForm />
</div>
</AuthenticationWrapper>
);
});
</DefaultLayout>
);
export default ResetPasswordPage;

252
apps/web/app/(all)/accounts/set-password/page.tsx
View file

@ -1,253 +1,25 @@
"use client";
import { FormEvent, useEffect, useMemo, useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
// icons
import { useTheme } from "next-themes";
import { Eye, EyeOff } from "lucide-react";
// plane imports
import { AUTH_TRACKER_ELEMENTS, AUTH_TRACKER_EVENTS, E_PASSWORD_STRENGTH } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button, Input, PasswordStrengthIndicator, TOAST_TYPE, setToast } from "@plane/ui";
import { EAuthModes } from "@plane/constants";
// components
import { getPasswordStrength } from "@plane/utils";
import { ResetPasswordForm } from "@/components/account";
import { AuthHeader } from "@/components/auth-screens/header";
// helpers
import { EPageTypes } from "@/helpers/authentication.helper";
// hooks
import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
import { useUser } from "@/hooks/store";
import { useAppRouter } from "@/hooks/use-app-router";
// wrappers
// layouts
import DefaultLayout from "@/layouts/default-layout";
import { AuthenticationWrapper } from "@/lib/wrappers";
// services
// images
import PlaneBackgroundPatternDark from "@/public/auth/background-pattern-dark.svg";
import PlaneBackgroundPattern from "@/public/auth/background-pattern.svg";
import BlackHorizontalLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
import { AuthService } from "@/services/auth.service";
type TResetPasswordFormValues = {
email: string;
password: string;
confirm_password?: string;
};
const defaultValues: TResetPasswordFormValues = {
email: "",
password: "",
};
// services
const authService = new AuthService();
const SetPasswordPage = observer(() => {
// router
const router = useAppRouter();
// search params
const searchParams = useSearchParams();
const email = searchParams.get("email");
// states
const [showPassword, setShowPassword] = useState({
password: false,
retypePassword: false,
});
const [passwordFormData, setPasswordFormData] = useState<TResetPasswordFormValues>({
...defaultValues,
email: email ? email.toString() : "",
});
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
// plane hooks
const { t } = useTranslation();
// hooks
const { resolvedTheme } = useTheme();
const { data: user, handleSetPassword } = useUser();
useEffect(() => {
captureView({
elementName: AUTH_TRACKER_ELEMENTS.SET_PASSWORD_FORM,
});
}, []);
useEffect(() => {
if (csrfToken === undefined)
authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
}, [csrfToken]);
const handleShowPassword = (key: keyof typeof showPassword) =>
setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
const handleFormChange = (key: keyof TResetPasswordFormValues, value: string) =>
setPasswordFormData((prev) => ({ ...prev, [key]: value }));
const isButtonDisabled = useMemo(
() =>
!!passwordFormData.password &&
getPasswordStrength(passwordFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
passwordFormData.password === passwordFormData.confirm_password
? false
: true,
[passwordFormData]
);
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
try {
e.preventDefault();
if (!csrfToken) throw new Error("csrf token not found");
await handleSetPassword(csrfToken, { password: passwordFormData.password });
captureSuccess({
eventName: AUTH_TRACKER_EVENTS.password_created,
});
router.push("/");
} catch (error: unknown) {
let message = undefined;
if (error instanceof Error) {
const err = error as Error & { error?: string };
message = err.error;
}
captureError({
eventName: AUTH_TRACKER_EVENTS.password_created,
});
setToast({
type: TOAST_TYPE.ERROR,
title: t("common.errors.default.title"),
message: message ?? t("common.errors.default.message"),
});
}
};
const password = passwordFormData?.password ?? "";
const confirmPassword = passwordFormData?.confirm_password ?? "";
const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
return (
const SetPasswordPage = () => (
<DefaultLayout>
<AuthenticationWrapper pageType={EPageTypes.SET_PASSWORD}>
<div className="relative w-screen h-screen overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
className="w-full h-full object-cover"
alt="Plane background pattern"
/>
</div>
<div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
<div className="container min-w-full px-10 lg:px-20 xl:px-36 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
<div className="flex items-center gap-x-2 py-10">
<Link href={`/`} className="h-[30px] w-[133px]">
<Image src={logo} alt="Plane logo" />
</Link>
</div>
</div>
<div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
<div className="relative flex flex-col space-y-6">
<div className="text-center space-y-1 py-4">
<h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
{t("auth.set_password.title")}
</h3>
<p className="font-medium text-onboarding-text-400">{t("auth.set_password.description")}</p>
</div>
<form className="mt-5 space-y-4" onSubmit={(e) => handleSubmit(e)}>
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
{t("auth.common.email.label")}
</label>
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<Input
id="email"
name="email"
type="email"
value={user?.email}
//hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
autoComplete="on"
disabled
/>
</div>
</div>
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
{t("auth.common.password.label")}
</label>
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<Input
type={showPassword.password ? "text" : "password"}
name="password"
value={passwordFormData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
//hasError={Boolean(errors.password)}
placeholder={t("auth.common.password.placeholder")}
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
minLength={8}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoFocus
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
</div>
<PasswordStrengthIndicator password={passwordFormData.password} isFocused={isPasswordInputFocused} />
</div>
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
{t("auth.common.password.confirm_password.label")}
</label>
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<Input
type={showPassword.retypePassword ? "text" : "password"}
name="confirm_password"
value={passwordFormData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}
</div>
{!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password &&
renderPasswordMatchError && (
<span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
)}
</div>
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
{t("common.continue")}
</Button>
</form>
</div>
</div>
</div>
<div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
<AuthHeader type={EAuthModes.SIGN_IN} />
<ResetPasswordForm />
</div>
</AuthenticationWrapper>
);
});
</DefaultLayout>
);
export default SetPasswordPage;

13
apps/web/app/(all)/create-workspace/page.tsx
View file

@ -4,11 +4,10 @@ import { useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
import { useTheme } from "next-themes";
import { useTranslation } from "@plane/i18n";
import { IWorkspace } from "@plane/types";
// components
import { Button, getButtonStyling } from "@plane/ui";
import { Button, getButtonStyling, PlaneLogo } from "@plane/ui";
import { CreateWorkspaceForm } from "@/components/workspace";
// hooks
import { useUser, useUserProfile } from "@/hooks/store";
@ -18,8 +17,6 @@ import { AuthenticationWrapper } from "@/lib/wrappers";
// plane web helpers
import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
// images
import BlackHorizontalLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
import WorkspaceCreationDisabled from "@/public/workspace/workspace-creation-disabled.png";
const CreateWorkspacePage = observer(() => {
@ -35,8 +32,6 @@ const CreateWorkspacePage = observer(() => {
slug: "",
organization_size: "",
});
// hooks
const { resolvedTheme } = useTheme();
// derived values
const isWorkspaceCreationDisabled = getIsWorkspaceCreationDisabled();
@ -56,8 +51,6 @@ const CreateWorkspacePage = observer(() => {
await updateUserProfile({ last_workspace_id: workspace.id }).then(() => router.push(`/${workspace.slug}`));
};
const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
return (
<AuthenticationWrapper>
<div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
@ -67,9 +60,7 @@ const CreateWorkspacePage = observer(() => {
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
href="/"
>
<div className="h-[30px] w-[133px]">
<Image src={logo} alt="Plane logo" />
</div>
<PlaneLogo className="h-9 w-auto text-custom-text-100" />
</Link>
<div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
{currentUser?.email}

14
apps/web/app/(all)/invitations/page.tsx
View file

@ -2,10 +2,8 @@
import React, { useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
import { useTheme } from "next-themes";
import useSWR, { mutate } from "swr";
import { CheckCircle2 } from "lucide-react";
// plane imports
@ -14,7 +12,7 @@ import { useTranslation } from "@plane/i18n";
// types
import type { IWorkspaceMemberInvitation } from "@plane/types";
// ui
import { Button, TOAST_TYPE, setToast } from "@plane/ui";
import { Button, TOAST_TYPE, setToast, PlaneLogo } from "@plane/ui";
import { truncateText } from "@plane/utils";
// components
import { EmptyState } from "@/components/common";
@ -31,8 +29,6 @@ import { AuthenticationWrapper } from "@/lib/wrappers";
import { WorkspaceService } from "@/plane-web/services";
// images
import emptyInvitation from "@/public/empty-state/invitation.svg";
import BlackHorizontalLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
const workspaceService = new WorkspaceService();
@ -48,8 +44,6 @@ const UserInvitationsPage = observer(() => {
const { updateUserProfile } = useUserProfile();
const { fetchWorkspaces } = useWorkspace();
// next-themes
const { resolvedTheme } = useTheme();
const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS", () => workspaceService.userWorkspaceInvitations());
@ -130,8 +124,6 @@ const UserInvitationsPage = observer(() => {
});
};
const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
return (
<AuthenticationWrapper>
<div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
@ -141,9 +133,7 @@ const UserInvitationsPage = observer(() => {
href="/"
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
>
<div className="h-[30px] w-[133px]">
<Image src={logo} alt="Plane logo" />
</div>
<PlaneLogo className="h-9 w-auto text-custom-text-100" />
</Link>
<div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
{currentUser?.email}

169
apps/web/app/(all)/onboarding/page.tsx
View file

@ -1,50 +1,32 @@
"use client";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import useSWR from "swr";
// types
import { USER_TRACKER_EVENTS } from "@plane/constants";
import { TOnboardingSteps, TUserProfile } from "@plane/types";
// ui
import { TOAST_TYPE, setToast } from "@plane/ui";
// components
import { LogoSpinner } from "@/components/common";
import { InviteMembers, CreateOrJoinWorkspaces, ProfileSetup } from "@/components/onboarding";
import { OnboardingRoot } from "@/components/onboarding";
// constants
import { USER_WORKSPACES_LIST } from "@/constants/fetch-keys";
// helpers
import { EPageTypes } from "@/helpers/authentication.helper";
// hooks
import { captureSuccess } from "@/helpers/event-tracker.helper";
import { useUser, useWorkspace, useUserProfile } from "@/hooks/store";
import { useUser, useWorkspace } from "@/hooks/store";
// wrappers
import { AuthenticationWrapper } from "@/lib/wrappers";
import { WorkspaceService } from "@/plane-web/services";
import { WorkspaceContentWrapper } from "@/plane-web/components/workspace";
// services
enum EOnboardingSteps {
PROFILE_SETUP = "PROFILE_SETUP",
WORKSPACE_CREATE_OR_JOIN = "WORKSPACE_CREATE_OR_JOIN",
INVITE_MEMBERS = "INVITE_MEMBERS",
}
import { WorkspaceService } from "@/plane-web/services";
const workspaceService = new WorkspaceService();
const OnboardingPage = observer(() => {
// states
const [step, setStep] = useState<EOnboardingSteps | null>(null);
const [totalSteps, setTotalSteps] = useState<number | null>(null);
// store hooks
const { isLoading: userLoader, data: user, updateCurrentUser } = useUser();
const { data: profile, updateUserProfile, finishUserOnboarding } = useUserProfile();
const { workspaces, fetchWorkspaces } = useWorkspace();
// computed values
const workspacesList = Object.values(workspaces ?? {});
const { data: user } = useUser();
const { fetchWorkspaces } = useWorkspace();
// fetching workspaces list
const { isLoading: workspaceListLoader } = useSWR(USER_WORKSPACES_LIST, () => {
useSWR(USER_WORKSPACES_LIST, () => {
if (user?.id) {
fetchWorkspaces();
}
@ -57,133 +39,22 @@ const OnboardingPage = observer(() => {
if (user?.id) return workspaceService.userWorkspaceInvitations();
}
);
// handle step change
const stepChange = async (steps: Partial<TOnboardingSteps>) => {
if (!user) return;
const payload: Partial<TUserProfile> = {
onboarding_step: {
...profile.onboarding_step,
...steps,
},
};
await updateUserProfile(payload);
};
// complete onboarding
const finishOnboarding = async () => {
if (!user) return;
await finishUserOnboarding()
.then(() => {
captureSuccess({
eventName: USER_TRACKER_EVENTS.onboarding_complete,
payload: {
email: user.email,
user_id: user.id,
},
});
})
.catch(() => {
setToast({
type: TOAST_TYPE.ERROR,
title: "Failed",
message: "Failed to finish onboarding, Please try again later.",
});
});
};
useEffect(() => {
// Never update the total steps if it's already set.
if (!totalSteps && userLoader === false && workspaceListLoader === false) {
// If user is already invited to a workspace, only show profile setup steps.
if (workspacesList && workspacesList?.length > 0) {
// If password is auto set then show two different steps for profile setup, else merge them.
if (user?.is_password_autoset) setTotalSteps(2);
else setTotalSteps(1);
} else {
// If password is auto set then total steps will increase to 4 due to extra step at profile setup stage.
if (user?.is_password_autoset) setTotalSteps(4);
else setTotalSteps(3);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userLoader, workspaceListLoader]);
// If the user completes the profile setup and has workspaces (through invitations), then finish the onboarding.
useEffect(() => {
if (userLoader === false && profile && workspaceListLoader === false) {
const onboardingStep = profile.onboarding_step;
if (onboardingStep.profile_complete && !onboardingStep.workspace_create && workspacesList.length > 0)
finishOnboarding();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userLoader, profile, workspaceListLoader]);
useEffect(() => {
const handleStepChange = async () => {
if (!user) return;
const onboardingStep = profile.onboarding_step;
if (!onboardingStep.profile_complete) setStep(EOnboardingSteps.PROFILE_SETUP);
if (
onboardingStep.profile_complete &&
!(onboardingStep.workspace_join || onboardingStep.workspace_create || workspacesList?.length > 0)
) {
setStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
}
if (
onboardingStep.profile_complete &&
(onboardingStep.workspace_join || onboardingStep.workspace_create) &&
!onboardingStep.workspace_invite
)
setStep(EOnboardingSteps.INVITE_MEMBERS);
};
handleStepChange();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [user, step, profile.onboarding_step, updateCurrentUser, workspacesList]);
return (
<AuthenticationWrapper pageType={EPageTypes.ONBOARDING}>
{user && totalSteps && step !== null && !invitationsLoader ? (
<div className={`flex h-full w-full flex-col`}>
{step === EOnboardingSteps.PROFILE_SETUP ? (
<ProfileSetup
user={user}
totalSteps={totalSteps}
stepChange={stepChange}
finishOnboarding={finishOnboarding}
/>
) : step === EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN ? (
<CreateOrJoinWorkspaces
invitations={invitations ?? []}
totalSteps={totalSteps}
stepChange={stepChange}
finishOnboarding={finishOnboarding}
/>
) : step === EOnboardingSteps.INVITE_MEMBERS ? (
<InviteMembers
finishOnboarding={finishOnboarding}
totalSteps={totalSteps}
user={user}
workspace={workspacesList?.[0]}
/>
) : (
<div className="flex h-full w-full items-center justify-center">
Something Went wrong. Please try again.
</div>
)}
<div className="flex relative size-full overflow-hidden bg-custom-background-90 rounded-lg transition-all ease-in-out duration-300">
<div className="size-full p-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden">
<div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg bg-custom-background-100 shadow-md border border-custom-border-200">
{user && !invitationsLoader ? (
<OnboardingRoot invitations={invitations ?? []} />
) : (
<div className="grid h-full w-full place-items-center">
<LogoSpinner />
</div>
)}
</div>
</div>
) : (
<div className="grid h-screen w-full place-items-center">
<LogoSpinner />
</div>
)}
</div>
</AuthenticationWrapper>
);
});

66
apps/web/app/(all)/sign-up/page.tsx
View file

@ -1,69 +1,19 @@
"use client";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
// ui
import { useTheme } from "next-themes";
// components
import { AUTH_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { AuthRoot } from "@/components/account";
// constants
import { AuthBase } from "@/components/auth-screens";
// helpers
import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper";
// assets
import DefaultLayout from "@/layouts/default-layout";
import { AuthenticationWrapper } from "@/lib/wrappers";
import PlaneBackgroundPatternDark from "@/public/auth/background-pattern-dark.svg";
import PlaneBackgroundPattern from "@/public/auth/background-pattern.svg";
import BlackHorizontalLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
export type AuthType = "sign-in" | "sign-up";
const SignInPage = observer(() => {
// plane hooks
const { t } = useTranslation();
// hooks
const { resolvedTheme } = useTheme();
const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
return (
const SignUpPage = () => (
<DefaultLayout>
<AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
<div className="relative w-screen h-screen overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
className="w-full h-full object-cover"
alt="Plane background pattern"
/>
</div>
<div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
<div className="container min-w-full px-10 lg:px-20 xl:px-36 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
<div className="flex items-center gap-x-2 py-10">
<Link href={`/`} className="h-[30px] w-[133px]">
<Image src={logo} alt="Plane logo" />
</Link>
</div>
<div className="flex flex-col items-end sm:items-center sm:gap-2 sm:flex-row text-center text-sm font-medium text-onboarding-text-300">
{t("auth.common.already_have_an_account")}
<Link
href="/"
data-ph-element={AUTH_TRACKER_ELEMENTS.SIGN_IN_FROM_SIGNUP}
className="font-semibold text-custom-primary-100 hover:underline"
>
{t("auth.common.login")}
</Link>
</div>
</div>
<div className="flex flex-col justify-center flex-grow container h-[100vh-60px] mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 transition-all">
<AuthRoot authMode={EAuthModes.SIGN_UP} />
</div>
</div>
</div>
<AuthBase authType={EAuthModes.SIGN_UP} />
</AuthenticationWrapper>
);
});
</DefaultLayout>
);
export default SignInPage;
export default SignUpPage;

76
apps/web/app/(home)/page.tsx
View file

@ -1,83 +1,23 @@
"use client";
import React from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
// ui
import { useTheme } from "next-themes";
// components
import { AUTH_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { AuthRoot } from "@/components/account";
import { PageHead } from "@/components/core";
// constants
// helpers
import { AuthBase } from "@/components/auth-screens";
import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper";
// hooks
import { useInstance } from "@/hooks/store";
// layouts
import DefaultLayout from "@/layouts/default-layout";
// wrappers
import { AuthenticationWrapper } from "@/lib/wrappers";
// assets
import PlaneBackgroundPatternDark from "@/public/auth/background-pattern-dark.svg";
import PlaneBackgroundPattern from "@/public/auth/background-pattern.svg";
import BlackHorizontalLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
const HomePage = observer(() => {
const { resolvedTheme } = useTheme();
// plane hooks
const { t } = useTranslation();
// store
const { config } = useInstance();
// derived values
const enableSignUpConfig = config?.enable_signup ?? false;
const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
return (
<DefaultLayout>
<AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
<>
<div className="relative w-screen h-screen overflow-hidden">
<PageHead title={t("auth.common.login") + " - Plane"} />
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
className="object-cover w-full h-full"
alt="Plane background pattern"
/>
</div>
<div className="relative z-10 flex flex-col w-screen h-screen overflow-hidden overflow-y-auto">
<div className="container relative flex items-center justify-between flex-shrink-0 min-w-full px-10 pb-4 transition-all lg:px-20 xl:px-36">
<div className="flex items-center py-10 gap-x-2">
<Link href={`/`} className="h-[30px] w-[133px]">
<Image src={logo} alt="Plane logo" />
</Link>
</div>
{enableSignUpConfig && (
<div className="flex flex-col items-end text-sm font-medium text-center sm:items-center sm:gap-2 sm:flex-row text-onboarding-text-300">
{t("auth.common.new_to_plane")}
<Link
href="/sign-up"
data-ph-element={AUTH_TRACKER_ELEMENTS.NAVIGATE_TO_SIGN_UP}
className="font-semibold text-custom-primary-100 hover:underline"
>
{t("auth.common.create_account")}
</Link>
</div>
)}
</div>
<div className="flex flex-col justify-center flex-grow container h-[100vh-60px] mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 transition-all">
<AuthRoot authMode={EAuthModes.SIGN_IN} />
</div>
</div>
</div>
</>
</AuthenticationWrapper>
</DefaultLayout>
);
});
const HomePage = () => (
<DefaultLayout>
<AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
<AuthBase authType={EAuthModes.SIGN_IN} />
</AuthenticationWrapper>
</DefaultLayout>
);
export default HomePage;

2
apps/web/app/provider.tsx
View file

@ -37,7 +37,7 @@ export const AppProvider: FC<IAppProvider> = (props) => {
// themes
return (
<>
<AppProgressBar height="4px" color="#3F76FF" options={{ showSpinner: false }} shallowRouting />
<AppProgressBar height="4px" options={{ showSpinner: false }} shallowRouting />
<StoreProvider>
<ThemeProvider themes={["light", "dark", "light-contrast", "dark-contrast", "custom"]} defaultTheme="system">
<ToastWithTheme />

6
apps/web/ce/components/global/product-updates-header.tsx
View file

@ -1,10 +1,8 @@
import { observer } from "mobx-react";
import Image from "next/image";
import { useTranslation } from "@plane/i18n";
import { PlaneLogo } from "@plane/ui";
// helpers
import { cn } from "@plane/utils";
// assets
import PlaneLogo from "@/public/plane-logos/blue-without-text.png";
// package.json
import packageJson from "package.json";
@ -23,7 +21,7 @@ export const ProductUpdatesHeader = observer(() => {
</div>
</div>
<div className="flex flex-shrink-0 items-center gap-8">
<Image src={PlaneLogo} alt="Plane" width={24} height={24} />
<PlaneLogo className="h-6 w-auto text-custom-text-100" />
</div>
</div>
);

49
apps/web/core/components/account/auth-forms/auth-header.tsx
View file

@ -1,4 +1,4 @@
import { FC, ReactNode } from "react";
import { FC } from "react";
import { observer } from "mobx-react";
import useSWR from "swr";
import { useTranslation } from "@plane/i18n";
@ -17,36 +17,35 @@ type TAuthHeader = {
invitationEmail: string | undefined;
authMode: EAuthModes;
currentAuthStep: EAuthSteps;
children: ReactNode;
};
const Titles = {
[EAuthModes.SIGN_IN]: {
[EAuthSteps.EMAIL]: {
header: "auth.sign_in.header.step.email.header",
subHeader: "",
header: "Work in all dimensions.",
subHeader: "Welcome back to Plane.",
},
[EAuthSteps.PASSWORD]: {
header: "auth.sign_in.header.step.password.header",
subHeader: "auth.sign_in.header.step.password.sub_header",
header: "Work in all dimensions.",
subHeader: "Welcome back to Plane.",
},
[EAuthSteps.UNIQUE_CODE]: {
header: "auth.sign_in.header.step.unique_code.header",
subHeader: "auth.sign_in.header.step.unique_code.sub_header",
header: "Work in all dimensions.",
subHeader: "Welcome back to Plane.",
},
},
[EAuthModes.SIGN_UP]: {
[EAuthSteps.EMAIL]: {
header: "auth.sign_up.header.step.email.header",
subHeader: "",
header: "Work in all dimensions.",
subHeader: "Create your Plane account.",
},
[EAuthSteps.PASSWORD]: {
header: "auth.sign_up.header.step.password.header",
subHeader: "auth.sign_up.header.step.password.sub_header",
header: "Work in all dimensions.",
subHeader: "Create your Plane account.",
},
[EAuthSteps.UNIQUE_CODE]: {
header: "auth.sign_up.header.step.unique_code.header",
subHeader: "auth.sign_up.header.step.unique_code.sub_header",
header: "Work in all dimensions.",
subHeader: "Create your Plane account.",
},
},
};
@ -54,7 +53,7 @@ const Titles = {
const workSpaceService = new WorkspaceService();
export const AuthHeader: FC<TAuthHeader> = observer((props) => {
const { workspaceSlug, invitationId, invitationEmail, authMode, currentAuthStep, children } = props;
const { workspaceSlug, invitationId, invitationEmail, authMode, currentAuthStep } = props;
// plane imports
const { t } = useTranslation();
@ -83,7 +82,10 @@ export const AuthHeader: FC<TAuthHeader> = observer((props) => {
{workspace.name}
</div>
),
subHeader: mode == EAuthModes.SIGN_UP ? "auth.sign_up.header.label" : "auth.sign_in.header.label",
subHeader:
mode == EAuthModes.SIGN_UP
? "Create an account to start managing work with your team."
: "Log in to start managing work with your team.",
};
}
@ -100,14 +102,11 @@ export const AuthHeader: FC<TAuthHeader> = observer((props) => {
);
return (
<>
<div className="space-y-1 text-center">
<h1 className="text-3xl font-bold text-onboarding-text-100">
{typeof header === "string" ? t(header) : header}
</h1>
<p className="font-medium text-onboarding-text-400">{t(subHeader)}</p>
</div>
{children}
</>
<div className="flex flex-col gap-1">
<span className="text-2xl font-semibold text-custom-text-100 leading-7">
{typeof header === "string" ? t(header) : header}
</span>
<span className="text-2xl font-semibold text-custom-text-400 leading-7">{subHeader}</span>
</div>
);
});

194
apps/web/core/components/account/auth-forms/auth-root.tsx
View file

@ -1,18 +1,18 @@
import React, { FC, useEffect, useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import { useSearchParams } from "next/navigation";
import { useTranslation } from "@plane/i18n";
import { IEmailCheckData } from "@plane/types";
import { useTheme } from "next-themes";
// plane imports
import { API_BASE_URL } from "@plane/constants";
import { OAuthOptions } from "@plane/ui";
// assets
import GithubLightLogo from "/public/logos/github-black.png";
import GithubDarkLogo from "/public/logos/github-dark.svg";
import GitlabLogo from "/public/logos/gitlab-logo.svg";
import GoogleLogo from "/public/logos/google-logo.svg";
// components
import {
AuthHeader,
AuthBanner,
AuthEmailForm,
AuthPasswordForm,
OAuthOptions,
TermsAndConditions,
AuthUniqueCodeForm,
} from "@/components/account";
import { AuthHeader, AuthBanner, TermsAndConditions } from "@/components/account";
// helpers
import {
EAuthModes,
@ -24,11 +24,8 @@ import {
} from "@/helpers/authentication.helper";
// hooks
import { useInstance } from "@/hooks/store";
import { useAppRouter } from "@/hooks/use-app-router";
// services
import { AuthService } from "@/services/auth.service";
const authService = new AuthService();
import { AuthFormRoot } from "./form-root";
type TAuthRoot = {
authMode: EAuthModes;
@ -36,14 +33,14 @@ type TAuthRoot = {
export const AuthRoot: FC<TAuthRoot> = observer((props) => {
//router
const router = useAppRouter();
const searchParams = useSearchParams();
// query params
const emailParam = searchParams.get("email");
const invitation_id = searchParams.get("invitation_id");
const workspaceSlug = searchParams.get("slug");
const error_code = searchParams.get("error_code");
const nextPath = searchParams.get("next_path");
const next_path = searchParams.get("next_path");
const { resolvedTheme } = useTheme();
// props
const { authMode: currentAuthMode } = props;
// states
@ -51,12 +48,14 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
const [email, setEmail] = useState(emailParam ? emailParam.toString() : "");
const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
const [isExistingEmail, setIsExistingEmail] = useState(false);
// plane hooks
const { t } = useTranslation();
// hooks
const { config } = useInstance();
// derived values
const isOAuthEnabled =
(config && (config?.is_google_enabled || config?.is_github_enabled || config?.is_gitlab_enabled)) || false;
useEffect(() => {
if (!authMode && currentAuthMode) setAuthMode(currentAuthMode);
}, [currentAuthMode, authMode]);
@ -103,102 +102,75 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
}
}, [error_code, authMode]);
const isSMTPConfigured = config?.is_smtp_configured || false;
// submit handler- email verification
const handleEmailVerification = async (data: IEmailCheckData) => {
setEmail(data.email);
setErrorInfo(undefined);
await authService
.emailCheck(data)
.then(async (response) => {
if (response.existing) {
if (currentAuthMode === EAuthModes.SIGN_UP) setAuthMode(EAuthModes.SIGN_IN);
if (response.status === "MAGIC_CODE") {
setAuthStep(EAuthSteps.UNIQUE_CODE);
generateEmailUniqueCode(data.email);
} else if (response.status === "CREDENTIAL") {
setAuthStep(EAuthSteps.PASSWORD);
}
} else {
if (currentAuthMode === EAuthModes.SIGN_IN) setAuthMode(EAuthModes.SIGN_UP);
if (response.status === "MAGIC_CODE") {
setAuthStep(EAuthSteps.UNIQUE_CODE);
generateEmailUniqueCode(data.email);
} else if (response.status === "CREDENTIAL") {
setAuthStep(EAuthSteps.PASSWORD);
}
}
setIsExistingEmail(response.existing);
})
.catch((error) => {
const errorhandler = authErrorHandler(error?.error_code?.toString(), data?.email || undefined);
if (errorhandler?.type) setErrorInfo(errorhandler);
});
};
const handleEmailClear = () => {
setAuthMode(currentAuthMode);
setErrorInfo(undefined);
setEmail("");
setAuthStep(EAuthSteps.EMAIL);
router.push(currentAuthMode === EAuthModes.SIGN_IN ? `/` : "/sign-up");
};
// generating the unique code
const generateEmailUniqueCode = async (email: string): Promise<{ code: string } | undefined> => {
if (!isSMTPConfigured) return;
const payload = { email: email };
return await authService
.generateUniqueCode(payload)
.then(() => ({ code: "" }))
.catch((error) => {
const errorhandler = authErrorHandler(error?.error_code.toString());
if (errorhandler?.type) setErrorInfo(errorhandler);
throw error;
});
};
if (!authMode) return <></>;
const OauthButtonContent = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in";
const OAuthConfig = [
{
id: "google",
text: `${OauthButtonContent} with Google`,
icon: <Image src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
onClick: () => {
window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
},
enabled: config?.is_google_enabled,
},
{
id: "github",
text: `${OauthButtonContent} with GitHub`,
icon: (
<Image
src={resolvedTheme === "dark" ? GithubLightLogo : GithubDarkLogo}
height={18}
width={18}
alt="GitHub Logo"
/>
),
onClick: () => {
window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`);
},
enabled: config?.is_github_enabled,
},
{
id: "gitlab",
text: `${OauthButtonContent} with GitLab`,
icon: <Image src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
onClick: () => {
window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
},
enabled: config?.is_gitlab_enabled,
},
];
return (
<div className="relative flex flex-col space-y-6">
<AuthHeader
workspaceSlug={workspaceSlug?.toString() || undefined}
invitationId={invitation_id?.toString() || undefined}
invitationEmail={email || undefined}
authMode={authMode}
currentAuthStep={authStep}
>
<div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
<div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
{errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
<AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
)}
{authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
{authStep === EAuthSteps.UNIQUE_CODE && (
<AuthUniqueCodeForm
mode={authMode}
email={email}
isExistingEmail={isExistingEmail}
handleEmailClear={handleEmailClear}
generateEmailUniqueCode={generateEmailUniqueCode}
nextPath={nextPath || undefined}
/>
)}
{authStep === EAuthSteps.PASSWORD && (
<AuthPasswordForm
mode={authMode}
isSMTPConfigured={isSMTPConfigured}
email={email}
handleEmailClear={handleEmailClear}
handleAuthStep={(step: EAuthSteps) => {
if (step === EAuthSteps.UNIQUE_CODE) generateEmailUniqueCode(email);
setAuthStep(step);
}}
nextPath={nextPath || undefined}
/>
)}
<OAuthOptions isSignUp={authMode === EAuthModes.SIGN_UP} />
<TermsAndConditions isSignUp={authMode === EAuthModes.SIGN_UP} />
</AuthHeader>
<AuthHeader
workspaceSlug={workspaceSlug?.toString() || undefined}
invitationId={invitation_id?.toString() || undefined}
invitationEmail={email || undefined}
authMode={authMode}
currentAuthStep={authStep}
/>
{isOAuthEnabled && <OAuthOptions options={OAuthConfig} compact={authStep === EAuthSteps.PASSWORD} />}
<AuthFormRoot
authStep={authStep}
authMode={authMode}
email={email}
setEmail={(email) => setEmail(email)}
setAuthMode={(authMode) => setAuthMode(authMode)}
setAuthStep={(authStep) => setAuthStep(authStep)}
setErrorInfo={(errorInfo) => setErrorInfo(errorInfo)}
currentAuthMode={currentAuthMode}
/>
<TermsAndConditions authType={authMode} />
</div>
</div>
);
});

7
apps/web/core/components/account/auth-forms/common/container.tsx Normal file
View file

@ -0,0 +1,7 @@
"use client";
export const FormContainer = ({ children }: { children: React.ReactNode }) => (
<div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
<div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">{children}</div>
</div>
);

8
apps/web/core/components/account/auth-forms/common/header.tsx Normal file
View file

@ -0,0 +1,8 @@
"use client";
export const AuthFormHeader = ({ title, description }: { title: string; description: string }) => (
<div className="flex flex-col gap-1">
<span className="text-2xl font-semibold text-custom-text-100">{title}</span>
<span className="text-2xl font-semibold text-custom-text-400">{description}</span>
</div>
);

2
apps/web/core/components/account/auth-forms/common/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./container";
export * from "./header";

10
apps/web/core/components/account/auth-forms/email.tsx
View file

@ -43,15 +43,15 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
const inputRef = useRef<HTMLInputElement>(null);
return (
<form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
<form onSubmit={handleFormSubmit} className="space-y-4">
<div className="space-y-1">
<label htmlFor="email" className="text-sm text-onboarding-text-300 font-medium">
<label htmlFor="email" className="text-sm text-custom-text-300 font-medium">
{t("auth.common.email.label")}
</label>
<div
className={cn(
`relative flex items-center rounded-md bg-onboarding-background-200 border`,
!isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
`relative flex items-center rounded-md bg-custom-background-100 border`,
!isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-custom-border-300`
)}
onFocus={() => {
setIsFocused(true);
@ -67,7 +67,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder={t("auth.common.email.placeholder")}
className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
autoComplete="on"
autoFocus
ref={inputRef}

4
apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
View file

@ -38,7 +38,7 @@ export const ForgotPasswordPopover = () => {
<Popover.Panel className="fixed z-10">
{({ close }) => (
<div
className="border border-onboarding-border-300 bg-onboarding-background-100 rounded z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left ml-3"
className="border border-custom-border-300 bg-custom-background-100 rounded z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left ml-3"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
@ -51,7 +51,7 @@ export const ForgotPasswordPopover = () => {
onClick={() => close()}
aria-label={t("aria_labels.auth_forms.close_popover")}
>
<X className="size-3 text-onboarding-text-200" />
<X className="size-3 text-custom-text-200" />
</button>
</div>
)}

145
apps/web/core/components/account/auth-forms/forgot-password.tsx Normal file
View file

@ -0,0 +1,145 @@
"use client";
import { observer } from "mobx-react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Controller, useForm } from "react-hook-form";
// icons
import { CircleCheck } from "lucide-react";
// plane imports
import { AUTH_TRACKER_EVENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button, Input, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
import { cn, checkEmailValidity } from "@plane/utils";
// helpers
import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
// hooks
import useTimer from "@/hooks/use-timer";
// services
import { AuthService } from "@/services/auth.service";
// local components
import { FormContainer, AuthFormHeader } from "./common";
type TForgotPasswordFormValues = {
email: string;
};
const defaultValues: TForgotPasswordFormValues = {
email: "",
};
// services
const authService = new AuthService();
export const ForgotPasswordForm = observer(() => {
// search params
const searchParams = useSearchParams();
const email = searchParams.get("email");
// plane hooks
const { t } = useTranslation();
// timer
const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);
// form info
const {
control,
formState: { errors, isSubmitting, isValid },
handleSubmit,
} = useForm<TForgotPasswordFormValues>({
defaultValues: {
...defaultValues,
email: email?.toString() ?? "",
},
});
const handleForgotPassword = async (formData: TForgotPasswordFormValues) => {
await authService
.sendResetPasswordLink({
email: formData.email,
})
.then(() => {
captureSuccess({
eventName: AUTH_TRACKER_EVENTS.forgot_password,
payload: {
email: formData.email,
},
});
setToast({
type: TOAST_TYPE.SUCCESS,
title: t("auth.forgot_password.toast.success.title"),
message: t("auth.forgot_password.toast.success.message"),
});
setResendCodeTimer(30);
})
.catch((err) => {
captureError({
eventName: AUTH_TRACKER_EVENTS.forgot_password,
payload: {
email: formData.email,
},
});
setToast({
type: TOAST_TYPE.ERROR,
title: t("auth.forgot_password.toast.error.title"),
message: err?.error ?? t("auth.forgot_password.toast.error.message"),
});
});
};
return (
<FormContainer>
<AuthFormHeader title="Reset password" description="Regain access to your account." />
<form onSubmit={handleSubmit(handleForgotPassword)} className="space-y-4">
<div className="space-y-1">
<label className="text-sm font-medium text-custom-text-300" htmlFor="email">
{t("auth.common.email.label")}
</label>
<Controller
control={control}
name="email"
rules={{
required: t("auth.common.email.errors.required"),
validate: (value) => checkEmailValidity(value) || t("auth.common.email.errors.invalid"),
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="email"
name="email"
type="email"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
autoComplete="on"
disabled={resendTimerCode > 0}
/>
)}
/>
{resendTimerCode > 0 && (
<p className="flex items-start w-full gap-1 px-1 text-xs font-medium text-green-700">
<CircleCheck height={12} width={12} className="mt-0.5" />
{t("auth.forgot_password.email_sent")}
</p>
)}
</div>
<Button
type="submit"
variant="primary"
className="w-full"
size="lg"
disabled={!isValid}
loading={isSubmitting || resendTimerCode > 0}
>
{resendTimerCode > 0
? t("auth.common.resend_in", { seconds: resendTimerCode })
: t("auth.forgot_password.send_reset_link")}
</Button>
<Link href="/" className={cn("w-full", getButtonStyling("link-neutral", "lg"))}>
{t("auth.common.back_to_sign_in")}
</Link>
</form>
</FormContainer>
);
});

133
apps/web/core/components/account/auth-forms/form-root.tsx Normal file
View file

@ -0,0 +1,133 @@
"use client";
import React, { useState } from "react";
import { observer } from "mobx-react";
import { useSearchParams } from "next/navigation";
import { EAuthModes, EAuthSteps } from "@plane/constants";
import { IEmailCheckData } from "@plane/types";
// helpers
import { authErrorHandler, TAuthErrorInfo } from "@/helpers/authentication.helper";
// hooks
import { useInstance } from "@/hooks/store/use-instance";
import { useAppRouter } from "@/hooks/use-app-router";
// services
import { AuthService } from "@/services/auth.service";
// local components
import { AuthEmailForm } from "./email";
import { AuthPasswordForm } from "./password";
import { AuthUniqueCodeForm } from "./unique-code";
type TAuthFormRoot = {
authStep: EAuthSteps;
authMode: EAuthModes;
email: string;
setEmail: (email: string) => void;
setAuthMode: (authMode: EAuthModes) => void;
setAuthStep: (authStep: EAuthSteps) => void;
setErrorInfo: (errorInfo: TAuthErrorInfo | undefined) => void;
currentAuthMode: EAuthModes;
};
const authService = new AuthService();
export const AuthFormRoot = observer((props: TAuthFormRoot) => {
const { authStep, authMode, email, setEmail, setAuthMode, setAuthStep, setErrorInfo, currentAuthMode } = props;
// router
const router = useAppRouter();
// query params
const searchParams = useSearchParams();
const nextPath = searchParams.get("next_path");
// states
const [isExistingEmail, setIsExistingEmail] = useState(false);
// hooks
const { config } = useInstance();
const isSMTPConfigured = config?.is_smtp_configured || false;
// submit handler- email verification
const handleEmailVerification = async (data: IEmailCheckData) => {
setEmail(data.email);
setErrorInfo(undefined);
await authService
.emailCheck(data)
.then(async (response) => {
if (response.existing) {
if (currentAuthMode === EAuthModes.SIGN_UP) setAuthMode(EAuthModes.SIGN_IN);
if (response.status === "MAGIC_CODE") {
setAuthStep(EAuthSteps.UNIQUE_CODE);
generateEmailUniqueCode(data.email);
} else if (response.status === "CREDENTIAL") {
setAuthStep(EAuthSteps.PASSWORD);
}
} else {
if (currentAuthMode === EAuthModes.SIGN_IN) setAuthMode(EAuthModes.SIGN_UP);
if (response.status === "MAGIC_CODE") {
setAuthStep(EAuthSteps.UNIQUE_CODE);
generateEmailUniqueCode(data.email);
} else if (response.status === "CREDENTIAL") {
setAuthStep(EAuthSteps.PASSWORD);
}
}
setIsExistingEmail(response.existing);
})
.catch((error) => {
const errorhandler = authErrorHandler(error?.error_code?.toString(), data?.email || undefined);
if (errorhandler?.type) setErrorInfo(errorhandler);
});
};
const handleEmailClear = () => {
setAuthMode(currentAuthMode);
setErrorInfo(undefined);
setEmail("");
setAuthStep(EAuthSteps.EMAIL);
router.push(currentAuthMode === EAuthModes.SIGN_IN ? `/` : "/sign-up");
};
// generating the unique code
const generateEmailUniqueCode = async (email: string): Promise<{ code: string } | undefined> => {
if (!isSMTPConfigured) return;
const payload = { email: email };
return await authService
.generateUniqueCode(payload)
.then(() => ({ code: "" }))
.catch((error) => {
const errorhandler = authErrorHandler(error?.error_code.toString());
if (errorhandler?.type) setErrorInfo(errorhandler);
throw error;
});
};
if (authStep === EAuthSteps.EMAIL) {
return <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />;
}
if (authStep === EAuthSteps.UNIQUE_CODE) {
return (
<AuthUniqueCodeForm
mode={authMode}
email={email}
isExistingEmail={isExistingEmail}
handleEmailClear={handleEmailClear}
generateEmailUniqueCode={generateEmailUniqueCode}
nextPath={nextPath || undefined}
/>
);
}
if (authStep === EAuthSteps.PASSWORD) {
return (
<AuthPasswordForm
mode={authMode}
isSMTPConfigured={isSMTPConfigured}
email={email}
handleEmailClear={handleEmailClear}
handleAuthStep={(step: EAuthSteps) => {
if (step === EAuthSteps.UNIQUE_CODE) generateEmailUniqueCode(email);
setAuthStep(step);
}}
nextPath={nextPath || undefined}
/>
);
}
return <></>;
});

5
apps/web/core/components/account/auth-forms/index.ts
View file

@ -7,3 +7,8 @@ export * from "./email";
export * from "./forgot-password-popover";
export * from "./password";
export * from "./unique-code";
export * from "./common";
export * from "./forgot-password";
export * from "./reset-password";
export * from "./set-password";

20
apps/web/core/components/account/auth-forms/password.tsx
View file

@ -139,7 +139,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
)}
<form
ref={formRef}
className="mt-5 space-y-4"
className="space-y-4"
method="POST"
action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`}
onSubmit={async (event) => {
@ -182,11 +182,11 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
<input type="hidden" value={passwordFormData.email} name="email" />
{nextPath && <input type="hidden" value={nextPath} name="next_path" />}
<div className="space-y-1">
<label htmlFor="email" className="text-sm font-medium text-onboarding-text-300">
<label htmlFor="email" className="text-sm font-medium text-custom-text-300">
{t("auth.common.email.label")}
</label>
<div
className={`relative flex items-center rounded-md bg-onboarding-background-200 border border-onboarding-border-100`}
className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-300`}
>
<Input
id="email"
@ -195,7 +195,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
value={passwordFormData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
placeholder={t("auth.common.email.placeholder")}
className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 border-0`}
className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 border-0`}
disabled
/>
{passwordFormData.email.length > 0 && (
@ -212,10 +212,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
</div>
<div className="space-y-1">
<label htmlFor="password" className="text-sm text-onboarding-text-300 font-medium">
<label htmlFor="password" className="text-sm text-custom-text-300 font-medium">
{mode === EAuthModes.SIGN_IN ? t("auth.common.password.label") : t("auth.common.password.set_password")}
</label>
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<div className="relative flex items-center rounded-md bg-custom-background-100">
<Input
type={showPassword?.password ? "text" : "password"}
id="password"
@ -223,7 +223,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
value={passwordFormData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
placeholder={t("auth.common.password.placeholder")}
className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
className="disable-autofill-style h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
@ -249,10 +249,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
{mode === EAuthModes.SIGN_UP && (
<div className="space-y-1">
<label htmlFor="confirm-password" className="text-sm text-onboarding-text-300 font-medium">
<label htmlFor="confirm-password" className="text-sm text-custom-text-300 font-medium">
{t("auth.common.password.confirm_password.label")}
</label>
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<div className="relative flex items-center rounded-md bg-custom-background-100">
<Input
type={showPassword?.retypePassword ? "text" : "password"}
id="confirm-password"
@ -260,7 +260,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
value={passwordFormData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
className="disable-autofill-style h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
/>

198
apps/web/core/components/account/auth-forms/reset-password.tsx Normal file
View file

@ -0,0 +1,198 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { observer } from "mobx-react";
import { useSearchParams } from "next/navigation";
// icons
import { Eye, EyeOff } from "lucide-react";
// ui
import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button, Input, PasswordStrengthIndicator } from "@plane/ui";
// components
import { getPasswordStrength } from "@plane/utils";
import { AuthBanner, FormContainer, AuthFormHeader } from "@/components/account";
// helpers
import {
EAuthenticationErrorCodes,
EErrorAlertType,
TAuthErrorInfo,
authErrorHandler,
} from "@/helpers/authentication.helper";
import { AuthService } from "@/services/auth.service";
type TResetPasswordFormValues = {
email: string;
password: string;
confirm_password?: string;
};
const defaultValues: TResetPasswordFormValues = {
email: "",
password: "",
};
// services
const authService = new AuthService();
export const ResetPasswordForm = observer(() => {
// search params
const searchParams = useSearchParams();
const uidb64 = searchParams.get("uidb64");
const token = searchParams.get("token");
const email = searchParams.get("email");
const error_code = searchParams.get("error_code");
// states
const [showPassword, setShowPassword] = useState({
password: false,
retypePassword: false,
});
const [resetFormData, setResetFormData] = useState<TResetPasswordFormValues>({
...defaultValues,
email: email ? email.toString() : "",
});
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
// plane hooks
const { t } = useTranslation();
const handleShowPassword = (key: keyof typeof showPassword) =>
setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
const handleFormChange = (key: keyof TResetPasswordFormValues, value: string) =>
setResetFormData((prev) => ({ ...prev, [key]: value }));
useEffect(() => {
if (csrfToken === undefined)
authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
}, [csrfToken]);
const isButtonDisabled = useMemo(
() =>
!!resetFormData.password &&
getPasswordStrength(resetFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
resetFormData.password === resetFormData.confirm_password
? false
: true,
[resetFormData]
);
useEffect(() => {
if (error_code) {
const errorhandler = authErrorHandler(error_code?.toString() as EAuthenticationErrorCodes);
if (errorhandler) {
setErrorInfo(errorhandler);
}
}
}, [error_code]);
const password = resetFormData?.password ?? "";
const confirmPassword = resetFormData?.confirm_password ?? "";
const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
return (
<FormContainer>
<AuthFormHeader title="Reset password" description="Create a new password." />
{errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
<AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
)}
<form
className="space-y-4"
method="POST"
action={`${API_BASE_URL}/auth/reset-password/${uidb64?.toString()}/${token?.toString()}/`}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<div className="space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
{t("auth.common.email.label")}
</label>
<div className="relative flex items-center rounded-md bg-custom-background-100">
<Input
id="email"
name="email"
type="email"
value={resetFormData.email}
//hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 text-custom-text-400 cursor-not-allowed"
autoComplete="on"
disabled
/>
</div>
</div>
<div className="space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
{t("auth.common.password.label")}
</label>
<div className="relative flex items-center rounded-md bg-custom-background-100">
<Input
type={showPassword.password ? "text" : "password"}
name="password"
value={resetFormData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
//hasError={Boolean(errors.password)}
placeholder={t("auth.common.password.placeholder")}
className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
minLength={8}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoFocus
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
</div>
<PasswordStrengthIndicator password={resetFormData.password} isFocused={isPasswordInputFocused} />
</div>
<div className="space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
{t("auth.common.password.confirm_password.label")}
</label>
<div className="relative flex items-center rounded-md bg-custom-background-100">
<Input
type={showPassword.retypePassword ? "text" : "password"}
name="confirm_password"
value={resetFormData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}
</div>
{!!resetFormData.confirm_password &&
resetFormData.password !== resetFormData.confirm_password &&
renderPasswordMatchError && (
<span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
)}
</div>
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
{t("auth.common.password.submit")}
</Button>
</form>
</FormContainer>
);
});

212
apps/web/core/components/account/auth-forms/set-password.tsx Normal file
View file

@ -0,0 +1,212 @@
"use client";
import { FormEvent, useEffect, useMemo, useState } from "react";
import { observer } from "mobx-react";
import { useSearchParams } from "next/navigation";
// icons
import { Eye, EyeOff } from "lucide-react";
// plane imports
import { AUTH_TRACKER_ELEMENTS, AUTH_TRACKER_EVENTS, E_PASSWORD_STRENGTH } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button, Input, PasswordStrengthIndicator, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { getPasswordStrength } from "@plane/utils";
// helpers
import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
// hooks
import { useUser } from "@/hooks/store";
import { useAppRouter } from "@/hooks/use-app-router";
// services
import { AuthService } from "@/services/auth.service";
// local components
import { AuthFormHeader, FormContainer } from "..";
type TResetPasswordFormValues = {
email: string;
password: string;
confirm_password?: string;
};
const defaultValues: TResetPasswordFormValues = {
email: "",
password: "",
};
// services
const authService = new AuthService();
export const SetPasswordForm = observer(() => {
// router
const router = useAppRouter();
// search params
const searchParams = useSearchParams();
const email = searchParams.get("email");
// states
const [showPassword, setShowPassword] = useState({
password: false,
retypePassword: false,
});
const [passwordFormData, setPasswordFormData] = useState<TResetPasswordFormValues>({
...defaultValues,
email: email ? email.toString() : "",
});
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
// plane hooks
const { t } = useTranslation();
// hooks
const { data: user, handleSetPassword } = useUser();
useEffect(() => {
captureView({
elementName: AUTH_TRACKER_ELEMENTS.SET_PASSWORD_FORM,
});
}, []);
useEffect(() => {
if (csrfToken === undefined)
authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
}, [csrfToken]);
const handleShowPassword = (key: keyof typeof showPassword) =>
setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
const handleFormChange = (key: keyof TResetPasswordFormValues, value: string) =>
setPasswordFormData((prev) => ({ ...prev, [key]: value }));
const isButtonDisabled = useMemo(
() =>
!!passwordFormData.password &&
getPasswordStrength(passwordFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
passwordFormData.password === passwordFormData.confirm_password
? false
: true,
[passwordFormData]
);
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
try {
e.preventDefault();
if (!csrfToken) throw new Error("csrf token not found");
await handleSetPassword(csrfToken, { password: passwordFormData.password });
captureSuccess({
eventName: AUTH_TRACKER_EVENTS.password_created,
});
router.push("/");
} catch (error: unknown) {
let message = undefined;
if (error instanceof Error) {
const err = error as Error & { error?: string };
message = err.error;
}
captureError({
eventName: AUTH_TRACKER_EVENTS.password_created,
});
setToast({
type: TOAST_TYPE.ERROR,
title: t("common.errors.default.title"),
message: message ?? t("common.errors.default.message"),
});
}
};
const password = passwordFormData?.password ?? "";
const confirmPassword = passwordFormData?.confirm_password ?? "";
const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
return (
<FormContainer>
<AuthFormHeader title="Set password" description="Create a new password." />
<form className="space-y-4" onSubmit={(e) => handleSubmit(e)}>
<div className="space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
{t("auth.common.email.label")}
</label>
<div className="relative flex items-center rounded-md bg-custom-background-100">
<Input
id="email"
name="email"
type="email"
value={user?.email}
//hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 text-custom-text-400 cursor-not-allowed"
autoComplete="on"
disabled
/>
</div>
</div>
<div className="space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
{t("auth.common.password.label")}
</label>
<div className="relative flex items-center rounded-md bg-custom-background-100">
<Input
type={showPassword.password ? "text" : "password"}
name="password"
value={passwordFormData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
//hasError={Boolean(errors.password)}
placeholder={t("auth.common.password.placeholder")}
className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
minLength={8}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoFocus
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
</div>
<PasswordStrengthIndicator password={passwordFormData.password} isFocused={isPasswordInputFocused} />
</div>
<div className="space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
{t("auth.common.password.confirm_password.label")}
</label>
<div className="relative flex items-center rounded-md bg-custom-background-100">
<Input
type={showPassword.retypePassword ? "text" : "password"}
name="confirm_password"
value={passwordFormData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}
</div>
{!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password &&
renderPasswordMatchError && (
<span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
)}
</div>
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
{t("common.continue")}
</Button>
</form>
</FormContainer>
);
});

14
apps/web/core/components/account/auth-forms/unique-code.tsx
View file

@ -89,7 +89,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
return (
<form
className="mt-5 space-y-4"
className="space-y-4"
method="POST"
action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "magic-sign-in" : "magic-sign-up"}/`}
onSubmit={() => {
@ -116,11 +116,11 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
<input type="hidden" value={uniqueCodeFormData.email} name="email" />
{nextPath && <input type="hidden" value={nextPath} name="next_path" />}
<div className="space-y-1">
<label htmlFor="email" className="text-sm font-medium text-onboarding-text-300">
<label htmlFor="email" className="text-sm font-medium text-custom-text-300">
{t("auth.common.email.label")}
</label>
<div
className={`relative flex items-center rounded-md bg-onboarding-background-200 border border-onboarding-border-100`}
className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-300`}
>
<Input
id="email"
@ -129,7 +129,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
value={uniqueCodeFormData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
placeholder={t("auth.common.email.placeholder")}
className="disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 border-0"
className="disable-autofill-style h-10 w-full placeholder:text-custom-text-400 border-0"
autoComplete="on"
disabled
/>
@ -147,7 +147,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
</div>
<div className="space-y-1">
<label htmlFor="unique-code" className="text-sm font-medium text-onboarding-text-300">
<label htmlFor="unique-code" className="text-sm font-medium text-custom-text-300">
{t("auth.common.unique_code.label")}
</label>
<Input
@ -156,7 +156,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
value={uniqueCodeFormData.code}
onChange={(e) => handleFormChange("code", e.target.value)}
placeholder={t("auth.common.unique_code.placeholder")}
className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
className="disable-autofill-style h-10 w-full border border-custom-border-300 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
autoFocus
/>
<div className="flex w-full items-center justify-between px-1 text-xs pt-1">
@ -170,7 +170,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
onClick={() => generateNewCode(uniqueCodeFormData.email)}
className={
isRequestNewCodeDisabled
? "text-onboarding-text-400"
? "text-custom-text-400"
: "font-medium text-custom-primary-300 hover:text-custom-primary-200"
}
disabled={isRequestNewCodeDisabled}

1
apps/web/core/components/account/index.ts
View file

@ -1,4 +1,3 @@
export * from "./oauth";
export * from "./auth-forms";
export * from "./deactivate-account-modal";
export * from "./terms-and-conditions";

42
apps/web/core/components/account/oauth/github-button.tsx
View file

@ -1,42 +0,0 @@
import { FC } from "react";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import { useTheme } from "next-themes";
// helpers
import { API_BASE_URL } from "@plane/constants";
// images
import githubLightModeImage from "/public/logos/github-black.png";
import githubDarkModeImage from "/public/logos/github-dark.svg";
export type GithubOAuthButtonProps = {
text: string;
};
export const GithubOAuthButton: FC<GithubOAuthButtonProps> = (props) => {
const searchParams = useSearchParams();
const next_path = searchParams.get("next_path");
const { text } = props;
// hooks
const { resolvedTheme } = useTheme();
const handleSignIn = () => {
window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`);
};
return (
<button
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
}`}
onClick={handleSignIn}
>
<Image
src={resolvedTheme === "dark" ? githubDarkModeImage : githubLightModeImage}
height={20}
width={20}
alt="GitHub Logo"
/>
{text}
</button>
);
};

36
apps/web/core/components/account/oauth/gitlab-button.tsx
View file

@ -1,36 +0,0 @@
import { FC } from "react";
import Image from "next/image";
import { useSearchParams } from "next/navigation";
import { useTheme } from "next-themes";
// helpers
import { API_BASE_URL } from "@plane/constants";
// images
import GitlabLogo from "/public/logos/gitlab-logo.svg";
export type GitlabOAuthButtonProps = {
text: string;
};
export const GitlabOAuthButton: FC<GitlabOAuthButtonProps> = (props) => {
const searchParams = useSearchParams();
const nextPath = searchParams.get("next_path") || undefined;
const { text } = props;
// hooks
const { resolvedTheme } = useTheme();
const handleSignIn = () => {
window.location.assign(`${API_BASE_URL}/auth/gitlab/${nextPath ? `?next_path=${nextPath}` : ``}`);
};
return (
<button
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
}`}
onClick={handleSignIn}
>
<Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />
{text}
</button>
);
};

36
apps/web/core/components/account/oauth/google-button.tsx
View file

@ -1,36 +0,0 @@
import { FC } from "react";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import { useTheme } from "next-themes";
// helpers
import { API_BASE_URL } from "@plane/constants";
// images
import GoogleLogo from "/public/logos/google-logo.svg";
export type GoogleOAuthButtonProps = {
text: string;
};
export const GoogleOAuthButton: FC<GoogleOAuthButtonProps> = (props) => {
const searchParams = useSearchParams();
const next_path = searchParams.get("next_path");
const { text } = props;
// hooks
const { resolvedTheme } = useTheme();
const handleSignIn = () => {
window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
};
return (
<button
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
}`}
onClick={handleSignIn}
>
<Image src={GoogleLogo} height={18} width={18} alt="Google Logo" />
{text}
</button>
);
};

4
apps/web/core/components/account/oauth/index.ts
View file

@ -1,4 +0,0 @@
export * from "./oauth-options";
export * from "./google-button";
export * from "./github-button";
export * from "./gitlab-button";

38
apps/web/core/components/account/oauth/oauth-options.tsx
View file

@ -1,38 +0,0 @@
import { observer } from "mobx-react";
// components
import { GithubOAuthButton, GitlabOAuthButton, GoogleOAuthButton } from "@/components/account";
// hooks
import { useInstance } from "@/hooks/store";
type TOAuthOptionProps = {
isSignUp?: boolean;
};
export const OAuthOptions: React.FC<TOAuthOptionProps> = observer(() => {
// hooks
const { config } = useInstance();
const isOAuthEnabled =
(config && (config?.is_google_enabled || config?.is_github_enabled || config?.is_gitlab_enabled)) || false;
if (!isOAuthEnabled) return null;
return (
<>
<div className="mt-4 flex items-center">
<hr className="w-full border-onboarding-border-100" />
<p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">or</p>
<hr className="w-full border-onboarding-border-100" />
</div>
<div className={`mt-7 grid gap-4 overflow-hidden`}>
{config?.is_google_enabled && (
<div className="flex h-[42px] items-center !overflow-hidden">
<GoogleOAuthButton text="Continue with Google" />
</div>
)}
{config?.is_github_enabled && <GithubOAuthButton text="Continue with GitHub" />}
{config?.is_gitlab_enabled && <GitlabOAuthButton text="Continue with GitLab" />}
</div>
</>
);
});

54
apps/web/core/components/account/terms-and-conditions.tsx
View file

@ -1,25 +1,35 @@
import React, { FC } from "react";
import React from "react";
import Link from "next/link";
import { EAuthModes } from "@plane/constants";
type Props = {
isSignUp?: boolean;
};
interface TermsAndConditionsProps {
authType?: EAuthModes;
}
export const TermsAndConditions: FC<Props> = (props) => {
const { isSignUp = false } = props;
return (
<div className="flex items-center justify-center py-6">
<p className="text-center text-sm text-onboarding-text-200 whitespace-pre-line">
{isSignUp ? "By creating an account" : "By signing in"}, you agree to our{" \n"}
<Link href="https://plane.so/legals/terms-and-conditions" target="_blank" rel="noopener noreferrer">
<span className="text-sm font-medium underline hover:cursor-pointer">Terms of Service</span>
</Link>{" "}
and{" "}
<Link href="https://plane.so/legals/privacy-policy" target="_blank" rel="noopener noreferrer">
<span className="text-sm font-medium underline hover:cursor-pointer">Privacy Policy</span>
</Link>
{"."}
</p>
</div>
);
};
// Constants for better maintainability
const LEGAL_LINKS = {
termsOfService: "https://plane.so/legals/terms-and-conditions",
privacyPolicy: "https://plane.so/legals/privacy-policy",
} as const;
const MESSAGES = {
[EAuthModes.SIGN_UP]: "By creating an account",
[EAuthModes.SIGN_IN]: "By signing in",
} as const;
// Reusable link component to reduce duplication
const LegalLink: React.FC<{ href: string; children: React.ReactNode }> = ({ href, children }) => (
<Link href={href} className="text-custom-text-200" target="_blank" rel="noopener noreferrer">
<span className="text-sm font-medium underline hover:cursor-pointer">{children}</span>
</Link>
);
export const TermsAndConditions: React.FC<TermsAndConditionsProps> = ({ authType = EAuthModes.SIGN_IN }) => (
<div className="flex items-center justify-center">
<p className="text-center text-sm text-custom-text-300 whitespace-pre-line">
{`${MESSAGES[authType]}, you understand and agree to \n our `}
<LegalLink href={LEGAL_LINKS.termsOfService}>Terms of Service</LegalLink> and{" "}
<LegalLink href={LEGAL_LINKS.privacyPolicy}>Privacy Policy</LegalLink>.
</p>
</div>
);

18
apps/web/core/components/auth-screens/auth-base.tsx Normal file
View file

@ -0,0 +1,18 @@
"use client";
import React from "react";
import { AuthRoot } from "@/components/account";
import { EAuthModes } from "@/helpers/authentication.helper";
import { AuthFooter } from "./footer";
import { AuthHeader } from "./header";
type AuthBaseProps = {
authType: EAuthModes;
};
export const AuthBase = ({ authType }: AuthBaseProps) => (
<div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
<AuthHeader type={authType} />
<AuthRoot authMode={authType} />
<AuthFooter />
</div>
);

38
apps/web/core/components/auth-screens/footer.tsx Normal file
View file

@ -0,0 +1,38 @@
"use client";
import React from "react";
import { AccentureLogo, DolbyLogo, SonyLogo, ZerodhaLogo } from "@plane/ui";
const BRAND_LOGOS: {
id: string;
icon: React.ReactNode;
}[] = [
{
id: "zerodha",
icon: <ZerodhaLogo className="h-7 w-24 text-[#387ED1]" />,
},
{
id: "sony",
icon: <SonyLogo className="h-7 w-16 dark:text-white" />,
},
{
id: "dolby",
icon: <DolbyLogo className="h-7 w-16 dark:text-white" />,
},
{
id: "accenture",
icon: <AccentureLogo className="h-7 w-24 dark:text-white" />,
},
];
export const AuthFooter = () => (
<div className="flex flex-col items-center gap-6">
<span className="text-sm text-custom-text-300 whitespace-nowrap">Join 10,000+ teams building with Plane</span>
<div className="flex items-center justify-center gap-x-10 gap-y-4 w-full flex-wrap">
{BRAND_LOGOS.map((brand) => (
<div className="flex items-center justify-center h-7 flex-1" key={brand.id}>
{brand.icon}
</div>
))}
</div>
</div>
);

60
apps/web/core/components/auth-screens/header.tsx Normal file
View file

@ -0,0 +1,60 @@
"use client";
import React from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { AUTH_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { PlaneLockup } from "@plane/ui";
import { PageHead } from "@/components/core/page-title";
import { EAuthModes } from "@/helpers/authentication.helper";
import { useInstance } from "@/hooks/store";
const authContentMap = {
[EAuthModes.SIGN_IN]: {
pageTitle: "Sign up",
text: "auth.common.new_to_plane",
linkText: "Sign up",
linkHref: "/sign-up",
},
[EAuthModes.SIGN_UP]: {
pageTitle: "Sign in",
text: "auth.common.already_have_an_account",
linkText: "Sign in",
linkHref: "/sign-in",
},
};
type AuthHeaderProps = {
type: EAuthModes;
};
export const AuthHeader = observer(({ type }: AuthHeaderProps) => {
const { t } = useTranslation();
// store
const { config } = useInstance();
// derived values
const enableSignUpConfig = config?.enable_signup ?? false;
return (
<>
<PageHead title={t(authContentMap[type].pageTitle) + " - Plane"} />
<div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
<Link href="/">
<PlaneLockup height={20} width={95} className="text-custom-text-100" />
</Link>
{enableSignUpConfig && (
<div className="flex flex-col items-end text-sm font-medium text-center sm:items-center sm:gap-2 sm:flex-row text-custom-text-300">
{t(authContentMap[type].text)}
<Link
data-ph-element={AUTH_TRACKER_ELEMENTS.NAVIGATE_TO_SIGN_UP}
href={authContentMap[type].linkHref}
className="font-semibold text-custom-primary-100 hover:underline"
>
{t(authContentMap[type].linkText)}
</Link>
</div>
)}
</div>
</>
);
});

2
apps/web/core/components/auth-screens/index.ts
View file

@ -1,3 +1,5 @@
export * from "./project";
export * from "./workspace";
export * from "./not-authorized-view";
export * from "./header";
export * from "./auth-base";

10
apps/web/core/components/common/latest-feature-block.tsx
View file

@ -11,9 +11,9 @@ export const LatestFeatureBlock = () => {
return (
<>
<div className="mx-auto mt-16 flex rounded-[3.5px] border border-onboarding-border-200 bg-onboarding-background-100 py-2 sm:w-96">
<div className="mx-auto mt-16 flex rounded-[3.5px] border border-custom-border-200 bg-custom-background-100 py-2 sm:w-96">
<Lightbulb className="mx-3 mr-2 h-7 w-7" />
<p className="text-left text-sm text-onboarding-text-100">
<p className="text-left text-sm text-custom-text-100">
Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
<span className="text-sm font-medium underline hover:cursor-pointer">Learn more</span>
@ -21,8 +21,8 @@ export const LatestFeatureBlock = () => {
</p>
</div>
<div
className={`mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 object-cover sm:h-52 sm:w-96 ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
className={`mx-auto mt-8 overflow-hidden rounded-md border border-custom-border-200 object-cover sm:h-52 sm:w-96 ${
resolvedTheme === "dark" ? "bg-custom-background-100" : "bg-custom-primary-70"
}`}
>
<div className="h-[90%]">
@ -30,7 +30,7 @@ export const LatestFeatureBlock = () => {
src={latestFeatures}
alt="Plane Work items"
className={`-mt-2 ml-10 h-full rounded-md ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
resolvedTheme === "dark" ? "bg-custom-background-100" : "bg-custom-primary-70"
}`}
/>
</div>

2
apps/web/core/components/common/logo-spinner.tsx
View file

@ -11,7 +11,7 @@ export const LogoSpinner = () => {
return (
<div className="flex items-center justify-center">
<Image src={logoSrc} alt="logo" className="size-16 sm:size-20 mr-2" />
<Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
</div>
);
};

7
apps/web/core/components/global/product-updates/footer.tsx
View file

@ -1,12 +1,9 @@
import Image from "next/image";
import { USER_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
// ui
import { getButtonStyling } from "@plane/ui";
import { getButtonStyling, PlaneLogo } from "@plane/ui";
// helpers
import { cn } from "@plane/utils";
// assets
import PlaneLogo from "@/public/plane-logos/blue-without-text.png";
export const ProductUpdatesFooter = () => {
const { t } = useTranslation();
@ -60,7 +57,7 @@ export const ProductUpdatesFooter = () => {
"flex gap-1.5 items-center text-center font-medium hover:underline underline-offset-2 outline-none"
)}
>
<Image src={PlaneLogo} alt="Plane" width={12} height={12} />
<PlaneLogo className="h-4 w-auto text-custom-text-100" />
{t("powered_by_plane_pages")}
</a>
</div>

2
apps/web/core/components/instance/not-ready-view.tsx
View file

@ -42,7 +42,7 @@ export const InstanceNotReady: FC = () => {
<div className="relative flex flex-col justify-center items-center space-y-4">
<h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
<Image src={PlaneTakeOffImage} alt="Plane Logo" />
<p className="font-medium text-base text-onboarding-text-400">
<p className="font-medium text-base text-custom-text-400">
Get started by setting up your instance and workspace
</p>
</div>

2
apps/web/core/components/issues/workspace-draft/root.tsx
View file

@ -41,7 +41,7 @@ export const WorkspaceDraftIssuesRoot: FC<TWorkspaceDraftIssuesRoot> = observer(
[EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
EUserPermissionsLevel.WORKSPACE
);
const noProjectResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/projects" });
const noProjectResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/draft/draft-issues-empty" });
//swr hook for fetching issue properties
useWorkspaceIssueProperties(workspaceSlug);

27
apps/web/core/components/onboarding/create-or-join-workspaces.tsx
View file

@ -1,20 +1,16 @@
import React, { useEffect, useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
// icons
import { useTheme } from "next-themes";
// types
import { OctagonAlert } from "lucide-react";
import { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types";
// components
import { Invitations, OnboardingHeader, SwitchAccountDropdown, CreateWorkspace } from "@/components/onboarding";
import { Invitations, SwitchAccountDropdown, CreateWorkspace } from "@/components/onboarding";
// hooks
import { useUser } from "@/hooks/store";
// plane web helpers
import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
// assets
import CreateJoinWorkspaceDark from "@/public/onboarding/create-join-workspace-dark.webp";
import CreateJoinWorkspace from "@/public/onboarding/create-join-workspace-light.webp";
// local components
import { LogoSpinner } from "../common";
export enum ECreateOrJoinWorkspaceViews {
@ -35,8 +31,6 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
// store hooks
const { data: user } = useUser();
// hooks
const { resolvedTheme } = useTheme();
// derived values
const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
@ -57,12 +51,6 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
return (
<div className="flex h-full w-full">
<div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
<div className="flex items-center justify-between">
<OnboardingHeader currentStep={totalSteps - 1} totalSteps={totalSteps} />
<div className="shrink-0 lg:hidden">
<SwitchAccountDropdown />
</div>
</div>
<div className="flex flex-col w-full items-center justify-center p-8 mt-6">
{currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN ? (
<Invitations
@ -97,16 +85,7 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
)}
</div>
</div>
<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">
<SwitchAccountDropdown />
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? CreateJoinWorkspaceDark : CreateJoinWorkspace}
className="h-screen w-auto float-end object-cover"
alt="Profile setup"
/>
</div>
</div>
<SwitchAccountDropdown />
</div>
);
});

26
apps/web/core/components/onboarding/create-workspace.tsx
View file

@ -135,20 +135,20 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
</span>
</Button>
<div className="mx-auto mt-4 flex items-center sm:w-96">
<hr className="w-full border-onboarding-border-100" />
<p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">or</p>
<hr className="w-full border-onboarding-border-100" />
<hr className="w-full border-custom-border-300" />
<p className="mx-3 flex-shrink-0 text-center text-sm text-custom-text-400">or</p>
<hr className="w-full border-custom-border-300" />
</div>
</>
)}
<div className="text-center space-y-1 py-4 mx-auto">
<h3 className="text-3xl font-bold text-onboarding-text-100">{t("workspace_creation.heading")}</h3>
<p className="font-medium text-onboarding-text-400">{t("workspace_creation.subheading")}</p>
<h3 className="text-3xl font-bold text-custom-text-100">{t("workspace_creation.heading")}</h3>
<p className="font-medium text-custom-text-400">{t("workspace_creation.subheading")}</p>
</div>
<form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
<div className="space-y-1">
<label
className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="name"
>
{t("workspace_creation.form.name.label")}
@ -182,7 +182,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
placeholder={t("workspace_creation.form.name.placeholder")}
ref={ref}
hasError={Boolean(errors.name)}
className="w-full border-onboarding-border-100 placeholder:text-custom-text-400"
className="w-full border-custom-border-300 placeholder:text-custom-text-400"
autoFocus
/>
</div>
@ -192,7 +192,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
</div>
<div className="space-y-1">
<label
className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="slug"
>
{t("workspace_creation.form.url.label")}
@ -210,7 +210,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
render={({ field: { value, ref, onChange } }) => (
<div
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-custom-border-300"
}`}
>
<span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
@ -232,7 +232,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
</div>
)}
/>
<p className="text-sm text-onboarding-text-300">{t("workspace_creation.form.url.edit_slug")}</p>
<p className="text-sm text-custom-text-300">{t("workspace_creation.form.url.edit_slug")}</p>
{slugError && (
<p className="-mt-3 text-sm text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p>
)}
@ -241,10 +241,10 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
)}
{errors.slug && <span className="text-sm text-red-500">{errors.slug.message}</span>}
</div>
<hr className="w-full border-onboarding-border-100" />
<hr className="w-full border-custom-border-300" />
<div className="space-y-1">
<label
className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="organization_size"
>
{t("workspace_creation.form.organization_size.label")}
@ -265,7 +265,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
</span>
)
}
buttonClassName="!border-[0.5px] !border-onboarding-border-100 !shadow-none !rounded-md"
buttonClassName="!border-[0.5px] !border-custom-border-300 !shadow-none !rounded-md"
input
optionsClassName="w-full"
>

93
apps/web/core/components/onboarding/header.tsx
View file

@ -1,24 +1,85 @@
import { FC } from "react";
import Image from "next/image";
// images
import BluePlaneLogoWithoutText from "@/public/plane-logos/blue-without-text.png";
// components
import { OnboardingStepIndicator } from "./step-indicator";
"use client";
export type OnboardingHeaderProps = {
currentStep: number;
totalSteps: number;
import { FC } from "react";
import { observer } from "mobx-react";
import { ChevronLeft } from "lucide-react";
// plane imports
import { EOnboardingSteps, TOnboardingStep } from "@plane/types";
import { PlaneLockup, Tooltip } from "@plane/ui";
import { cn } from "@plane/utils";
// components
import { SwitchAccountDropdown } from "@/components/onboarding";
// hooks
import { useUser } from "@/hooks/store";
type OnboardingHeaderProps = {
currentStep: EOnboardingSteps;
updateCurrentStep: (step: EOnboardingSteps) => void;
hasInvitations: boolean;
};
export const OnboardingHeader: FC<OnboardingHeaderProps> = (props) => {
const { currentStep, totalSteps } = props;
export const OnboardingHeader: FC<OnboardingHeaderProps> = observer((props) => {
const { currentStep, updateCurrentStep, hasInvitations } = props;
// store hooks
const { data: user } = useUser();
// handle step back
const handleStepBack = () => {
switch (currentStep) {
case EOnboardingSteps.ROLE_SETUP:
updateCurrentStep(EOnboardingSteps.PROFILE_SETUP);
break;
case EOnboardingSteps.USE_CASE_SETUP:
updateCurrentStep(EOnboardingSteps.ROLE_SETUP);
break;
case EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN:
updateCurrentStep(EOnboardingSteps.USE_CASE_SETUP);
break;
}
};
// can go back
const canGoBack = ![EOnboardingSteps.PROFILE_SETUP, EOnboardingSteps.INVITE_MEMBERS].includes(currentStep);
// Get current step number for progress tracking
const getCurrentStepNumber = (): number => {
const stepOrder: TOnboardingStep[] = [
EOnboardingSteps.PROFILE_SETUP,
EOnboardingSteps.ROLE_SETUP,
EOnboardingSteps.USE_CASE_SETUP,
...(hasInvitations
? [EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN]
: [EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN, EOnboardingSteps.INVITE_MEMBERS]),
];
return stepOrder.indexOf(currentStep) + 1;
};
// derived values
const currentStepNumber = getCurrentStepNumber();
const totalSteps = hasInvitations ? 4 : 5; // 4 if invites available, 5 if not
const userName = user?.display_name ?? `${user?.first_name} ${user?.last_name}` ?? user?.email;
return (
<div className="flex w-full items-center justify-between font-semibold ">
<div className="flex items-center gap-x-2">
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-3" />
<OnboardingStepIndicator currentStep={currentStep} totalSteps={totalSteps} />
<div className="flex flex-col gap-4 sticky top-0 z-10">
<div className="h-1.5 rounded-t-lg w-full bg-custom-background-100 overflow-hidden cursor-pointer">
<Tooltip tooltipContent={`${currentStepNumber}/${totalSteps}`} position="bottom-right">
<div
className="h-full bg-custom-primary-100 transition-all duration-700 ease-out"
style={{ width: `${(currentStepNumber / totalSteps) * 100}%` }}
/>
</Tooltip>
</div>
<div className={cn("flex items-center justify-between gap-6 w-full px-6", canGoBack && "pl-4 pr-6")}>
<div className="flex items-center gap-2.5">
{canGoBack && (
<button onClick={handleStepBack} className="cursor-pointer" type="button" disabled={!canGoBack}>
<ChevronLeft className="size-6 text-custom-text-400" />
</button>
)}
<PlaneLockup height={20} width={95} className="text-custom-text-100" />
</div>
<SwitchAccountDropdown fullName={userName} />
</div>
</div>
);
};
});

1
apps/web/core/components/onboarding/index.ts
View file

@ -8,3 +8,4 @@ export * from "./step-indicator";
export * from "./switch-account-dropdown";
export * from "./switch-account-modal";
export * from "./header";
export * from "./root";

12
apps/web/core/components/onboarding/invitations.tsx
View file

@ -75,8 +75,8 @@ export const Invitations: React.FC<Props> = (props) => {
return invitations && invitations.length > 0 ? (
<div className="space-y-4">
<div className="text-center space-y-1 py-4 mx-auto">
<h3 className="text-3xl font-bold text-onboarding-text-100">You are invited!</h3>
<p className="font-medium text-onboarding-text-400">Accept the invites to collaborate with your team.</p>
<h3 className="text-3xl font-bold text-custom-text-100">You are invited!</h3>
<p className="font-medium text-custom-text-400">Accept the invites to collaborate with your team.</p>
</div>
<div>
{invitations &&
@ -87,7 +87,7 @@ export const Invitations: React.FC<Props> = (props) => {
return (
<div
key={invitation.id}
className={`flex cursor-pointer items-center gap-2 rounded border p-3.5 border-custom-border-200 hover:bg-onboarding-background-300/30`}
className={`flex cursor-pointer items-center gap-2 rounded border p-3.5 border-custom-border-200 hover:bg-custom-background-90`}
onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
>
<div className="flex-shrink-0">
@ -119,9 +119,9 @@ export const Invitations: React.FC<Props> = (props) => {
{isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue to workspace"}
</Button>
<div className="mx-auto mt-4 flex items-center sm:w-96">
<hr className="w-full border-onboarding-border-100" />
<p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">or</p>
<hr className="w-full border-onboarding-border-100" />
<hr className="w-full border-custom-border-300" />
<p className="mx-3 flex-shrink-0 text-center text-sm text-custom-text-400">or</p>
<hr className="w-full border-custom-border-300" />
</div>
<Button
variant="link-neutral"

46
apps/web/core/components/onboarding/invite-members.tsx
View file

@ -2,8 +2,6 @@
import React, { useEffect, useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import { useTheme } from "next-themes";
import {
Control,
Controller,
@ -32,11 +30,7 @@ import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
// services
import { WorkspaceService } from "@/plane-web/services";
// assets
import InviteMembersDark from "@/public/onboarding/invite-members-dark.webp";
import InviteMembersLight from "@/public/onboarding/invite-members-light.webp";
// components
import { OnboardingHeader } from "./header";
import { SwitchAccountDropdown } from "./switch-account-dropdown";
type Props = {
@ -169,7 +163,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
ref={ref}
hasError={Boolean(errors.emails?.[index]?.email)}
placeholder={placeholderEmails[index % placeholderEmails.length]}
className="w-full border-onboarding-border-100 text-xs placeholder:text-onboarding-text-400 sm:text-sm"
className="w-full border-custom-border-300 text-xs placeholder:text-custom-text-400 sm:text-sm"
autoComplete="off"
/>
)}
@ -193,13 +187,11 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
<Listbox.Button
type="button"
ref={setReferenceElement}
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"
className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-sm border-[0.5px] border-custom-border-300"
>
<span
className={`text-sm ${
!getValues(`emails.${index}.role_active`)
? "text-onboarding-text-400"
: "text-onboarding-text-100"
!getValues(`emails.${index}.role_active`) ? "text-custom-text-400" : "text-custom-text-100"
} sm:text-sm`}
>
{ROLE[value]}
@ -216,7 +208,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
<Listbox.Options as="div">
<div
className="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-onboarding-border-100 bg-onboarding-background-200 shadow-sm focus:outline-none"
className="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-custom-border-300 bg-custom-background-100 shadow-sm focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
@ -229,7 +221,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-onboarding-background-400/40" : ""
} ${selected ? "text-onboarding-text-100" : "text-custom-text-200"}`
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
@ -274,8 +266,6 @@ export const InviteMembers: React.FC<Props> = (props) => {
const [isInvitationDisabled, setIsInvitationDisabled] = useState(true);
const { resolvedTheme } = useTheme();
const {
control,
watch,
@ -360,17 +350,10 @@ export const InviteMembers: React.FC<Props> = (props) => {
return (
<div className="flex w-full h-full">
<div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
<div className="flex items-center justify-between">
{/* Since this will always be the last step */}
<OnboardingHeader currentStep={totalSteps} totalSteps={totalSteps} />
<div className="shrink-0 lg:hidden">
<SwitchAccountDropdown />
</div>
</div>
<div className="flex flex-col w-full items-center justify-center p-8 mt-6 md:w-4/5 mx-auto">
<div className="text-center space-y-1 py-4 mx-auto w-4/5">
<h3 className="text-3xl font-bold text-onboarding-text-100">Invite your teammates</h3>
<p className="font-medium text-onboarding-text-400">
<h3 className="text-3xl font-bold text-custom-text-100">Invite your teammates</h3>
<p className="font-medium text-custom-text-400">
Work in plane happens best with your team. Invite them now to use Plane to its potential.
</p>
</div>
@ -383,8 +366,8 @@ export const InviteMembers: React.FC<Props> = (props) => {
>
<div className="w-full text-sm py-4">
<div className="group relative grid grid-cols-10 gap-4 mx-8 py-2">
<div className="col-span-6 px-1 text-sm text-onboarding-text-200 font-medium">Email</div>
<div className="col-span-4 px-1 text-sm text-onboarding-text-200 font-medium">Role</div>
<div className="col-span-6 px-1 text-sm text-custom-text-200 font-medium">Email</div>
<div className="col-span-4 px-1 text-sm text-custom-text-200 font-medium">Role</div>
</div>
<div className="mb-3 space-y-3 sm:space-y-4">
{fields.map((field, index) => (
@ -431,16 +414,7 @@ export const InviteMembers: React.FC<Props> = (props) => {
</form>
</div>
</div>
<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">
<SwitchAccountDropdown />
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? InviteMembersDark : InviteMembersLight}
className="h-screen w-auto float-end object-cover"
alt="Profile setup"
/>
</div>
</div>
<SwitchAccountDropdown />
</div>
);
};

597
apps/web/core/components/onboarding/profile-setup.tsx
View file

@ -2,8 +2,6 @@
import React, { useMemo, useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import { useTheme } from "next-themes";
import { Controller, useForm } from "react-hook-form";
import { Eye, EyeOff } from "lucide-react";
import {
@ -20,17 +18,11 @@ import { Button, Input, PasswordStrengthIndicator, Spinner, TOAST_TYPE, setToast
// components
import { getFileURL, getPasswordStrength } from "@plane/utils";
import { UserImageUploadModal } from "@/components/core";
import { OnboardingHeader, SwitchAccountDropdown } from "@/components/onboarding";
// constants
// helpers
// hooks
import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
import { useUser, useUserProfile } from "@/hooks/store";
// assets
import ProfileSetupDark from "@/public/onboarding/profile-setup-dark.webp";
import ProfileSetupLight from "@/public/onboarding/profile-setup-light.webp";
import UserPersonalizationDark from "@/public/onboarding/user-personalization-dark.webp";
import UserPersonalizationLight from "@/public/onboarding/user-personalization-light.webp";
// services
import { AuthService } from "@/services/auth.service";
@ -98,8 +90,6 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
});
// plane hooks
const { t } = useTranslation();
// hooks
const { resolvedTheme } = useTheme();
// store hooks
const { updateCurrentUser } = useUser();
const { updateUserProfile } = useUserProfile();
@ -298,330 +288,287 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
const isButtonDisabled =
!isSubmitting && isValid ? (isPasswordAlreadySetup ? false : isValidPassword ? false : true) : true;
const isCurrentStepUserPersonalization = profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION;
return (
<div className="flex h-full w-full">
<div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
<div className="flex items-center justify-between">
<OnboardingHeader currentStep={isCurrentStepUserPersonalization ? 2 : 1} totalSteps={totalSteps} />
<div className="shrink-0 lg:hidden">
<SwitchAccountDropdown fullName={`${watch("first_name")} ${watch("last_name")}`} />
</div>
</div>
<div className="flex flex-col w-full items-center justify-center p-8 mt-6">
<div className="text-center space-y-1 py-4 mx-auto">
<h3 className="text-3xl font-bold text-onboarding-text-100">
{isCurrentStepUserPersonalization
? `Looking good${user?.first_name && `, ${user.first_name}`}!`
: "Welcome to Plane!"}
</h3>
<p className="font-medium text-onboarding-text-400">
{isCurrentStepUserPersonalization
? "Let’s personalize Plane for you."
: "Let’s setup your profile, tell us a bit about yourself."}
</p>
</div>
<form onSubmit={handleSubmit(onSubmit)} className="w-full mx-auto mt-2 space-y-4 sm:w-96">
{profileSetupStep !== EProfileSetupSteps.USER_PERSONALIZATION && (
<>
<div className="flex flex-col w-full items-center justify-center p-8 mt-6">
<form onSubmit={handleSubmit(onSubmit)} className="w-full mx-auto mt-2 space-y-4 sm:w-96">
{profileSetupStep !== EProfileSetupSteps.USER_PERSONALIZATION && (
<>
<Controller
control={control}
name="avatar_url"
render={({ field: { onChange, value } }) => (
<UserImageUploadModal
isOpen={isImageUploadModalOpen}
onClose={() => setIsImageUploadModalOpen(false)}
handleRemove={async () => handleDelete(getValues("avatar_url"))}
onSuccess={(url) => {
onChange(url);
setIsImageUploadModalOpen(false);
}}
value={value && value.trim() !== "" ? value : null}
/>
)}
/>
<div className="space-y-1 flex items-center justify-center">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
{!userAvatar || userAvatar === "" ? (
<div className="flex flex-col items-center justify-between">
<div className="relative h-14 w-14 overflow-hidden">
<div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-white text-3xl font-medium bg-[#9747FF] uppercase">
{watch("first_name")[0] ?? "R"}
</div>
</div>
<div className="pt-1 text-sm font-medium text-custom-primary-300 hover:text-custom-primary-400">
Choose image
</div>
</div>
) : (
<div className="relative mr-3 h-16 w-16 overflow-hidden">
<img
src={getFileURL(userAvatar ?? "")}
className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
onClick={() => setIsImageUploadModalOpen(true)}
alt={user?.display_name}
/>
</div>
)}
</button>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="space-y-1">
<label
className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="first_name"
>
First name
</label>
<Controller
control={control}
name="first_name"
rules={{
required: "First name is required",
maxLength: {
value: 24,
message: "First name must be within 24 characters.",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="first_name"
name="first_name"
type="text"
value={value}
autoFocus
onChange={onChange}
ref={ref}
hasError={Boolean(errors.first_name)}
placeholder="Wilbur"
className="w-full border-custom-border-300"
autoComplete="on"
/>
)}
/>
{errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
</div>
<div className="space-y-1">
<label
className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="last_name"
>
Last name
</label>
<Controller
control={control}
name="last_name"
rules={{
required: "Last name is required",
maxLength: {
value: 24,
message: "Last name must be within 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="Wright"
className="w-full border-custom-border-300"
autoComplete="on"
/>
)}
/>
{errors.last_name && <span className="text-sm text-red-500">{errors.last_name.message}</span>}
</div>
</div>
{/* setting up password for the first time */}
{!isPasswordAlreadySetup && (
<>
<div className="space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
Set a password ({t("common.optional")})
</label>
<Controller
control={control}
name="password"
rules={{
required: false,
}}
render={({ field: { value, onChange, ref } }) => (
<div className="relative flex items-center rounded-md">
<Input
type={showPassword.password ? "text" : "password"}
name="password"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.password)}
placeholder="New password..."
className="w-full border-[0.5px] border-custom-border-300 pr-12 placeholder:text-custom-text-400"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
</div>
)}
/>
<PasswordStrengthIndicator password={watch("password") ?? ""} isFocused={isPasswordInputFocused} />
</div>
<div className="space-y-1">
<label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
{t("auth.common.password.confirm_password.label")} ({t("common.optional")})
</label>
<Controller
control={control}
name="confirm_password"
rules={{
required: watch("password") ? true : false,
validate: (value) =>
watch("password") ? (value === watch("password") ? true : "Passwords don't match") : true,
}}
render={({ field: { value, onChange, ref } }) => (
<div className="relative flex items-center rounded-md">
<Input
type={showPassword.retypePassword ? "text" : "password"}
name="confirm_password"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.confirm_password)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="w-full border-custom-border-300 pr-12 placeholder:text-custom-text-400"
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}
</div>
)}
/>
{errors.confirm_password && (
<span className="text-sm text-red-500">{errors.confirm_password.message}</span>
)}
</div>
</>
)}
</>
)}
{/* user role once the password is set */}
{profileSetupStep !== EProfileSetupSteps.USER_DETAILS && (
<>
<div className="space-y-1">
<label
className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="role"
>
What role are you working on? Choose one.
</label>
<Controller
control={control}
name="avatar_url"
render={({ field: { onChange, value } }) => (
<UserImageUploadModal
isOpen={isImageUploadModalOpen}
onClose={() => setIsImageUploadModalOpen(false)}
handleRemove={async () => handleDelete(getValues("avatar_url"))}
onSuccess={(url) => {
onChange(url);
setIsImageUploadModalOpen(false);
}}
value={value && value.trim() !== "" ? value : null}
/>
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-custom-background-90 ${
value === userRole ? "border-custom-primary-100" : "border-custom-border-300"
} rounded px-3 py-1.5 text-sm font-medium`}
onClick={() => onChange(userRole)}
>
{userRole}
</div>
))}
</div>
)}
/>
<div className="space-y-1 flex items-center justify-center">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
{!userAvatar || userAvatar === "" ? (
<div className="flex flex-col items-center justify-between">
<div className="relative h-14 w-14 overflow-hidden">
<div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-white text-3xl font-medium bg-[#9747FF] uppercase">
{watch("first_name")[0] ?? "R"}
</div>
{errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
</div>
<div className="space-y-1">
<label
className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="use_case"
>
What is your domain expertise? Choose one.
</label>
<Controller
control={control}
name="use_case"
rules={{
required: "This field is required",
}}
render={({ field: { value, onChange } }) => (
<div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
{USER_DOMAIN.map((userDomain) => (
<div
key={userDomain}
className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-custom-background-90 ${
value === userDomain ? "border-custom-primary-100" : "border-custom-border-300"
} rounded px-3 py-1.5 text-sm font-medium`}
onClick={() => onChange(userDomain)}
>
{userDomain}
</div>
<div className="pt-1 text-sm font-medium text-custom-primary-300 hover:text-custom-primary-400">
Choose image
</div>
</div>
) : (
<div className="relative mr-3 h-16 w-16 overflow-hidden">
<img
src={getFileURL(userAvatar ?? "")}
className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
onClick={() => setIsImageUploadModalOpen(true)}
alt={user?.display_name}
/>
</div>
)}
</button>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="space-y-1">
<label
className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="first_name"
>
First name
</label>
<Controller
control={control}
name="first_name"
rules={{
required: "First name is required",
maxLength: {
value: 24,
message: "First name must be within 24 characters.",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="first_name"
name="first_name"
type="text"
value={value}
autoFocus
onChange={onChange}
ref={ref}
hasError={Boolean(errors.first_name)}
placeholder="Wilbur"
className="w-full border-onboarding-border-100"
autoComplete="on"
/>
)}
/>
{errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
</div>
<div className="space-y-1">
<label
className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="last_name"
>
Last name
</label>
<Controller
control={control}
name="last_name"
rules={{
required: "Last name is required",
maxLength: {
value: 24,
message: "Last name must be within 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="Wright"
className="w-full border-onboarding-border-100"
autoComplete="on"
/>
)}
/>
{errors.last_name && <span className="text-sm text-red-500">{errors.last_name.message}</span>}
</div>
</div>
{/* setting up password for the first time */}
{!isPasswordAlreadySetup && (
<>
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
Set a password ({t("common.optional")})
</label>
<Controller
control={control}
name="password"
rules={{
required: false,
}}
render={({ field: { value, onChange, ref } }) => (
<div className="relative flex items-center rounded-md">
<Input
type={showPassword.password ? "text" : "password"}
name="password"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.password)}
placeholder="New password..."
className="w-full border-[0.5px] border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
/>
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("password")}
/>
)}
</div>
)}
/>
<PasswordStrengthIndicator
password={watch("password") ?? ""}
isFocused={isPasswordInputFocused}
/>
))}
</div>
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
{t("auth.common.password.confirm_password.label")} ({t("common.optional")})
</label>
<Controller
control={control}
name="confirm_password"
rules={{
required: watch("password") ? true : false,
validate: (value) =>
watch("password") ? (value === watch("password") ? true : "Passwords don't match") : true,
}}
render={({ field: { value, onChange, ref } }) => (
<div className="relative flex items-center rounded-md">
<Input
type={showPassword.retypePassword ? "text" : "password"}
name="confirm_password"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.confirm_password)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="w-full border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => handleShowPassword("retypePassword")}
/>
)}
</div>
)}
/>
{errors.confirm_password && (
<span className="text-sm text-red-500">{errors.confirm_password.message}</span>
)}
</div>
</>
)}
</>
)}
{/* user role once the password is set */}
{profileSetupStep !== EProfileSetupSteps.USER_DETAILS && (
<>
<div className="space-y-1">
<label
className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="role"
>
What role are you working on? Choose one.
</label>
<Controller
control={control}
name="role"
rules={{
required: "This field is required",
}}
render={({ field: { value, onChange } }) => (
<div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
{USER_ROLE.map((userRole) => (
<div
key={userRole}
className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-onboarding-background-300/30 ${
value === userRole ? "border-custom-primary-100" : "border-onboarding-border-100"
} rounded px-3 py-1.5 text-sm font-medium`}
onClick={() => onChange(userRole)}
>
{userRole}
</div>
))}
</div>
)}
/>
{errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
</div>
<div className="space-y-1">
<label
className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="use_case"
>
What is your domain expertise? Choose one.
</label>
<Controller
control={control}
name="use_case"
rules={{
required: "This field is required",
}}
render={({ field: { value, onChange } }) => (
<div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
{USER_DOMAIN.map((userDomain) => (
<div
key={userDomain}
className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-onboarding-background-300/30 ${
value === userDomain ? "border-custom-primary-100" : "border-onboarding-border-100"
} rounded px-3 py-1.5 text-sm font-medium`}
onClick={() => onChange(userDomain)}
>
{userDomain}
</div>
))}
</div>
)}
/>
{errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
</div>
</>
)}
<Button variant="primary" type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
</Button>
</form>
</div>
</div>
<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">
<SwitchAccountDropdown fullName={`${watch("first_name")} ${watch("last_name")}`} />
<div className="absolute inset-0 z-0">
{profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION ? (
<Image
src={resolvedTheme === "dark" ? UserPersonalizationDark : UserPersonalizationLight}
className="h-screen w-auto float-end object-cover"
alt="User Personalization"
/>
) : (
<Image
src={resolvedTheme === "dark" ? ProfileSetupDark : ProfileSetupLight}
className="h-screen w-auto float-end object-cover"
alt="Profile setup"
/>
)}
/>
{errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
</div>
</>
)}
</div>
<Button variant="primary" type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
</Button>
</form>
</div>
</div>
);

146
apps/web/core/components/onboarding/root.tsx Normal file
View file

@ -0,0 +1,146 @@
"use client";
import { FC, useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react";
// plane imports
import { USER_TRACKER_EVENTS } from "@plane/constants";
import {
EOnboardingSteps,
IWorkspaceMemberInvitation,
TOnboardingStep,
TOnboardingSteps,
TUserProfile,
} from "@plane/types";
import { setToast, TOAST_TYPE } from "@plane/ui";
// helpers
import { captureSuccess } from "@/helpers/event-tracker.helper";
// hooks
import { useUser, useUserProfile, useWorkspace } from "@/hooks/store";
// local components
import { OnboardingHeader } from "./header";
import { OnboardingStepRoot } from "./steps";
type Props = {
invitations?: IWorkspaceMemberInvitation[];
};
export const OnboardingRoot: FC<Props> = observer(({ invitations = [] }) => {
const [currentStep, setCurrentStep] = useState<TOnboardingStep>(EOnboardingSteps.PROFILE_SETUP);
// store hooks
const { data: user } = useUser();
const { data: userProfile, updateUserProfile, finishUserOnboarding } = useUserProfile();
const { workspaces } = useWorkspace();
const workspacesList = Object.values(workspaces ?? {});
// Calculate total steps based on whether invitations are available
const hasInvitations = invitations.length > 0;
// complete onboarding
const finishOnboarding = useCallback(async () => {
if (!user) return;
await finishUserOnboarding()
.then(() => {
captureSuccess({
eventName: USER_TRACKER_EVENTS.onboarding_complete,
payload: {
email: user.email,
user_id: user.id,
},
});
})
.catch(() => {
setToast({
type: TOAST_TYPE.ERROR,
title: "Failed",
message: "Failed to finish onboarding, Please try again later.",
});
});
}, [user, finishUserOnboarding]);
// handle step change
const stepChange = useCallback(
async (steps: Partial<TOnboardingSteps>) => {
if (!user) return;
const payload: Partial<TUserProfile> = {
onboarding_step: {
...userProfile.onboarding_step,
...steps,
},
};
await updateUserProfile(payload);
},
[user, userProfile, updateUserProfile]
);
const handleStepChange = useCallback(
(step: EOnboardingSteps, skipInvites?: boolean) => {
switch (step) {
case EOnboardingSteps.PROFILE_SETUP:
setCurrentStep(EOnboardingSteps.ROLE_SETUP);
break;
case EOnboardingSteps.ROLE_SETUP:
setCurrentStep(EOnboardingSteps.USE_CASE_SETUP);
break;
case EOnboardingSteps.USE_CASE_SETUP:
stepChange({ profile_complete: true });
if (workspacesList.length > 0) finishOnboarding();
else setCurrentStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
break;
case EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN:
if (skipInvites) finishOnboarding();
else {
setCurrentStep(EOnboardingSteps.INVITE_MEMBERS);
stepChange({ workspace_create: true });
}
break;
case EOnboardingSteps.INVITE_MEMBERS:
stepChange({ workspace_invite: true });
finishOnboarding();
break;
}
},
[stepChange, finishOnboarding, workspacesList]
);
const updateCurrentStep = (step: EOnboardingSteps) => setCurrentStep(step);
useEffect(() => {
const handleInitialStep = () => {
if (
userProfile?.onboarding_step?.profile_complete &&
!userProfile?.onboarding_step?.workspace_create &&
!userProfile?.onboarding_step?.workspace_join
) {
setCurrentStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
}
if (
userProfile?.onboarding_step?.profile_complete &&
userProfile?.onboarding_step?.workspace_create &&
!userProfile?.onboarding_step?.workspace_invite
) {
setCurrentStep(EOnboardingSteps.INVITE_MEMBERS);
}
};
handleInitialStep();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<>
{/* Header with progress */}
<OnboardingHeader
currentStep={currentStep}
updateCurrentStep={updateCurrentStep}
hasInvitations={hasInvitations}
/>
{/* Main content area */}
<OnboardingStepRoot currentStep={currentStep} invitations={invitations} handleStepChange={handleStepChange} />
</>
);
});

4
apps/web/core/components/onboarding/step-indicator.tsx
View file

@ -22,7 +22,7 @@ export const OnboardingStepIndicator: React.FC<OnboardingStepIndicatorProps> = (
key={`line-${i}`}
className={cn("h-1.5 -ml-0.5 w-full", {
"bg-green-700": isCompleted,
"bg-onboarding-background-100": !isCompleted,
"bg-custom-background-100": !isCompleted,
"rounded-l-full": isFirstStep,
"rounded-r-full": isLastStep || isActive,
"z-10": isActive,
@ -36,7 +36,7 @@ export const OnboardingStepIndicator: React.FC<OnboardingStepIndicatorProps> = (
return (
<div className="flex flex-col justify-center">
<div className="text-sm text-onboarding-text-300 font-medium">
<div className="text-sm text-custom-text-300 font-medium">
{currentStep} of {totalSteps} steps
</div>
<div className="flex items-center justify-center my-0.5 mx-1 w-40 lg:w-52">{renderIndicators()}</div>

15
apps/web/core/components/onboarding/steps/common/header.tsx Normal file
View file

@ -0,0 +1,15 @@
"use client";
import { FC } from "react";
type Props = {
title: string;
description: string;
};
export const CommonOnboardingHeader: FC<Props> = ({ title, description }) => (
<div className="text-left space-y-2">
<h1 className="text-2xl font-semibold text-custom-text-200">{title}</h1>
<p className="text-base text-custom-text-300">{description}</p>
</div>
);

1
apps/web/core/components/onboarding/steps/common/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./header";

6
apps/web/core/components/onboarding/steps/index.ts Normal file
View file

@ -0,0 +1,6 @@
export * from "./profile";
export * from "./role";
export * from "./usecase";
export * from "./workspace";
export * from "./team";
export * from "./root";

24
apps/web/core/components/onboarding/steps/profile/consent.tsx Normal file
View file

@ -0,0 +1,24 @@
"use client";
import { FC } from "react";
import { Check } from "lucide-react";
type Props = {
isChecked: boolean;
handleChange: (checked: boolean) => void;
};
export const MarketingConsent: FC<Props> = ({ isChecked, handleChange }) => (
<div className="flex items-center justify-center gap-1.5">
<button
type="button"
onClick={() => handleChange(!isChecked)}
className={`size-4 rounded border-2 flex items-center justify-center ${
isChecked ? "bg-custom-primary-100 border-custom-primary-100" : "border-custom-border-300"
}`}
>
{isChecked && <Check className="w-3 h-3 text-white" />}
</button>
<span className="text-sm text-custom-text-300">I agree to Plane marketing communications</span>
</div>
);

1
apps/web/core/components/onboarding/steps/profile/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./root";

263
apps/web/core/components/onboarding/steps/profile/root.tsx Normal file
View file

@ -0,0 +1,263 @@
"use client";
import { FC, useMemo, useState } from "react";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
import { ImageIcon } from "lucide-react";
// plane imports
import { E_PASSWORD_STRENGTH, ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS } from "@plane/constants";
import { EOnboardingSteps, IUser } from "@plane/types";
import { Button, TOAST_TYPE, setToast } from "@plane/ui";
import { cn, getFileURL, getPasswordStrength } from "@plane/utils";
// components
import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
// helpers
import { captureError, captureView } from "@/helpers/event-tracker.helper";
// hooks
import { useUser, useUserProfile } from "@/hooks/store";
// services
import { AuthService } from "@/services/auth.service";
// local components
import { CommonOnboardingHeader } from "../common";
import { MarketingConsent } from "./consent";
import { SetPasswordRoot } from "./set-password";
type Props = {
handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
};
export type TProfileSetupFormValues = {
first_name: string;
last_name: string;
avatar_url?: string | null;
password?: string;
confirm_password?: string;
role?: string;
use_case?: string;
has_marketing_email_consent?: boolean;
};
const authService = new AuthService();
const defaultValues: Partial<TProfileSetupFormValues> = {
first_name: "",
last_name: "",
avatar_url: "",
password: undefined,
confirm_password: undefined,
has_marketing_email_consent: true,
};
export const ProfileSetupStep: FC<Props> = observer(({ handleStepChange }) => {
// states
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
// store hooks
const { data: user, updateCurrentUser } = useUser();
const { updateUserProfile } = useUserProfile();
// form info
const {
getValues,
handleSubmit,
control,
watch,
setValue,
formState: { errors, isSubmitting, isValid },
} = useForm<TProfileSetupFormValues>({
defaultValues: {
...defaultValues,
first_name: user?.first_name,
last_name: user?.last_name,
avatar_url: user?.avatar_url,
},
mode: "onChange",
});
// derived values
const userAvatar = watch("avatar_url");
const handleSetPassword = async (password: string) => {
const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
await authService.setPassword(token, { password });
};
const handleSubmitUserDetail = async (formData: TProfileSetupFormValues) => {
const userDetailsPayload: Partial<IUser> = {
first_name: formData.first_name,
last_name: formData.last_name,
avatar_url: formData.avatar_url ?? undefined,
};
try {
await Promise.all([
updateCurrentUser(userDetailsPayload),
formData.password && handleSetPassword(formData.password),
]);
} catch {
captureError({
eventName: USER_TRACKER_EVENTS.add_details,
});
setToast({
type: TOAST_TYPE.ERROR,
title: "Error",
message: "User details update failed. Please try again!",
});
}
};
const onSubmit = async (formData: TProfileSetupFormValues) => {
if (!user) return;
captureView({
elementName: ONBOARDING_TRACKER_ELEMENTS.PROFILE_SETUP_FORM,
});
updateUserProfile({
has_marketing_email_consent: formData.has_marketing_email_consent,
});
await handleSubmitUserDetail(formData).then(() => {
handleStepChange(EOnboardingSteps.PROFILE_SETUP);
});
};
const handleDelete = (url: string | null | undefined) => {
if (!url) return;
setValue("avatar_url", "");
};
// derived values
const isPasswordAlreadySetup = !user?.is_password_autoset;
const currentPassword = watch("password") || undefined;
const currentConfirmPassword = watch("confirm_password") || undefined;
const isValidPassword = useMemo(() => {
if (currentPassword) {
if (
currentPassword === currentConfirmPassword &&
getPasswordStrength(currentPassword) === E_PASSWORD_STRENGTH.STRENGTH_VALID
) {
return true;
} else {
return false;
}
} else {
return true;
}
}, [currentPassword, currentConfirmPassword]);
// 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 =
!isSubmitting && isValid ? (isPasswordAlreadySetup ? false : isValidPassword ? false : true) : true;
return (
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-10">
{/* Header */}
<CommonOnboardingHeader title="Create your profile." description="This is how you will appear in Plane." />
{/* Profile Picture Section */}
<Controller
control={control}
name="avatar_url"
render={({ field: { onChange, value } }) => (
<UserImageUploadModal
isOpen={isImageUploadModalOpen}
onClose={() => setIsImageUploadModalOpen(false)}
handleRemove={async () => handleDelete(getValues("avatar_url"))}
onSuccess={(url) => {
onChange(url);
setIsImageUploadModalOpen(false);
}}
value={value && value.trim() !== "" ? value : null}
/>
)}
/>
<div className="flex items-center gap-4">
<button
className="size-12 rounded-full bg-[#028375] flex items-center justify-center text-white font-semibold text-xl"
type="button"
onClick={() => setIsImageUploadModalOpen(true)}
>
{userAvatar ? (
<img
src={getFileURL(userAvatar ?? "")}
onClick={() => setIsImageUploadModalOpen(true)}
alt={user?.display_name}
className="w-full h-full rounded-full object-cover"
/>
) : (
<>{watch("first_name")[0] ?? "R"}</>
)}
</button>
<input type="file" className="hidden" id="profile-image-input" />
<button
className="flex items-center gap-1.5 text-custom-text-300 hover:text-custom-text-200 text-sm px-2 py-1"
type="button"
onClick={() => setIsImageUploadModalOpen(true)}
>
<ImageIcon className="size-4" />
<span className="text-sm">{userAvatar ? "Change image" : "Upload image"}</span>
</button>
</div>
<div className="flex flex-col gap-6 w-full">
{/* Name Input */}
<div className="flex flex-col gap-2">
<label
className="block text-sm font-medium text-custom-text-300 after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="first_name"
>
Name
</label>
<Controller
control={control}
name="first_name"
rules={{
required: "Name is required",
maxLength: {
value: 24,
message: "Name must be within 24 characters.",
},
}}
render={({ field: { value, onChange, ref } }) => (
<input
ref={ref}
id="first_name"
name="first_name"
type="text"
value={value}
onChange={(e) => onChange(e.target.value)}
autoFocus
className={cn(
"w-full px-3 py-2 text-custom-text-200 border border-custom-border-300 rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-custom-text-400 focus:border-transparent transition-all duration-200",
{
"border-custom-border-300": !errors.first_name,
"border-red-500": errors.first_name,
}
)}
placeholder="Enter your full name"
autoComplete="on"
/>
)}
/>
{errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
</div>
{/* setting up password for the first time */}
{!isPasswordAlreadySetup && (
<SetPasswordRoot
onPasswordChange={(password) => setValue("password", password)}
onConfirmPasswordChange={(confirm_password) => setValue("confirm_password", confirm_password)}
/>
)}
</div>
{/* Continue Button */}
<Button variant="primary" type="submit" className="w-full" size="lg" disabled={isButtonDisabled}>
Continue
</Button>
{/* Marketing Consent */}
<MarketingConsent
isChecked={!!watch("has_marketing_email_consent")}
handleChange={(has_marketing_email_consent) =>
setValue("has_marketing_email_consent", has_marketing_email_consent)
}
/>
</form>
);
});

135
apps/web/core/components/onboarding/steps/profile/set-password.tsx Normal file
View file

@ -0,0 +1,135 @@
"use client"
import React, { useState, useCallback, useMemo } from "react";
import { Lock, ChevronDown } from "lucide-react";
import { PasswordInput, PasswordStrengthIndicator } from "@plane/ui";
import { cn } from "@plane/utils";
interface PasswordState {
password: string;
confirmPassword: string;
}
interface SetPasswordRootProps {
onPasswordChange?: (password: string) => void;
onConfirmPasswordChange?: (confirmPassword: string) => void;
disabled?: boolean;
}
export const SetPasswordRoot: React.FC<SetPasswordRootProps> = ({
onPasswordChange,
onConfirmPasswordChange,
disabled = false,
}) => {
const [isExpanded, setIsExpanded] = useState(false);
const [passwordState, setPasswordState] = useState<PasswordState>({
password: "",
confirmPassword: "",
});
const handleToggleExpand = useCallback(() => {
if (disabled) return;
setIsExpanded((prev) => !prev);
}, [disabled]);
const handlePasswordChange = useCallback(
(field: keyof PasswordState, value: string) => {
setPasswordState((prev) => {
const newState = { ...prev, [field]: value };
// Notify parent component when password changes
if (field === "password" && onPasswordChange) {
onPasswordChange(value);
}
if (field === "confirmPassword" && onConfirmPasswordChange) {
onConfirmPasswordChange(value);
}
return newState;
});
},
[onPasswordChange, onConfirmPasswordChange]
);
const isPasswordValid = useMemo(() => {
const { password, confirmPassword } = passwordState;
return password.length >= 8 && password === confirmPassword;
}, [passwordState]);
const hasPasswordMismatch = useMemo(() => {
const { password, confirmPassword } = passwordState;
return confirmPassword.length > 0 && password !== confirmPassword;
}, [passwordState]);
const chevronIconClasses = useMemo(
() =>
`w-4 h-4 text-custom-text-400 transition-transform duration-300 ease-in-out ${isExpanded ? "rotate-180" : "rotate-0"}`,
[isExpanded]
);
const expandedContentClasses = useMemo(
() =>
`flex flex-col gap-4 transition-all duration-300 ease-in-out overflow-hidden px-3 ${
isExpanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
}`,
[isExpanded]
);
return (
<div
className={`flex flex-col rounded-lg overflow-hidden transition-all duration-300 ease-in-out bg-custom-background-90`}
>
<div
className={cn(
"flex items-center justify-between transition-colors duration-200 px-3 py-2 text-sm",
disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
isExpanded && "pb-1"
)}
onClick={handleToggleExpand}
>
<div className="flex items-center gap-1 text-custom-text-300">
<Lock className="size-3" />
<span className="font-medium">Set a password</span>
<span>{`(Optional)`}</span>
</div>
<div className="flex items-center gap-2 text-custom-text-400">
<ChevronDown className={chevronIconClasses} />
</div>
</div>
<div className={expandedContentClasses}>
{/* Password input */}
<div className="flex flex-col gap-2 transform transition-all duration-300 ease-in-out pt-1">
<PasswordInput
id="password"
value={passwordState.password}
onChange={(value) => handlePasswordChange("password", value)}
placeholder="Set a password"
className="transition-all duration-200"
/>
{passwordState.password.length > 0 && <PasswordStrengthIndicator password={passwordState.password} />}
</div>
<div className="flex flex-col gap-2 pb-2">
{/* Confirm password label */}
<div className="text-custom-text-300 font-medium transform transition-all duration-300 ease-in-out delay-75 text-sm">
Confirm password
</div>
{/* Confirm password input */}
<div className="transform transition-all duration-300 ease-in-out delay-100">
<PasswordInput
id="confirm-password"
value={passwordState.confirmPassword}
onChange={(value) => handlePasswordChange("confirmPassword", value)}
placeholder="Confirm password"
className="transition-all duration-200"
/>
{hasPasswordMismatch && <p className="text-xs text-red-500 mt-1">Passwords do not match</p>}
{isPasswordValid && <p className="text-xs text-green-500 mt-1">✓ Passwords match</p>}
</div>
</div>
</div>
</div>
);
};

1
apps/web/core/components/onboarding/steps/role/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./root";

168
apps/web/core/components/onboarding/steps/role/root.tsx Normal file
View file

@ -0,0 +1,168 @@
"use client";
import { FC } from "react";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
import { Box, Check, PenTool, Rocket, Monitor, RefreshCw, Layers } from "lucide-react";
// plane imports
import { ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS } from "@plane/constants";
import { EOnboardingSteps, TUserProfile } from "@plane/types";
import { Button, TOAST_TYPE, setToast } from "@plane/ui";
// helpers
import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
// hooks
import { useUserProfile } from "@/hooks/store";
// local components
import { CommonOnboardingHeader } from "../common";
import { TProfileSetupFormValues } from "../profile/root";
type Props = {
handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
};
const ROLES = [
{ id: "product-manager", label: "Product Manager", icon: Box },
{ id: "engineering-manager", label: "Engineering Manager", icon: Layers },
{ id: "designer", label: "Designer", icon: PenTool },
{ id: "developer", label: "Developer", icon: Monitor },
{ id: "founder-executive", label: "Founder/Executive", icon: Rocket },
{ id: "operations-manager", label: "Operations Manager", icon: RefreshCw },
{ id: "others", label: "Others", icon: Box },
];
const defaultValues = {
role: "",
};
export const RoleSetupStep: FC<Props> = observer(({ handleStepChange }) => {
// store hooks
const { data: profile, updateUserProfile } = useUserProfile();
// form info
const {
handleSubmit,
control,
formState: { errors, isSubmitting, isValid },
} = useForm<TProfileSetupFormValues>({
defaultValues: {
...defaultValues,
role: profile?.role,
},
mode: "onChange",
});
// handle submit
const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
const profileUpdatePayload: Partial<TUserProfile> = {
role: formData.role,
};
try {
await Promise.all([
updateUserProfile(profileUpdatePayload),
// totalSteps > 2 && stepChange({ profile_complete: true }),
]);
captureSuccess({
eventName: USER_TRACKER_EVENTS.add_details,
payload: {
use_case: formData.use_case,
role: formData.role,
},
});
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success",
message: "Profile setup completed!",
});
} catch {
captureError({
eventName: USER_TRACKER_EVENTS.add_details,
});
setToast({
type: TOAST_TYPE.ERROR,
title: "Error",
message: "Profile setup failed. Please try again!",
});
}
};
const onSubmit = async (formData: TProfileSetupFormValues) => {
if (!profile) return;
captureView({
elementName: ONBOARDING_TRACKER_ELEMENTS.PROFILE_SETUP_FORM,
});
await handleSubmitUserPersonalization(formData).then(() => {
handleStepChange(EOnboardingSteps.ROLE_SETUP);
});
};
const handleSkip = () => {
handleStepChange(EOnboardingSteps.ROLE_SETUP);
};
const isButtonDisabled = !isSubmitting && isValid ? false : true;
return (
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-10">
{/* Header */}
<CommonOnboardingHeader title="What's your role?" description="Let's set up Plane for how you work." />
{/* Role Selection */}
<div className="flex flex-col gap-3">
<p className="text-sm font-medium text-custom-text-400">Select one</p>
<Controller
control={control}
name="role"
rules={{
required: "This field is required",
}}
render={({ field: { value, onChange } }) => (
<div className="flex flex-col gap-3">
{ROLES.map((role) => {
const Icon = role.icon;
const isSelected = value === role.id;
return (
<button
key={role.id}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
onChange(role.id);
}}
className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center justify-between ${
isSelected
? "border-custom-primary-100 bg-custom-primary-10 text-custom-primary-100"
: "border-custom-border-200 hover:border-custom-border-300 text-custom-text-300"
}`}
>
<div className="flex items-center space-x-3">
<Icon className="size-3.5" />
<span className="font-medium">{role.label}</span>
</div>
{isSelected && (
<>
<button
className={`size-4 rounded border-2 flex items-center justify-center bg-blue-500 border-blue-500`}
>
<Check className="w-3 h-3 text-white" />
</button>
</>
)}
</button>
);
})}
</div>
)}
/>
{errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
</div>
{/* Action Buttons */}
<div className="space-y-3">
<Button variant="primary" type="submit" className="w-full" size="lg" disabled={isButtonDisabled}>
Continue
</Button>
<Button variant="link-neutral" onClick={handleSkip} className="w-full" size="lg">
Skip
</Button>
</div>
</form>
);
});

40
apps/web/core/components/onboarding/steps/root.tsx Normal file
View file

@ -0,0 +1,40 @@
"use client";
import { FC, useMemo } from "react";
// plane imports
import { EOnboardingSteps, IWorkspaceMemberInvitation } from "@plane/types";
// local components
import { ProfileSetupStep } from "./profile";
import { RoleSetupStep } from "./role";
import { InviteTeamStep } from "./team";
import { UseCaseSetupStep } from "./usecase";
import { WorkspaceSetupStep } from "./workspace";
type Props = {
currentStep: EOnboardingSteps;
invitations: IWorkspaceMemberInvitation[];
handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
};
export const OnboardingStepRoot: FC<Props> = (props) => {
const { currentStep, invitations, handleStepChange } = props;
// memoized step component mapping
const stepComponents = useMemo(
() => ({
[EOnboardingSteps.PROFILE_SETUP]: <ProfileSetupStep handleStepChange={handleStepChange} />,
[EOnboardingSteps.ROLE_SETUP]: <RoleSetupStep handleStepChange={handleStepChange} />,
[EOnboardingSteps.USE_CASE_SETUP]: <UseCaseSetupStep handleStepChange={handleStepChange} />,
[EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN]: (
<WorkspaceSetupStep invitations={invitations ?? []} handleStepChange={handleStepChange} />
),
[EOnboardingSteps.INVITE_MEMBERS]: <InviteTeamStep handleStepChange={handleStepChange} />,
}),
[handleStepChange, invitations]
);
return (
<div className="flex-1 flex items-center justify-center p-8">
<div className="w-full max-w-[24rem]">{stepComponents[currentStep]} </div>
</div>
);
};

1
apps/web/core/components/onboarding/steps/team/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./root";

414
apps/web/core/components/onboarding/steps/team/root.tsx Normal file
View file

@ -0,0 +1,414 @@
"use client";
import React, { useEffect, useState } from "react";
import { observer } from "mobx-react";
import {
Control,
Controller,
FieldArrayWithId,
UseFieldArrayRemove,
UseFormGetValues,
UseFormSetValue,
UseFormWatch,
useFieldArray,
useForm,
} from "react-hook-form";
// icons
import { usePopper } from "react-popper";
import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
import { Listbox } from "@headlessui/react";
// plane imports
import { ROLE, ROLE_DETAILS, EUserPermissions, MEMBER_TRACKER_EVENTS, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
// types
import { EOnboardingSteps, IWorkspace } from "@plane/types";
// ui
import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
// constants
// helpers
// hooks
import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
import { useUser, useUserProfile, useWorkspace } from "@/hooks/store";
// services
import { WorkspaceService } from "@/plane-web/services";
// components
import { CommonOnboardingHeader } from "../common";
type Props = {
handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
};
type EmailRole = {
email: string;
role: EUserPermissions;
role_active: boolean;
};
type FormValues = {
emails: EmailRole[];
};
type InviteMemberFormProps = {
index: number;
remove: UseFieldArrayRemove;
control: Control<FormValues, any>;
setValue: UseFormSetValue<FormValues>;
getValues: UseFormGetValues<FormValues>;
watch: UseFormWatch<FormValues>;
field: FieldArrayWithId<FormValues, "emails", "id">;
fields: FieldArrayWithId<FormValues, "emails", "id">[];
errors: any;
isInvitationDisabled: boolean;
setIsInvitationDisabled: (value: boolean) => void;
};
// services
const workspaceService = new WorkspaceService();
const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
const placeholderEmails = [
"charlie.taylor@frstflt.com",
"octave.chanute@frstflt.com",
"george.spratt@frstflt.com",
"frank.coffyn@frstflt.com",
"amos.root@frstflt.com",
"edward.deeds@frstflt.com",
"charles.m.manly@frstflt.com",
"glenn.curtiss@frstflt.com",
"thomas.selfridge@frstflt.com",
"albert.zahm@frstflt.com",
];
const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
const {
control,
index,
fields,
remove,
errors,
isInvitationDisabled,
setIsInvitationDisabled,
setValue,
getValues,
watch,
} = props;
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const { t } = useTranslation();
const email = watch(`emails.${index}.email`);
const emailOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.value === "") {
const validEmail = fields.map((_, i) => emailRegex.test(getValues(`emails.${i}.email`))).includes(true);
if (validEmail) {
setIsInvitationDisabled(false);
} else {
setIsInvitationDisabled(true);
}
if (getValues(`emails.${index}.role_active`)) {
setValue(`emails.${index}.role_active`, false);
}
} else {
if (!getValues(`emails.${index}.role_active`)) {
setValue(`emails.${index}.role_active`, true);
}
if (isInvitationDisabled && emailRegex.test(event.target.value)) {
setIsInvitationDisabled(false);
} else if (!isInvitationDisabled && !emailRegex.test(event.target.value)) {
setIsInvitationDisabled(true);
}
}
};
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-end",
modifiers: [
{
name: "preventOverflow",
options: {
padding: 12,
},
},
],
});
return (
<div>
<div className="group relative grid grid-cols-10 gap-4">
<div className="col-span-6">
<Controller
control={control}
name={`emails.${index}.email`}
rules={{
pattern: {
value: emailRegex,
message: "Invalid Email ID",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id={`emails.${index}.email`}
name={`emails.${index}.email`}
type="text"
value={value}
onChange={(event) => {
emailOnChange(event);
onChange(event);
}}
ref={ref}
hasError={Boolean(errors.emails?.[index]?.email)}
placeholder={placeholderEmails[index % placeholderEmails.length]}
className="w-full border-custom-border-300 text-xs placeholder:text-custom-text-400 sm:text-sm"
autoComplete="off"
/>
)}
/>
</div>
<div className="col-span-4 mr-8">
<Controller
control={control}
name={`emails.${index}.role`}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Listbox
as="div"
value={value}
onChange={(val) => {
onChange(val);
setValue(`emails.${index}.role_active`, true);
}}
className="w-full flex-shrink-0 text-left"
>
<Listbox.Button
type="button"
ref={setReferenceElement}
className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-sm border-[0.5px] border-custom-border-300"
>
<span
className={`text-sm ${
!getValues(`emails.${index}.role_active`) ? "text-custom-text-400" : "text-custom-text-100"
} sm:text-sm`}
>
{ROLE[value]}
</span>
<ChevronDown
className={`size-3 ${
!getValues(`emails.${index}.role_active`)
? "stroke-onboarding-text-400"
: "stroke-onboarding-text-100"
}`}
/>
</Listbox.Button>
<Listbox.Options as="div">
<div
className="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-custom-border-300 bg-custom-background-100 shadow-sm focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
{Object.entries(ROLE_DETAILS).map(([key, value]) => (
<Listbox.Option
as="div"
key={key}
value={parseInt(key)}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-onboarding-background-400/40" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<div className="flex items-center text-wrap gap-2 p-1">
<div className="flex flex-col">
<div className="text-sm font-medium">{t(value.i18n_title)}</div>
<div className="flex text-xs text-custom-text-300">{t(value.i18n_description)}</div>
</div>
{selected && <Check className="h-4 w-4 shrink-0" />}
</div>
)}
</Listbox.Option>
))}
</div>
</Listbox.Options>
</Listbox>
)}
/>
</div>
{fields.length > 1 && (
<button
type="button"
className="absolute right-0 hidden place-items-center self-center rounded group-hover:grid"
onClick={() => remove(index)}
>
<XCircle className="h-5 w-5 pl-0.5 text-custom-text-400" />
</button>
)}
</div>
{email && !emailRegex.test(email) && (
<div className="mx-8 my-1">
<span className="text-sm">🤥</span>{" "}
<span className="mt-1 text-xs text-red-500">That doesn{"'"}t look like an email address.</span>
</div>
)}
</div>
);
});
export const InviteTeamStep: React.FC<Props> = observer((props) => {
const { handleStepChange } = props;
const [isInvitationDisabled, setIsInvitationDisabled] = useState(true);
const { workspaces } = useWorkspace();
const workspacesList = Object.values(workspaces ?? {});
const workspace = workspacesList[0];
const {
control,
watch,
getValues,
setValue,
handleSubmit,
formState: { isSubmitting, errors, isValid },
} = useForm<FormValues>();
const { fields, append, remove } = useFieldArray({
control,
name: "emails",
});
const nextStep = async () => {
await handleStepChange(EOnboardingSteps.INVITE_MEMBERS);
};
const onSubmit = async (formData: FormValues) => {
if (!workspace) return;
let payload = { ...formData };
payload = { emails: payload.emails.filter((email) => email.email !== "") };
await workspaceService
.inviteWorkspace(workspace.slug, {
emails: payload.emails.map((email) => ({
email: email.email,
role: email.role,
})),
})
.then(async () => {
captureSuccess({
eventName: MEMBER_TRACKER_EVENTS.invite,
payload: {
workspace: workspace.slug,
},
});
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "Invitations sent successfully.",
});
await nextStep();
})
.catch((err) => {
captureError({
eventName: MEMBER_TRACKER_EVENTS.invite,
payload: {
workspace: workspace.slug,
},
error: err,
});
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: err?.error,
});
});
};
const appendField = () => {
append({ email: "", role: 15, role_active: false });
};
useEffect(() => {
if (fields.length === 0) {
append(
[
{ email: "", role: 15, role_active: false },
{ email: "", role: 15, role_active: false },
{ email: "", role: 15, role_active: false },
],
{
focusIndex: 0,
}
);
}
}, [fields, append]);
return (
<form
className="flex flex-col gap-10"
onSubmit={handleSubmit(onSubmit)}
onKeyDown={(e) => {
if (e.code === "Enter") e.preventDefault();
}}
>
<CommonOnboardingHeader
title="Invite your teammates"
description="Work in plane happens best with your team. Invite them now to use Plane to its potential."
/>
<div className="w-full text-sm py-4">
<div className="group relative grid grid-cols-10 gap-4 mx-8 py-2">
<div className="col-span-6 px-1 text-sm text-custom-text-200 font-medium">Email</div>
<div className="col-span-4 px-1 text-sm text-custom-text-200 font-medium">Role</div>
</div>
<div className="mb-3 space-y-3 sm:space-y-4">
{fields.map((field, index) => (
<InviteMemberInput
watch={watch}
getValues={getValues}
setValue={setValue}
isInvitationDisabled={isInvitationDisabled}
setIsInvitationDisabled={(value: boolean) => setIsInvitationDisabled(value)}
control={control}
errors={errors}
field={field}
fields={fields}
index={index}
remove={remove}
key={field.id}
/>
))}
</div>
<button
type="button"
className="flex items-center mx-8 gap-1.5 bg-transparent text-sm font-medium text-custom-primary-100 outline-custom-primary-100"
onClick={appendField}
>
<Plus className="h-4 w-4" strokeWidth={2} />
Add another
</button>
</div>
<div className="flex flex-col mx-auto px-8 sm:px-2 items-center justify-center gap-4 w-full">
<Button
variant="primary"
type="submit"
size="lg"
className="w-full"
disabled={isInvitationDisabled || !isValid || isSubmitting}
data-ph-element={MEMBER_TRACKER_ELEMENTS.ONBOARDING_INVITE_MEMBER}
>
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
</Button>
<Button variant="link-neutral" size="lg" className="w-full" onClick={nextStep}>
I’ll do it later
</Button>
</div>
</form>
);
});

1
apps/web/core/components/onboarding/steps/usecase/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./root";

164
apps/web/core/components/onboarding/steps/usecase/root.tsx Normal file
View file

@ -0,0 +1,164 @@
"use client";
import {FC} from "react";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
import { Check } from "lucide-react";
// plane imports
import { ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS, USE_CASES } from "@plane/constants";
import { EOnboardingSteps, TUserProfile } from "@plane/types";
import { Button, TOAST_TYPE, setToast } from "@plane/ui";
import { cn } from "@plane/utils";
// helpers
import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
// hooks
import { useUserProfile } from "@/hooks/store";
// local imports
import { CommonOnboardingHeader } from "../common";
import { TProfileSetupFormValues } from "../profile/root";
type Props = {
handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
};
const defaultValues = {
use_case: "",
};
export const UseCaseSetupStep: FC<Props> = observer(({ handleStepChange }) => {
// store hooks
const { data: profile, updateUserProfile } = useUserProfile();
// form info
const {
handleSubmit,
control,
formState: { errors, isSubmitting, isValid },
} = useForm<TProfileSetupFormValues>({
defaultValues: {
...defaultValues,
use_case: profile?.use_case,
},
mode: "onChange",
});
// handle submit
const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
const profileUpdatePayload: Partial<TUserProfile> = {
use_case: formData.use_case,
};
try {
await Promise.all([
updateUserProfile(profileUpdatePayload),
// totalSteps > 2 && stepChange({ profile_complete: true }),
]);
captureSuccess({
eventName: USER_TRACKER_EVENTS.add_details,
payload: {
use_case: formData.use_case,
},
});
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success",
message: "Profile setup completed!",
});
} catch {
captureError({
eventName: USER_TRACKER_EVENTS.add_details,
});
setToast({
type: TOAST_TYPE.ERROR,
title: "Error",
message: "Profile setup failed. Please try again!",
});
}
};
// on submit
const onSubmit = async (formData: TProfileSetupFormValues) => {
if (!profile) return;
captureView({
elementName: ONBOARDING_TRACKER_ELEMENTS.PROFILE_SETUP_FORM,
});
await handleSubmitUserPersonalization(formData).then(() => {
handleStepChange(EOnboardingSteps.USE_CASE_SETUP);
});
};
// handle skip
const handleSkip = () => {
handleStepChange(EOnboardingSteps.USE_CASE_SETUP);
};
// derived values
const isButtonDisabled = !isSubmitting && isValid ? false : true;
return (
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-10">
{/* Header */}
<CommonOnboardingHeader title="What brings you to Plane?" description="Tell us your goals and team size." />
{/* Use Case Selection */}
<div className="flex flex-col gap-3">
<p className="text-sm font-medium text-custom-text-400">Select any</p>
<Controller
control={control}
name="use_case"
rules={{
required: "This field is required",
}}
render={({ field: { value, onChange } }) => (
<div className="flex flex-col gap-3">
{USE_CASES.map((useCase) => {
const isSelected = value === useCase;
return (
<button
key={useCase}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onChange(useCase);
}}
className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center gap-2 ${
isSelected
? "border-custom-primary-100 bg-custom-primary-10 text-custom-primary-100"
: "border-custom-border-200 hover:border-custom-border-300 text-custom-text-300"
}`}
>
<span
className={cn(`size-4 rounded border-2 flex items-center justify-center`, {
"bg-custom-primary-100 border-custom-primary-100": isSelected,
"border-custom-border-300": !isSelected,
})}
>
<Check
className={cn("w-3 h-3 text-white", {
"opacity-100": isSelected,
"opacity-0": !isSelected,
})}
/>
</span>
<span className="font-medium">{useCase}</span>
</button>
);
})}
</div>
)}
/>
{errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
</div>
{/* Action Buttons */}
<div className="space-y-3">
<Button variant="primary" type="submit" className="w-full" size="lg" disabled={isButtonDisabled}>
Continue
</Button>
<Button variant="link-neutral" onClick={handleSkip} className="w-full" size="lg">
Skip
</Button>
</div>
</form>
);
});

315
apps/web/core/components/onboarding/steps/workspace/create.tsx Normal file
View file

@ -0,0 +1,315 @@
"use client";
import React, { useState } from "react";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
import { CircleCheck } from "lucide-react";
// plane imports
import {
ORGANIZATION_SIZE,
RESTRICTED_URLS,
WORKSPACE_TRACKER_ELEMENTS,
WORKSPACE_TRACKER_EVENTS,
} from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { IUser, IWorkspace } from "@plane/types";
import { Button, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
import { cn } from "@plane/utils";
// helpers
import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
// hooks
import { useUserProfile, useUserSettings, useWorkspace } from "@/hooks/store";
// plane-web imports
import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
import { WorkspaceService } from "@/plane-web/services";
// local components
import { CommonOnboardingHeader } from "../common";
type Props = {
user: IUser | undefined;
onComplete: (skipInvites?: boolean) => void;
handleCurrentViewChange: () => void;
hasInvitations?: boolean;
};
const workspaceService = new WorkspaceService();
export const WorkspaceCreateStep: React.FC<Props> = observer(
({ user, onComplete, handleCurrentViewChange, hasInvitations = false }) => {
// states
const [slugError, setSlugError] = useState(false);
const [invalidSlug, setInvalidSlug] = useState(false);
// plane hooks
const { t } = useTranslation();
// store hooks
const { updateUserProfile } = useUserProfile();
const { fetchCurrentUserSettings } = useUserSettings();
const { createWorkspace, fetchWorkspaces } = useWorkspace();
const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
// form info
const {
handleSubmit,
control,
setValue,
formState: { errors, isSubmitting, isValid },
} = useForm<IWorkspace>({
defaultValues: {
name: "",
slug: "",
organization_size: "",
},
mode: "onChange",
});
const handleCreateWorkspace = async (formData: IWorkspace) => {
if (isSubmitting) return;
await workspaceService
.workspaceSlugCheck(formData.slug)
.then(async (res) => {
if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
setSlugError(false);
await createWorkspace(formData)
.then(async (workspaceResponse) => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: t("workspace_creation.toast.success.title"),
message: t("workspace_creation.toast.success.message"),
});
captureSuccess({
eventName: WORKSPACE_TRACKER_EVENTS.create,
payload: { slug: formData.slug },
});
await fetchWorkspaces();
await completeStep(workspaceResponse.id);
onComplete(formData.organization_size === "Just myself");
})
.catch(() => {
captureError({
eventName: WORKSPACE_TRACKER_EVENTS.create,
payload: { slug: formData.slug },
error: new Error("Error creating workspace"),
});
setToast({
type: TOAST_TYPE.ERROR,
title: t("workspace_creation.toast.error.title"),
message: t("workspace_creation.toast.error.message"),
});
});
} else setSlugError(true);
})
.catch(() =>
setToast({
type: TOAST_TYPE.ERROR,
title: t("workspace_creation.toast.error.title"),
message: t("workspace_creation.toast.error.message"),
})
);
};
const completeStep = async (workspaceId: string) => {
if (!user) return;
await updateUserProfile({
last_workspace_id: workspaceId,
});
await fetchCurrentUserSettings();
};
const isButtonDisabled = !isValid || invalidSlug || isSubmitting;
if (!isWorkspaceCreationEnabled) {
return (
<div className="flex flex-col gap-10">
<span className="text-center text-base text-custom-text-300">
You don&apos;t seem to have any invites to a workspace and your instance admin has restricted creation of
new workspaces. Please ask a workspace owner or admin to invite you to a workspace first and come back to
this screen to join.
</span>
</div>
);
}
return (
<form className="flex flex-col gap-10" onSubmit={handleSubmit(handleCreateWorkspace)}>
<CommonOnboardingHeader title="Create your workspace" description="All your work — unified." />
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-2">
<label
className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="name"
>
{t("workspace_creation.form.name.label")}
</label>
<Controller
control={control}
name="name"
rules={{
required: t("common.errors.required"),
validate: (value) =>
/^[\w\s-]*$/.test(value) || t("workspace_creation.errors.validation.name_alphanumeric"),
maxLength: {
value: 80,
message: t("workspace_creation.errors.validation.name_length"),
},
}}
render={({ field: { value, ref, onChange } }) => (
<div className="relative flex items-center rounded-md">
<input
id="name"
name="name"
type="text"
value={value}
onChange={(event) => {
onChange(event.target.value);
setValue("name", event.target.value);
setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
shouldValidate: true,
});
}}
placeholder="Enter workspace name"
ref={ref}
className={cn(
"w-full px-3 py-2 text-custom-text-200 border border-custom-border-300 rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-custom-text-400 focus:border-transparent transition-all duration-200",
{
"border-custom-border-300": !errors.name,
"border-red-500": errors.name,
}
)}
autoFocus
/>
</div>
)}
/>
{errors.name && <span className="text-sm text-red-500">{errors.name.message}</span>}
</div>
<div className="flex flex-col gap-2">
<label
className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="slug"
>
{t("workspace_creation.form.url.label")}
</label>
<Controller
control={control}
name="slug"
rules={{
required: t("common.errors.required"),
maxLength: {
value: 48,
message: t("workspace_creation.errors.validation.url_length"),
},
}}
render={({ field: { value, ref, onChange } }) => (
<div
className={cn(
"flex items-center w-full px-3 py-2 text-custom-text-200 border border-custom-border-300 rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 focus:border-transparent transition-all duration-200",
{
"border-custom-border-300": !errors.name,
"border-red-500": errors.name,
}
)}
>
<span className={cn("pr-0 text-custom-text-200 rounded-md whitespace-nowrap")}>
{window && window.location.host}/
</span>
<input
id="slug"
name="slug"
type="text"
value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
onChange={(e) => {
if (/^[a-zA-Z0-9_-]+$/.test(e.target.value)) setInvalidSlug(false);
else setInvalidSlug(true);
onChange(e.target.value.toLowerCase());
}}
ref={ref}
placeholder={t("workspace_creation.form.url.placeholder")}
className={cn(
"w-full px-3 py-0 pl-0 text-custom-text-200 border-none ring-none outline-none rounded-md bg-custom-background-100 placeholder:text-custom-text-400"
)}
/>
</div>
)}
/>
<p className="text-sm text-custom-text-300">{t("workspace_creation.form.url.edit_slug")}</p>
{slugError && (
<p className="-mt-3 text-sm text-red-500">
{t("workspace_creation.errors.validation.url_already_taken")}
</p>
)}
{invalidSlug && (
<p className="text-sm text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
)}
{errors.slug && <span className="text-sm text-red-500">{errors.slug.message}</span>}
</div>
<div className="flex flex-col gap-2">
<label
className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
htmlFor="organization_size"
>
{t("workspace_creation.form.organization_size.label")}
</label>
<div className="w-full">
<Controller
name="organization_size"
control={control}
rules={{ required: t("common.errors.required") }}
render={({ field: { value, onChange } }) => (
<div className="flex flex-wrap gap-3">
{ORGANIZATION_SIZE.map((size) => {
const isSelected = value === size;
return (
<button
key={size}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onChange(size);
}}
className={`text-sm px-3 py-2 rounded-lg border transition-all duration-200 flex gap-1 items-center justify-between ${
isSelected
? "border-custom-border-200 bg-custom-background-80 text-custom-text-200"
: "border-custom-border-200 hover:border-custom-border-300 text-custom-text-300"
}`}
>
<CircleCheck
className={cn("size-4 text-custom-text-400", isSelected && "text-custom-text-200")}
/>
<span className="font-medium">{size}</span>
</button>
);
})}
</div>
)}
/>
{errors.organization_size && (
<span className="text-sm text-red-500">{errors.organization_size.message}</span>
)}
</div>
</div>
</div>
<div className="flex flex-col gap-4">
<Button
data-ph-element={WORKSPACE_TRACKER_ELEMENTS.ONBOARDING_CREATE_WORKSPACE_BUTTON}
variant="primary"
type="submit"
size="lg"
className="w-full"
disabled={isButtonDisabled}
>
{isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
</Button>
{hasInvitations && (
<Button variant="link-neutral" size="lg" className="w-full" onClick={handleCurrentViewChange}>
Join existing workspace
</Button>
)}
</div>
</form>
);
}
);

3
apps/web/core/components/onboarding/steps/workspace/index.ts Normal file
View file

@ -0,0 +1,3 @@
export * from "./create";
export * from "./join-invites";
export * from "./root";

135
apps/web/core/components/onboarding/steps/workspace/join-invites.tsx Normal file
View file

@ -0,0 +1,135 @@
"use client";
import React, { useState } from "react";
// plane imports
import { MEMBER_TRACKER_ELEMENTS, MEMBER_TRACKER_EVENTS, ROLE } from "@plane/constants";
import { IWorkspaceMemberInvitation } from "@plane/types";
import { Button, Checkbox, Spinner } from "@plane/ui";
import { truncateText } from "@plane/utils";
// constants
import { WorkspaceLogo } from "@/components/workspace/logo";
// helpers
import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
// hooks
import { useUserSettings, useWorkspace } from "@/hooks/store";
// services
import { WorkspaceService } from "@/plane-web/services";
// local components
import { CommonOnboardingHeader } from "../common";
type Props = {
invitations: IWorkspaceMemberInvitation[];
handleNextStep: () => Promise<void>;
handleCurrentViewChange: () => void;
};
const workspaceService = new WorkspaceService();
export const WorkspaceJoinInvitesStep: React.FC<Props> = (props) => {
const { invitations, handleNextStep, handleCurrentViewChange } = props;
// states
const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
// store hooks
const { fetchWorkspaces } = useWorkspace();
const { fetchCurrentUserSettings } = useUserSettings();
// handle invitation
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));
}
};
// submit invitations
const submitInvitations = async () => {
const invitation = invitations?.find((invitation) => invitation.id === invitationsRespond[0]);
if (invitationsRespond.length <= 0 && !invitation?.role) return;
setIsJoiningWorkspaces(true);
try {
await workspaceService.joinWorkspaces({ invitations: invitationsRespond });
captureSuccess({
eventName: MEMBER_TRACKER_EVENTS.accept,
payload: {
member_id: invitation?.id,
},
});
await fetchWorkspaces();
await fetchCurrentUserSettings();
await handleNextStep();
} catch (error: any) {
console.error(error);
captureError({
eventName: MEMBER_TRACKER_EVENTS.accept,
payload: {
member_id: invitation?.id,
},
error: error,
});
setIsJoiningWorkspaces(false);
}
};
return invitations && invitations.length > 0 ? (
<div className="flex flex-col gap-10">
<CommonOnboardingHeader title="Join invites or create a workspace" description="All your work — unified." />
<div className="flex flex-col gap-3">
{invitations &&
invitations.length > 0 &&
invitations.map((invitation) => {
const isSelected = invitationsRespond.includes(invitation.id);
const invitedWorkspace = invitation.workspace;
return (
<div
key={invitation.id}
className={`flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 border-custom-border-200 hover:bg-custom-background-90`}
onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
>
<div className="flex-shrink-0">
<WorkspaceLogo
logo={invitedWorkspace?.logo_url}
name={invitedWorkspace?.name}
classNames="size-8 flex-shrink-0 rounded-lg"
/>
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
<p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
</div>
<span className={`flex-shrink-0`}>
<Checkbox checked={isSelected} />
</span>
</div>
);
})}
</div>
<div className="flex flex-col gap-4">
<Button
variant="primary"
size="lg"
className="w-full"
onClick={submitInvitations}
disabled={isJoiningWorkspaces || !invitationsRespond.length}
data-ph-element={MEMBER_TRACKER_ELEMENTS.ONBOARDING_JOIN_WORKSPACE}
>
{isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue"}
</Button>
<Button
variant="link-neutral"
size="lg"
className="w-full"
onClick={handleCurrentViewChange}
disabled={isJoiningWorkspaces}
>
Create new workspace
</Button>
</div>
</div>
) : (
<div>No Invitations found</div>
);
};

51
apps/web/core/components/onboarding/steps/workspace/root.tsx Normal file
View file

@ -0,0 +1,51 @@
"use client";
import React, { useEffect, useState } from "react";
import { observer } from "mobx-react";
// plane imports
import { ECreateOrJoinWorkspaceViews, EOnboardingSteps, IWorkspaceMemberInvitation } from "@plane/types";
// hooks
import { useUser } from "@/hooks/store";
// local components
import { WorkspaceCreateStep, WorkspaceJoinInvitesStep } from "./";
type Props = {
invitations: IWorkspaceMemberInvitation[];
handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
};
export const WorkspaceSetupStep: React.FC<Props> = observer(({ invitations, handleStepChange }) => {
// states
const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
// store hooks
const { data: user } = useUser();
useEffect(() => {
if (invitations.length > 0) {
setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN);
} else {
setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE);
}
}, [invitations]);
return (
<>
{currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN ? (
<WorkspaceJoinInvitesStep
invitations={invitations}
handleNextStep={async () => {
handleStepChange(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN, true);
}}
handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE)}
/>
) : (
<WorkspaceCreateStep
user={user}
onComplete={(skipInvites) => handleStepChange(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN, skipInvites)}
handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN)}
hasInvitations={invitations.length > 0}
/>
)}
</>
);
});

88
apps/web/core/components/onboarding/switch-account-dropdown.tsx
View file

@ -2,10 +2,8 @@
import { FC, useState } from "react";
import { observer } from "mobx-react";
import { ChevronDown } from "lucide-react";
import { Menu, Transition } from "@headlessui/react";
// ui
import { Avatar } from "@plane/ui";
import { cn, getFileURL } from "@plane/utils";
// helpers
// hooks
@ -30,50 +28,50 @@ export const SwitchAccountDropdown: FC<TSwitchAccountDropdownProps> = observer((
? fullName
: user?.email;
if (!displayName && !fullName) return null;
return (
<div className="flex w-full shrink-0 justify-end">
<>
<SwitchAccountModal isOpen={showSwitchAccountModal} onClose={() => setShowSwitchAccountModal(false)} />
<div className="flex items-center gap-x-2 pr-4 z-10">
{user?.avatar_url && (
<Avatar
name={displayName}
src={getFileURL(user?.avatar_url)}
size={24}
shape="square"
fallbackBackgroundColor="#FCBE1D"
className="!text-base capitalize"
/>
)}
<Menu as="div" className="relative">
<Menu.Button className="flex items-center gap-x-1 z-10">
<span className="text-sm font-medium text-custom-text-200">{displayName}</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 z-10 right-0 rounded-md border-[0.5px] border-custom-border-300 mt-2 bg-custom-background-100 px-2 py-2.5 text-sm min-w-[12rem] shadow-custom-shadow-rg">
<Menu.Item
as="button"
type="button"
className={({ active }) =>
cn("text-red-500 px-1 py-1.5 whitespace-nowrap text-left rounded w-full", {
"bg-custom-background-80": active,
})
}
onClick={() => setShowSwitchAccountModal(true)}
>
Wrong e-mail address?
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
<Menu as="div" className="relative">
<Menu.Button className="flex items-center gap-x-2.5 px-2 py-1.5 rounded-lg bg-custom-background-90 z-10">
<div className="size-6 rounded-full bg-green-700 flex items-center justify-center text-white font-semibold text-sm capitalize">
{user?.avatar_url ? (
<img
src={getFileURL(user?.avatar_url)}
alt={user?.display_name}
className="w-full h-full rounded-full object-cover"
/>
) : (
<>{fullName?.[0] ?? "R"}</>
)}
</div>
<span className="text-sm font-medium text-custom-text-200">{displayName}</span>
</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 z-10 right-0 rounded-md border-[0.5px] border-custom-border-300 mt-2 bg-custom-background-100 px-2 py-2.5 text-sm min-w-[12rem] shadow-custom-shadow-rg">
<Menu.Item
as="button"
type="button"
className={({ active }) =>
cn("text-red-500 px-1 py-1.5 whitespace-nowrap text-left rounded w-full", {
"bg-custom-background-80": active,
})
}
onClick={() => setShowSwitchAccountModal(true)}
>
Wrong e-mail address?
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
</>
);
});

4
apps/web/core/components/onboarding/switch-account-modal.tsx
View file

@ -86,11 +86,11 @@ export const SwitchAccountModal: React.FC<Props> = (props) => {
</div>
</div>
<div className="flex flex-col py-3 gap-y-6">
<Dialog.Title as="h3" className="text-2xl font-medium leading-6 text-onboarding-text-100">
<Dialog.Title as="h3" className="text-2xl font-medium leading-6 text-custom-text-100">
Switch account
</Dialog.Title>
{userData?.email && (
<div className="text-base font-normal text-onboarding-text-200">
<div className="text-base font-normal text-custom-text-200">
If you have signed up via <span className="text-custom-primary-100">{userData.email}</span>{" "}
un-intentionally, you can switch your account to a different one from here.
</div>

5
apps/web/core/components/onboarding/tour/root.tsx
View file

@ -6,7 +6,7 @@ import Image, { StaticImageData } from "next/image";
import { X } from "lucide-react";
// ui
import { PRODUCT_TOUR_TRACKER_ELEMENTS } from "@plane/constants";
import { Button } from "@plane/ui";
import { Button, PlaneLockup } from "@plane/ui";
// components
import { TourSidebar } from "@/components/onboarding";
// constants
@ -19,7 +19,6 @@ import IssuesTour from "@/public/onboarding/issues.webp";
import ModulesTour from "@/public/onboarding/modules.webp";
import PagesTour from "@/public/onboarding/pages.webp";
import ViewsTour from "@/public/onboarding/views.webp";
import PlaneWhiteLogo from "@/public/plane-logos/white-horizontal.svg";
// constants
@ -97,7 +96,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
<div className="h-3/4 w-4/5 overflow-hidden rounded-[10px] bg-custom-background-100 md:w-1/2 lg:w-2/5">
<div className="h-full overflow-hidden">
<div className="grid h-3/5 place-items-center bg-custom-primary-100">
<Image src={PlaneWhiteLogo} alt="Plane White Logo" />
<PlaneLockup className="h-10 w-auto text-custom-text-100" />
</div>
<div className="flex h-2/5 flex-col overflow-y-auto p-6">
<h3 className="font-semibold sm:text-xl">

10
apps/web/core/components/pages/pages-list-main-content.tsx
View file

@ -12,9 +12,6 @@ import { useCommandPalette, useUserPermissions } from "@/hooks/store";
import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
// plane web hooks
import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
// assets
import AllFiltersImage from "@/public/empty-state/pages/all-filters.svg";
import NameFilterImage from "@/public/empty-state/pages/name-filter.svg";
type Props = {
children: React.ReactNode;
@ -50,6 +47,11 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
const archivedPageResolvedPath = useResolvedAssetPath({
basePath: "/empty-state/pages/archived",
});
const resolvedFiltersImage = useResolvedAssetPath({ basePath: "/empty-state/pages/all-filters", extension: "svg" });
const resolvedNameFilterImage = useResolvedAssetPath({
basePath: "/empty-state/pages/name-filter",
extension: "svg",
});
if (loader === "init-loader") return <PageLoader />;
// if no pages exist in the active page type
@ -118,7 +120,7 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
<div className="h-full w-full grid place-items-center">
<div className="text-center">
<Image
src={filters.searchQuery.length > 0 ? NameFilterImage : AllFiltersImage}
src={filters.searchQuery.length > 0 ? resolvedNameFilterImage : resolvedFiltersImage}
className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
alt="No matching modules"
/>

13
apps/web/core/components/project/card-list.tsx
View file

@ -12,9 +12,6 @@ import { captureClick } from "@/helpers/event-tracker.helper";
// hooks
import { useCommandPalette, useProject, useProjectFilter, useUserPermissions } from "@/hooks/store";
import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
// assets
import AllFiltersImage from "@/public/empty-state/project/all-filters.svg";
import NameFilterImage from "@/public/empty-state/project/name-filter.svg";
type TProjectCardListProps = {
totalProjectIds?: string[];
@ -39,6 +36,14 @@ export const ProjectCardList = observer((props: TProjectCardListProps) => {
// helper hooks
const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/projects" });
const resolvedFiltersImage = useResolvedAssetPath({
basePath: "/empty-state/project/all-filters",
extension: "svg",
});
const resolvedNameFilterImage = useResolvedAssetPath({
basePath: "/empty-state/project/name-filter",
extension: "svg",
});
// derived values
const workspaceProjectIds = totalProjectIdsProps ?? storeWorkspaceProjectIds;
@ -79,7 +84,7 @@ export const ProjectCardList = observer((props: TProjectCardListProps) => {
<div className="grid h-full w-full place-items-center">
<div className="text-center">
<Image
src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
src={searchQuery.trim() === "" ? resolvedFiltersImage : resolvedNameFilterImage}
className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
alt="No matching projects"
/>

2
apps/web/core/components/workspace/logo.tsx
View file

@ -17,7 +17,7 @@ export const WorkspaceLogo = observer((props: Props) => {
<div
className={cn(
`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
!props.logo && "rounded bg-custom-primary-500 text-white"
!props.logo && "rounded bg-[#026292] text-white"
} ${props.classNames ? props.classNames : ""}`
)}
>

2
apps/web/core/components/workspace/settings/workspace-details.tsx
View file

@ -167,7 +167,7 @@ export const WorkspaceDetails: FC = observer(() => {
/>
</div>
) : (
<div className="relative flex h-14 w-14 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
<div className="relative flex h-14 w-14 items-center justify-center rounded bg-[#026292] p-4 uppercase text-white">
{currentWorkspace?.name?.charAt(0) ?? "N"}
</div>
)}

2
apps/web/core/components/workspace/sidebar/dropdown-item.tsx
View file

@ -49,7 +49,7 @@ const SidebarDropdownItem = observer((props: TProps) => {
<div className="flex items-center justify-start gap-2.5 w-[80%] relative">
<span
className={`relative flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 text-base uppercase font-medium border-custom-border-200 ${
!workspace?.logo_url && "rounded-md bg-custom-primary-500 text-white"
!workspace?.logo_url && "rounded-md bg-[#026292] text-white"
}`}
>
{workspace?.logo_url && workspace.logo_url !== "" ? (

2
apps/web/core/components/workspace/sidebar/user-menu-root.tsx
View file

@ -103,7 +103,7 @@ export const UserMenuRoot = observer((props: Props) => {
{...attributes.popper}
>
<div className="flex flex-col gap-2.5 pb-2">
<span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
<span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
<Link href={`/${workspaceSlug}/settings/account`}>
<Menu.Item as="div">
<span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">

4
apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
View file

@ -11,7 +11,7 @@ import useSWRImmutable from "swr/immutable";
// ui
import { LogOut } from "lucide-react";
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { Button, getButtonStyling, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
import { Button, getButtonStyling, PlaneLogo, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
// components
import { cn } from "@plane/utils";
import { LogoSpinner } from "@/components/common";
@ -150,7 +150,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
<div className="container relative mx-auto flex h-full w-full flex-col overflow-hidden overflow-y-auto px-5 py-14 md:px-0">
<div className="relative flex flex-shrink-0 items-center justify-between gap-4">
<div className="z-10 flex-shrink-0 bg-custom-background-90 py-4">
<Image src={planeLogo} height={26} className="h-[26px]" alt="Plane logo" />
<PlaneLogo className="h-9 w-auto text-custom-text-100" />
</div>
<div className="relative flex items-center gap-2">
<div className="text-sm font-medium">{currentUser?.email}</div>

2
apps/web/core/lib/n-progress/AppProgressBar.tsx
View file

@ -10,7 +10,7 @@ type PushStateInput = [data: any, unused: string, url?: string | URL | null | un
export const AppProgressBar = React.memo(
({
color = "#0A2FFF",
color = "rgb(var(--color-primary-100))",
height = "2px",
options,
shallowRouting = false,

1
apps/web/core/store/user/profile.store.ts
View file

@ -56,6 +56,7 @@ export class ProfileStore implements IUserProfileStore {
billing_address_country: undefined,
billing_address: undefined,
has_billing_address: false,
has_marketing_email_consent: false,
created_at: "",
updated_at: "",
language: "",

BIN
apps/web/public/empty-state/all-issues/all-issues-dark.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Before After
Before After

BIN
apps/web/public/empty-state/all-issues/all-issues-light.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 69 KiB

Before After
Before After

BIN
apps/web/public/empty-state/all-issues/assigned-dark.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Before After
Before After

BIN
apps/web/public/empty-state/all-issues/assigned-light.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Before After
Before After

BIN
apps/web/public/empty-state/all-issues/created-dark.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Before After
Before After

BIN
apps/web/public/empty-state/all-issues/created-light.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Before After
Before After

BIN
apps/web/public/empty-state/all-issues/custom-view-dark.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Before After
Before After

BIN
apps/web/public/empty-state/all-issues/custom-view-light.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 64 KiB

Before After
Before After

BIN
apps/web/public/empty-state/all-issues/no-project-dark.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Before After
Before After

BIN
apps/web/public/empty-state/all-issues/no-project-light.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 64 KiB

Before After
Before After

BIN
apps/web/public/empty-state/all-issues/subscribed-dark.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Before After
Before After

BIN
apps/web/public/empty-state/all-issues/subscribed-light.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Before After
Before After

BIN
apps/web/public/empty-state/archived/empty-issues-dark.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Before After
Before After

BIN
apps/web/public/empty-state/archived/empty-issues-light.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 78 KiB

Before After
Before After

BIN
apps/web/public/empty-state/cycle-issues/calendar-dark-resp.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Before After
Before After

BIN
apps/web/public/empty-state/cycle-issues/calendar-dark.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

Before After
Before After

BIN
apps/web/public/empty-state/cycle-issues/calendar-light-resp.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Before After
Before After

BIN
apps/web/public/empty-state/cycle-issues/calendar-light.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Before After
Before After

BIN
apps/web/public/empty-state/cycle-issues/gantt_chart-dark-resp.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Before After
Before After

BIN
apps/web/public/empty-state/cycle-issues/gantt_chart-dark.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Before After
Before After

BIN
apps/web/public/empty-state/cycle-issues/gantt_chart-light-resp.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Before After
Before After

Some files were not shown because too many files have changed in this diff Show more