chore: updated plane deploy sign-in workflows for cloud and self-hosted instances (#2999)

* chore: deploy onboarding workflow

* chore: sign in workflow improvement

* fix: build error

web/components/account/sign-in-forms/create-password.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 // services
@@ -41,6 +41,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
     control,
     formState: { errors, isSubmitting, isValid },
     handleSubmit,
+    setFocus,
   } = useForm<TCreatePasswordFormValues>({
     defaultValues: {
       ...defaultValues,
@@ -74,6 +75,10 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
       );
   };
 
+  useEffect(() => {
+    setFocus("password");
+  }, [setFocus]);
+
   return (
     <>
       <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">

web/components/account/sign-in-forms/email-form.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
@@ -34,6 +34,7 @@ export const EmailForm: React.FC<Props> = (props) => {
     control,
     formState: { errors, isSubmitting, isValid },
     handleSubmit,
+    setFocus,
   } = useForm<TEmailFormValues>({
     defaultValues: {
       email: "",
@@ -67,6 +68,10 @@ export const EmailForm: React.FC<Props> = (props) => {
       );
   };
 
+  useEffect(() => {
+    setFocus("email");
+  }, [setFocus]);
+
   return (
     <>
       <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">

web/components/account/sign-in-forms/password.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
@@ -48,6 +48,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
     getValues,
     handleSubmit,
     setError,
+    setFocus,
   } = useForm<TPasswordFormValues>({
     defaultValues: {
       ...defaultValues,
@@ -127,6 +128,10 @@ export const PasswordForm: React.FC<Props> = (props) => {
       .finally(() => setIsSendingUniqueCode(false));
   };
 
+  useEffect(() => {
+    setFocus("password");
+  }, [setFocus]);
+
   return (
     <>
       <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">

web/components/account/sign-in-forms/self-hosted-sign-in.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
@@ -40,6 +40,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
     control,
     formState: { dirtyFields, errors, isSubmitting },
     handleSubmit,
+    setFocus,
   } = useForm<TPasswordFormValues>({
     defaultValues: {
       ...defaultValues,
@@ -69,6 +70,10 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
       );
   };
 
+  useEffect(() => {
+    setFocus("email");
+  }, [setFocus]);
+
   return (
     <>
       <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">

web/components/account/sign-in-forms/unique-code.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { CornerDownLeft, XCircle } from "lucide-react";
@@ -64,6 +64,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
     getValues,
     handleSubmit,
     reset,
+    setFocus,
   } = useForm<TUniqueCodeFormValues>({
     defaultValues: {
       ...defaultValues,
@@ -146,6 +147,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
   const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
   const hasEmailChanged = dirtyFields.email;
 
+  useEffect(() => {
+    setFocus("token");
+  }, [setFocus]);
   return (
     <>
       <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">