fix: login process validation based on api config (#2361)

web/components/account/email-password-form.tsx

@@ -1,12 +1,5 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-// react hook form
+import React from "react";
 import { useForm } from "react-hook-form";
-// components
-import { EmailResetPasswordForm } from "components/account";
 // ui
 import { Input, PrimaryButton } from "components/ui";
 // types
@@ -18,14 +11,12 @@ type EmailPasswordFormValues = {
 
 type Props = {
   onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+  setIsResettingPassword: (value: boolean) => void;
 };
 
-export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
-  const [isResettingPassword, setIsResettingPassword] = useState(false);
-
-  const router = useRouter();
-  const isSignUpPage = router.pathname === "/sign-up";
-
+export const EmailPasswordForm: React.FC<Props> = (props) => {
+  const { onSubmit, setIsResettingPassword } = props;
+  // form info
   const {
     register,
     handleSubmit,
@@ -42,94 +33,62 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-        {isResettingPassword
-          ? "Reset your password"
-          : isSignUpPage
-          ? "Sign up on Plane"
-          : "Sign in to Plane"}
-      </h1>
-      {isResettingPassword ? (
-        <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
-      ) : (
-        <form
-          className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-          onSubmit={handleSubmit(onSubmit)}
-        >
-          <div className="space-y-1">
-            <Input
-              id="email"
-              type="email"
-              name="email"
-              register={register}
-              validations={{
-                required: "Email address is required",
-                validate: (value) =>
-                  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-                    value
-                  ) || "Email address is not valid",
-              }}
-              error={errors.email}
-              placeholder="Enter your email address..."
-              className="border-custom-border-300 h-[46px]"
-            />
-          </div>
-          <div className="space-y-1">
-            <Input
-              id="password"
-              type="password"
-              name="password"
-              register={register}
-              validations={{
-                required: "Password is required",
-              }}
-              error={errors.password}
-              placeholder="Enter your password..."
-              className="border-custom-border-300 h-[46px]"
-            />
-          </div>
-          <div className="text-right text-xs">
-            {isSignUpPage ? (
-              <Link href="/">
-                <a className="text-custom-text-200 hover:text-custom-primary-100">
-                  Already have an account? Sign in.
-                </a>
-              </Link>
-            ) : (
-              <button
-                type="button"
-                onClick={() => setIsResettingPassword(true)}
-                className="text-custom-text-200 hover:text-custom-primary-100"
-              >
-                Forgot your password?
-              </button>
-            )}
-          </div>
-          <div>
-            <PrimaryButton
-              type="submit"
-              className="w-full text-center h-[46px]"
-              disabled={!isValid && isDirty}
-              loading={isSubmitting}
-            >
-              {isSignUpPage
-                ? isSubmitting
-                  ? "Signing up..."
-                  : "Sign up"
-                : isSubmitting
-                ? "Signing in..."
-                : "Sign in"}
-            </PrimaryButton>
-            {!isSignUpPage && (
-              <Link href="/sign-up">
-                <a className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
-                  Don{"'"}t have an account? Sign up.
-                </a>
-              </Link>
-            )}
-          </div>
-        </form>
-      )}
+      <form
+        className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <div className="space-y-1">
+          <Input
+            id="email"
+            type="email"
+            name="email"
+            register={register}
+            validations={{
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                ) || "Email address is not valid",
+            }}
+            error={errors.email}
+            placeholder="Enter your email address..."
+            className="border-custom-border-300 h-[46px]"
+          />
+        </div>
+        <div className="space-y-1">
+          <Input
+            id="password"
+            type="password"
+            name="password"
+            register={register}
+            validations={{
+              required: "Password is required",
+            }}
+            error={errors.password}
+            placeholder="Enter your password..."
+            className="border-custom-border-300 h-[46px]"
+          />
+        </div>
+        <div className="text-right text-xs">
+          <button
+            type="button"
+            onClick={() => setIsResettingPassword(true)}
+            className="text-custom-text-200 hover:text-custom-primary-100"
+          >
+            Forgot your password?
+          </button>
+        </div>
+        <div>
+          <PrimaryButton
+            type="submit"
+            className="w-full text-center h-[46px]"
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Signing in..." : "Sign in"}
+          </PrimaryButton>
+        </div>
+      </form>
     </>
   );
 };

web/components/account/email-signup-form.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// ui
+import { Input, PrimaryButton } from "components/ui";
+// types
+type EmailPasswordFormValues = {
+  email: string;
+  password?: string;
+  confirm_password: string;
+  medium?: string;
+};
+
+type Props = {
+  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+};
+
+export const EmailSignUpForm: React.FC<Props> = (props) => {
+  const { onSubmit } = props;
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailPasswordFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      confirm_password: "",
+      medium: "email",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  return (
+    <>
+      <form
+        className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <div className="space-y-1">
+          <Input
+            id="email"
+            type="email"
+            name="email"
+            register={register}
+            validations={{
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                ) || "Email address is not valid",
+            }}
+            error={errors.email}
+            placeholder="Enter your email address..."
+            className="border-custom-border-300 h-[46px]"
+          />
+        </div>
+        <div className="space-y-1">
+          <Input
+            id="password"
+            type="password"
+            name="password"
+            register={register}
+            validations={{
+              required: "Password is required",
+            }}
+            error={errors.password}
+            placeholder="Enter your password..."
+            className="border-custom-border-300 h-[46px]"
+          />
+        </div>
+        <div className="space-y-1">
+          <Input
+            id="confirm_password"
+            type="password"
+            name="confirm_password"
+            register={register}
+            validations={{
+              required: "Password is required",
+              validate: (val: string) => {
+                if (watch("password") != val) {
+                  return "Your passwords do no match";
+                }
+              },
+            }}
+            error={errors.confirm_password}
+            placeholder="Confirm your password..."
+            className="border-custom-border-300 h-[46px]"
+          />
+        </div>
+        <div className="text-right text-xs">
+          <Link href="/">
+            <a className="text-custom-text-200 hover:text-custom-primary-100">
+              Already have an account? Sign in.
+            </a>
+          </Link>
+        </div>
+        <div>
+          <PrimaryButton
+            type="submit"
+            className="w-full text-center h-[46px]"
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Signing up..." : "Sign up"}
+          </PrimaryButton>
+        </div>
+      </form>
+    </>
+  );
+};

web/components/account/github-login-button.tsx

@@ -1,29 +1,27 @@
 import { useEffect, useState, FC } from "react";
-
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
-
-// next-themes
 import { useTheme } from "next-themes";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 
-const { NEXT_PUBLIC_GITHUB_ID } = process.env;
-
 export interface GithubLoginButtonProps {
   handleSignIn: React.Dispatch<string>;
+  clientId: string;
 }
 
-export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
+export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
+  const { handleSignIn, clientId } = props;
+  // states
   const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
   const [gitCode, setGitCode] = useState<null | string>(null);
-
+  // router
   const {
     query: { code },
   } = useRouter();
-
+  // theme
   const { theme } = useTheme();
 
   useEffect(() => {
@@ -42,7 +40,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn })
   return (
     <div className="w-full flex justify-center items-center">
       <Link
-        href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
+        href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
         <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
           <Image

web/components/account/google-login.tsx

@@ -1,22 +1,23 @@
-import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
-
+import { FC, useEffect, useRef, useCallback, useState } from "react";
 import Script from "next/script";
 
 export interface IGoogleLoginButton {
-  text?: string;
   handleSignIn: React.Dispatch<any>;
-  styles?: CSSProperties;
+  clientId: string;
 }
 
-export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
+export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
+  const { handleSignIn, clientId } = props;
+  // refs
   const googleSignInButton = useRef<HTMLDivElement>(null);
+  // states
   const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
 
   const loadScript = useCallback(() => {
     if (!googleSignInButton.current || gsiScriptLoaded) return;
 
     window?.google?.accounts.id.initialize({
-      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
+      client_id: clientId,
       callback: handleSignIn,
     });
 
@@ -39,7 +40,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
     window?.google?.accounts.id.prompt(); // also display the One Tap dialog
 
     setGsiScriptLoaded(true);
-  }, [handleSignIn, gsiScriptLoaded]);
+  }, [handleSignIn, gsiScriptLoaded, clientId]);
 
   useEffect(() => {
     if (window?.google?.accounts?.id) {

web/components/account/index.ts

@@ -3,3 +3,4 @@ export * from "./email-password-form";
 export * from "./email-reset-password-form";
 export * from "./github-login-button";
 export * from "./google-login";
+export * from "./email-signup-form";

web/pages/index.tsx

@@ -1,13 +1,14 @@
-import React, { useEffect } from "react";
-
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
-
 import type { NextPage } from "next";
-
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // services
 import authenticationService from "services/authentication.service";
+import { AppConfigService } from "services/app-config.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
@@ -17,19 +18,19 @@ import {
   GithubLoginButton,
   EmailCodeForm,
   EmailPasswordForm,
+  EmailResetPasswordForm,
 } from "components/account";
 // ui
 import { Spinner } from "components/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-// mobx react lite
-import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-// next themes
-import { useTheme } from "next-themes";
+// types
 import { IUser } from "types";
 
+const appConfig = new AppConfigService();
+
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -39,11 +40,16 @@ type EmailPasswordFormValues = {
 
 const HomePage: NextPage = observer(() => {
   const store: any = useMobxStore();
+  // theme
   const { setTheme } = useTheme();
-
+  // user
   const { isLoading, mutateUser } = useUserAuth("sign-in");
-
+  // states
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+  // toast
   const { setToastAlert } = useToast();
+  // fetch app config
+  const { data } = useSWR("APP_CONFIG", () => appConfig.envConfig());
 
   const handleTheme = (user: IUser) => {
     const currentTheme = user.theme.theme ?? "system";
@@ -173,38 +179,54 @@ const HomePage: NextPage = observer(() => {
           </>
           <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
             <div>
-              {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+                {isResettingPassword ? "Reset your password" : "Sign in to Plane"}
+              </h1>
+              {isResettingPassword ? (
+                <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
+              ) : (
                 <>
-                  <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-                    Sign in to Plane
-                  </h1>
-                  <div className="flex flex-col divide-y divide-custom-border-200">
-                    <div className="pb-7">
-                      <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
-                    </div>
-                    <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
-                      <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
-                      <GithubLoginButton handleSignIn={handleGitHubSignIn} />
+                  {data?.email_password_login && (
+                    <EmailPasswordForm
+                      onSubmit={handlePasswordSignIn}
+                      setIsResettingPassword={setIsResettingPassword}
+                    />
+                  )}
+                  {data?.magic_login && (
+                    <div className="flex flex-col divide-y divide-custom-border-200">
+                      <div className="pb-7">
+                        <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+                      </div>
                     </div>
+                  )}
+                  <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
+                    {data?.google && (
+                      <GoogleLoginButton
+                        clientId={data?.google}
+                        handleSignIn={handleGoogleSignIn}
+                      />
+                    )}
+                    {data?.github && (
+                      <GithubLoginButton
+                        clientId={data?.github}
+                        handleSignIn={handleGitHubSignIn}
+                      />
+                    )}
                   </div>
                 </>
-              ) : (
-                <EmailPasswordForm onSubmit={handlePasswordSignIn} />
               )}
 
-              {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
-                <p className="pt-16 text-custom-text-200 text-sm text-center">
-                  By signing up, you agree to the{" "}
-                  <a
-                    href="https://plane.so/terms-and-conditions"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="font-medium underline"
-                  >
-                    Terms & Conditions
-                  </a>
-                </p>
-              ) : null}
+              <p className="pt-16 text-custom-text-200 text-sm text-center">
+                By signing up, you agree to the{" "}
+                <a
+                  href="https://plane.so/terms-and-conditions"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-medium underline"
+                >
+                  Terms & Conditions
+                </a>
+              </p>
             </div>
           </div>
         </>

web/pages/sign-up.tsx

@@ -1,8 +1,6 @@
-import React, { useEffect, useState } from "react";
-
+import React, { useEffect } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
-
 // next-themes
 import { useTheme } from "next-themes";
 // services
@@ -13,9 +11,7 @@ import useToast from "hooks/use-toast";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // components
-import { EmailPasswordForm } from "components/account";
-// ui
-import { Spinner } from "components/ui";
+import { EmailPasswordForm, EmailSignUpForm } from "components/account";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
@@ -27,8 +23,6 @@ type EmailPasswordFormValues = {
 };
 
 const SignUp: NextPage = () => {
-  const [isLoading, setIsLoading] = useState(true);
-
   const router = useRouter();
 
   const { setToastAlert } = useToast();
@@ -70,18 +64,6 @@ const SignUp: NextPage = () => {
     setTheme("system");
   }, [setTheme]);
 
-  useEffect(() => {
-    if (parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0")) router.push("/");
-    else setIsLoading(false);
-  }, [router]);
-
-  if (isLoading)
-    return (
-      <div className="grid place-items-center h-screen w-full">
-        <Spinner />
-      </div>
-    );
-
   return (
     <DefaultLayout>
       <>
@@ -96,7 +78,8 @@ const SignUp: NextPage = () => {
       </>
       <div className="grid place-items-center h-full w-full overflow-y-auto py-5 px-7">
         <div>
-          <EmailPasswordForm onSubmit={handleSignUp} />
+          <h1 className="text-2xl text-center font-">SignUp on Plane</h1>
+          <EmailSignUpForm onSubmit={handleSignUp} />
         </div>
       </div>
     </DefaultLayout>

web/services/app-config.service.ts

@@ -0,0 +1,30 @@
+// services
+import APIService from "services/api.service";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+export interface IEnvConfig {
+  github: string;
+  google: string;
+  github_app_name: string | null;
+  email_password_login: boolean;
+  magic_login: boolean;
+}
+
+export class AppConfigService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async envConfig(): Promise<IEnvConfig> {
+    return this.get("/api/configs/", {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}