From ebe6471e766b0f6581820cbade4c21152185e521 Mon Sep 17 00:00:00 2001 From: Jigar Patel Date: Thu, 22 Aug 2024 15:06:17 -0400 Subject: [PATCH 01/82] added server-access and server-form files --- apps/provider-console/package.json | 1 + .../components/become-provider/Stepper.tsx | 92 +++++++++ .../become-provider/server-access.tsx | 43 ++++ .../become-provider/server-form.tsx | 191 ++++++++++++++++++ .../src/components/layout/Layout.tsx | 2 +- .../src/pages/become-provider/index.tsx | 25 +++ package-lock.json | 18 +- 7 files changed, 362 insertions(+), 10 deletions(-) create mode 100644 apps/provider-console/src/components/become-provider/Stepper.tsx create mode 100644 apps/provider-console/src/components/become-provider/server-access.tsx create mode 100644 apps/provider-console/src/components/become-provider/server-form.tsx create mode 100644 apps/provider-console/src/pages/become-provider/index.tsx diff --git a/apps/provider-console/package.json b/apps/provider-console/package.json index 95843bf1d..e6a9b3e47 100644 --- a/apps/provider-console/package.json +++ b/apps/provider-console/package.json @@ -25,6 +25,7 @@ "next": "14.2.4", "react": "^18", "react-dom": "^18", + "react-hook-form": "^7.52.2", "react-query": "^3.39.3", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", diff --git a/apps/provider-console/src/components/become-provider/Stepper.tsx b/apps/provider-console/src/components/become-provider/Stepper.tsx new file mode 100644 index 000000000..740ca7f16 --- /dev/null +++ b/apps/provider-console/src/components/become-provider/Stepper.tsx @@ -0,0 +1,92 @@ +"use client"; +import React from "react"; +import { Check, InfoCircleSolid } from "iconoir-react"; +import { useRouter } from "next/navigation"; + +import { cn } from "@src/utils/styleUtils"; +import { UrlService } from "@src/utils/urlUtils"; + +enum RouteStepKeys { + chooseTemplate = "choose-template", + editDeployment = "edit-deployment", + createLeases = "create-leases" +} + +interface Step { + id: number; + name: string; +} +const steps: Step[] = [ + { id: 0, name: "1. Server Access" }, + { id: 1, name: "2. Import Wallet" }, + { id: 2, name: "3. Provider Config" }, + { id: 3, name: "4. Provider Pricing" }, + { id: 4, name: "5. Setting up Provider" } +]; + +export const CustomizedSteppers = ({ activeStep }: React.PropsWithChildren<{ activeStep: number }>) => { + const router = useRouter(); + + function onChooseTemplateClick(ev: React.MouseEvent, step: Step) { + ev.preventDefault(); + + // if (step.id === 0) { + // router.replace(UrlService.newDeployment({ step: RouteStepKeys.chooseTemplate })); + // } + } + + return ( + + ); +}; diff --git a/apps/provider-console/src/components/become-provider/server-access.tsx b/apps/provider-console/src/components/become-provider/server-access.tsx new file mode 100644 index 000000000..a2d33ebe4 --- /dev/null +++ b/apps/provider-console/src/components/become-provider/server-access.tsx @@ -0,0 +1,43 @@ +"use client"; +import { Button, Input, Separator } from "@akashnetwork/ui/components"; +import React, { useState } from "react"; +import { ServerForm } from "./server-form"; + +export const ServerAccess: React.FunctionComponent = () => { + const [numberOfServer, setNumberOfServer] = useState(1); + const [currentServer, setCurrentServer] = useState(0); + + const nextServerSetup = (nextServerNumber: number) => { + setCurrentServer(nextServerNumber); + }; + + const renderForms = () => { + const forms: any = []; + for (let i = 0; i < numberOfServer; i++) { + forms.push(); + } + + return forms; + }; + return ( +
+ {currentServer < 1 && ( +
+
+

Specify Number of Servers

+

Tell us how many servers you'll be using in your setup.

+
+ setNumberOfServer(event.target.value)} /> +
+ +
+
+ +
+
+ )} + + {currentServer > 0 && renderForms()} +
+ ); +}; diff --git a/apps/provider-console/src/components/become-provider/server-form.tsx b/apps/provider-console/src/components/become-provider/server-form.tsx new file mode 100644 index 000000000..dbc2224b6 --- /dev/null +++ b/apps/provider-console/src/components/become-provider/server-form.tsx @@ -0,0 +1,191 @@ +"use client"; +import { + Button, + Checkbox, + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, + Input, + Popover, + PopoverContent, + PopoverTrigger, + Separator, + Tabs, + TabsContent, + TabsList, + TabsTrigger +} from "@akashnetwork/ui/components"; +import { cn } from "@akashnetwork/ui/utils"; +import React from "react"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; + +const accountFormSchema = z.object({ + ip: z + .string() + .min(2, { + message: "Name must be at least 2 characters." + }) + .max(30, { + message: "Name must not be longer than 30 characters." + }), + dob: z.date({ + required_error: "A date of birth is required." + }), + language: z.string({ + required_error: "Please select a language." + }), + port: z.string(), + username: z.string(), + password: z.string(), + file: z.instanceof(File) +}); + +type AccountFormValues = z.infer; + +// This can come from your database or API. +const defaultValues: Partial = { + // name: "Your name", + // dob: new Date("2023-01-23"), +}; +export const ServerForm: React.FunctionComponent = () => { + const form = useForm({ + // resolver: zodResolver(accountFormSchema), + defaultValues + }); + return ( +
+
+
+

Control Plane Machine Access

+

Enter the required details for you control plane setup

+
+
+ +
+
+
+ +
+
+ ( + + Public IP + + + + + + )} + /> +
+
+ ( + + Port + + + + + + )} + /> +
+
+
+
+ ( + + Username + + + + + + )} + /> +
+
+
+

+ Choose how you would like to provider your credentials +

+
+ + + + Password + + + File + + + + ( + + Password + + + + + + )} + /> + + + ( + + Password + + + + + + )} + /> + + +
+
+
+ +
+ +
+
+

Heads up!

+

You can apply information from Control Plain 1 to all remaining nodes by checking the option below.

+
+ + +
+
+
+
+ +
+
+
+ ); +}; diff --git a/apps/provider-console/src/components/layout/Layout.tsx b/apps/provider-console/src/components/layout/Layout.tsx index f6f604a1b..1abadd7bf 100644 --- a/apps/provider-console/src/components/layout/Layout.tsx +++ b/apps/provider-console/src/components/layout/Layout.tsx @@ -86,7 +86,7 @@ const LayoutApp: React.FunctionComponent = ({ children, isLoading, isUsin return ( <> -
+