My Account Route #3
|
|
@ -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'];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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/>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue