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>
2022-07-27 17:28:21 -06:00
parent b3bd8c1a58
commit bfa70dcc83
9 changed files with 436 additions and 4 deletions
@@ -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",