login.tsx

import React, { useState } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { EMAIL_REGEX } from '@/constants/validation'
import logo from '@/public/assets/images/largelabs_footer_logo.png'
import { SupabaseClient } from '@supabase/supabase-js'
import { SubmitHandler, useForm } from 'react-hook-form'
import Spinner from '@/components/Spinner'

export interface LoginProps {
  supabaseClient: SupabaseClient
  redirectTo?: string
}

type LoginFormValues = {
  email: string
}
export default function login({ supabaseClient, redirectTo }: LoginProps) {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormValues>()
  const [loading, setLoading] = useState(false)
  const [authError, setAuthError] = useState('')

  const onSubmit: SubmitHandler<LoginFormValues> = async (data, e) => {
    e && e.preventDefault()
    setLoading(true)
    const { error: signInError, data: ssoData } =
      await supabaseClient.auth.signInWithSSO({
        domain: data.email.split('@').pop()!,
      })
    const { url } = ssoData || {}
    if (url) window.location.href = url
    if (signInError) setAuthError(signInError.message)
    setLoading(false)
  }
  return (
    <section className=" bg-accent-100 ">
      <div className="mx-auto flex flex-col items-center justify-center px-6 py-8 md:h-screen lg:py-0">
        <a
          href="#"
          className="mb-6 flex items-center text-2xl font-semibold text-gray-900"
        >
          <Image className="mr-2 h-8 w-8" src={logo} alt="logo" />
          <span className="text-white">Largelabs</span>
        </a>
        <div className=" w-full rounded-lg bg-white shadow sm:max-w-md md:mt-0 xl:p-0">
          <div className="space-y-4 p-6 sm:p-8 md:space-y-6">
            <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl">
              Sign in to your account
            </h1>
            <form
              className="space-y-4 md:space-y-6"
              onSubmit={handleSubmit(onSubmit)}
            >
              <div>
                <label
                  htmlFor="email"
                  className="mb-2 block text-sm font-medium text-gray-900"
                >
                  Your email
                </label>
                <input
                  type="email"
                  className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-gray-900 focus:border-gradient-100 focus:ring-gradient-100 sm:text-sm"
                  placeholder="name@company.com"
                  {...register('email', {
                    required: {
                      value: true,
                      message: 'This field is required',
                    },
                    pattern: {
                      value: EMAIL_REGEX,
                      message: 'Invalid email address',
                    },
                  })}
                />
                {errors.email && errors.email.message && (
                  <span
                    className="mt-1 block font-semibold text-red-600"
                    role="alert"
                  >
                    {errors.email.message as string}
                  </span>
                )}
              </div>

              <button
                type="submit"
                className=" w-full rounded-lg bg-gradient-100 px-5 py-2.5 text-center text-sm font-medium text-black hover:bg-buttonBg-100 hover:text-white  "
              >
                {loading ? <Spinner /> : 'Login'}
              </button>
              <p className="text-sm font-light text-gray-500 ">
                Don’t have an account yet?{' '}
                <Link
                  href="#"
                  className="text-primary-600 dark:text-primary-500 font-medium hover:underline"
                >
                  contact admin
                </Link>
              </p>
            </form>
            {authError && (
              <span
                className="mt-1 block font-semibold text-red-600"
                role="alert"
              >
                {authError}
              </span>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}