Merge branch 'develop' of git.lumeweb.com:LumeWeb/portal-dashboard into riobuenoDevelops/my-account

app/data/auth-provider.ts

@@ -1,37 +1,166 @@
-import { AuthProvider } from "@refinedev/core"
-import type {
-  AuthActionResponse,
-  CheckResponse,
-  OnErrorResponse
-  // @ts-ignore
-} from "@refinedev/core/dist/interfaces/bindings/auth"
+import type {AuthProvider} from "@refinedev/core"
 
-export const authProvider: AuthProvider = {
-  login: async (params: any) => {
-    return { success: true } satisfies AuthActionResponse
-  },
-  logout: async (params: any) => {
-    return { success: true } satisfies AuthActionResponse
-  },
-  check: async (params?: any) => {
-    return { authenticated: true } satisfies CheckResponse
-  },
-  onError: async (error: any) => {
-    return { logout: true } satisfies OnErrorResponse
-  },
-  register: async (params: any) => {
-    return { success: true } satisfies AuthActionResponse
-  },
-  forgotPassword: async (params: any) => {
-    return { success: true } satisfies AuthActionResponse
-  },
-  updatePassword: async (params: any) => {
-    return { success: true } satisfies AuthActionResponse
-  },
-  getPermissions: async (params: any) => {
-    return { success: true } satisfies AuthActionResponse
-  },
-  getIdentity: async (params: any) => {
-    return { id: "1", fullName: "John Doe", avatar: "https://via.placeholder.com/150" }
-  }
+import type {
+    AuthActionResponse,
+    CheckResponse,
+    IdentityResponse,
+    OnErrorResponse
+    // @ts-ignore
+} from "@refinedev/core/dist/interfaces/bindings/auth"
+import {Sdk} from "@lumeweb/portal-sdk";
+import Cookies from 'universal-cookie';
+import type {AccountInfoResponse} from "@lumeweb/portal-sdk";
+
+export type AuthFormRequest = {
+    email: string;
+    password: string;
+    rememberMe: boolean;
+    redirectTo?: string;
+}
+
+export type RegisterFormRequest = {
+    email: string;
+    password: string;
+    firstName: string;
+    lastName: string;
+}
+
+export type Identity = {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+}
+
+export class PortalAuthProvider implements RequiredAuthProvider {
+    private sdk: Sdk;
+
+    constructor(apiUrl: string) {
+        this.sdk = Sdk.create(apiUrl);
+
+        const methods: Array<keyof AuthProvider> = [
+            'login',
+            'logout',
+            'check',
+            'onError',
+            'register',
+            'forgotPassword',
+            'updatePassword',
+            'getPermissions',
+            'getIdentity',
+        ];
+
+        methods.forEach((method) => {
+            this[method] = this[method]?.bind(this) as any;
+        });
+    }
+
+    async login(params: AuthFormRequest): Promise<AuthActionResponse> {
+        const cookies = new Cookies();
+        const ret = await this.sdk.account().login({
+            email: params.email,
+            password: params.password,
+        })
+
+        let redirectTo: string | undefined;
+
+        if (ret) {
+            cookies.set('jwt', this.sdk.account().jwtToken, {path: '/'});
+            redirectTo = params.redirectTo;
+            if (!redirectTo) {
+                redirectTo = ret ? "/dashboard" : "/login";
+            }
+        }
+
+        return {
+            success: ret,
+            redirectTo,
+        };
+    }
+
+    async logout(params: any): Promise<AuthActionResponse> {
+        let ret = await this.sdk.account().logout();
+        if (ret) {
+            const cookies = new Cookies();
+            cookies.remove('jwt');
+        }
+        return {success: ret, redirectTo: "/login"};
+    }
+
+    async check(params?: any): Promise<CheckResponse> {
+        const cookies = new Cookies();
+
+        const jwtCookie = cookies.get('jwt');
+
+        if (jwtCookie) {
+            this.sdk.setAuthToken(jwtCookie);
+        }
+
+        const ret = await this.sdk.account().ping();
+
+        if (!ret) {
+            cookies.remove('jwt');
+        }
+
+        return {authenticated: ret, redirectTo: ret ? undefined : "/login"};
+    }
+
+    async onError(error: any): Promise<OnErrorResponse> {
+        return {logout: true};
+    }
+
+    async register(params: RegisterFormRequest): Promise<AuthActionResponse> {
+        const ret = await this.sdk.account().register({
+            email: params.email,
+            password: params.password,
+            first_name: params.firstName,
+            last_name: params.lastName,
+        });
+        return {success: ret, redirectTo: ret ? "/dashboard" : undefined};
+    }
+
+    async forgotPassword(params: any): Promise<AuthActionResponse> {
+        return {success: true};
+    }
+
+    async updatePassword(params: any): Promise<AuthActionResponse> {
+        return {success: true};
+    }
+
+    async getPermissions(params?: Record<string, any>): Promise<AuthActionResponse> {
+        return {success: true};
+    }
+
+    async getIdentity(params?: Identity): Promise<IdentityResponse> {
+        const ret = await this.sdk.account().info();
+
+        if (!ret) {
+            return {identity: null};
+        }
+
+        const acct = ret as AccountInfoResponse;
+
+        return {
+            id: acct.id,
+            firstName: acct.first_name,
+            lastName: acct.last_name,
+            email: acct.email,
+        };
+    }
+
+    public static create(apiUrl: string): AuthProvider {
+        return new PortalAuthProvider(apiUrl);
+    }
+}
+
+interface RequiredAuthProvider extends AuthProvider {
+    login: AuthProvider['login'];
+    logout: AuthProvider['logout'];
+    check: AuthProvider['check'];
+    onError: AuthProvider['onError'];
+    register: AuthProvider['register'];
+    forgotPassword: AuthProvider['forgotPassword'];
+    updatePassword: AuthProvider['updatePassword'];
+    getPermissions: AuthProvider['getPermissions'];
+    getIdentity: AuthProvider['getIdentity'];
 }

app/root.tsx

@@ -12,7 +12,7 @@ import type { LinksFunction } from "@remix-run/node";
 // Supports weights 200-800
 import '@fontsource-variable/manrope';
 import {Refine} from "@refinedev/core";
-import {authProvider} from "~/data/auth-provider.js";
+import {PortalAuthProvider} from "~/data/auth-provider.js";
 import routerProvider from "@refinedev/remix-router";
 
 export const links: LinksFunction = () => [
@@ -40,7 +40,7 @@ export function Layout({children}: { children: React.ReactNode }) {
 export default function App() {
     return (
         <Refine
-            authProvider={authProvider}
+            authProvider={PortalAuthProvider.create("https://alpha.pinner.xyz")}
             routerProvider={routerProvider}
         >
             <Outlet/>

app/routes/_index.tsx

@@ -1,25 +1,24 @@
-import Login from "./login";
-import { useGo, useIsAuthenticated } from "@refinedev/core";
-import { useEffect } from "react";
+import {useGo, useIsAuthenticated} from "@refinedev/core";
+import {useEffect} from "react";
 
 export default function Index() {
-  const { isLoading, data } = useIsAuthenticated();
+    const {isLoading, data} = useIsAuthenticated();
 
-  const go = useGo();
+    const go = useGo();
 
-  useEffect(() => {
-    if (!isLoading && data?.authenticated) {
-      go({ to: "/dashboard", type: "replace" });
+    useEffect(() => {
+        if (!isLoading) {
+            if (data?.authenticated) {
+                go({to: "/dashboard", type: "replace"});
+            } else {
+                go({to: "/login", type: "replace"});
+            }
+        }
+    }, [isLoading, data]);
+
+    if (isLoading) {
+        return <>Checking Login Status</> || null;
     }
-  }, [isLoading, data]);
 
-  if (isLoading) {
-    return <>Checking Login Status</> || null;
-  }
-
-  if (data?.authenticated) {
-    return <>Redirecting</> || null;
-  }
-
-  return <Login />;
+    return (<>Redirecting</>) || null;
 }

app/routes/dashboard.tsx

@@ -1,71 +1,69 @@
-import { GeneralLayout } from "~/components/general-layout"
+import { GeneralLayout } from "~/components/general-layout";
 import {
   CloudIcon,
   CloudDownloadIcon,
-  CloudUploadSolidIcon
-} from "~/components/icons"
-import { UpgradeAccountBanner } from "~/components/upgrade-account-banner"
-import { UsageCard } from "~/components/usage-card"
-import { UsageChart } from "~/components/usage-chart"
+  CloudUploadSolidIcon,
+} from "~/components/icons";
+import { UpgradeAccountBanner } from "~/components/upgrade-account-banner";
+import { UsageCard } from "~/components/usage-card";
+import { UsageChart } from "~/components/usage-chart";
+import { Authenticated } from "@refinedev/core";
 
 export default function Dashboard() {
-  const isLogged = true
-  if (!isLogged) {
-    window.location.href = "/login"
-  }
-
   return (
-    <GeneralLayout>
-      <h1 className="font-bold mb-4 text-3xl">Dashboard</h1>
-      <UpgradeAccountBanner />
-      <h2 className="font-bold mb-8 mt-10 text-2xl">Current Usage</h2>
-      <div className="grid grid-cols-2 gap-8">
-        <UsageCard
-          label="Storage"
-          currentUsage={120}
-          monthlyUsage={130}
-          icon={<CloudIcon className="text-ring" />}
-        />
-        <UsageCard
-          label="Download"
-          currentUsage={2}
-          monthlyUsage={10}
-          icon={<CloudDownloadIcon className="text-ring" />}
-        />
-        <UsageCard
-          label="Upload"
-          currentUsage={5}
-          monthlyUsage={15}
-          icon={<CloudUploadSolidIcon className="text-ring" />}
-        />
-      </div>
-      <h2 className="font-bold mb-8 mt-10 text-2xl">Historical Usage</h2>
-      <div className="grid gap-8 grid-cols-2">
-        <UsageChart
-          dataset={[
-            { x: "3/2", y: "50" },
-            { x: "3/3", y: "10" },
-            { x: "3/4", y: "20" }
-          ]}
-          label="Storage"
-        />
-        <UsageChart
-          dataset={[
-            { x: "3/2", y: "50" },
-            { x: "3/3", y: "10" },
-            { x: "3/4", y: "20" }
-          ]}
-          label="Download"
-        />
-        <UsageChart
-          dataset={[
-            { x: "3/2", y: "50" },
-            { x: "3/3", y: "10" },
-            { x: "3/4", y: "20" }
-          ]}
-          label="Upload"
-        />
-      </div>
-    </GeneralLayout>
-  )
+    <Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
+      <GeneralLayout>
+        <h1 className="font-bold mb-4 text-3xl">Dashboard</h1>
+        <UpgradeAccountBanner />
+        <h2 className="font-bold mb-8 mt-10 text-2xl">Current Usage</h2>
+        <div className="grid grid-cols-2 gap-8">
+          <UsageCard
+            label="Storage"
+            currentUsage={120}
+            monthlyUsage={130}
+            icon={<CloudIcon className="text-ring" />}
+          />
+          <UsageCard
+            label="Download"
+            currentUsage={2}
+            monthlyUsage={10}
+            icon={<CloudDownloadIcon className="text-ring" />}
+          />
+          <UsageCard
+            label="Upload"
+            currentUsage={5}
+            monthlyUsage={15}
+            icon={<CloudUploadSolidIcon className="text-ring" />}
+          />
+        </div>
+        <h2 className="font-bold mb-8 mt-10 text-2xl">Historical Usage</h2>
+        <div className="grid gap-8 grid-cols-2">
+          <UsageChart
+            dataset={[
+              { x: "3/2", y: "50" },
+              { x: "3/3", y: "10" },
+              { x: "3/4", y: "20" },
+            ]}
+            label="Storage"
+          />
+          <UsageChart
+            dataset={[
+              { x: "3/2", y: "50" },
+              { x: "3/3", y: "10" },
+              { x: "3/4", y: "20" },
+            ]}
+            label="Download"
+          />
+          <UsageChart
+            dataset={[
+              { x: "3/2", y: "50" },
+              { x: "3/3", y: "10" },
+              { x: "3/4", y: "20" },
+            ]}
+            label="Upload"
+          />
+        </div>
+      </GeneralLayout>
+    </Authenticated>
+  );
 }

app/routes/login.tsx

@@ -1,179 +1,215 @@
-import type { MetaFunction } from "@remix-run/node"
-import { Link, useLocation } from "@remix-run/react"
-import { z } from "zod"
-import { Button } from "~/components/ui/button"
+import type {MetaFunction} from "@remix-run/node"
+import {Link, useLocation} from "@remix-run/react"
+import {z} from "zod"
+import {Button} from "~/components/ui/button"
 import logoPng from "~/images/lume-logo.png?url"
 import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
 import discordLogoPng from "~/images/discord-logo.png?url"
 import lumeBgPng from "~/images/lume-bg-image.png?url"
-import { Field, FieldCheckbox } from "~/components/forms"
-import { getFormProps, useForm } from "@conform-to/react"
-import { getZodConstraint, parseWithZod } from "@conform-to/zod"
+import {Field, FieldCheckbox} from "~/components/forms"
+import {getFormProps, useForm} from "@conform-to/react"
+import {getZodConstraint, parseWithZod} from "@conform-to/zod"
+import {useGo, useIsAuthenticated, useLogin, useParsed} from "@refinedev/core";
+import {AuthFormRequest} from "~/data/auth-provider.js";
+import {useEffect} from "react";
 
 export const meta: MetaFunction = () => {
-  return [
-    { title: "Login" },
-    { name: "description", content: "Welcome to Lume!" }
-  ]
+    return [
+        {title: "Login"},
+        {name: "description", content: "Welcome to Lume!"}
+    ]
+}
+
+type LoginParams = {
+    to: string;
 }
 
 export default function Login() {
-  const location = useLocation()
-  const hash = location.hash
+    const location = useLocation()
+    const {isLoading: isAuthLoading, data: authData} = useIsAuthenticated();
+    const hash = location.hash
+    const go = useGo();
+    const parsed = useParsed<LoginParams>()
 
-  return (
-    <div className="p-10 h-screen relative">
-      <header>
-        <img src={logoPng} alt="Lume logo" className="h-10" />
-      </header>
-      <div className="fixed inset-0 -z-10 overflow-clip">
-        <img
-          src={lumeBgPng}
-          alt="Lume background"
-          className="absolute top-0 right-0 md:w-2/3 object-cover z-[-1]"
-        />
-      </div>
+    useEffect(() => {
+        if (!isAuthLoading) {
+            if (authData?.authenticated) {
+                let to = "/dashboard";
+                if(parsed.params?.to){
+                    to = parsed.params.to
+                }
 
-      {hash === "" && <LoginForm />}
-      {hash === "#otp" && <OtpForm />}
+                go({to, type: "push"});
+            }
+        }
+    }, [isAuthLoading, authData]);
 
-      <footer className="my-5">
-        <ul className="flex flex-row">
-          <li>
-            <Link to="https://discord.lumeweb.com">
-              <Button
-                variant={"link"}
-                className="flex flex-row gap-x-2 text-input-placeholder"
-              >
-                <img className="h-5" src={discordLogoPng} alt="Discord Logo" />
-                Connect with us
-              </Button>
-            </Link>
-          </li>
-          <li>
-            <Link to="https://lumeweb.com">
-              <Button
-                variant={"link"}
-                className="flex flex-row gap-x-2 text-input-placeholder"
-              >
-                <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
-                Connect with us
-              </Button>
-            </Link>
-          </li>
-        </ul>
-      </footer>
-    </div>
-  )
+    return (
+        <div className="p-10 h-screen relative">
+            <header>
+                <img src={logoPng} alt="Lume logo" className="h-10"/>
+            </header>
+            <div className="fixed inset-0 -z-10 overflow-clip">
+                <img
+                    src={lumeBgPng}
+                    alt="Lume background"
+                    className="absolute top-0 right-0 md:w-2/3 object-cover z-[-1]"
+                />
+            </div>
+
+            {hash === "" && <LoginForm/>}
+            {hash === "#otp" && <OtpForm/>}
+
+            <footer className="my-5">
+                <ul className="flex flex-row">
+                    <li>
+                        <Link to="https://discord.lumeweb.com">
+                            <Button
+                                variant={"link"}
+                                className="flex flex-row gap-x-2 text-input-placeholder"
+                            >
+                                <img className="h-5" src={discordLogoPng} alt="Discord Logo"/>
+                                Connect with us
+                            </Button>
+                        </Link>
+                    </li>
+                    <li>
+                        <Link to="https://lumeweb.com">
+                            <Button
+                                variant={"link"}
+                                className="flex flex-row gap-x-2 text-input-placeholder"
+                            >
+                                <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo"/>
+                                Connect with us
+                            </Button>
+                        </Link>
+                    </li>
+                </ul>
+            </footer>
+        </div>
+    )
 }
 
 const LoginSchema = z.object({
-  email: z.string().email(),
-  password: z.string(),
-  rememberMe: z.boolean()
+    email: z.string().email(),
+    password: z.string(),
+    rememberMe: z.boolean()
 })
 
 const LoginForm = () => {
-  const [form, fields] = useForm({
-    id: "login",
-    constraint: getZodConstraint(LoginSchema),
-    onValidate({ formData }) {
-      return parseWithZod(formData, { schema: LoginSchema })
-    },
-    shouldValidate: "onSubmit"
-  })
+    const login = useLogin<AuthFormRequest>()
+    const parsed = useParsed<LoginParams>()
+    const [form, fields] = useForm({
+        id: "login",
+        constraint: getZodConstraint(LoginSchema),
+        onValidate({formData}) {
+            return parseWithZod(formData, {schema: LoginSchema})
+        },
+        shouldValidate: "onSubmit",
+        onSubmit(e) {
+            e.preventDefault();
 
-  return (
-    <form
-      className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
-      {...getFormProps(form)}
-    >
-      <h2 className="text-3xl font-bold !mb-12">Welcome back! 🎉</h2>
-      <Field
-        inputProps={{ name: fields.email.name }}
-        labelProps={{ children: "Email" }}
-        errors={fields.email.errors}
-      />
-      <Field
-        inputProps={{ name: fields.password.name, type: "password" }}
-        labelProps={{ children: "Password" }}
-        errors={fields.password.errors}
-      />
-      <FieldCheckbox
-        inputProps={{ name: fields.rememberMe.name, form: form.id }}
-        labelProps={{ children: "Remember Me" }}
-        errors={fields.rememberMe.errors}
-      />
-      <Button className="w-full h-14">Login</Button>
-      <p className="inline-block text-input-placeholder">
-        Forgot your password?{" "}
-        <Link
-          to="/reset-password"
-          className="text-primary-1 text-md hover:underline hover:underline-offset-4"
+            const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+            login.mutate({
+                email: data.email.toString(),
+                password: data.password.toString(),
+                rememberMe: data.rememberMe.toString() === "on",
+                redirectTo: parsed.params?.to
+            });
+        }
+    })
+
+    return (
+        <form
+            className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
+            {...getFormProps(form)}
         >
-          Reset Password
-        </Link>
-      </p>
-      <Link to="/sign-up" className="block">
-        <Button type="button" className="w-full h-14" variant={"outline"}>
-          Create an Account
-        </Button>
-      </Link>
-    </form>
-  )
+            <h2 className="text-3xl font-bold !mb-12">Welcome back! 🎉</h2>
+            <Field
+                inputProps={{name: fields.email.name}}
+                labelProps={{children: "Email"}}
+                errors={fields.email.errors}
+            />
+            <Field
+                inputProps={{name: fields.password.name, type: "password"}}
+                labelProps={{children: "Password"}}
+                errors={fields.password.errors}
+            />
+            <FieldCheckbox
+                inputProps={{name: fields.rememberMe.name, form: form.id}}
+                labelProps={{children: "Remember Me"}}
+                errors={fields.rememberMe.errors}
+            />
+            <Button className="w-full h-14">Login</Button>
+            <p className="inline-block text-input-placeholder">
+                Forgot your password?{" "}
+                <Link
+                    to="/reset-password"
+                    className="text-primary-1 text-md hover:underline hover:underline-offset-4"
+                >
+                    Reset Password
+                </Link>
+            </p>
+            <Link to="/register" className="block">
+                <Button type="button" className="w-full h-14" variant={"outline"}>
+                    Create an Account
+                </Button>
+            </Link>
+        </form>
+    )
 }
 
 const OtpSchema = z.object({
-  otp: z.string().length(6, { message: "OTP must be 6 characters" })
+    otp: z.string().length(6, {message: "OTP must be 6 characters"})
 })
 
 const OtpForm = () => {
-  // TODO: Add support for resending the OTP
-  const [form, fields] = useForm({
-    id: "otp",
-    constraint: getZodConstraint(OtpSchema),
-    onValidate({ formData }) {
-      return parseWithZod(formData, { schema: OtpSchema })
-    },
-    shouldValidate: "onSubmit"
-  })
-  const valid = false // TODO: some sort of logic to verify user is on OTP state validly
+    // TODO: Add support for resending the OTP
+    const [form, fields] = useForm({
+        id: "otp",
+        constraint: getZodConstraint(OtpSchema),
+        onValidate({formData}) {
+            return parseWithZod(formData, {schema: OtpSchema})
+        },
+        shouldValidate: "onSubmit"
+    })
+    const valid = false // TODO: some sort of logic to verify user is on OTP state validly
 
-  if (!valid) {
-    location.hash = ""
-    return null
-  }
+    if (!valid) {
+        location.hash = ""
+        return null
+    }
 
-  return (
-    <form
-      className="w-full p-2 max-w-md mt-12 bg-background"
-      {...getFormProps(form)}
-    >
+    return (
+        <form
+            className="w-full p-2 max-w-md mt-12 bg-background"
+            {...getFormProps(form)}
+        >
       <span className="block !mb-8 space-y-2">
         <h2 className="text-3xl font-bold">Check your inbox</h2>
         <p className="text-input-placeholder">
           We will need the six digit confirmation code you received in your
           email in order to verify your account and get started. Didn’t receive
           a code?{" "}
-          <Button type="button" variant={"link"} className="text-md h-0">
+            <Button type="button" variant={"link"} className="text-md h-0">
             Resend now →
           </Button>
         </p>
       </span>
-      <Field
-        inputProps={{ name: fields.otp.name }}
-        labelProps={{ children: "Confirmation Code" }}
-        errors={fields.otp.errors}
-      />
-      <Button className="w-full h-14">Verify</Button>
-      <p className="text-input-placeholder w-full text-left">
-        <Link
-          to="/login"
-          className="text-primary-1 text-md hover:underline hover:underline-offset-4"
-        >
-          ← Back to Login
-        </Link>
-      </p>
-    </form>
-  )
+            <Field
+                inputProps={{name: fields.otp.name}}
+                labelProps={{children: "Confirmation Code"}}
+                errors={fields.otp.errors}
+            />
+            <Button className="w-full h-14">Verify</Button>
+            <p className="text-input-placeholder w-full text-left">
+                <Link
+                    to="/login"
+                    className="text-primary-1 text-md hover:underline hover:underline-offset-4"
+                >
+                    ← Back to Login
+                </Link>
+            </p>
+        </form>
+    )
 }

app/routes/register.tsx

@@ -9,13 +9,17 @@ import { Field, FieldCheckbox } from "~/components/forms"
 import { getFormProps, useForm } from "@conform-to/react"
 import { z } from "zod"
 import { getZodConstraint, parseWithZod } from "@conform-to/zod"
+import {useLogin, useRegister} from "@refinedev/core";
+import {AuthFormRequest, RegisterFormRequest} from "~/data/auth-provider.js";
 
 export const meta: MetaFunction = () => {
-  return [{ title: "Sign Up" }]
-}
+  return [{ title: "Sign Up" }];
+};
 
-const SignUpSchema = z
+const RegisterSchema = z
   .object({
+    firstName: z.string().min(1),
+    lastName: z.string().min(1),
     email: z.string().email(),
     password: z
       .string()
@@ -24,28 +28,49 @@ const SignUpSchema = z
       .string()
       .min(8, { message: "Password must be at least 8 characters" }),
     termsOfService: z.boolean({
-      required_error: "You must agree to the terms of service"
-    })
+      required_error: "You must agree to the terms of service",
+    }),
   })
   .superRefine((data, ctx) => {
     if (data.password !== data.confirmPassword) {
       return ctx.addIssue({
         code: z.ZodIssueCode.custom,
         path: ["confirmPassword"],
-        message: "Passwords do not match"
-      })
+        message: "Passwords do not match",
+      });
     }
-    return true
-  })
+    return true;
+  });
 
-export default function SignUp() {
+export default function Register() {
+    const register = useRegister<RegisterFormRequest>()
+    const login = useLogin<AuthFormRequest>();
   const [form, fields] = useForm({
-    id: "sign-up",
-    constraint: getZodConstraint(SignUpSchema),
+    id: "register",
+    constraint: getZodConstraint(RegisterSchema),
     onValidate({ formData }) {
-      return parseWithZod(formData, { schema: SignUpSchema })
-    }
-  })
+      return parseWithZod(formData, { schema: RegisterSchema });
+    },
+      onSubmit(e) {
+          e.preventDefault();
+
+          const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+          register.mutate({
+              email: data.email.toString(),
+              password: data.password.toString(),
+              firstName: data.firstName.toString(),
+              lastName: data.lastName.toString(),
+          }, {
+                onSuccess: () => {
+                    login.mutate({
+                        email: data.email.toString(),
+                        password: data.password.toString(),
+                        rememberMe: false,
+                    })
+                }
+            })
+          }
+    });
 
   return (
     <div className="p-10 h-screen relative">
@@ -54,21 +79,33 @@ export default function SignUp() {
       </header>
       <form
         className="w-full p-2 max-w-md space-y-4 mt-12 bg-background"
-        {...getFormProps(form)}
-      >
+        {...getFormProps(form)}>
         <span className="!mb-12 space-y-2">
           <h2 className="text-3xl font-bold">All roads lead to Lume</h2>
           <p className="text-input-placeholder">
             🤘 Get 50 GB free storage and download for free,{" "}
             <b
               className="text-primar
-        y-2"
-            >
+        y-2">
               forever
             </b>
             .{" "}
           </p>
         </span>
+        <div className="flex gap-4">
+          <Field
+            className="flex-1"
+            inputProps={{ name: fields.firstName.name }}
+            labelProps={{ children: "First Name" }}
+            errors={fields.firstName.errors}
+          />
+          <Field
+            className="flex-1"
+            inputProps={{ name: fields.lastName.name }}
+            labelProps={{ children: "Last Name" }}
+            errors={fields.lastName.errors}
+          />
+        </div>
         <Field
           inputProps={{ name: fields.email.name }}
           labelProps={{ children: "Email" }}
@@ -92,19 +129,17 @@ export default function SignUp() {
                 I agree to the
                 <Link
                   to="/terms-of-service"
-                  className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1"
-                >
+                  className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1">
                   Terms of Service
                 </Link>
                 and
                 <Link
                   to="/privacy-policy"
-                  className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1"
-                >
+                  className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1">
                   Privacy Policy
                 </Link>
               </span>
-            )
+            ),
           }}
           errors={fields.termsOfService.errors}
         />
@@ -113,8 +148,7 @@ export default function SignUp() {
           Already have an account?{" "}
           <Link
             to="/login"
-            className="text-primary-1 text-md hover:underline hover:underline-offset-4"
-          >
+            className="text-primary-1 text-md hover:underline hover:underline-offset-4">
             Login here instead →
           </Link>
         </p>
@@ -132,8 +166,7 @@ export default function SignUp() {
             <Link to="https://discord.lumeweb.com">
               <Button
                 variant={"link"}
-                className="flex flex-row gap-x-2 text-input-placeholder"
-              >
+                className="flex flex-row gap-x-2 text-input-placeholder">
                 <img className="h-5" src={discordLogoPng} alt="Discord Logo" />
                 Connect with us
               </Button>
@@ -143,8 +176,7 @@ export default function SignUp() {
             <Link to="https://lumeweb.com">
               <Button
                 variant={"link"}
-                className="flex flex-row gap-x-2 text-input-placeholder"
-              >
+                className="flex flex-row gap-x-2 text-input-placeholder">
                 <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
                 Connect with us
               </Button>
@@ -153,5 +185,5 @@ export default function SignUp() {
         </ul>
       </footer>
     </div>
-  )
+  );
 }

app/routes/reset-password.tsx

@@ -1,31 +1,36 @@
-import type { MetaFunction } from "@remix-run/node"
-import { Link } from "@remix-run/react"
-import { Button } from "~/components/ui/button"
-import logoPng from "~/images/lume-logo.png?url"
-import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
-import discordLogoPng from "~/images/discord-logo.png?url"
-import lumeBgPng from "~/images/lume-bg-image.png?url"
-import { Field } from "~/components/forms"
-import { getFormProps, useForm } from "@conform-to/react"
-import { z } from "zod"
-import { getZodConstraint, parseWithZod } from "@conform-to/zod"
+import type { MetaFunction } from "@remix-run/node";
+import { Link } from "@remix-run/react";
+import { Button } from "~/components/ui/button";
+import logoPng from "~/images/lume-logo.png?url";
+import lumeColorLogoPng from "~/images/lume-color-logo.png?url";
+import discordLogoPng from "~/images/discord-logo.png?url";
+import lumeBgPng from "~/images/lume-bg-image.png?url";
+import { Field } from "~/components/forms";
+import { getFormProps, useForm } from "@conform-to/react";
+import { z } from "zod";
+import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 
 export const meta: MetaFunction = () => {
-  return [{ title: "Sign Up" }]
-}
+  return [{ title: "Sign Up" }];
+};
 
-const RecoverPasswordSchema = z
-  .object({
-    email: z.string().email(),
-  })
+const RecoverPasswordSchema = z.object({
+  email: z.string().email(),
+});
 export default function RecoverPassword() {
   const [form, fields] = useForm({
     id: "sign-up",
     constraint: getZodConstraint(RecoverPasswordSchema),
     onValidate({ formData }) {
-      return parseWithZod(formData, { schema: RecoverPasswordSchema })
-    }
-  })
+      return parseWithZod(formData, { schema: RecoverPasswordSchema });
+    },
+  });
+
+  // TODO: another detail is the reset password has no screen to either accept a new pass or  
+  // just say an email has been sent.. if i were to generate  a pass for them. imho i think 
+  // a screen that just says a password reset email has been sent would be good, then a separate
+  // route to accept the reset token and send that to the api when would then trigger a new email
+  // with the pass. 
 
   return (
     <div className="p-10 h-screen relative">
@@ -34,8 +39,7 @@ export default function RecoverPassword() {
       </header>
       <form
         className="w-full p-2 max-w-md space-y-4 mt-12 bg-background"
-        {...getFormProps(form)}
-      >
+        {...getFormProps(form)}>
         <span className="!mb-12 space-y-2">
           <h2 className="text-3xl font-bold">Reset your password</h2>
         </span>
@@ -44,13 +48,12 @@ export default function RecoverPassword() {
           labelProps={{ children: "Email Address" }}
           errors={fields.email.errors}
         />
-        <Button className="w-full h-14">Create Account</Button>
+        <Button className="w-full h-14">Reset Password</Button>
         <p className="text-input-placeholder w-full text-left">
           <Link
             to="/login"
-            className="text-primary-1 text-md hover:underline hover:underline-offset-4"
-          >
-            ← Back to Login 
+            className="text-primary-1 text-md hover:underline hover:underline-offset-4">
+            ← Back to Login
           </Link>
         </p>
       </form>
@@ -67,8 +70,7 @@ export default function RecoverPassword() {
             <Link to="https://discord.lumeweb.com">
               <Button
                 variant={"link"}
-                className="flex flex-row gap-x-2 text-input-placeholder"
-              >
+                className="flex flex-row gap-x-2 text-input-placeholder">
                 <img className="h-5" src={discordLogoPng} alt="Discord Logo" />
                 Connect with us
               </Button>
@@ -78,8 +80,7 @@ export default function RecoverPassword() {
             <Link to="https://lumeweb.com">
               <Button
                 variant={"link"}
-                className="flex flex-row gap-x-2 text-input-placeholder"
-              >
+                className="flex flex-row gap-x-2 text-input-placeholder">
                 <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
                 Connect with us
               </Button>
@@ -88,5 +89,5 @@ export default function RecoverPassword() {
         </ul>
       </footer>
     </div>
-  )
+  );
 }

package.json

@@ -14,7 +14,7 @@
     "@conform-to/react": "^1.0.2",
     "@conform-to/zod": "^1.0.2",
     "@fontsource-variable/manrope": "^5.0.19",
-    "@lumeweb/portal-sdk": "^0.0.0-20240306231947",
+    "@lumeweb/portal-sdk": "0.0.0-20240314110748",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -39,6 +39,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "react": "^18.2.0",
+    "react-cookie": "^7.1.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",