@sikka/hawa 0.2.14-beta → 0.2.17-beta

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -1,101 +0,0 @@
-import React, { FC } from "react"
-import { Controller, useForm } from "react-hook-form"
-import { HawaTextField } from "../../elements"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type ResetPasswordType = {
-  handleResetPassword: () => void
-  handleRouteToSignUp: () => void
-  sent: any
-  texts?: {
-    emailLabel: string
-    emailPlaceholder: string
-    emailRequiredText: string
-    emailInvalidText: string
-    emailSentText: string
-    resetPassword: string
-    signUpText: string
-    dontHaveAccount: string
-  }
-  headless?: boolean
-  direction?: "rtl" | "ltr"
-}
-
-export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    register,
-    control,
-  } = methods
-  return (
-    <Card dir={props.direction}>
-      {!props.sent ? (
-        <>
-          {!props.headless && (
-            <CardHeader>
-              <CardTitle>Reset Password</CardTitle>
-              <CardDescription>
-                Enter your email to reset your account password
-              </CardDescription>
-            </CardHeader>
-          )}
-          <form onSubmit={handleSubmit(props.handleResetPassword)}>
-            <CardContent headless={props.headless}>
-              <Controller
-                control={control}
-                name="email"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    type="text"
-                    label={props.texts?.emailLabel}
-                    helpertext={errors.email?.message}
-                    placeholder={props.texts?.emailPlaceholder}
-                    {...field}
-                    value={field.value ?? ""}
-                  />
-                )}
-                rules={{
-                  required: props.texts?.emailRequiredText,
-                  pattern: {
-                    value:
-                      /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                    message: props.texts?.emailInvalidText,
-                  },
-                }}
-              />
-              <div className="pb-2 text-start text-sm dark:text-gray-300">
-                {props.texts?.dontHaveAccount ?? "Don't have an account? "}
-                <span
-                  onClick={props.handleRouteToSignUp}
-                  className="clickable-link"
-                >
-                  {props.texts?.signUpText ?? "Sign Up"}
-                </span>
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button type="submit" className="w-full">
-                {props.texts?.resetPassword}
-              </Button>
-            </CardFooter>
-          </form>
-        </>
-      ) : (
-        <CardContent headless>
-          <div className="text-center">{props.texts?.emailSentText}</div>
-        </CardContent>
-      )}
-    </Card>
-  )
-}

package/src/blocks/AuthForms/SignInBlock.tsx

@@ -1,58 +0,0 @@
-import { Icons } from "../../elements/Icons"
-import { Button } from "../../elements/Button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../elements/Card"
-import { Input } from "../../elements/Input"
-import { Label } from "../../elements/Label"
-
-export function SignInBlock() {
-  return (
-    <Card>
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl">Create an account</CardTitle>
-        <CardDescription>
-          Enter your email below to create your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="grid grid-cols-2 gap-6">
-          <Button variant="outline">
-            <Icons.gitHub className="mr-2 h-4 w-4" />
-            Github
-          </Button>
-          <Button variant="outline">
-            <Icons.google className="mr-2 h-4 w-4" />
-            Google
-          </Button>
-        </div>
-        <div className="relative">
-          <div className="absolute inset-0 flex items-center">
-            <span className="w-full border-t" />
-          </div>
-          <div className="relative flex justify-center text-xs uppercase">
-            <span className="bg-background px-2 text-muted-foreground">
-              Or continue with
-            </span>
-          </div>
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="m@example.com" />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" />
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Create account</Button>
-      </CardFooter>
-    </Card>
-  )
-}

package/src/blocks/AuthForms/SignInForm.tsx

@@ -1,271 +0,0 @@
-import React, { FC } from "react"
-import { Controller, useForm } from "react-hook-form"
-import {
-  HawaTextField,
-  HawaAlert,
-  HawaPhoneInput,
-  InterfaceSettings,
-  HawaLoading,
-} from "../../elements"
-import { Card, CardContent, CardFooter } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-import { Icons } from "../../elements/Icons"
-import { cn } from "../../util"
-
-type SignInFormTypes = {
-  texts?: {
-    emailLabel?: string
-    emailPlaceholder?: string
-    emailRequiredText?: string
-    emailInvalidText?: string
-    usernameLabel?: string
-    usernamePlaceholder?: string
-    usernameRequired?: string
-    phoneRequiredText?: string
-    passwordLabel?: string
-    passwordPlaceholder?: string
-    passwordRequiredText?: string
-    forgotPasswordText?: string
-    newUserText?: string
-    createAccount?: string
-    signInText?: string
-    signInViaGoogleLabel?: string
-    signInViaGithubLabel?: string
-    signInViaTwitterLabel?: string
-  }
-  handleLanguage?: () => void
-  currentLanguage?: any
-  handleColorMode?: () => void
-  currentColorMode?: any
-  logosOnly?: boolean
-  direction?: "rtl" | "ltr"
-  showError?: any
-  errorTitle?: string
-  errorText?: string
-  signInType?: "email" | "username" | "phone"
-  withoutResetPassword?: boolean
-  withoutSignUp?: boolean
-  /**
-   *show spinner if true
-   */
-  isLoading?: any
-
-  isGoogleLoading?: boolean
-  isTwitterLoading?: boolean
-  isGithubLoading?: boolean
-
-  viaGoogle?: boolean
-  viaGithub?: boolean
-  viaTwitter?: boolean
-  /**
-   * Handle the sign in .
-   */
-  handleSignIn?: (e: any) => void
-  /**
-   * Handle routing to sign up page
-   */
-  handleRouteToSignUp?: () => void
-  handleForgotPassword?: () => void
-  handleGoogleSignIn?: () => void
-  handleGithubSignIn?: () => void
-  handleTwitterSignIn?: () => void
-}
-
-export const SignInForm: FC<SignInFormTypes> = (props) => {
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = useForm()
-
-  return (
-    <div className="flex flex-col gap-4">
-      <Card dir={props.direction}>
-        <CardContent headless>
-          <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>
-            {props.showError && (
-              <HawaAlert
-                title={props.errorTitle}
-                text={props.errorText}
-                severity="error"
-              />
-            )}
-            {props.signInType === "email" ? (
-              <Controller
-                control={control}
-                name="email"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    type="text"
-                    autoComplete="email"
-                    label={props.texts.emailLabel}
-                    helpertext={errors.email?.message}
-                    placeholder={props.texts.emailPlaceholder}
-                    value={field.value ?? ""}
-                    onChange={field.onChange}
-                  />
-                )}
-                rules={{
-                  required: props.texts.emailRequiredText,
-                  pattern: {
-                    value:
-                      /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                    message: props.texts.emailInvalidText,
-                  },
-                }}
-              />
-            ) : props.signInType === "username" ? (
-              <Controller
-                control={control}
-                name="username"
-                render={({ field }) => {
-                  return (
-                    <HawaTextField
-                      width="full"
-                      type="text"
-                      autoComplete="username"
-                      label={props.texts.usernameLabel}
-                      helpertext={errors.username?.message}
-                      placeholder={props.texts.usernamePlaceholder}
-                      onChange={field.onChange}
-                      value={field.value ?? ""}
-                    />
-                  )
-                }}
-                rules={{
-                  required: props.texts.usernameRequired,
-                }}
-              />
-            ) : (
-              <Controller
-                control={control}
-                name="phone"
-                render={({ field }) => <HawaPhoneInput label="Phone number" />}
-                rules={{ required: props.texts.phoneRequiredText }}
-              />
-            )}
-            {props.signInType !== "phone" && (
-              <>
-                <Controller
-                  control={control}
-                  name="password"
-                  render={({ field }) => (
-                    <HawaTextField
-                      width="full"
-                      autoComplete="current-password"
-                      type="password"
-                      label={props.texts.passwordLabel}
-                      placeholder={props.texts.passwordPlaceholder}
-                      helpertext={errors.password?.message}
-                      onChange={field.onChange}
-                      value={field.value ?? ""}
-                    />
-                  )}
-                  rules={{
-                    required: props.texts.passwordRequiredText,
-                    minLength: 5,
-                  }}
-                />
-                {!props.withoutResetPassword && (
-                  <div
-                    onClick={props.handleForgotPassword}
-                    className="mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
-                  >
-                    {props.texts.forgotPasswordText}
-                  </div>
-                )}
-              </>
-            )}
-
-            <Button
-              className="mt-4 w-full"
-              // disabled={
-              //   props.isGithubLoading ||
-              //   props.isGoogleLoading ||
-              //   props.isTwitterLoading
-              // }
-              isLoading={props.isLoading}
-            >
-              {props.texts.signInText}
-            </Button>
-            {!props.withoutSignUp && (
-              <div className="p-3 text-center text-sm font-normal dark:text-gray-300">
-                {props.texts.newUserText}{" "}
-                <span
-                  onClick={props.handleRouteToSignUp}
-                  className="clickable-link"
-                >
-                  {props.texts.createAccount}
-                </span>
-              </div>
-            )}
-          </form>
-        </CardContent>
-
-        {/* 3rd Party Sign Auth Buttons */}
-        {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
-          <CardFooter
-            className={cn(
-              props.logosOnly
-                ? "flex flex-row justify-center gap-2"
-                : "grid grid-cols-1 gap-2"
-            )}
-          >
-            {props.viaGoogle && (
-              <Button
-                // isLoading={props.isGoogleLoading}
-                className="flex flex-row items-center gap-2"
-                variant="outline"
-                onClick={props.handleGoogleSignIn}
-              >
-                {props.isGoogleLoading ? (
-                  <HawaLoading size="button" />
-                ) : (
-                  <Icons.google className="h-4 w-4" />
-                )}
-                {!props.logosOnly && props.texts.signInViaGoogleLabel}
-              </Button>
-            )}
-            {props.viaGithub && (
-              <Button
-                // isLoading={props.isGithubLoading}
-                className="flex flex-row items-center gap-2"
-                variant="outline"
-                onClick={props.handleGithubSignIn}
-              >
-                {props.isGithubLoading ? (
-                  <HawaLoading size="button" />
-                ) : (
-                  <Icons.gitHub className="h-4 w-4" />
-                )}
-                {!props.logosOnly && props.texts.signInViaGithubLabel}
-              </Button>
-            )}
-            {props.viaTwitter && (
-              <Button
-                // isLoading={props.isTwitterLoading}
-                className="flex flex-row items-center gap-2"
-                variant="outline"
-                onClick={props.handleTwitterSignIn}
-              >
-                {props.isTwitterLoading ? (
-                  <HawaLoading size="button" />
-                ) : (
-                  <Icons.twitter className="h-4 w-4" />
-                )}{" "}
-                {!props.logosOnly && props.texts.signInViaTwitterLabel}
-              </Button>
-            )}
-          </CardFooter>
-        ) : null}
-      </Card>
-      <InterfaceSettings
-        currentColorMode={props.currentColorMode}
-        currentLanguage={props.currentLanguage}
-        handleColorMode={props.handleColorMode}
-        handleLanguage={props.handleLanguage}
-      />
-    </div>
-  )
-}

package/src/blocks/AuthForms/SignInPhone.tsx

@@ -1,160 +0,0 @@
-import React, { useState, FC } from "react"
-import { Controller, useForm } from "react-hook-form"
-import { HawaPhoneInput, HawaPinInput } from "../../elements"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-import { cn } from "../../util"
-
-type SignInPhoneTypes = {
-  value: any
-  onSubmit: any
-  country: any
-  label: any
-  handlePhoneChange: any
-  phoneRequiredText: any
-  SignInButtonText: any
-  handleContinue: any
-  handleConfirm: any
-  loadingContinue?: boolean
-  loadingConfirm?: boolean
-  confirmationStage?: boolean
-  texts?: {
-    didntGetCode?: string
-    resendCode?: string
-    cancel?: string
-    confirm?: string
-    continue?: string
-  }
-}
-
-export const SignInPhone: FC<SignInPhoneTypes> = (props) => {
-  const [pins, setPins] = useState(null)
-
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-  const [resendTimer, setResendTimer] = useState(null)
-  const [remainingTime, setRemainingTime] = useState(0)
-  const [showResendTimer, setShowResendTimer] = useState(false)
-
-  const [userPhone, setUserPhone] = useState("")
-  const [phoneConfirm, setPhoneConfirm] = useState(props.confirmationStage)
-
-  const startResendTimer = () => {
-    // Clear any existing timer
-    clearTimeout(resendTimer)
-
-    // Set the timer duration (e.g., 60 seconds)
-    const timerDuration = 60
-    setRemainingTime(timerDuration)
-    setShowResendTimer(true)
-
-    const newTimer = setInterval(() => {
-      setRemainingTime((prevTime) => {
-        if (prevTime > 0) {
-          return prevTime - 1;
-        } else {
-          clearInterval(newTimer); // Stop the timer when it reaches zero
-          setShowResendTimer(false);
-          return 0;
-        }
-      });
-    }, 1000);
-
-    // Update the state with the new timer
-    setResendTimer(newTimer)
-
-    // Add logic to resend OTP here if needed
-  }
-
-  return (
-    <Card>
-      <CardContent className="transition-all" headless>
-        {phoneConfirm ? (
-          <form
-            onSubmit={(e) => {
-              e.preventDefault()
-              if (pins) {
-                props.handleConfirm(pins)
-              }
-            }}
-          >
-            <HawaPinInput width="full" digits={6} getPins={(e) => setPins(e)} />
-            <div className=" py-2 text-center text-xs text-muted-foreground">
-              {showResendTimer ? (
-                <span>
-                  Resend code in {remainingTime} seconds |{" "}
-                  <span
-                    className="clickable-link"
-                    onClick={() => {
-                      clearTimeout(resendTimer)
-                      setShowResendTimer(false)
-                      // Add logic to resend OTP here
-                    }}
-                  >
-                    Cancel
-                  </span>
-                </span>
-              ) : (
-                <span>
-                  {props.texts?.didntGetCode ?? "Didn't get the code?"}{" "}
-                  <span
-                    className="clickable-link"
-                    onClick={() => {
-                      startResendTimer()
-                      // Add logic to resend OTP here
-                    }}
-                  >
-                    {props.texts?.resendCode ?? "Click to resend"}
-                  </span>
-                </span>
-              )}
-            </div>
-
-            <div className="mt-4  grid grid-cols-2 gap-2">
-              <Button
-                variant="secondary"
-                onClick={() => setPhoneConfirm(false)}
-              >
-                {props.texts?.cancel ?? "Cancel"}
-              </Button>
-              <Button isLoading={props.loadingConfirm}>
-                {props.texts?.confirm ?? "Confirm"}
-              </Button>
-            </div>
-          </form>
-        ) : (
-          <form
-            onSubmit={(e) => {
-              e.preventDefault()
-              setPhoneConfirm(true)
-              props.handleContinue(userPhone)
-            }}
-          >
-            <Controller
-              control={control}
-              name="phone"
-              render={({ field }) => (
-                <HawaPhoneInput
-                  country={props.country ?? ""}
-                  label={props.label ?? ""}
-                  handleChange={(e: any) => setUserPhone(e.target.value)}
-                  {...field}
-                />
-              )}
-              rules={{
-                required: props.phoneRequiredText,
-              }}
-            />
-            <Button isLoading={props.loadingContinue} className="w-full">
-              {props.texts?.continue ?? "Continue"}
-            </Button>
-          </form>
-        )}
-      </CardContent>
-    </Card>
-  )
-}