learnhouse/apps/web/app/install/steps/account_creation.tsx

'use client'
import FormLayout, {
  ButtonBlack,
  FormField,
  FormLabelAndMessage,
  Input,
} from '@components/Objects/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { getAPIUrl } from '@services/config/config'
import { createNewUserInstall, updateInstall } from '@services/install/install'
import { swrFetcher } from '@services/utils/ts/requests'
import { useFormik } from 'formik'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { useRouter } from 'next/navigation'
import React from 'react'
import { BarLoader } from 'react-spinners'
import useSWR from 'swr'

const validate = (values: any) => {
  const errors: any = {}

  if (!values.email) {
    errors.email = 'Required'
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
    errors.email = 'Invalid email address'
  }

  if (!values.password) {
    errors.password = 'Required'
  } else if (values.password.length < 8) {
    errors.password = 'Password must be at least 8 characters'
  }

  if (!values.confirmPassword) {
    errors.confirmPassword = 'Required'
  } else if (values.confirmPassword !== values.password) {
    errors.confirmPassword = 'Passwords must match'
  }

  if (!values.username) {
    errors.username = 'Required'
  } else if (values.username.length < 3) {
    errors.username = 'Username must be at least 3 characters'
  }

  return errors
}

function AccountCreation() {
  const [isSubmitting, setIsSubmitting] = React.useState(false)
  const session = useLHSession() as any;
  const access_token = session?.data?.tokens?.access_token;
  const {
    data: install,
    error: error,
    isLoading,
  } = useSWR(`${getAPIUrl()}install/latest`, (url) => swrFetcher(url, access_token))
  const router = useRouter()
  const formik = useFormik({
    initialValues: {
      org_slug: '',
      email: '',
      password: '',
      confirmPassword: '',
      username: '',
    },
    validate,
    onSubmit: async (values) => {
      let finalvalueswithoutpasswords = {
        ...values,
        password: '',
        confirmPassword: '',
        org_slug: install.data[1].slug,
      }
      let install_data_without_passwords = {
        ...install.data,
        3: finalvalueswithoutpasswords,
      }
      await updateInstall({ ...install_data_without_passwords }, 4)
      await createNewUserInstall(
        {
          email: values.email,
          username: values.username,
          password: values.password,
        },
        install.data[1].slug
      )

      // await 2 seconds
      setTimeout(() => {
        setIsSubmitting(false)
      }, 2000)

      router.push('/install?step=4')
    },
  })

  return (
    <div>
      <FormLayout onSubmit={formik.handleSubmit}>
        <FormField name="email">
          <FormLabelAndMessage label="Email" message={formik.errors.email} />
          <Form.Control asChild>
            <Input
              onChange={formik.handleChange}
              value={formik.values.email}
              type="email"
              required
            />
          </Form.Control>
        </FormField>
        {/* for password  */}
        <FormField name="password">
          <FormLabelAndMessage
            label="Password"
            message={formik.errors.password}
          />

          <Form.Control asChild>
            <Input
              onChange={formik.handleChange}
              value={formik.values.password}
              type="password"
              required
            />
          </Form.Control>
        </FormField>
        {/* for confirm password  */}
        <FormField name="confirmPassword">
          <FormLabelAndMessage
            label="Confirm Password"
            message={formik.errors.confirmPassword}
          />

          <Form.Control asChild>
            <Input
              onChange={formik.handleChange}
              value={formik.values.confirmPassword}
              type="password"
              required
            />
          </Form.Control>
        </FormField>
        {/* for username  */}
        <FormField name="username">
          <FormLabelAndMessage
            label="Username"
            message={formik.errors.username}
          />

          <Form.Control asChild>
            <Input
              onChange={formik.handleChange}
              value={formik.values.username}
              type="text"
              required
            />
          </Form.Control>
        </FormField>

        <div className="flex flex-row-reverse py-4">
          <Form.Submit asChild>
            <ButtonBlack type="submit" css={{ marginTop: 10 }}>
              {isSubmitting ? (
                <BarLoader
                  cssOverride={{ borderRadius: 60 }}
                  width={60}
                  color="#ffffff"
                />
              ) : (
                'Create Admin Account'
              )}
            </ButtonBlack>
          </Form.Submit>
        </div>
      </FormLayout>
    </div>
  )
}

export default AccountCreation