Feat/onboarding admin (#3486)
* WIP * API and step done fallback * Finishing up tweaks * Inline comment * Translations * Update apps/web/pages/api/auth/setup.ts Co-authored-by: Omar López <zomars@me.com> * Update apps/web/pages/api/auth/setup.ts Co-authored-by: Omar López <zomars@me.com> * Update apps/web/pages/api/auth/setup.ts Co-authored-by: Omar López <zomars@me.com> * Update apps/web/pages/api/auth/setup.ts Co-authored-by: Omar López <zomars@me.com> * Linting fixes * Update apps/web/pages/auth/setup.tsx Co-authored-by: Omar López <zomars@me.com> * Linting fix * Moving to v2 * Translations Co-authored-by: Leo Giovanetti <hello@leog.me> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>pull/3560/head
Omar López
GitHub
parent
b3bd8c1a58
commit
bfa70dcc83
|
|
@ -0,0 +1,57 @@
|
|||
import { IdentityProvider } from "@prisma/client";
|
||||
import { NextApiRequest, NextApiResponse } from "next";
|
||||
import z from "zod";
|
||||
|
||||
import { isPasswordValid } from "@calcom/lib/auth";
|
||||
import { hashPassword } from "@calcom/lib/auth";
|
||||
import { HttpError } from "@calcom/lib/http-error";
|
||||
import { defaultHandler, defaultResponder } from "@calcom/lib/server";
|
||||
import slugify from "@calcom/lib/slugify";
|
||||
import prisma from "@calcom/prisma";
|
||||
|
||||
const querySchema = z.object({
|
||||
username: z.string().min(1),
|
||||
full_name: z.string(),
|
||||
email_address: z.string().email({ message: "Please enter a valid email" }),
|
||||
password: z.string().refine((val) => isPasswordValid(val.trim()), {
|
||||
message:
|
||||
"The password must be a minimum of 7 characters long containing at least one number and have a mixture of uppercase and lowercase letters",
|
||||
}),
|
||||
});
|
||||
|
||||
async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
const userCount = await prisma.user.count();
|
||||
if (userCount !== 0) {
|
||||
throw new HttpError({ statusCode: 400, message: "No setup needed." });
|
||||
}
|
||||
|
||||
const parsedQuery = querySchema.safeParse(req.body);
|
||||
if (!parsedQuery.success) {
|
||||
throw new HttpError({ statusCode: 422, message: parsedQuery.error.message });
|
||||
}
|
||||
|
||||
const username = slugify(parsedQuery.data.username);
|
||||
const userEmail = parsedQuery.data.email_address.toLowerCase();
|
||||
|
||||
const hashedPassword = await hashPassword(parsedQuery.data.password);
|
||||
|
||||
await prisma.user.create({
|
||||
data: {
|
||||
username,
|
||||
email: userEmail,
|
||||
password: hashedPassword,
|
||||
role: "ADMIN",
|
||||
name: parsedQuery.data.full_name,
|
||||
emailVerified: new Date(),
|
||||
locale: "en", // TODO: We should revisit this
|
||||
plan: "PRO",
|
||||
identityProvider: IdentityProvider.CAL,
|
||||
},
|
||||
});
|
||||
|
||||
return { message: "First admin user created successfuly." };
|
||||
}
|
||||
|
||||
export default defaultHandler({
|
||||
POST: Promise.resolve({ default: defaultResponder(handler) }),
|
||||
});
|
||||
|
|
@ -7,14 +7,15 @@ import { useState } from "react";
|
|||
import { useForm } from "react-hook-form";
|
||||
|
||||
import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { Alert } from "@calcom/ui/Alert";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Icon } from "@calcom/ui/Icon";
|
||||
import { EmailField, Form, PasswordField } from "@calcom/ui/form/fields";
|
||||
import prisma from "@calcom/web/lib/prisma";
|
||||
|
||||
import { ErrorCode, getSession } from "@lib/auth";
|
||||
import { WEBAPP_URL, WEBSITE_URL } from "@lib/config/constants";
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import { hostedCal, isSAMLLoginEnabled, samlProductID, samlTenantID } from "@lib/saml";
|
||||
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
|
||||
import { inferSSRProps } from "@lib/types/inferSSRProps";
|
||||
|
|
@ -136,6 +137,7 @@ export default function Login({
|
|||
<EmailField
|
||||
id="email"
|
||||
label={t("email_address")}
|
||||
defaultValue={router.query.email as string}
|
||||
placeholder="john.doe@example.com"
|
||||
required
|
||||
{...form.register("email")}
|
||||
|
|
@ -217,6 +219,17 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
|
|||
};
|
||||
}
|
||||
|
||||
const userCount = await prisma.user.count();
|
||||
if (userCount === 0) {
|
||||
// Proceed to new onboarding to create first admin user
|
||||
return {
|
||||
redirect: {
|
||||
destination: "/auth/setup",
|
||||
permanent: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
csrfToken: await getCsrfToken(context),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,205 @@
|
|||
import { CheckIcon } from "@heroicons/react/solid";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useRouter } from "next/router";
|
||||
import { useRef, useState } from "react";
|
||||
import { Controller, FormProvider, useForm } from "react-hook-form";
|
||||
import * as z from "zod";
|
||||
|
||||
import { isPasswordValid } from "@calcom/lib/auth";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import prisma from "@calcom/prisma";
|
||||
import { inferSSRProps } from "@calcom/types/inferSSRProps";
|
||||
import WizardForm from "@calcom/ui/v2/WizardForm";
|
||||
import { TextField, PasswordField, EmailField } from "@calcom/ui/v2/form/fields";
|
||||
|
||||
const StepDone = () => {
|
||||
const { t } = useLocale();
|
||||
|
||||
return (
|
||||
<div className="min-h-36 my-6 flex flex-col items-center justify-center">
|
||||
<div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">
|
||||
<CheckIcon className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
|
||||
</div>
|
||||
<div className="max-w-[420px] text-center">
|
||||
<h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
|
||||
const router = useRouter();
|
||||
const { t } = useLocale();
|
||||
|
||||
const formSchema = z.object({
|
||||
username: z.string().min(1, t("at_least_characters", { count: 1 })),
|
||||
email_address: z.string().email({ message: t("enter_valid_email") }),
|
||||
full_name: z.string().min(3, t("at_least_characters", { count: 3 })),
|
||||
password: z.string().refine((val) => isPasswordValid(val.trim()), {
|
||||
message: t("invalid_password_hint"),
|
||||
}),
|
||||
});
|
||||
|
||||
const formMethods = useForm<{
|
||||
username: string;
|
||||
email_address: string;
|
||||
full_name: string;
|
||||
password: string;
|
||||
}>({
|
||||
resolver: zodResolver(formSchema),
|
||||
});
|
||||
|
||||
const formRef = useRef(null);
|
||||
|
||||
const onError = () => {
|
||||
props.setIsLoading(false);
|
||||
};
|
||||
|
||||
const onSubmit = formMethods.handleSubmit(async (data: z.infer<typeof formSchema>) => {
|
||||
props.setIsLoading(true);
|
||||
const response = await fetch("/api/auth/setup", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
username: data.username,
|
||||
full_name: data.full_name,
|
||||
email_address: data.email_address.toLowerCase(),
|
||||
password: data.password,
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
if (response.status === 200) {
|
||||
router.replace(`/auth/login?email=${data.email_address.toLowerCase()}`);
|
||||
} else {
|
||||
router.replace("/auth/setup");
|
||||
}
|
||||
}, onError);
|
||||
|
||||
return (
|
||||
<FormProvider {...formMethods}>
|
||||
<form id="setup-step-1" name="setup-step-1" className="space-y-4" onSubmit={onSubmit} ref={formRef}>
|
||||
<div>
|
||||
<Controller
|
||||
name="username"
|
||||
control={formMethods.control}
|
||||
render={({ field: { onBlur, onChange, value } }) => (
|
||||
<TextField
|
||||
addOnLeading={
|
||||
<span className="items-centerpx-3 inline-flex rounded-none text-sm text-gray-500">
|
||||
{process.env.NEXT_PUBLIC_WEBSITE_URL}/
|
||||
</span>
|
||||
}
|
||||
value={value || ""}
|
||||
className="my-0"
|
||||
onBlur={onBlur}
|
||||
name="username"
|
||||
onChange={async (e) => {
|
||||
onChange(e.target.value);
|
||||
formMethods.setValue("username", e.target.value);
|
||||
await formMethods.trigger("username");
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Controller
|
||||
name="full_name"
|
||||
control={formMethods.control}
|
||||
render={({ field: { onBlur, onChange, value } }) => (
|
||||
<TextField
|
||||
value={value || ""}
|
||||
onBlur={onBlur}
|
||||
onChange={async (e) => {
|
||||
onChange(e.target.value);
|
||||
formMethods.setValue("full_name", e.target.value);
|
||||
await formMethods.trigger("full_name");
|
||||
}}
|
||||
color={formMethods.formState.errors.full_name ? "warn" : ""}
|
||||
type="text"
|
||||
name="full_name"
|
||||
autoCapitalize="none"
|
||||
autoComplete="name"
|
||||
autoCorrect="off"
|
||||
className="my-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Controller
|
||||
name="email_address"
|
||||
control={formMethods.control}
|
||||
render={({ field: { onBlur, onChange, value } }) => (
|
||||
<EmailField
|
||||
value={value || ""}
|
||||
onBlur={onBlur}
|
||||
onChange={async (e) => {
|
||||
onChange(e.target.value);
|
||||
formMethods.setValue("email_address", e.target.value);
|
||||
await formMethods.trigger("email_address");
|
||||
}}
|
||||
defaultValue={router.query.email_address}
|
||||
className="my-0"
|
||||
name="email_address"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Controller
|
||||
name="password"
|
||||
control={formMethods.control}
|
||||
render={({ field: { onBlur, onChange, value } }) => (
|
||||
<PasswordField
|
||||
value={value || ""}
|
||||
onBlur={onBlur}
|
||||
onChange={async (e) => {
|
||||
onChange(e.target.value);
|
||||
formMethods.setValue("password", e.target.value);
|
||||
await formMethods.trigger("password");
|
||||
}}
|
||||
name="password"
|
||||
className="my-0"
|
||||
autoComplete="off"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
const { t } = useLocale();
|
||||
const [isLoadingStep1, setIsLoadingStep1] = useState(false);
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: t("administrator_user"),
|
||||
description: t("lets_create_first_administrator_user"),
|
||||
content: props.userCount !== 0 ? <StepDone /> : <SetupFormStep1 setIsLoading={setIsLoadingStep1} />,
|
||||
enabled: props.userCount === 0, // to check if the wizard should show buttons to navigate through more steps
|
||||
isLoading: isLoadingStep1,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className="flex h-screen items-center bg-gray-100 print:h-full">
|
||||
<WizardForm href="/auth/setup" steps={steps} containerClassname="max-w-sm" />
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export const getServerSideProps = async () => {
|
||||
const userCount = await prisma.user.count();
|
||||
return {
|
||||
props: {
|
||||
userCount,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -213,6 +213,7 @@
|
|||
"forgot_password": "Forgot Password",
|
||||
"forgot": "Forgot?",
|
||||
"done": "Done",
|
||||
"all_done": "All done!",
|
||||
"check_email_reset_password": "Check your email. We sent you a link to reset your password.",
|
||||
"finish": "Finish",
|
||||
"few_sentences_about_yourself": "A few sentences about yourself. This will appear on your personal url page.",
|
||||
|
|
@ -404,6 +405,7 @@
|
|||
"new_password_matches_old_password": "New password matches your old password. Please choose a different password.",
|
||||
"forgotten_secret_description": "If you have lost or forgotten this secret, you can change it, but be aware that all integrations using this secret will need to be updated",
|
||||
"current_incorrect_password": "Current password is incorrect",
|
||||
"invalid_password_hint": "The password must be a minimum of 7 characters long containing at least one number and have a mixture of uppercase and lowercase letters",
|
||||
"incorrect_password": "Password is incorrect.",
|
||||
"1_on_1": "1-on-1",
|
||||
"24_h": "24h",
|
||||
|
|
@ -434,6 +436,7 @@
|
|||
"additional_guests": "+ Additional Guests",
|
||||
"your_name": "Your name",
|
||||
"email_address": "Email address",
|
||||
"valid_email_address": "Please enter a valid email",
|
||||
"location": "Location",
|
||||
"yes": "yes",
|
||||
"no": "no",
|
||||
|
|
@ -477,6 +480,8 @@
|
|||
"member": "Member",
|
||||
"owner": "Owner",
|
||||
"admin": "Admin",
|
||||
"administrator_user": "Administrator user",
|
||||
"lets_create_first_administrator_user": "Let's create the first administrator user.",
|
||||
"new_member": "New Member",
|
||||
"invite": "Invite",
|
||||
"invite_new_member": "Invite a new member",
|
||||
|
|
@ -614,6 +619,8 @@
|
|||
"change_weekly_schedule": "Change your weekly schedule",
|
||||
"logo": "Logo",
|
||||
"error": "Error",
|
||||
"at_least_characters_one": "Please enter at least one character",
|
||||
"at_least_characters_other": "Please enter at least {{count}} characters",
|
||||
"team_logo": "Team Logo",
|
||||
"add_location": "Add a location",
|
||||
"attendees": "Attendees",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,22 @@ module.exports = {
|
|||
extend: {
|
||||
colors: {
|
||||
/* your primary brand color */
|
||||
brand: "var(--brand-color)",
|
||||
brand: {
|
||||
// TODO: To be shared between Storybook for v2 UI components and web
|
||||
// Figure out a way to automate this for self hosted users
|
||||
// Goto https://javisperez.github.io/tailwindcolorshades to generate your brand color
|
||||
50: "#d1d5db",
|
||||
100: "#9ca3af",
|
||||
200: "#6b7280",
|
||||
300: "#4b5563",
|
||||
400: "#374151",
|
||||
500: "#111827", // Brand color
|
||||
600: "#0f1623",
|
||||
700: "#0d121d",
|
||||
800: "#0a0e17",
|
||||
900: "#080c13",
|
||||
DEFAULT: "#111827",
|
||||
},
|
||||
brandcontrast: "var(--brand-text-color)",
|
||||
darkmodebrand: "var(--brand-color-dark-mode)",
|
||||
darkmodebrandcontrast: "var(--brand-text-color-dark-mode)",
|
||||
|
|
|
|||
|
|
@ -18,3 +18,19 @@ export async function getSession(options: GetSessionParams): Promise<Session | n
|
|||
// that these are equal are ensured in `[...nextauth]`'s callback
|
||||
return session as Session | null;
|
||||
}
|
||||
|
||||
export function isPasswordValid(password: string) {
|
||||
let cap = false,
|
||||
low = false,
|
||||
num = false,
|
||||
min = false;
|
||||
if (password.length > 6) min = true;
|
||||
for (let i = 0; i < password.length; i++) {
|
||||
if (!isNaN(parseInt(password[i]))) num = true;
|
||||
else {
|
||||
if (password[i] === password[i].toUpperCase()) cap = true;
|
||||
if (password[i] === password[i].toLowerCase()) low = true;
|
||||
}
|
||||
}
|
||||
return cap && low && num && min;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
import Link from "next/link";
|
||||
|
||||
type DefaultStep = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
function Stepper<T extends DefaultStep>(props: { href: string; step: number; steps: T[] }) {
|
||||
const { href, steps } = props;
|
||||
return (
|
||||
<>
|
||||
{steps.length > 1 && (
|
||||
<nav className="flex items-center justify-center" aria-label="Progress">
|
||||
<p className="text-sm font-medium">
|
||||
Step {props.step} of {steps.length}
|
||||
</p>
|
||||
<ol role="list" className="ml-8 flex items-center space-x-5">
|
||||
{steps.map((mapStep, index) => (
|
||||
<li key={mapStep.title}>
|
||||
<Link href={`${href}?step=${index + 1}`} shallow replace>
|
||||
{index + 1 < props.step ? (
|
||||
<a className="block h-2.5 w-2.5 rounded-full bg-gray-600 hover:bg-gray-900">
|
||||
<span className="sr-only">{mapStep.title}</span>
|
||||
</a>
|
||||
) : index + 1 === props.step ? (
|
||||
<a className="relative flex items-center justify-center" aria-current="step">
|
||||
<span className="absolute flex h-5 w-5 p-px" aria-hidden="true">
|
||||
<span className="h-full w-full rounded-full bg-gray-200" />
|
||||
</span>
|
||||
<span
|
||||
className="relative block h-2.5 w-2.5 rounded-full bg-gray-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="sr-only">{mapStep.title}</span>
|
||||
</a>
|
||||
) : (
|
||||
<a className="block h-2.5 w-2.5 rounded-full bg-gray-200 hover:bg-gray-400">
|
||||
<span className="sr-only">{mapStep.title}</span>
|
||||
</a>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Stepper;
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import { useRouter } from "next/router";
|
||||
|
||||
import classNames from "@calcom/lib/classNames";
|
||||
import Button from "@calcom/ui/v2/Button";
|
||||
import Stepper from "@calcom/ui/v2/Stepper";
|
||||
|
||||
type DefaultStep = {
|
||||
title: string;
|
||||
description: string;
|
||||
content: JSX.Element;
|
||||
enabled?: boolean;
|
||||
isLoading: boolean;
|
||||
};
|
||||
|
||||
function WizardForm<T extends DefaultStep>(props: { href: string; steps: T[]; containerClassname?: string }) {
|
||||
const { href, steps } = props;
|
||||
const router = useRouter();
|
||||
const step = parseInt((router.query.step as string) || "1");
|
||||
const currentStep = steps[step - 1];
|
||||
const setStep = (newStep: number) => {
|
||||
router.replace(`${href}?step=${newStep || 1}`, undefined, { shallow: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto print:w-full">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="mx-auto mb-8 h-8" src="https://cal.com/logo.svg" alt="Cal.com Logo" />
|
||||
<div
|
||||
className={classNames(
|
||||
"mb-8 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow print:divide-transparent print:shadow-transparent",
|
||||
props.containerClassname
|
||||
)}>
|
||||
<div className="px-4 py-5 sm:px-6">
|
||||
<h1 className="font-cal text-2xl text-gray-900">{currentStep.title}</h1>
|
||||
<p className="text-sm text-gray-500">{currentStep.description}</p>
|
||||
</div>
|
||||
<div className="print:p-none px-4 py-5 sm:p-6">{currentStep.content}</div>
|
||||
{currentStep.enabled !== false && (
|
||||
<div className="px-4 py-4 print:hidden sm:px-6">
|
||||
{step > 1 && (
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={() => {
|
||||
setStep(step - 1);
|
||||
}}>
|
||||
Back
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
tabIndex={0}
|
||||
loading={currentStep.isLoading}
|
||||
type="submit"
|
||||
color="primary"
|
||||
form={`setup-step-${step}`}
|
||||
className="relative">
|
||||
{step < steps.length ? "Next" : "Finish"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="print:hidden">
|
||||
<Stepper href={href} step={step} steps={steps} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WizardForm;
|
||||
|
|
@ -81,14 +81,14 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
|
|||
<Label
|
||||
htmlFor={id}
|
||||
{...labelProps}
|
||||
className={classNames(labelSrOnly && "sr-only", props.error && "text-red-900", "pb-2")}>
|
||||
className={classNames(labelSrOnly && "sr-only", props.error && "text-red-900", "pb-1")}>
|
||||
{label}
|
||||
</Label>
|
||||
)}
|
||||
{addOnLeading || addOnSuffix ? (
|
||||
<div
|
||||
className={classNames(
|
||||
" mb-2 flex items-center rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-neutral-800 focus-within:ring-offset-2",
|
||||
" mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-neutral-800 focus-within:ring-offset-2",
|
||||
addOnSuffix && "group flex-row-reverse"
|
||||
)}>
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in New Issue