chore: new sign-in, sign-up and forgot password workflows (#3415)

* chore: sign up workflow updated * chore: sign in workflow updated * refactor: folder structure * chore: forgot password workflow * refactor: form component props * chore: forgot password popover for instances with smtp unconfigured * chore: updated UX copy * chore: update reset password link * chore: update email placeholder
makeplane · Jan 19, 2024 · 017a8e4 · 017a8e4
1 parent e54b940
commit 017a8e4
Show file tree

Hide file tree

Showing 36 changed files with 1,019 additions and 760 deletions.
diff --git a/apiserver/plane/bgtasks/forgot_password_task.py b/apiserver/plane/bgtasks/forgot_password_task.py
@@ -21,7 +21,7 @@
 def forgot_password(first_name, email, uidb64, token, current_site):
     try:
         relative_link = (
-            f"/accounts/password/?uidb64={uidb64}&token={token}&email={email}"
+            f"/accounts/reset-password/?uidb64={uidb64}&token={token}&email={email}"
         )
         abs_url = str(current_site) + relative_link
 

diff --git a/packages/types/src/app.d.ts b/packages/types/src/app.d.ts
@@ -1,14 +1,14 @@
 export interface IAppConfig {
   email_password_login: boolean;
   file_size_limit: number;
-  google_client_id: string | null;
   github_app_name: string | null;
   github_client_id: string | null;
-  magic_login: boolean;
-  slack_client_id: string | null;
-  posthog_api_key: string | null;
-  posthog_host: string | null;
+  google_client_id: string | null;
   has_openai_configured: boolean;
   has_unsplash_configured: boolean;
   is_smtp_configured: boolean;
+  magic_login: boolean;
+  posthog_api_key: string | null;
+  posthog_host: string | null;
+  slack_client_id: string | null;
 }
diff --git a/space/components/accounts/sign-in-forms/create-password.tsx b/space/components/accounts/sign-in-forms/create-password.tsx
@@ -101,7 +101,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
               onChange={onChange}
               ref={ref}
               hasError={Boolean(errors.email)}
-              placeholder="orville.wright@frstflt.com"
+              placeholder="name@company.com"
               className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
               disabled
             />

diff --git a/space/components/accounts/sign-in-forms/email-form.tsx b/space/components/accounts/sign-in-forms/email-form.tsx
@@ -100,7 +100,7 @@ export const EmailForm: React.FC<Props> = (props) => {
                   onChange={onChange}
                   ref={ref}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                 />
                 {value.length > 0 && (

diff --git a/space/components/accounts/sign-in-forms/optional-set-password.tsx b/space/components/accounts/sign-in-forms/optional-set-password.tsx
@@ -61,7 +61,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
               onChange={onChange}
               ref={ref}
               hasError={Boolean(errors.email)}
-              placeholder="orville.wright@frstflt.com"
+              placeholder="name@company.com"
               className="h-[46px] w-full border border-onboarding-border-100 pr-12 text-onboarding-text-400"
               disabled
             />

diff --git a/space/components/accounts/sign-in-forms/password.tsx b/space/components/accounts/sign-in-forms/password.tsx
@@ -155,7 +155,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                 />
                 {value.length > 0 && (

diff --git a/space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx b/space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
@@ -97,7 +97,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                 />
                 {value.length > 0 && (

diff --git a/space/components/accounts/sign-in-forms/set-password-link.tsx b/space/components/accounts/sign-in-forms/set-password-link.tsx
@@ -87,7 +87,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
                 value={value}
                 onChange={onChange}
                 hasError={Boolean(errors.email)}
-                placeholder="orville.wright@frstflt.com"
+                placeholder="name@company.com"
                 className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
                 disabled
               />

diff --git a/space/components/accounts/sign-in-forms/unique-code.tsx b/space/components/accounts/sign-in-forms/unique-code.tsx
@@ -182,7 +182,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
                   }}
                   ref={ref}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                 />
                 {value.length > 0 && (

diff --git a/space/pages/accounts/password.tsx b/space/pages/accounts/password.tsx
@@ -104,7 +104,7 @@ const HomePage: NextPage = () => {
                     onChange={onChange}
                     ref={ref}
                     hasError={Boolean(errors.email)}
-                    placeholder="orville.wright@frstflt.com"
+                    placeholder="name@company.com"
                     className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
                     disabled
                   />

diff --git a/web/components/account/email-signup-form.tsx b/web/components/account/email-signup-form.tsx
diff --git a/web/components/account/index.ts b/web/components/account/index.ts
@@ -1,5 +1,4 @@
+export * from "./o-auth";
 export * from "./sign-in-forms";
+export * from "./sign-up-forms";
 export * from "./deactivate-account-modal";
-export * from "./github-sign-in";
-export * from "./google-sign-in";
-export * from "./email-signup-form";
diff --git a/web/components/account/github-sign-in.tsx → ...ponents/account/o-auth/github-sign-in.tsx b/web/components/account/github-sign-in.tsx → ...ponents/account/o-auth/github-sign-in.tsx
@@ -12,10 +12,11 @@ import githubDarkModeImage from "/public/logos/github-dark.svg";
 type Props = {
   handleSignIn: React.Dispatch<string>;
   clientId: string;
+  type: "sign_in" | "sign_up";
 };
 
 export const GitHubSignInButton: FC<Props> = (props) => {
-  const { handleSignIn, clientId } = props;
+  const { handleSignIn, clientId, type } = props;
   // states
   const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
   const [gitCode, setGitCode] = useState<null | string>(null);
@@ -53,7 +54,7 @@ export const GitHubSignInButton: FC<Props> = (props) => {
             width={20}
             alt="GitHub Logo"
           />
-          <span className="text-onboarding-text-200">Sign-in with GitHub</span>
+          <span className="text-onboarding-text-200">{type === "sign_in" ? "Sign-in" : "Sign-up"} with GitHub</span>
         </button>
       </Link>
     </div>

diff --git a/web/components/account/google-sign-in.tsx → ...ponents/account/o-auth/google-sign-in.tsx b/web/components/account/google-sign-in.tsx → ...ponents/account/o-auth/google-sign-in.tsx
@@ -4,10 +4,11 @@ import Script from "next/script";
 type Props = {
   handleSignIn: React.Dispatch<any>;
   clientId: string;
+  type: "sign_in" | "sign_up";
 };
 
 export const GoogleSignInButton: FC<Props> = (props) => {
-  const { handleSignIn, clientId } = props;
+  const { handleSignIn, clientId, type } = props;
   // refs
   const googleSignInButton = useRef<HTMLDivElement>(null);
   // states
@@ -29,7 +30,7 @@ export const GoogleSignInButton: FC<Props> = (props) => {
           theme: "outline",
           size: "large",
           logo_alignment: "center",
-          text: "signin_with",
+          text: type === "sign_in" ? "signin_with" : "signup_with",
           width: 384,
         } as GsiButtonConfiguration // customization attributes
       );
@@ -40,7 +41,7 @@ export const GoogleSignInButton: FC<Props> = (props) => {
     window?.google?.accounts.id.prompt(); // also display the One Tap dialog
 
     setGsiScriptLoaded(true);
-  }, [handleSignIn, gsiScriptLoaded, clientId]);
+  }, [handleSignIn, gsiScriptLoaded, clientId, type]);
 
   useEffect(() => {
     if (window?.google?.accounts?.id) {

diff --git a/web/components/account/o-auth/index.ts b/web/components/account/o-auth/index.ts
@@ -0,0 +1,3 @@
+export * from "./github-sign-in";
+export * from "./google-sign-in";
+export * from "./o-auth-options";
diff --git a/.../account/sign-in-forms/o-auth-options.tsx → ...ponents/account/o-auth/o-auth-options.tsx b/.../account/sign-in-forms/o-auth-options.tsx → ...ponents/account/o-auth/o-auth-options.tsx
@@ -9,13 +9,14 @@ import { GitHubSignInButton, GoogleSignInButton } from "components/account";
 
 type Props = {
   handleSignInRedirection: () => Promise<void>;
+  type: "sign_in" | "sign_up";
 };
 
 // services
 const authService = new AuthService();
 
 export const OAuthOptions: React.FC<Props> = observer((props) => {
-  const { handleSignInRedirection } = props;
+  const { handleSignInRedirection, type } = props;
   // toast alert
   const { setToastAlert } = useToast();
   // mobx store
@@ -72,12 +73,14 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
         <p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">Or continue with</p>
         <hr className="w-full border-onboarding-border-100" />
       </div>
-      <div className="mx-auto mt-7 space-y-4 overflow-hidden sm:w-96">
+      <div className="mx-auto mt-7 grid grid-cols-2 gap-4 overflow-hidden sm:w-96">
         {envConfig?.google_client_id && (
-          <GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
+          <div className="h-[42px] flex items-center !overflow-hidden">
+            <GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} type={type} />
+          </div>
         )}
         {envConfig?.github_client_id && (
-          <GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
+          <GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} type={type} />
         )}
       </div>
     </>