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
1 parent b3bd8c1a58
commit bfa70dcc83
@@ -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