feat: Instance activate page added

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

@@ -12,10 +12,20 @@ export interface EmailPasswordFormValues {
 
 export interface IEmailPasswordForm {
   onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+  buttonText?: string;
+  submittingButtonText?: string;
+  withForgetPassword?: boolean;
+  withSignUpLink?: boolean;
 }
 
 export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
-  const { onSubmit } = props;
+  const {
+    onSubmit,
+    buttonText = "Sign in",
+    submittingButtonText = "Signing in...",
+    withForgetPassword = false,
+    withSignUpLink = false,
+  } = props;
   // router
   const router = useRouter();
   // form info
@@ -82,15 +92,17 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
             )}
           />
         </div>
-        <div className="text-right text-xs">
+        {withForgetPassword && (
-          <button
+          <div className="text-right text-xs">
-            type="button"
+            <button
-            onClick={() => router.push("/accounts/forgot-password")}
+              type="button"
-            className="text-custom-text-200 hover:text-custom-primary-100"
+              onClick={() => router.push("/accounts/forgot-password")}
-          >
+              className="text-custom-text-200 hover:text-custom-primary-100"
-            Forgot your password?
+            >
-          </button>
+              Forgot your password?
-        </div>
+            </button>
+          </div>
+        )}
         <div>
           <Button
             variant="primary"
@@ -100,18 +112,20 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >
-            {isSubmitting ? "Signing in..." : "Sign in"}
+            {isSubmitting ? submittingButtonText : buttonText}
           </Button>
         </div>
-        <div className="text-xs">
+        {withSignUpLink && (
-          <button
+          <div className="text-xs">
-            type="button"
+            <button
-            onClick={() => router.push("/accounts/sign-up")}
+              type="button"
-            className="text-custom-text-200 hover:text-custom-primary-100"
+              onClick={() => router.push("/accounts/sign-up")}
-          >
+              className="text-custom-text-200 hover:text-custom-primary-100"
-            {"Don't have an account? Sign Up"}
+            >
-          </button>
+              {"Don't have an account? Sign Up"}
-        </div>
+            </button>
+          </div>
+        )}
       </form>
     </>
   );

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

@@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, Input } from "@plane/ui";
 // types
-type EmailPasswordFormValues = {
+export type EmailPasswordSignUpFormValues = {
   email: string;
   password?: string;
   confirm_password: string;
@@ -12,7 +12,7 @@ type EmailPasswordFormValues = {
 };
 
 type Props = {
-  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+  onSubmit: (formData: EmailPasswordSignUpFormValues) => Promise<void>;
 };
 
 export const EmailSignUpForm: React.FC<Props> = (props) => {
@@ -23,7 +23,7 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
     control,
     watch,
     formState: { errors, isSubmitting, isValid, isDirty },
-  } = useForm<EmailPasswordFormValues>({
+  } = useForm<EmailPasswordSignUpFormValues>({
     defaultValues: {
       email: "",
       password: "",

web/components/page-views/signin.tsx

@@ -210,7 +210,9 @@ export const SignInView = observer(() => {
               ) : (
                 <>
                   <>
-                    {enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
+                    {enableEmailPassword && (
+                      <EmailPasswordForm onSubmit={handlePasswordSignIn} withForgetPassword withSignUpLink />
+                    )}
                     {data?.magic_login && (
                       <div className="flex flex-col divide-y divide-custom-border-200">
                         <div className="pb-7">

web/components/views/signin.tsx

@@ -149,7 +149,9 @@ export const SignInView = observer(() => {
                 Sign in to Plane
               </h1>
               <>
-                {enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
+                {enableEmailPassword && (
+                  <EmailPasswordForm onSubmit={handlePasswordSignIn} withForgetPassword withSignUpLink />
+                )}
                 {data?.magic_login && (
                   <div className="flex flex-col divide-y divide-custom-border-200">
                     <div className="pb-7">

web/pages/activate/index.tsx

@@ -0,0 +1,58 @@
+import Image from "next/image";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// components
+import { EmailPasswordForm, EmailPasswordFormValues } from "components/account";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+// services
+import { InstanceService } from "services/instance.service";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+const instanceService = new InstanceService();
+
+const ActivateInstancePage = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    instanceService.checkForInstanceStatus().then((response) => {
+      console.log(response);
+    });
+  }, []);
+
+  const handleSignUp = (values: EmailPasswordFormValues) =>
+    instanceService
+      .createInstance(values)
+      .then((response) => {
+        router.push("/");
+      })
+      .catch((error) => {});
+
+  return (
+    <DefaultLayout>
+      <>
+        <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+        <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+          <div className="grid place-items-center bg-custom-background-100">
+            <div className="h-[30px] w-[30px]">
+              <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+            </div>
+          </div>
+        </div>
+      </>
+      <div className="grid place-items-center h-full w-full overflow-y-auto py-5 px-7">
+        <div>
+          <h1 className="text-3xl text-center font-bold">Activate Your Instance</h1>
+          <EmailPasswordForm
+            onSubmit={handleSignUp}
+            buttonText="Activate Instance"
+            submittingButtonText="Activating Instance"
+          />
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+};
+
+export default ActivateInstancePage;

web/services/instance.service.ts

@@ -0,0 +1,30 @@
+import { APIService } from "services/api.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+import Cookies from "js-cookie";
+
+export class InstanceService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async checkForInstanceStatus() {
+    return this.get("/api/licenses/instances/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createInstance(values: any) {
+    return this.post("/api/licenses/instances/", values)
+      .then((response) => {
+        console.log(response);
+        Cookies.set("instance_id", response?.data?.instance_id);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}