Add form for adding new domains (#30)

* Add layout to implement addition of new domains

* Refactor code

* Add page to setup domain name

* Update layout of add domain page

* Use react-hook-form in add domain page

* Remove unnecessary code

* Handle review change

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/projects/project/settings/Domains.tsx

@@ -12,7 +12,7 @@ const Domains = () => {
     <>
       <div className="flex justify-between p-2">
         <Typography variant="h2">Domain</Typography>
-        <Link to={`domain/add`}>
+        <Link to="domain/add">
           <Button color="blue" variant="outlined" className="rounded-full">
             <i>^</i> Add domain
           </Button>

packages/frontend/src/components/projects/project/settings/SetupDomain.tsx

@@ -1,32 +1,90 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Typography, Button, Input } from '@material-tailwind/react';
+import { useForm } from 'react-hook-form';
+import {
+  Radio,
+  Typography,
+  Button,
+  Input,
+  Alert,
+} from '@material-tailwind/react';
 
 const SetupDomain = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { isValid },
+    watch,
+  } = useForm({
+    defaultValues: {
+      domainName: '',
+      isWWW: 'false',
+    },
+  });
+
   return (
-    <div className="flex flex-col gap-2">
+    <form
+      onSubmit={handleSubmit(() => {})}
+      className="flex flex-col gap-6 w-full"
+    >
       <div>
-        <Typography variant="h3">Setup domain name</Typography>
+        <Typography variant="h5">Setup domain name</Typography>
         <Typography variant="small">
           Add your domain and setup redirects
         </Typography>
       </div>
-      <div>
-        <Typography variant="lead">Domain name</Typography>
+
+      <div className="w-auto">
+        <Typography variant="small">Domain name</Typography>
         <Input
           type="text"
           variant="outlined"
           size="lg"
-          className="border-2 rounded w-full"
-          crossOrigin={''}
+          crossOrigin={undefined}
+          className="w-full"
+          {...register('domainName', {
+            required: true,
+          })}
         />
       </div>
-      <Button className="w-fit" color="blue">
-        <Link to={`config`}>
+
+      {isValid && (
+        <div>
+          <Typography>Primary domain</Typography>
+          <div className="flex flex-col gap-3">
+            <Radio
+              label={watch('domainName')}
+              crossOrigin={undefined}
+              {...register('isWWW')}
+              value="false"
+              type="radio"
+            />
+            <Radio
+              label={`www.${watch('domainName')}`}
+              crossOrigin={undefined}
+              {...register('isWWW')}
+              value="true"
+              type="radio"
+            />
+          </div>
+          <Alert color="blue">
+            <i>^</i> For simplicity, we’ll redirect the www variant to{' '}
+            {watch('domainName')}. Redirect preferences can be changed later.
+          </Alert>
+        </div>
+      )}
+
+      <Button
+        disabled={!isValid}
+        className="w-fit"
+        color={isValid ? 'blue' : 'gray'}
+        type="submit"
+      >
+        <Link to="config">
           <i>^</i> Next
         </Link>
       </Button>
-    </div>
+    </form>
   );
 };
 

packages/frontend/src/pages/projects/id/domain/Add.tsx

@@ -53,13 +53,9 @@ const AddDomain = () => {
           </div>
         </div>
 
-        <div className="flex justify-between">
-          <div>
-            <Stepper activeStep={activeStep} stepperValues={stepperValues} />
-          </div>
-          <div>
-            <SetupDomain />
-          </div>
+        <div className="flex justify-start gap-3">
+          <Stepper activeStep={activeStep} stepperValues={stepperValues} />
+          <SetupDomain />
         </div>
       </div>
     </div>