EC-002: Login email flow

src/app/components/client/signup-view.tsx

@@ -65,6 +65,7 @@ export const VSignUp = ({ providers, user, csrf }: VSignUpProps) => {
   }, [session, isUserLoaded, loadUser]);
 
   const handleSignIn = async (id?: string, value?: SignInOptions) => {
+    console.log({ value })
     await doSignIn(id, value);
   };
 
@@ -88,8 +89,8 @@ export const VSignUp = ({ providers, user, csrf }: VSignUpProps) => {
 
   return <section className={classes}>
 			<div> 
-        <form action={defaultP.signinUrl} method="POST">
-          <Input type="hidden" name="csrfToken" value={csrf} />
+        <form action={defaultP.signinUrl} method="post">
+          <input type="hidden" name="csrfToken" defaultValue={csrf} />
           <Input
             id={`input-email-for-${defaultP.id}-provider`}
             autoFocus
@@ -100,7 +101,7 @@ export const VSignUp = ({ providers, user, csrf }: VSignUpProps) => {
             placeholder="Your email"
             required
           />
-          <Button id="submitButton" type="submit" onClick={() => handleSignIn("email", { email })}>
+          <Button id="submitButton" type="submit">
             Continue
           </Button>
         </form>
@@ -110,7 +111,7 @@ export const VSignUp = ({ providers, user, csrf }: VSignUpProps) => {
       <div> 
         {provider.type === "email" && (
           <form action={defaultP.signinUrl} method="POST">
-            <Input type="hidden" name="csrfToken" value={csrf} />
+            <input name="csrfToken" type="hidden" defaultValue={csrf} />
             <Input
               id={`input-email-for-${provider.id}-provider`}
               autoFocus

src/app/components/system/atoms/button/client/button-view.tsx

@@ -24,5 +24,5 @@ const classes = clsx({
 
 export const NVButton = ({ children, onClick, variant, theme, icon, ...regularHtmlProps }: VButtonProps) => {
   /* remember server/client isomorphism */
-  return <Button className={classes} {...regularHtmlProps} onClick={onClick}>{children}</Button>;
+  return <Button className={classes} {...regularHtmlProps}>{children}</Button>;
 };

src/app/components/system/atoms/input/client/input-view.tsx

@@ -1,7 +1,7 @@
 // @atoms/button-view.tsx
 'use client';
 import type { TpositionX, Tthemes } from "@types"
-import { Input } from "@mui/base/Input"
+import { useInput } from '@mui/base/useInput';
 import { debounce } from "@helpers"
 import { clsx } from "clsx"
 import styles from "./input.module.css"
@@ -20,6 +20,7 @@ interface VInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const NVInput = ({ children, onChange, value, ...regularHtmlProps }: VInputProps) => {
+  const { getRootProps }  = useInput()
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if(onChange) {
       onChange(e.target.value)
@@ -34,5 +35,5 @@ export const NVInput = ({ children, onChange, value, ...regularHtmlProps }: VInp
     [styles.nexus__input]: regularHtmlProps.type !== "hidden",
   })
   /* remember server/client isomorphism */
-  return <Input className={classes} {...regularHtmlProps} onChange={dbHandleChange} >{children}</Input>;
+  return <input className={classes} {...getRootProps()} {...regularHtmlProps} onChange={dbHandleChange} >{children}</input>;
 };

src/app/components/system/atoms/input/client/input.module.css

@@ -12,7 +12,7 @@
   margin-bottom: 16px;
 }
 
-.nexus__input input {
+input.nexus__input {
   height: 100%;
   width: 100%;
   padding: 8px 16px;

src/app/signin/page.tsx

@@ -1,8 +1,9 @@
 // signin/page.tsx TS-Doc?
 'use server';
-import { getProviders } from 'next-auth/react';
+import { getProviders, getCsrfToken } from 'next-auth/react';
 import { getServerSession } from 'next-auth/next';
 import { redirect } from 'next/navigation';
+import { cookies } from 'next/headers';
 import { authOptions } from '@auth';
 import { VSignUp } from '@components/client';
 import styles from '@styles/page.module.css';
@@ -37,11 +38,13 @@ async function getProvidersData(): Promise<ISignInData> {
 export default async function SignUp() {
   const props: ISignInData = await getProvidersData();
   const providers: IAuthProviders[] = props?.providers || [];
+  cookies();
+  const csrf: string | undefined = await getCsrfToken();
   return (
     <main className={styles.main}>
       <article>
         <img className={styles.logo} src="/logo.svg" />
-        <VSignUp providers={providers} />
+        <VSignUp providers={providers} csrf={csrf} />
       </article>
     </main>
   );