style: updated the UI of the instance admin setup and the sign in workflow (#2962)

* style: updated the UI of the signin and instance setups * fix: form validations and mutations * fix: updated Link tags in accordance to next v14 * chore: latest features image, reset password redirection
2023-12-01 15:50:01 +05:30 · 2023-12-01 15:50:01 +05:30 · 1296b6af42
commit 1296b6af42
parent a515c59518
39 changed files with 717 additions and 575 deletions
--- a/web/components/account/sign-in-forms/create-password.tsx
+++ b/web/components/account/sign-in-forms/create-password.tsx
@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 // services
 import { AuthService } from "services/auth.service";
@ -74,7 +75,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {

  return (
    <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
        Let{"'"}s get a new password
      </h1>

@ -117,16 +118,23 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
                hasError={Boolean(errors.password)}
                placeholder="Create password"
                className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
+                minLength={8}
              />
            )}
          />
-          <p className="text-xs text-onboarding-text-200 mt-3">
+          <p className="text-xs text-onboarding-text-200 mt-3 pb-2">
            Whatever you choose now will be your account{"'"}s password until you change it.
          </p>
        </div>
        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
          {isSubmitting ? "Submitting..." : "Go to workspace"}
        </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click the button above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
      </form>
    </>
  );
--- a/web/components/account/sign-in-forms/email-form.tsx
+++ b/web/components/account/sign-in-forms/email-form.tsx
@ -83,10 +83,10 @@ export const EmailForm: React.FC<Props> = (props) => {

  return (
    <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
        Get on your flight deck!
      </h1>
-      <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
+      <p className="text-center text-sm text-onboarding-text-200 mt-3">
        Sign in with the email you used to sign up for Plane
      </p>

--- a/web/components/account/sign-in-forms/optional-set-password.tsx
+++ b/web/components/account/sign-in-forms/optional-set-password.tsx
@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, Input } from "@plane/ui";
@ -37,12 +38,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {

  return (
    <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">Set a password</h1>
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Set a password</h1>
      <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
-        If you{"'"}d to do away with codes, set a password here.
+        If you{"'"}d to do away with codes, set a password here
      </p>

-      <form className="mt-5 sm:w-96 mx-auto">
+      <form className="mt-5 sm:w-96 mx-auto space-y-4">
        <Controller
          control={control}
          name="email"
@ -65,7 +66,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
            />
          )}
        />
-        <div className="grid grid-cols-2 gap-2.5 mt-4">
+        <div className="grid grid-cols-2 gap-2.5">
          <Button
            type="button"
            variant="primary"
@ -88,6 +89,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
            {isGoingToWorkspace ? "Going to app..." : "Go to workspace"}
          </Button>
        </div>
+        <p className="text-xs text-onboarding-text-200">
+          When you click <span className="text-custom-primary-100">Go to workspace</span> above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
      </form>
    </>
  );
--- a/web/components/account/sign-in-forms/password.tsx
+++ b/web/components/account/sign-in-forms/password.tsx
@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
@ -184,17 +185,25 @@ export const PasswordForm: React.FC<Props> = (props) => {
              />
            )}
          />
-          <button
-            type="button"
-            onClick={handleForgotPassword}
-            className="text-xs font-medium text-right w-full text-custom-primary-100"
-          >
-            Forgot your password?
-          </button>
+          <div className="w-full text-right">
+            <button
+              type="button"
+              onClick={handleForgotPassword}
+              className="text-xs font-medium text-custom-primary-100"
+            >
+              Forgot your password?
+            </button>
+          </div>
        </div>
        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
          {isSubmitting ? "Signing in..." : "Go to workspace"}
        </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click the button above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
      </form>
    </>
  );
--- a/web/components/account/sign-in-forms/root.tsx
+++ b/web/components/account/sign-in-forms/root.tsx
@ -23,6 +23,8 @@ type Props = {
  handleSignInRedirection: () => Promise<void>;
 };

+const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
+
 export const SignInRoot: React.FC<Props> = (props) => {
  const { handleSignInRedirection } = props;
  // states
@ -72,7 +74,7 @@ export const SignInRoot: React.FC<Props> = (props) => {
          />
        )}
      </div>
-      {signInStep !== ESignInSteps.OPTIONAL_SET_PASSWORD && (
+      {!OAUTH_HIDDEN_STEPS.includes(signInStep) && (
        <OAuthOptions
          updateEmail={(newEmail) => setEmail(newEmail)}
          handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
--- a/web/components/account/sign-in-forms/set-password-link.tsx
+++ b/web/components/account/sign-in-forms/set-password-link.tsx
@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
@ -48,6 +49,13 @@ export const SetPasswordLink: React.FC<Props> = (props) => {

    await authService
      .emailCheck(payload)
+      .then(() =>
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "We have sent a new link to your email.",
+        })
+      )
      .catch((err) =>
        setToastAlert({
          type: "error",
@ -60,15 +68,15 @@ export const SetPasswordLink: React.FC<Props> = (props) => {

  return (
    <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
-        Get on your flight deck!
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
+        Get on your flight deck
      </h1>
      <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
-        We have sent a link to <span className="font-medium text-custom-primary-100">{email},</span> so you can set a
+        We have sent a link to <span className="font-semibold text-custom-primary-100">{email},</span> so you can set a
        password
      </p>

-      <form className="mt-5 sm:w-96 mx-auto">
+      <form className="mt-5 sm:w-96 mx-auto space-y-4">
        <div className="space-y-1">
          <Controller
            control={control}
@ -103,19 +111,23 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
            )}
          />
        </div>
-        <div className="mt-4">
-          <Button
-            type="button"
-            variant="primary"
-            className="w-full"
-            size="xl"
-            onClick={handleSendNewLink}
-            disabled={!isValid}
-            loading={isSendingNewLink}
-          >
-            {isSendingNewLink ? "Sending new link..." : "Get link again"}
-          </Button>
-        </div>
+        <Button
+          type="button"
+          variant="primary"
+          className="w-full"
+          size="xl"
+          onClick={handleSendNewLink}
+          disabled={!isValid}
+          loading={isSendingNewLink}
+        >
+          {isSendingNewLink ? "Sending new link..." : "Get link again"}
+        </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click the button above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
      </form>
    </>
  );
--- a/web/components/account/sign-in-forms/unique-code.tsx
+++ b/web/components/account/sign-in-forms/unique-code.tsx
@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { CornerDownLeft, XCircle } from "lucide-react";
 // services
@ -44,7 +45,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
  // toast alert
  const { setToastAlert } = useToast();
  // timer
-  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer();
+  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
  // form info
  const {
    control,
@ -131,11 +132,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {

  return (
    <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
-        Moving to the runway
-      </h1>
-      <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
-        Paste the code you got at <span className="font-medium text-custom-primary-100">{email}</span> below.
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Moving to the runway</h1>
+      <p className="text-center text-sm text-onboarding-text-200 mt-3">
+        Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below
      </p>

      <form onSubmit={handleSubmit(handleFormSubmit)} className="mt-5 sm:w-96 mx-auto space-y-4">
@ -201,20 +200,24 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
              />
            )}
          />
-          <button
-            type="button"
-            onClick={handleRequestNewCode}
-            className={`text-xs text-right w-full text-onboarding-text-200 ${
-              isRequestNewCodeDisabled ? "" : "hover:text-custom-primary-100"
-            }`}
-            disabled={isRequestNewCodeDisabled}
-          >
-            {resendTimerCode > 0
-              ? `Request new code in ${resendTimerCode}s`
-              : isRequestingNewCode
-              ? "Requesting new code..."
-              : "Request new code"}
-          </button>
+          <div className="w-full text-right">
+            <button
+              type="button"
+              onClick={handleRequestNewCode}
+              className={`text-xs ${
+                isRequestNewCodeDisabled
+                  ? "text-onboarding-text-300"
+                  : "text-onboarding-text-200 hover:text-custom-primary-100"
+              }`}
+              disabled={isRequestNewCodeDisabled}
+            >
+              {resendTimerCode > 0
+                ? `Request new code in ${resendTimerCode}s`
+                : isRequestingNewCode
+                ? "Requesting new code..."
+                : "Request new code"}
+            </button>
+          </div>
        </div>
        <Button
          type="submit"
@ -226,6 +229,12 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
        >
          {isSubmitting ? "Signing in..." : "Confirm"}
        </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click Confirm above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
      </form>
    </>
  );