Revert "Self-hosted onboarding first admin wizard (#3393)" (#3485)

This reverts commit ee14423f4c.

apps/web/pages/api/auth/setup.ts

@@ -1,58 +0,0 @@
-import { IdentityProvider } from "@prisma/client";
-import { NextApiRequest, NextApiResponse } from "next";
-import z from "zod";
-
-import { isPasswordValid } from "@calcom/lib/auth";
-import { HttpError } from "@calcom/lib/http-error";
-import { defaultHandler, defaultResponder } from "@calcom/lib/server";
-
-import { hashPassword } from "@lib/auth";
-import prisma from "@lib/prisma";
-import slugify from "@lib/slugify";
-
-const querySchema = z.object({
-  username: z.string().min(1),
-  fullname: z.string(),
-  email: 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.toLowerCase();
-
-  const hashedPassword = await hashPassword(parsedQuery.data.password);
-
-  await prisma.user.create({
-    data: {
-      username,
-      email: userEmail,
-      password: hashedPassword,
-      role: "ADMIN",
-      name: parsedQuery.data.fullname,
-      emailVerified: new Date(),
-      locale: "en", // TODO: We should revisit this
-      plan: "PRO",
-      identityProvider: IdentityProvider.CAL,
-    },
-  });
-
-  res.status(201).json({ message: "First admin user created successfuly." });
-}
-
-export default defaultHandler({
-  POST: Promise.resolve({ default: defaultResponder(handler) }),
-});

apps/web/pages/auth/login.tsx

@@ -8,14 +8,13 @@ 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 { 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";
@@ -218,17 +217,6 @@ 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),

apps/web/pages/auth/setup.tsx

@@ -1,293 +0,0 @@
-import { CheckIcon } from "@heroicons/react/solid";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useRouter } from "next/router";
-import { Controller, useForm } from "react-hook-form";
-import * as z from "zod";
-
-import { isPasswordValid } from "@calcom/lib/auth";
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import WizardForm from "@calcom/ui/WizardForm";
-import { Input } from "@calcom/ui/form/fields";
-import { Form } from "@calcom/ui/form/fields";
-
-import prisma from "@lib/prisma";
-
-const schema = z.object({
-  username: z.string().min(1),
-  email: z.string().email({ message: "Please enter a valid email" }),
-  fullname: z.string(),
-  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",
-  }),
-});
-
-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 = () => {
-  const router = useRouter();
-  const { t } = useLocale();
-
-  const formMethods = useForm<{
-    username: string;
-    email: string;
-    fullname: string;
-    password: string;
-  }>({
-    resolver: zodResolver(schema),
-  });
-
-  return (
-    <Form
-      form={formMethods}
-      id="setup-step-1"
-      name="setup-step-1"
-      className="space-y-4"
-      handleSubmit={async (data) => {
-        const response = await fetch("/api/auth/setup", {
-          method: "POST",
-          body: JSON.stringify({
-            username: data.username,
-            fullname: data.fullname,
-            email: data.email.toLowerCase(),
-            password: data.password,
-          }),
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-        if (response.status === 201) {
-          router.replace("/auth/login");
-        } else {
-          router.replace(`/auth/setup`);
-        }
-      }}>
-      <div>
-        <label htmlFor="username" className="sr-only">
-          {t("username")}
-        </label>
-        <div
-          className={classNames(
-            "mt-1 flex rounded-sm",
-            formMethods.formState.errors.username ? "border-2 border-red-500" : ""
-          )}>
-          <span className="inline-flex items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
-            cal.com/
-          </span>
-
-          <Controller
-            name="username"
-            control={formMethods.control}
-            defaultValue={router.query.username as string}
-            render={({ field: { onBlur, onChange, value } }) => (
-              <Input
-                value={value || ""}
-                onBlur={onBlur}
-                onChange={async (e) => {
-                  onChange(e.target.value);
-                  formMethods.setValue("username", e.target.value);
-                  await formMethods.trigger("username");
-                }}
-                defaultValue={router.query.email}
-                color={formMethods.formState.errors.username ? "warn" : ""}
-                type="text"
-                name="username"
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="none"
-                placeholder={t("username")}
-                className="rounded-r-s mt-0 block min-w-0 flex-1 rounded-none border-gray-300 px-3 py-2 sm:text-sm"
-              />
-            )}
-          />
-        </div>
-        {formMethods.formState.errors.username && (
-          <p role="alert" className="mt-1 text-xs text-red-500">
-            {formMethods.formState.errors.username.message}
-          </p>
-        )}
-      </div>
-      <div>
-        <label htmlFor="fullname" className="sr-only">
-          {t("full_name")}
-        </label>
-        <div
-          className={classNames(
-            "flex rounded-sm",
-            formMethods.formState.errors.fullname ? "border-2 border-red-500" : "border-0"
-          )}>
-          <Controller
-            name="fullname"
-            control={formMethods.control}
-            defaultValue={router.query.fullname as string}
-            render={({ field: { onBlur, onChange, value } }) => (
-              <Input
-                value={value || ""}
-                onBlur={onBlur}
-                onChange={async (e) => {
-                  onChange(e.target.value);
-                  formMethods.setValue("fullname", e.target.value);
-                  await formMethods.trigger("fullname");
-                }}
-                defaultValue={router.query.fullname}
-                color={formMethods.formState.errors.fullname ? "warn" : ""}
-                type="text"
-                name="fullname"
-                autoCapitalize="none"
-                autoComplete="name"
-                autoCorrect="off"
-                placeholder={t("full_name")}
-                className={classNames(
-                  "rounded-r-s mt-0 block min-w-0 flex-1 rounded-none border-gray-300 px-3 py-2 sm:text-sm",
-                  formMethods.formState.errors.fullname
-                    ? "border-r-0 focus:border-l focus:border-gray-300 focus:ring-0"
-                    : "focus:border-gray-900 focus:ring-gray-900"
-                )}
-              />
-            )}
-          />
-        </div>
-        {formMethods.formState.errors.fullname && (
-          <p role="alert" className="mt-1 text-xs text-red-500">
-            {formMethods.formState.errors.fullname.message}
-          </p>
-        )}
-      </div>
-      <div>
-        <label htmlFor="email" className="sr-only">
-          {t("email_address")}
-        </label>
-        <div
-          className={classNames(
-            "flex rounded-sm",
-            formMethods.formState.errors.email ? "border-2 border-red-500" : "border-0"
-          )}>
-          <Controller
-            name="email"
-            control={formMethods.control}
-            defaultValue={router.query.email as string}
-            render={({ field: { onBlur, onChange, value } }) => (
-              <Input
-                value={value || ""}
-                onBlur={onBlur}
-                onChange={async (e) => {
-                  onChange(e.target.value);
-                  formMethods.setValue("email", e.target.value);
-                  await formMethods.trigger("email");
-                }}
-                defaultValue={router.query.email}
-                color={formMethods.formState.errors.email ? "warn" : ""}
-                type="email"
-                name="email"
-                autoCapitalize="none"
-                autoComplete="email"
-                autoCorrect="off"
-                placeholder={t("email_address")}
-                className={classNames(
-                  "rounded-r-s mt-0 block min-w-0 flex-1 rounded-none border-gray-300 px-3 py-2 sm:text-sm",
-                  formMethods.formState.errors.email
-                    ? "border-r-0 focus:border-l focus:border-gray-300 focus:ring-0"
-                    : "focus:border-gray-900 focus:ring-gray-900"
-                )}
-              />
-            )}
-          />
-        </div>
-        {formMethods.formState.errors.email && (
-          <p role="alert" className="mt-1 text-xs text-red-500">
-            {formMethods.formState.errors.email.message}
-          </p>
-        )}
-      </div>
-      <div>
-        <label htmlFor="password" className="sr-only">
-          {t("password")}
-        </label>
-        <div
-          className={classNames(
-            "flex rounded-sm",
-            formMethods.formState.errors.password ? "border-2 border-red-500" : "border-0"
-          )}>
-          <Controller
-            name="password"
-            control={formMethods.control}
-            render={({ field: { onBlur, onChange, value } }) => (
-              <Input
-                value={value || ""}
-                onBlur={onBlur}
-                onChange={async (e) => {
-                  onChange(e.target.value);
-                  formMethods.setValue("password", e.target.value);
-                  await formMethods.trigger("password");
-                }}
-                color={formMethods.formState.errors.password ? "warn" : ""}
-                type="password"
-                name="password"
-                autoComplete="off"
-                placeholder={t("password")}
-                className={classNames(
-                  "rounded-r-s mt-0 block min-w-0 flex-1 rounded-none border-gray-300 px-3 py-2 sm:text-sm",
-                  formMethods.formState.errors.password
-                    ? "border-r-0 focus:border-l focus:border-gray-300 focus:ring-0"
-                    : "focus:border-gray-900 focus:ring-gray-900"
-                )}
-              />
-            )}
-          />
-        </div>
-        {formMethods.formState.errors.password && (
-          <p role="alert" className="mt-1 max-w-xs text-xs text-red-500">
-            {formMethods.formState.errors.password.message}
-          </p>
-        )}
-      </div>
-
-      <input type="submit" id="submit-setup-step-1" className="hidden" />
-    </Form>
-  );
-};
-
-export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
-  const { t } = useLocale();
-
-  const steps = [
-    {
-      title: t("administrator_user"),
-      description: t("lets_create_first_administrator_user"),
-      content: props.userCount !== 0 ? <StepDone /> : <SetupFormStep1 />,
-      enabled: props.userCount === 0, // to check if the wizard should show buttons to navigate through more steps
-    },
-  ];
-
-  return (
-    <>
-      <main className="flex h-screen items-center bg-gray-100 print:h-full">
-        <WizardForm href="/setup" steps={steps} />
-      </main>
-    </>
-  );
-}
-
-export const getServerSideProps = async () => {
-  const userCount = await prisma.user.count();
-  return {
-    props: {
-      userCount,
-    },
-  };
-};

apps/web/public/static/locales/en/common.json

@@ -213,7 +213,6 @@
   "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.",
@@ -478,8 +477,6 @@
   "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",

packages/lib/auth.ts

@@ -9,19 +9,3 @@ export async function verifyPassword(password: string, hashedPassword: string) {
   const isValid = await compare(password, hashedPassword);
   return isValid;
 }
-
-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;
-}

packages/ui/Stepper.tsx

@@ -1,50 +0,0 @@
-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;

packages/ui/WizardForm.tsx

@@ -1,59 +0,0 @@
-import { useRouter } from "next/router";
-
-import Stepper from "./Stepper";
-
-type DefaultStep = {
-  title: string;
-  description: string;
-  content: JSX.Element;
-  enabled?: boolean;
-};
-
-function WizardForm<T extends DefaultStep>(props: { href: string; steps: T[] }) {
-  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="mb-8 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow print:divide-transparent print:shadow-transparent">
-        <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
-                onClick={() => {
-                  setStep(step - 1);
-                }}
-                className="mr-2 rounded-sm bg-gray-100 px-4 py-2 text-gray-900">
-                Back
-              </button>
-            )}
-
-            <label
-              tabIndex={0}
-              htmlFor={`submit${href.replace(/\//g, "-")}-step-${step}`}
-              className="cursor-pointer rounded-sm bg-gray-900 px-4 py-2 text-white hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1">
-              {step < steps.length ? "Next" : "Finish"}
-            </label>
-          </div>
-        )}
-      </div>
-      <div className="print:hidden">
-        <Stepper href={href} step={step} steps={steps} />
-      </div>
-    </div>
-  );
-}
-
-export default WizardForm;