mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
59335618b4
* feat: session authentication and god-mode implementation (#4302) * dev: move authentication to base class for credentials * chore: new account creation * dev: return error as query parameter * dev: accounts and profile endpoints for user * fix: user store updates * fix: store fixes * fix: type fixes * dev: set is_password_autoset and is_email_verifier for auth providers * dev: move all auth configuration to different apps * dev: fix circular imports * dev: remove unused imports * dev: fix imports for authentication * dev: update endpoints to use rest framework api viewa * fix: onboarding fixes * dev: session model changes * fix: session model and add check for last name first name and avatar * dev: fix referer redirect * dev: remove auth imports * dev: fix imports * dev: update migrations * fix: instance admin login * comflict: conflicts resolved * dev: fix import errors and email check endpoint * fix: error messages and redirects after login * dev: configs api * fix: is github enabled boolean * dev: merge config and instance api * conflict: merge conflict resolved * dev: instance admin sign up endpoint * dev: enable magic link login * dev: configure instance variables for github and google enabled * chore: typo fixes * fix: god mode docker file changes * build-error: resolved build errors * fix: docker compose changes * dev: add email credential check endpoint * fix: minor package changes * fix: docker related changes * dev: add nginx rules in the nginx template * dev: refactor the url patterns * fix: docker changes * fix: docker files for god-mode * fix: static export * fix: nginx conf * dev: smtp sender refused exception * fix: godmode fixes * chore: god mode revamp. * dev: add csrf secured flag * fix: oauth redirect uri and session settings * chore: god mode app changes. (#3982) * chore: send test email functionality. * style: authentication methods page UI revamp. * chore: create workspace popup. * fix: user me endpoint * dev: fix redirection after authentication * dev: handle god mode redirection * fix: redirections * fix: auth related hooks * fix: store related fixes * dev: fix session authentication for rest apis * fix: linting errors * fix: removing references of useStore= * dev: fix redirection and password validation * dev: add useUser hook * fix: build fixes and lint issues * fix: removing useApplication hook * fix: build errors * fix: delete unused files * fix: auth build fixes * fix: bugfixes * dev: alter avatar to support more than 255 chars * dev: fix profile endpoint and increase session expiry time and update session on every request * chore: resolved the migration * chore: resolved merge conflicts * dev: error codes and error messages for the auth flow * dev: instance admin sign up and sign in endpoint * dev: use zxcvbn to validate password strength * dev: add extra parameters when error handling on instance god mode * chore: auth init * chore: signin/ signup form ui updates and password strength meter. * chore: update password fields. * chore: validations and error handling. * chore: updated sign-up form * chore: updated workflow and updated the code structure * chore: instance empty state for god-mode. * chore: instance and auth wrappers update * fix: renaming godmode * fix: docker changes * chore: updated authentication wrappers * chore: updated the authentication workflow and rendered all pages * fix: build errors * fix: docker related fixes * fix: tailing slash added to space and admin for valid nginx locations * chore: seperate pages for signup and login * git-action modified for admin file changes * feature build action updated for admin app * self host modified * chore: resolved build errors and handled signin and signup in a seperate route * chore: sign-in and sign-up revamp. * fix: migration conflicts * dev: migrations * chore: handled redirection * dev: admin url * dev: create seperate endpoint for instance admin me * dev: instance admin endpoint * git action fixed * chore: handled auth wrappers * dev: add serializer and remove print logs * fix: build errors * dev: fix migrations * dev: instance folder structuring * fix: linting errors * chore: resolved build errors * chore: updated store and auth workflow and updates api service types * chore: Replaced Next Link with Anchoer tag for god-mode redirection * add 3333 port to allowed origins * make password login working again * dev: fix redirection, add admin signout endpoint and fix email credential check endpoint * fix unique code sign in * fix small build error * enable sign out * dev: add google client secret variable to configure instance * dev: add referer for redirection * fix origin urls for oauths * admin setup and login separation * dev: fix user redirection and tour completed endpoint * fix build errors * dev: add set password endpoint * dev: remove user creation logic for redirection * fix unique code page * fix forgot password * chore: onboarding revamp. * dev: fix workspace slug redirection in login * chore: invited user onboarding flow update. * chore: fix switch or delete account modal. * fix members exception * refactor auth flows and add invitations to auth flow * fix sig in sign up url * fix action url * fix build errors * dev: fix user set password when logging in * dev: reset password endpoint * chore: confirm password validation for signup and onboarding. * enable reset password * fix build error * chore: minor UI updates. * chore: forgot and reset password UI revamp. * fix authentication re directions * dev: auth redirections * change url paths for signup and signin * dev: make the user logged in when changing passwords * dev: next path redirection for web and space app * dev: next path for magic sign in endpoint * dev: github space endpoint * chore: minor ui updates and fixes in web app. * set password screen * fix multiple unique code generation * dev: next path base redirection * dev: remove print logs * dev: auth space endpoints * fix build errors * dev: invalidate cache on configuration update, god mode exception errors and authentication failed code * dev: fix space endpoints and add extra endpoints * chore: space auth revamp. * dev: add sign up for space app * fix: build errors. * fix: auth redirection logic. * chore: space app onboarding revamp. --------- Co-authored-by: pablohashescobar <nikhilschacko@gmail.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: gurusainath <gurusainath007@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: Manish Gupta <59428681+mguptahub@users.noreply.github.com> Co-authored-by: Manish Gupta <manish@mgupta.me> Co-authored-by: = <=> Co-authored-by: rahulramesha <rahulramesham@gmail.com> * chore: updated file structure for admin * chore: updated admin-sidebar * chore: auth error handling * chore: onboarding UI updates and dark mode fixes. * chore: add `user personalization` step to onboarding profile setup screen. * chore: fix minor UI bugs * chore: authentication workflow changes * chore: handled signin workflow * style: switch or delete account workflow * chore: god mode redirection URL * feat(dashboard): improve label readability (#4321) change none label for all time in dashbard filters * chore: god-mode redirection * chore: onboarding ui updates and accept invitation workflow updates. * chore: rename unique code auth form. * style: space auth ux copy. * chore: updated intance and auth wrapper logic * chore: update default layout style. * chore: update confirm password. * chore: backend redirection * style: update banner ui * chore: minor ui updates and validation fix. * chore: removed old auth hook * chore: handled auth wrapper * chore: handled store loaders in the user * chore: handled logs * chore: add loading spinners for all auth and onboarding form buttons. * chore: add background pattern in admin auth forms and minor ui fixes. * chore: UI changes and revamp components for authentication * chore: auth UI consistency in web, space and admin. * chore: resolved build errors * chore: removed old auth hooks * chore: handled lint errors in use accounts * chore: updated authentication wrapper logic in web app * [WEB -1149] dev: update dependencies (#4333) * dev: upgrade dependencies remove unwanted dependency and add ruff as local dependency * dev: add comments * chore: authentication wrapper fetch user * chore: updated store loader * chore: removed old auth wrapper and replaced the imports with new auth wrapper * chore: join workspace invitation workflow updates * chore: build error resolved in deploy * chore: handled onboarding step error in web app * chore: SMTP Name and Password validation removed * chore: handled seo and signout logic and new user popup * chore: added redirection to plane in the sidebar * chore: resolved build errors * dev: admin session cookie update * chore: updated cookie session time for admin * dev: add start date and end date to projects (#4355) * chore: add email security dropdown and remove SMTP username and password validation. * chore: add tooltip to admin sidebar help-section. * chore: add dropdown to collapsed admin sidebar. * chore: profile themning * chore: updated page error messages and theme in command palette * dev: add email validation in email check apis * dev: remove start date and end date from project * chore: updated space folder structure and updated the store hooks * dev: error codes for authentication * chore: handled authentication in space and web apps * chore: banner redirect handling the email * dev: god mode error codes * chore: updated error codes * chore: updated onboarding images * dev: signout endpoints and saving login domain while creating sessions * feat: Self Host Data Backup (#4383) * feat: implemented backup , support for docker-compose tool, readme updated * minor fix in shell script * codacy fixes * chore: handled build errors in web * chore: updated react, react-dom, and next versions * chore: updated password autioset in the signin * dev: add logo prop to views and pages * chore: updated api service and handled the set password in store * chore: handled build errors and code cleanup * dev: return 401 when the session is not valid * dev: users/me exception for api * chore: installed lodash in space app * dev: add auth route in nginx --------- Co-authored-by: pablohashescobar <nikhilschacko@gmail.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: gurusainath <gurusainath007@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: Manish Gupta <59428681+mguptahub@users.noreply.github.com> Co-authored-by: Manish Gupta <manish@mgupta.me> Co-authored-by: rahulramesha <rahulramesham@gmail.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> Co-authored-by: Daniel Alba <56451942+redrum15@users.noreply.github.com> Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
332 lines
14 KiB
TypeScript
332 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useEffect, useMemo, useState } from "react";
|
|
import { useSearchParams } from "next/navigation";
|
|
// services
|
|
import { AuthService } from "@/services/auth.service";
|
|
// ui
|
|
import { Button, Checkbox, Input, Spinner } from "@plane/ui";
|
|
// components
|
|
import { Banner, PasswordStrengthMeter } from "components/common";
|
|
// icons
|
|
import { Eye, EyeOff } from "lucide-react";
|
|
// helpers
|
|
import { API_BASE_URL } from "@/helpers/common.helper";
|
|
import { getPasswordStrength } from "@/helpers/password.helper";
|
|
|
|
// service initialization
|
|
const authService = new AuthService();
|
|
|
|
// error codes
|
|
enum EErrorCodes {
|
|
INSTANCE_NOT_CONFIGURED = "INSTANCE_NOT_CONFIGURED",
|
|
ADMIN_ALREADY_EXIST = "ADMIN_ALREADY_EXIST",
|
|
REQUIRED_EMAIL_PASSWORD_FIRST_NAME = "REQUIRED_EMAIL_PASSWORD_FIRST_NAME",
|
|
INVALID_EMAIL = "INVALID_EMAIL",
|
|
INVALID_PASSWORD = "INVALID_PASSWORD",
|
|
USER_ALREADY_EXISTS = "USER_ALREADY_EXISTS",
|
|
}
|
|
|
|
type TError = {
|
|
type: EErrorCodes | undefined;
|
|
message: string | undefined;
|
|
};
|
|
|
|
// form data
|
|
type TFormData = {
|
|
first_name: string;
|
|
last_name: string;
|
|
email: string;
|
|
company_name: string;
|
|
password: string;
|
|
confirm_password?: string;
|
|
is_telemetry_enabled: boolean;
|
|
};
|
|
|
|
const defaultFromData: TFormData = {
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
company_name: "",
|
|
password: "",
|
|
is_telemetry_enabled: true,
|
|
};
|
|
|
|
export const InstanceSignUpForm: FC = (props) => {
|
|
const {} = props;
|
|
// search params
|
|
const searchParams = useSearchParams();
|
|
const firstNameParam = searchParams.get("first_name") || undefined;
|
|
const lastNameParam = searchParams.get("last_name") || undefined;
|
|
const companyParam = searchParams.get("company") || undefined;
|
|
const emailParam = searchParams.get("email") || undefined;
|
|
const isTelemetryEnabledParam = (searchParams.get("is_telemetry_enabled") === "True" ? true : false) || true;
|
|
const errorCode = searchParams.get("error_code") || undefined;
|
|
const errorMessage = searchParams.get("error_message") || undefined;
|
|
// state
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
|
|
const [formData, setFormData] = useState<TFormData>(defaultFromData);
|
|
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
|
|
setFormData((prev) => ({ ...prev, [key]: value }));
|
|
|
|
useEffect(() => {
|
|
if (csrfToken === undefined)
|
|
authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
|
|
}, [csrfToken]);
|
|
|
|
useEffect(() => {
|
|
if (firstNameParam) setFormData((prev) => ({ ...prev, first_name: firstNameParam }));
|
|
if (lastNameParam) setFormData((prev) => ({ ...prev, last_name: lastNameParam }));
|
|
if (companyParam) setFormData((prev) => ({ ...prev, company_name: companyParam }));
|
|
if (emailParam) setFormData((prev) => ({ ...prev, email: emailParam }));
|
|
if (isTelemetryEnabledParam) setFormData((prev) => ({ ...prev, is_telemetry_enabled: isTelemetryEnabledParam }));
|
|
}, [firstNameParam, lastNameParam, companyParam, emailParam, isTelemetryEnabledParam]);
|
|
|
|
// derived values
|
|
const errorData: TError = useMemo(() => {
|
|
if (errorCode && errorMessage) {
|
|
switch (errorCode) {
|
|
case EErrorCodes.INSTANCE_NOT_CONFIGURED:
|
|
return { type: EErrorCodes.INSTANCE_NOT_CONFIGURED, message: errorMessage };
|
|
case EErrorCodes.ADMIN_ALREADY_EXIST:
|
|
return { type: EErrorCodes.ADMIN_ALREADY_EXIST, message: errorMessage };
|
|
case EErrorCodes.REQUIRED_EMAIL_PASSWORD_FIRST_NAME:
|
|
return { type: EErrorCodes.REQUIRED_EMAIL_PASSWORD_FIRST_NAME, message: errorMessage };
|
|
case EErrorCodes.INVALID_EMAIL:
|
|
return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
|
|
case EErrorCodes.INVALID_PASSWORD:
|
|
return { type: EErrorCodes.INVALID_PASSWORD, message: errorMessage };
|
|
case EErrorCodes.USER_ALREADY_EXISTS:
|
|
return { type: EErrorCodes.USER_ALREADY_EXISTS, message: errorMessage };
|
|
default:
|
|
return { type: undefined, message: undefined };
|
|
}
|
|
} else return { type: undefined, message: undefined };
|
|
}, [errorCode, errorMessage]);
|
|
|
|
const isButtonDisabled = useMemo(
|
|
() =>
|
|
!isSubmitting &&
|
|
formData.first_name &&
|
|
formData.email &&
|
|
formData.password &&
|
|
getPasswordStrength(formData.password) >= 3 &&
|
|
formData.password === formData.confirm_password
|
|
? false
|
|
: true,
|
|
[formData.confirm_password, formData.email, formData.first_name, formData.password, isSubmitting]
|
|
);
|
|
|
|
return (
|
|
<div className="relative w-full h-full overflow-hidden container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 flex flex-col justify-center items-center">
|
|
<div className="relative flex flex-col space-y-6">
|
|
<div className="text-center space-y-1">
|
|
<h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
|
|
Setup your Plane Instance
|
|
</h3>
|
|
<p className="font-medium text-onboarding-text-400">
|
|
Post setup you will be able to manage this Plane instance.
|
|
</p>
|
|
</div>
|
|
|
|
{errorData.type &&
|
|
errorData?.message &&
|
|
![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
|
|
<Banner type="error" message={errorData?.message} />
|
|
)}
|
|
|
|
<form
|
|
className="space-y-4"
|
|
method="POST"
|
|
action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
|
|
onSubmit={() => setIsSubmitting(true)}
|
|
onError={() => setIsSubmitting(false)}
|
|
>
|
|
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-full space-y-1">
|
|
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
|
|
First name <span className="text-red-500">*</span>
|
|
</label>
|
|
<Input
|
|
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
|
id="first_name"
|
|
name="first_name"
|
|
type="text"
|
|
inputSize="md"
|
|
placeholder="Wilber"
|
|
value={formData.first_name}
|
|
onChange={(e) => handleFormChange("first_name", e.target.value)}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="w-full space-y-1">
|
|
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
|
|
Last name
|
|
</label>
|
|
<Input
|
|
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
|
id="last_name"
|
|
name="last_name"
|
|
type="text"
|
|
inputSize="md"
|
|
placeholder="Wright"
|
|
value={formData.last_name}
|
|
onChange={(e) => handleFormChange("last_name", e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full space-y-1">
|
|
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
|
|
Email <span className="text-red-500">*</span>
|
|
</label>
|
|
<Input
|
|
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
inputSize="md"
|
|
placeholder="name@company.com"
|
|
value={formData.email}
|
|
onChange={(e) => handleFormChange("email", e.target.value)}
|
|
hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
|
|
/>
|
|
{errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
|
|
<p className="px-1 text-xs text-red-500">{errorData.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="w-full space-y-1">
|
|
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="company_name">
|
|
Company name
|
|
</label>
|
|
<Input
|
|
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
|
id="company_name"
|
|
name="company_name"
|
|
type="text"
|
|
inputSize="md"
|
|
placeholder="Company name"
|
|
value={formData.company_name}
|
|
onChange={(e) => handleFormChange("company_name", e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="w-full space-y-1">
|
|
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
|
|
Set a password <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<Input
|
|
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
|
id="password"
|
|
name="password"
|
|
type={showPassword ? "text" : "password"}
|
|
inputSize="md"
|
|
placeholder="New password..."
|
|
value={formData.password}
|
|
onChange={(e) => handleFormChange("password", e.target.value)}
|
|
hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
|
|
onFocus={() => setIsPasswordInputFocused(true)}
|
|
onBlur={() => setIsPasswordInputFocused(false)}
|
|
/>
|
|
{showPassword ? (
|
|
<button
|
|
type="button"
|
|
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
|
|
onClick={() => setShowPassword(false)}
|
|
>
|
|
<EyeOff className="h-4 w-4" />
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
|
|
onClick={() => setShowPassword(true)}
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
{errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
|
|
<p className="px-1 text-xs text-red-500">{errorData.message}</p>
|
|
)}
|
|
{isPasswordInputFocused && <PasswordStrengthMeter password={formData.password} />}
|
|
</div>
|
|
|
|
<div className="w-full space-y-1">
|
|
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
|
|
Confirm password
|
|
</label>
|
|
<div className="relative">
|
|
<Input
|
|
type={showPassword ? "text" : "password"}
|
|
id="confirm_password"
|
|
name="confirm_password"
|
|
inputSize="md"
|
|
value={formData.confirm_password}
|
|
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
|
|
placeholder="Confirm password"
|
|
className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
|
/>
|
|
{showPassword ? (
|
|
<button
|
|
type="button"
|
|
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
|
|
onClick={() => setShowPassword(false)}
|
|
>
|
|
<EyeOff className="h-4 w-4" />
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
|
|
onClick={() => setShowPassword(true)}
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
{!!formData.confirm_password && formData.password !== formData.confirm_password && (
|
|
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="relative flex items-center pt-2 gap-2">
|
|
<div>
|
|
<Checkbox
|
|
id="is_telemetry_enabled"
|
|
name="is_telemetry_enabled"
|
|
value={formData.is_telemetry_enabled ? "True" : "False"}
|
|
onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
|
|
checked={formData.is_telemetry_enabled}
|
|
/>
|
|
</div>
|
|
<label
|
|
className="text-sm text-onboarding-text-300 font-medium cursor-pointer"
|
|
htmlFor="is_telemetry_enabled"
|
|
>
|
|
Allow Plane to anonymously collect usage events.
|
|
</label>
|
|
<a href="https://docs.plane.so/telemetry" className="text-sm font-medium text-blue-500 hover:text-blue-600">
|
|
See More
|
|
</a>
|
|
</div>
|
|
|
|
<div className="py-2">
|
|
<Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
|
|
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|