negodesign 0.0.6 → 0.0.8

package/dist/components/pages/login/01/ui/FormLoginPhonePassword.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import FormLogin from "./FormLogin.svelte";
-  import type { Credential } from "../data/page-props";
+  import type { LoginRequestDto, LinkProps } from "../../types";
 
   /** Form de login com telefone e senha. Wrapper fino de FormLogin variant="PHONE". */
   type Props = {
-    onSubmit?: (credential: Credential) => void;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
   };
 
-  let { onSubmit }: Props = $props();
+  let { onSubmit, forgetPassword }: Props = $props();
 </script>
 
-<FormLogin variant="PHONE" {onSubmit} />
+<FormLogin variant="PHONE" {onSubmit} {forgetPassword} />

package/dist/components/pages/login/01/ui/FormLoginPhonePassword.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { Credential } from "../data/page-props";
+import type { LoginRequestDto, LinkProps } from "../../types";
 /** Form de login com telefone e senha. Wrapper fino de FormLogin variant="PHONE". */
 type Props = {
-    onSubmit?: (credential: Credential) => void;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
 };
 declare const FormLoginPhonePassword: import("svelte").Component<Props, {}, "">;
 type FormLoginPhonePassword = ReturnType<typeof FormLoginPhonePassword>;

package/dist/components/pages/login/01/ui/FormLoginUsernamePassword.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import FormLogin from "./FormLogin.svelte";
-  import type { Credential } from "../data/page-props";
+  import type { LoginRequestDto, LinkProps } from "../../types";
 
   /** Form de login com username e senha. Wrapper fino de FormLogin variant="USERNAME". */
   type Props = {
-    onSubmit?: (credential: Credential) => void;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
   };
 
-  let { onSubmit }: Props = $props();
+  let { onSubmit, forgetPassword }: Props = $props();
 </script>
 
-<FormLogin variant="USERNAME" {onSubmit} />
+<FormLogin variant="USERNAME" {onSubmit} {forgetPassword} />

package/dist/components/pages/login/01/ui/FormLoginUsernamePassword.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { Credential } from "../data/page-props";
+import type { LoginRequestDto, LinkProps } from "../../types";
 /** Form de login com username e senha. Wrapper fino de FormLogin variant="USERNAME". */
 type Props = {
-    onSubmit?: (credential: Credential) => void;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
 };
 declare const FormLoginUsernamePassword: import("svelte").Component<Props, {}, "">;
 type FormLoginUsernamePassword = ReturnType<typeof FormLoginUsernamePassword>;

package/dist/components/pages/login/01/ui/{AuthCard.svelte → LoginCard.svelte}

@@ -8,7 +8,7 @@
   import type { Snippet } from "svelte";
   import { LightSwitch } from "../../../../ui/light-switch";
   import { t } from "../../../../../i18n";
-  import type { AuthFormType, Credential, LinkProps } from "../data/page-props";
+  import type { AuthFormType, LoginRequestDto, LinkProps } from "../../types";
   import FormLoginEmailPassword from "./FormLoginEmailPassword.svelte";
   import FormLoginUsernamePassword from "./FormLoginUsernamePassword.svelte";
   import FormLoginPhonePassword from "./FormLoginPhonePassword.svelte";
@@ -23,13 +23,15 @@
    */
   type Props = {
     formType?: AuthFormType;
-    onSubmit?: (credential: Credential) => void;
+    onSubmit?: (credential: LoginRequestDto) => void;
     register?: Snippet;
+    forgetPassword?: LinkProps;
     privacyPolicy?: LinkProps;
     termsOfService?: LinkProps;
   };
 
-  let { formType, onSubmit, register, privacyPolicy, termsOfService }: Props = $props();
+  let { formType, onSubmit, register, forgetPassword, privacyPolicy, termsOfService }: Props =
+    $props();
 </script>
 
 <div class="flex-1 flex flex-col justify-between h-screen bg-gradient-right">
@@ -65,11 +67,11 @@
 
     {#snippet loginSnippet()}
       {#if formType == "EMAIL_PASSWORD"}
-        <FormLoginEmailPassword {onSubmit} />
+        <FormLoginEmailPassword {onSubmit} {forgetPassword} />
       {:else if formType == "USERNAME_PASSWORD"}
-        <FormLoginUsernamePassword {onSubmit} />
+        <FormLoginUsernamePassword {onSubmit} {forgetPassword} />
       {:else if formType == "PHONE_PASSWORD"}
-        <FormLoginPhonePassword {onSubmit} />
+        <FormLoginPhonePassword {onSubmit} {forgetPassword} />
       {/if}
     {/snippet}
 
@@ -84,8 +86,14 @@
   <div
     class="text-[11px] text-slate-400 py-2 flex justify-center gap-2 bg-background"
   >
-    <LinkPrivacyPolity href={privacyPolicy?.url} onclick={privacyPolicy?.onclick} />
+    <LinkPrivacyPolity
+      href={privacyPolicy?.url}
+      onclick={privacyPolicy?.onclick}
+    />
     <LabelOr />
-    <LinkTermsOfService href={termsOfService?.url} onclick={termsOfService?.onclick} />
+    <LinkTermsOfService
+      href={termsOfService?.url}
+      onclick={termsOfService?.onclick}
+    />
   </div>
 </div>

package/dist/components/pages/login/01/ui/{AuthCard.svelte.d.ts → LoginCard.svelte.d.ts}

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { AuthFormType, Credential, LinkProps } from "../data/page-props";
+import type { AuthFormType, LoginRequestDto, LinkProps } from "../../types";
 /**
  * Card de autenticação com abas login/register.
  * @property {AuthFormType} formType - Tipo do form (EMAIL_PASSWORD, USERNAME_PASSWORD, PHONE_PASSWORD)
@@ -10,11 +10,12 @@ import type { AuthFormType, Credential, LinkProps } from "../data/page-props";
  */
 type Props = {
     formType?: AuthFormType;
-    onSubmit?: (credential: Credential) => void;
+    onSubmit?: (credential: LoginRequestDto) => void;
     register?: Snippet;
+    forgetPassword?: LinkProps;
     privacyPolicy?: LinkProps;
     termsOfService?: LinkProps;
 };
-declare const AuthCard: import("svelte").Component<Props, {}, "">;
-type AuthCard = ReturnType<typeof AuthCard>;
-export default AuthCard;
+declare const LoginCard: import("svelte").Component<Props, {}, "">;
+type LoginCard = ReturnType<typeof LoginCard>;
+export default LoginCard;

package/dist/components/pages/login/01/ui/PageLogin01.svelte

@@ -1,49 +1,86 @@
-<script lang="ts">
-  import AuthCard from "./AuthCard.svelte";
-  import LeftHero from "./LeftHero.svelte";
-  import type { PageLoginProps } from "../data/page-props";
-
-  /**
-   * Variante 01 da página de login.
-   * Layout split: hero à esquerda, auth card à direita.
-   * @property {CarouselItem[]} carousel - Itens do carousel
-   * @property {string} title - Título do hero
-   * @property {AuthFormType} formType - Tipo do form de login
-   * @property {LinkProps} privacyPolicy - Config do link de privacidade
-   * @property {LinkProps} termsOfService - Config do link de termos
-   */
-  let {
-    carousel,
-    varient,
-    title,
-    formType,
-    children,
-    privacyPolicy,
-    termsOfService,
-  }: PageLoginProps = $props();
-</script>
-
-<main class="h-screen w-screen flex items-center">
-  <div class="hidden md:block md:w-8/12">
-    <LeftHero {title} varient={varient ?? "POINTER"} items={carousel ?? []} />
-  </div>
-  <div class="w-full md:px-0 md:w-4/12 border-gray-900">
-    {#if children}
-      {@render children()}
-    {:else}
-      <AuthCard {formType} {privacyPolicy} {termsOfService} />
-    {/if}
-  </div>
-</main>
-
-<style>
-  :global(.grid-pattern) {
-    background-size: 40px 40px;
-    background-image: linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0.1) 1px,
-        transparent 1px
-      ),
-      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
-  }
-</style>
+<script lang="ts">
+  import AuthCard from "./LoginCard.svelte";
+  import LeftHero from "../../../../core/panel/LeftHero.svelte";
+  import type { PageLoginProps } from "../../types";
+  import { t } from "../../../../../i18n";
+
+  /**
+   * Variante 01 da página de login.
+   * Layout split: hero à esquerda, auth card à direita.
+   * @property {CarouselItem[]} carousel - Itens do carousel (opcional, usa valores padrão)
+   * @property {string} title - Título do hero
+   * @property {AuthFormType} formType - Tipo do form de login
+   * @property {LinkProps} privacyPolicy - Config do link de privacidade
+   * @property {LinkProps} termsOfService - Config do link de termos
+   */
+  let {
+    carousel,
+    varient,
+    title,
+    formType = "USERNAME_PASSWORD",
+    children,
+    onSubmit,
+    forgetPassword,
+    privacyPolicy,
+    termsOfService,
+  }: PageLoginProps = $props();
+
+  const defaultCarousel = $derived([
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.login.slide1.title"),
+      description: $t("carousel.login.slide1.description"),
+    },
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.login.slide2.title"),
+      description: $t("carousel.login.slide2.description"),
+    },
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.login.slide3.title"),
+      description: $t("carousel.login.slide3.description"),
+    },
+  ]);
+
+  const carouselItems = $derived(carousel ?? defaultCarousel);
+</script>
+
+<main class="h-screen w-screen flex items-center">
+  <svg width="0" height="0" class="absolute">
+    <defs>
+      <clipPath id="grid-curve-clip" clipPathUnits="objectBoundingBox">
+        <path d="M0.35,0 L1,0 C0.85,0.3 1,0.6 0.4,1 L1,1 Z" />
+      </clipPath>
+    </defs>
+  </svg>
+  <div class="hidden md:block md:w-8/12">
+    <LeftHero {title} varient={varient ?? "POINTER"} items={carouselItems} />
+  </div>
+  <div class="w-full md:px-0 md:w-4/12 border-gray-900">
+    {#if children}
+      {@render children()}
+    {:else}
+      <AuthCard
+        {formType}
+        {onSubmit}
+        {forgetPassword}
+        {privacyPolicy}
+        {termsOfService}
+      />
+    {/if}
+  </div>
+</main>
+
+<style>
+  :global(.grid-pattern) {
+    background-size: 40px 40px;
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px
+      ),
+      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+    clip-path: url(#grid-curve-clip);
+  }
+</style>

package/dist/components/pages/login/01/ui/PageLogin01.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { PageLoginProps } from "../data/page-props";
+import type { PageLoginProps } from "../../types";
 declare const PageLogin01: import("svelte").Component<PageLoginProps, {}, "">;
 type PageLogin01 = ReturnType<typeof PageLogin01>;
 export default PageLogin01;

package/dist/components/pages/login/PageLogin.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { PageLoginProps } from "./01/data/page-props";
+  import type { PageLoginProps } from "./types";
   import PageLogin01 from "./01/ui/PageLogin01.svelte";
 
   /**

package/dist/components/pages/login/PageLogin.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { PageLoginProps } from "./01/data/page-props";
+import type { PageLoginProps } from "./types";
 /**
  * Página de login principal.
  * @property {"01"} varient - Variante do layout de login

package/dist/components/pages/login/{01/data/page-props.d.ts → types.d.ts}

@@ -1,8 +1,8 @@
-import type { CarouselItem, CarouselItemType } from "../../../../core/carousel/data/CarouselModel";
+import type { CarouselItem, CarouselItemType } from "../../core/carousel/data/CarouselModel";
 import type { Snippet } from "svelte";
 export type AuthFormType = "EMAIL_PASSWORD" | "PHONE_PASSWORD" | "USERNAME_PASSWORD";
 export type LoginVariant = "EMAIL" | "USERNAME" | "PHONE";
-export type Credential = {
+export type LoginRequestDto = {
     password: string;
     data: string;
 };
@@ -16,6 +16,8 @@ export type PageLoginProps = {
     title?: string;
     children?: Snippet;
     formType?: AuthFormType;
+    onSubmit?: (credential: LoginRequestDto) => void;
+    forgetPassword?: LinkProps;
     privacyPolicy?: LinkProps;
     termsOfService?: LinkProps;
 };

package/dist/components/pages/login/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/pages/otp-verification/01/ui/FormOtpVerification.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import InputCodeOtp from "../../../../core/form/ui/input-code-otp.svelte";
+  import ButtonSend from "../../../../core/button/ButtonSend.svelte";
+  import { t } from "../../../../../i18n";
+  import type { OtpVerificationRequestDto } from "../../types";
+
+  type Props = {
+    otpLength?: number;
+    onSubmit?: (request: OtpVerificationRequestDto) => void;
+  };
+
+  let { otpLength = 6, onSubmit }: Props = $props();
+  let code = $state("");
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    onSubmit?.({ code });
+  }
+</script>
+
+<form class="w-full space-y-4" onsubmit={handleSubmit}>
+  <p class="text-[13px] py-3">{$t("text.otp-verification")}</p>
+
+  <div class="space-y-1">
+    <InputCodeOtp length={otpLength} bind:value={code} />
+  </div>
+
+  <ButtonSend type="submit" />
+</form>

package/dist/components/pages/otp-verification/01/ui/FormOtpVerification.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { OtpVerificationRequestDto } from "../../types";
+type Props = {
+    otpLength?: number;
+    onSubmit?: (request: OtpVerificationRequestDto) => void;
+};
+declare const FormOtpVerification: import("svelte").Component<Props, {}, "">;
+type FormOtpVerification = ReturnType<typeof FormOtpVerification>;
+export default FormOtpVerification;

package/dist/components/pages/otp-verification/01/ui/OtpVerificationCard.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
+  import ButtonBack from "../../../../core/button/ButtonBack.svelte";
+  import type { Snippet } from "svelte";
+  import { LightSwitch } from "../../../../ui/light-switch";
+  import { t } from "../../../../../i18n";
+  import type { OtpVerificationRequestDto } from "../../types";
+  import FormOtpVerification from "./FormOtpVerification.svelte";
+  import TabUnderline from "../../../../core/tabs/ui/tab-underline.svelte";
+
+  /**
+   * Card de verificação OTP.
+   * @property {number} otpLength - Quantidade de caixas do código OTP
+   * @property {(req: OtpVerificationRequestDto) => void} onSubmit - Callback ao submeter
+   */
+  type Props = {
+    otpLength?: number;
+    onSubmit?: (request: OtpVerificationRequestDto) => void;
+    children?: Snippet;
+  };
+
+  let { otpLength, onSubmit, children }: Props = $props();
+</script>
+
+<div class="flex-1 flex flex-col justify-between h-screen bg-gradient-right">
+  <nav class="flex justify-between p-5 md:bg-transparent">
+    <div>
+      <ButtonBack />
+    </div>
+    <div class="flex gap-2">
+      <LightSwitch />
+      <LanguageSwitcher />
+    </div>
+  </nav>
+
+  <div
+    class="p-5 h-full border-t-2 bg-background md:border-none rounded-tl-[35px] rounded-tr-[35px]"
+  >
+    <TabUnderline
+      items={[
+        {
+          item: {
+            label: $t("label.otp-verification"),
+            value: "otp-verification",
+          },
+        },
+      ]}
+    />
+
+    {#if children}
+      {@render children()}
+    {:else}
+      <FormOtpVerification {otpLength} {onSubmit} />
+    {/if}
+  </div>
+</div>

package/dist/components/pages/otp-verification/01/ui/OtpVerificationCard.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { OtpVerificationRequestDto } from "../../types";
+/**
+ * Card de verificação OTP.
+ * @property {number} otpLength - Quantidade de caixas do código OTP
+ * @property {(req: OtpVerificationRequestDto) => void} onSubmit - Callback ao submeter
+ */
+type Props = {
+    otpLength?: number;
+    onSubmit?: (request: OtpVerificationRequestDto) => void;
+    children?: Snippet;
+};
+declare const OtpVerificationCard: import("svelte").Component<Props, {}, "">;
+type OtpVerificationCard = ReturnType<typeof OtpVerificationCard>;
+export default OtpVerificationCard;

package/dist/components/pages/otp-verification/01/ui/PageOtpVerification01.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import OtpVerificationCard from "./OtpVerificationCard.svelte";
+  import LeftHero from "../../../../core/panel/LeftHero.svelte";
+  import type { PageOtpVerificationProps } from "../../types";
+  import { t } from "../../../../../i18n";
+
+  /**
+   * Variante 01 da página de verificação OTP.
+   * Layout split: hero à esquerda (reutiliza do login), card de verificação à direita.
+   */
+  let {
+    carousel,
+    varient,
+    title,
+    children,
+    otpLength,
+    onSubmit,
+  }: PageOtpVerificationProps = $props();
+
+  const defaultCarousel = $derived([
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.otp-verification.slide1.title"),
+      description: $t("carousel.otp-verification.slide1.description"),
+    },
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.otp-verification.slide2.title"),
+      description: $t("carousel.otp-verification.slide2.description"),
+    },
+    {
+      buttonText: $t("label.next"),
+      title: $t("carousel.otp-verification.slide3.title"),
+      description: $t("carousel.otp-verification.slide3.description"),
+    },
+  ]);
+
+  const carouselItems = $derived(carousel ?? defaultCarousel);
+</script>
+
+<main class="h-screen w-screen flex items-center">
+  <svg width="0" height="0" class="absolute">
+    <defs>
+      <clipPath id="grid-curve-clip" clipPathUnits="objectBoundingBox">
+        <path d="M0.35,0 L1,0 C0.85,0.3 1,0.6 0.4,1 L1,1 Z" />
+      </clipPath>
+    </defs>
+  </svg>
+  <div class="hidden md:block md:w-8/12">
+    <LeftHero {title} varient={varient ?? "POINTER"} items={carouselItems} />
+  </div>
+  <div class="w-full md:px-0 md:w-4/12 border-gray-900">
+    {#if children}
+      {@render children()}
+    {:else}
+      <OtpVerificationCard {otpLength} {onSubmit} />
+    {/if}
+  </div>
+</main>
+
+<style>
+  :global(.grid-pattern) {
+    background-size: 40px 40px;
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px
+      ),
+      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+    clip-path: url(#grid-curve-clip);
+  }
+</style>

package/dist/components/pages/otp-verification/01/ui/PageOtpVerification01.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PageOtpVerificationProps } from "../../types";
+declare const PageOtpVerification01: import("svelte").Component<PageOtpVerificationProps, {}, "">;
+type PageOtpVerification01 = ReturnType<typeof PageOtpVerification01>;
+export default PageOtpVerification01;

package/dist/components/pages/otp-verification/PageOtpVerification.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { PageOtpVerificationProps } from "./types";
+  import PageOtpVerification01 from "./01/ui/PageOtpVerification01.svelte";
+
+  /**
+   * Página de verificação OTP.
+   * @property {"01"} varient - Variante do layout
+   */
+  type Props = {
+    varient?: "01";
+  };
+
+  let { ...props }: PageOtpVerificationProps & Props = $props();
+</script>
+
+<PageOtpVerification01 {...props} />

package/dist/components/pages/otp-verification/PageOtpVerification.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { PageOtpVerificationProps } from "./types";
+/**
+ * Página de verificação OTP.
+ * @property {"01"} varient - Variante do layout
+ */
+type Props = {
+    varient?: "01";
+};
+type $$ComponentProps = PageOtpVerificationProps & Props;
+declare const PageOtpVerification: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageOtpVerification = ReturnType<typeof PageOtpVerification>;
+export default PageOtpVerification;

package/dist/components/pages/otp-verification/types.d.ts

@@ -0,0 +1,13 @@
+import type { CarouselItem, CarouselItemType } from "../../core/carousel/data/CarouselModel";
+import type { Snippet } from "svelte";
+export type OtpVerificationRequestDto = {
+    code: string;
+};
+export type PageOtpVerificationProps = {
+    carousel?: CarouselItem[];
+    varient?: CarouselItemType;
+    title?: string;
+    children?: Snippet;
+    otpLength?: number;
+    onSubmit?: (request: OtpVerificationRequestDto) => void;
+};

package/dist/components/pages/otp-verification/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/pages/reset-password/01/ui/FormResetPassword.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import InputCodeOtp from "../../../../core/form/ui/input-code-otp.svelte";
+  import InputPassword from "../../../../core/form/ui/input-password.svelte";
+  import InputPasswordConfirm from "../../../../core/form/ui/input-password-confirm.svelte";
+  import ButtonSend from "../../../../core/button/ButtonSend.svelte";
+  import { t } from "../../../../../i18n";
+  import type { ResetPasswordRequestDto } from "../../types";
+
+  type Props = {
+    otpLength?: number;
+    onSubmit?: (request: ResetPasswordRequestDto) => void;
+  };
+
+  let { otpLength = 6, onSubmit }: Props = $props();
+  let code = $state("");
+  let password = $state("");
+  let confirmPassword = $state("");
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    onSubmit?.({ code, password, confirmPassword });
+  }
+</script>
+
+<form class="w-full space-y-4" onsubmit={handleSubmit}>
+  <p class="text-[13px] py-3">{$t("text.reset-password")}</p>
+
+  <div class="space-y-1">
+    <InputCodeOtp length={otpLength} bind:value={code} />
+  </div>
+
+  <div class="space-y-1">
+    <InputPassword bind:value={password} />
+  </div>
+
+  <div class="space-y-1">
+    <InputPasswordConfirm bind:value={confirmPassword} />
+  </div>
+
+  <ButtonSend type="submit" />
+</form>

package/dist/components/pages/reset-password/01/ui/FormResetPassword.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ResetPasswordRequestDto } from "../../types";
+type Props = {
+    otpLength?: number;
+    onSubmit?: (request: ResetPasswordRequestDto) => void;
+};
+declare const FormResetPassword: import("svelte").Component<Props, {}, "">;
+type FormResetPassword = ReturnType<typeof FormResetPassword>;
+export default FormResetPassword;