Compare commits
16 Commits
260b41b29b
...
1732c18059
Author | SHA1 | Date |
---|---|---|
Juan Di Toro | 1732c18059 | |
Juan Di Toro | a1e73b8ed8 | |
Derrick Hammer | 5f97e8c7d8 | |
Derrick Hammer | 0b5e066aab | |
Derrick Hammer | 48bb9d1121 | |
Derrick Hammer | 4c972d289d | |
Derrick Hammer | 70a4139b93 | |
Derrick Hammer | 0d7215ff66 | |
Derrick Hammer | 7b645666f6 | |
Juan Di Toro | d07dbff31f | |
Derrick Hammer | 99ac9533f0 | |
Derrick Hammer | 3f77d16f0b | |
Derrick Hammer | 273b41d243 | |
Derrick Hammer | 4259f38566 | |
Derrick Hammer | c06ca5afe9 | |
Derrick Hammer | 51618a2fda |
|
@ -1,37 +1,166 @@
|
||||||
import { AuthProvider } from "@refinedev/core"
|
import type {AuthProvider} from "@refinedev/core"
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
AuthActionResponse,
|
AuthActionResponse,
|
||||||
CheckResponse,
|
CheckResponse,
|
||||||
|
IdentityResponse,
|
||||||
OnErrorResponse
|
OnErrorResponse
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
} from "@refinedev/core/dist/interfaces/bindings/auth"
|
} 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 const authProvider: AuthProvider = {
|
export type AuthFormRequest = {
|
||||||
login: async (params: any) => {
|
email: string;
|
||||||
return { success: true } satisfies AuthActionResponse
|
password: string;
|
||||||
},
|
rememberMe: boolean;
|
||||||
logout: async (params: any) => {
|
redirectTo?: string;
|
||||||
return { success: true } satisfies AuthActionResponse
|
}
|
||||||
},
|
|
||||||
check: async (params?: any) => {
|
export type RegisterFormRequest = {
|
||||||
return { authenticated: true } satisfies CheckResponse
|
email: string;
|
||||||
},
|
password: string;
|
||||||
onError: async (error: any) => {
|
firstName: string;
|
||||||
return { logout: true } satisfies OnErrorResponse
|
lastName: string;
|
||||||
},
|
}
|
||||||
register: async (params: any) => {
|
|
||||||
return { success: true } satisfies AuthActionResponse
|
export type Identity = {
|
||||||
},
|
id: string;
|
||||||
forgotPassword: async (params: any) => {
|
firstName: string;
|
||||||
return { success: true } satisfies AuthActionResponse
|
lastName: string;
|
||||||
},
|
email: string;
|
||||||
updatePassword: async (params: any) => {
|
}
|
||||||
return { success: true } satisfies AuthActionResponse
|
|
||||||
},
|
export class PortalAuthProvider implements RequiredAuthProvider {
|
||||||
getPermissions: async (params: any) => {
|
private sdk: Sdk;
|
||||||
return { success: true } satisfies AuthActionResponse
|
|
||||||
},
|
constructor(apiUrl: string) {
|
||||||
getIdentity: async (params: any) => {
|
this.sdk = Sdk.create(apiUrl);
|
||||||
return { id: "1", fullName: "John Doe", avatar: "https://via.placeholder.com/150" }
|
|
||||||
|
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
|
// Supports weights 200-800
|
||||||
import '@fontsource-variable/manrope';
|
import '@fontsource-variable/manrope';
|
||||||
import {Refine} from "@refinedev/core";
|
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";
|
import routerProvider from "@refinedev/remix-router";
|
||||||
|
|
||||||
export const links: LinksFunction = () => [
|
export const links: LinksFunction = () => [
|
||||||
|
@ -40,7 +40,7 @@ export function Layout({children}: { children: React.ReactNode }) {
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<Refine
|
<Refine
|
||||||
authProvider={authProvider}
|
authProvider={PortalAuthProvider.create("https://alpha.pinner.xyz")}
|
||||||
routerProvider={routerProvider}
|
routerProvider={routerProvider}
|
||||||
>
|
>
|
||||||
<Outlet/>
|
<Outlet/>
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import Login from "./login";
|
|
||||||
import {useGo, useIsAuthenticated} from "@refinedev/core";
|
import {useGo, useIsAuthenticated} from "@refinedev/core";
|
||||||
import {useEffect} from "react";
|
import {useEffect} from "react";
|
||||||
|
|
||||||
|
@ -8,8 +7,12 @@ export default function Index() {
|
||||||
const go = useGo();
|
const go = useGo();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isLoading && data?.authenticated) {
|
if (!isLoading) {
|
||||||
|
if (data?.authenticated) {
|
||||||
go({to: "/dashboard", type: "replace"});
|
go({to: "/dashboard", type: "replace"});
|
||||||
|
} else {
|
||||||
|
go({to: "/login", type: "replace"});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [isLoading, data]);
|
}, [isLoading, data]);
|
||||||
|
|
||||||
|
@ -17,9 +20,5 @@ export default function Index() {
|
||||||
return <>Checking Login Status</> || null;
|
return <>Checking Login Status</> || null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data?.authenticated) {
|
return (<>Redirecting</>) || null;
|
||||||
return <>Redirecting</> || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <Login />;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,20 +1,17 @@
|
||||||
import { GeneralLayout } from "~/components/general-layout"
|
import { GeneralLayout } from "~/components/general-layout";
|
||||||
import {
|
import {
|
||||||
CloudIcon,
|
CloudIcon,
|
||||||
CloudDownloadIcon,
|
CloudDownloadIcon,
|
||||||
CloudUploadSolidIcon
|
CloudUploadSolidIcon,
|
||||||
} from "~/components/icons"
|
} from "~/components/icons";
|
||||||
import { UpgradeAccountBanner } from "~/components/upgrade-account-banner"
|
import { UpgradeAccountBanner } from "~/components/upgrade-account-banner";
|
||||||
import { UsageCard } from "~/components/usage-card"
|
import { UsageCard } from "~/components/usage-card";
|
||||||
import { UsageChart } from "~/components/usage-chart"
|
import { UsageChart } from "~/components/usage-chart";
|
||||||
|
import { Authenticated } from "@refinedev/core";
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const isLogged = true
|
|
||||||
if (!isLogged) {
|
|
||||||
window.location.href = "/login"
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
|
||||||
<GeneralLayout>
|
<GeneralLayout>
|
||||||
<h1 className="font-bold mb-4 text-3xl">Dashboard</h1>
|
<h1 className="font-bold mb-4 text-3xl">Dashboard</h1>
|
||||||
<UpgradeAccountBanner />
|
<UpgradeAccountBanner />
|
||||||
|
@ -45,7 +42,7 @@ export default function Dashboard() {
|
||||||
dataset={[
|
dataset={[
|
||||||
{ x: "3/2", y: "50" },
|
{ x: "3/2", y: "50" },
|
||||||
{ x: "3/3", y: "10" },
|
{ x: "3/3", y: "10" },
|
||||||
{ x: "3/4", y: "20" }
|
{ x: "3/4", y: "20" },
|
||||||
]}
|
]}
|
||||||
label="Storage"
|
label="Storage"
|
||||||
/>
|
/>
|
||||||
|
@ -53,7 +50,7 @@ export default function Dashboard() {
|
||||||
dataset={[
|
dataset={[
|
||||||
{ x: "3/2", y: "50" },
|
{ x: "3/2", y: "50" },
|
||||||
{ x: "3/3", y: "10" },
|
{ x: "3/3", y: "10" },
|
||||||
{ x: "3/4", y: "20" }
|
{ x: "3/4", y: "20" },
|
||||||
]}
|
]}
|
||||||
label="Download"
|
label="Download"
|
||||||
/>
|
/>
|
||||||
|
@ -61,11 +58,12 @@ export default function Dashboard() {
|
||||||
dataset={[
|
dataset={[
|
||||||
{ x: "3/2", y: "50" },
|
{ x: "3/2", y: "50" },
|
||||||
{ x: "3/3", y: "10" },
|
{ x: "3/3", y: "10" },
|
||||||
{ x: "3/4", y: "20" }
|
{ x: "3/4", y: "20" },
|
||||||
]}
|
]}
|
||||||
label="Upload"
|
label="Upload"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</GeneralLayout>
|
</GeneralLayout>
|
||||||
)
|
</Authenticated>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,6 +9,9 @@ import lumeBgPng from "~/images/lume-bg-image.png?url"
|
||||||
import {Field, FieldCheckbox} from "~/components/forms"
|
import {Field, FieldCheckbox} from "~/components/forms"
|
||||||
import {getFormProps, useForm} from "@conform-to/react"
|
import {getFormProps, useForm} from "@conform-to/react"
|
||||||
import {getZodConstraint, parseWithZod} from "@conform-to/zod"
|
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 = () => {
|
export const meta: MetaFunction = () => {
|
||||||
return [
|
return [
|
||||||
|
@ -17,9 +20,29 @@ export const meta: MetaFunction = () => {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type LoginParams = {
|
||||||
|
to: string;
|
||||||
|
}
|
||||||
|
|
||||||
export default function Login() {
|
export default function Login() {
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
|
const {isLoading: isAuthLoading, data: authData} = useIsAuthenticated();
|
||||||
const hash = location.hash
|
const hash = location.hash
|
||||||
|
const go = useGo();
|
||||||
|
const parsed = useParsed<LoginParams>()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isAuthLoading) {
|
||||||
|
if (authData?.authenticated) {
|
||||||
|
let to = "/dashboard";
|
||||||
|
if(parsed.params?.to){
|
||||||
|
to = parsed.params.to
|
||||||
|
}
|
||||||
|
|
||||||
|
go({to, type: "push"});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [isAuthLoading, authData]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-10 h-screen relative">
|
<div className="p-10 h-screen relative">
|
||||||
|
@ -74,13 +97,26 @@ const LoginSchema = z.object({
|
||||||
})
|
})
|
||||||
|
|
||||||
const LoginForm = () => {
|
const LoginForm = () => {
|
||||||
|
const login = useLogin<AuthFormRequest>()
|
||||||
|
const parsed = useParsed<LoginParams>()
|
||||||
const [form, fields] = useForm({
|
const [form, fields] = useForm({
|
||||||
id: "login",
|
id: "login",
|
||||||
constraint: getZodConstraint(LoginSchema),
|
constraint: getZodConstraint(LoginSchema),
|
||||||
onValidate({formData}) {
|
onValidate({formData}) {
|
||||||
return parseWithZod(formData, {schema: LoginSchema})
|
return parseWithZod(formData, {schema: LoginSchema})
|
||||||
},
|
},
|
||||||
shouldValidate: "onSubmit"
|
shouldValidate: "onSubmit",
|
||||||
|
onSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
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 (
|
return (
|
||||||
|
@ -114,7 +150,7 @@ const LoginForm = () => {
|
||||||
Reset Password
|
Reset Password
|
||||||
</Link>
|
</Link>
|
||||||
</p>
|
</p>
|
||||||
<Link to="/sign-up" className="block">
|
<Link to="/register" className="block">
|
||||||
<Button type="button" className="w-full h-14" variant={"outline"}>
|
<Button type="button" className="w-full h-14" variant={"outline"}>
|
||||||
Create an Account
|
Create an Account
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -9,13 +9,17 @@ import { Field, FieldCheckbox } from "~/components/forms"
|
||||||
import { getFormProps, useForm } from "@conform-to/react"
|
import { getFormProps, useForm } from "@conform-to/react"
|
||||||
import { z } from "zod"
|
import { z } from "zod"
|
||||||
import { getZodConstraint, parseWithZod } from "@conform-to/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 = () => {
|
export const meta: MetaFunction = () => {
|
||||||
return [{ title: "Sign Up" }]
|
return [{ title: "Sign Up" }];
|
||||||
}
|
};
|
||||||
|
|
||||||
const SignUpSchema = z
|
const RegisterSchema = z
|
||||||
.object({
|
.object({
|
||||||
|
firstName: z.string().min(1),
|
||||||
|
lastName: z.string().min(1),
|
||||||
email: z.string().email(),
|
email: z.string().email(),
|
||||||
password: z
|
password: z
|
||||||
.string()
|
.string()
|
||||||
|
@ -24,28 +28,49 @@ const SignUpSchema = z
|
||||||
.string()
|
.string()
|
||||||
.min(8, { message: "Password must be at least 8 characters" }),
|
.min(8, { message: "Password must be at least 8 characters" }),
|
||||||
termsOfService: z.boolean({
|
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) => {
|
.superRefine((data, ctx) => {
|
||||||
if (data.password !== data.confirmPassword) {
|
if (data.password !== data.confirmPassword) {
|
||||||
return ctx.addIssue({
|
return ctx.addIssue({
|
||||||
code: z.ZodIssueCode.custom,
|
code: z.ZodIssueCode.custom,
|
||||||
path: ["confirmPassword"],
|
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({
|
const [form, fields] = useForm({
|
||||||
id: "sign-up",
|
id: "register",
|
||||||
constraint: getZodConstraint(SignUpSchema),
|
constraint: getZodConstraint(RegisterSchema),
|
||||||
onValidate({ formData }) {
|
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 (
|
return (
|
||||||
<div className="p-10 h-screen relative">
|
<div className="p-10 h-screen relative">
|
||||||
|
@ -54,21 +79,33 @@ export default function SignUp() {
|
||||||
</header>
|
</header>
|
||||||
<form
|
<form
|
||||||
className="w-full p-2 max-w-md space-y-4 mt-12 bg-background"
|
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">
|
<span className="!mb-12 space-y-2">
|
||||||
<h2 className="text-3xl font-bold">All roads lead to Lume</h2>
|
<h2 className="text-3xl font-bold">All roads lead to Lume</h2>
|
||||||
<p className="text-input-placeholder">
|
<p className="text-input-placeholder">
|
||||||
🤘 Get 50 GB free storage and download for free,{" "}
|
🤘 Get 50 GB free storage and download for free,{" "}
|
||||||
<b
|
<b
|
||||||
className="text-primar
|
className="text-primar
|
||||||
y-2"
|
y-2">
|
||||||
>
|
|
||||||
forever
|
forever
|
||||||
</b>
|
</b>
|
||||||
.{" "}
|
.{" "}
|
||||||
</p>
|
</p>
|
||||||
</span>
|
</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
|
<Field
|
||||||
inputProps={{ name: fields.email.name }}
|
inputProps={{ name: fields.email.name }}
|
||||||
labelProps={{ children: "Email" }}
|
labelProps={{ children: "Email" }}
|
||||||
|
@ -92,19 +129,17 @@ export default function SignUp() {
|
||||||
I agree to the
|
I agree to the
|
||||||
<Link
|
<Link
|
||||||
to="/terms-of-service"
|
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
|
Terms of Service
|
||||||
</Link>
|
</Link>
|
||||||
and
|
and
|
||||||
<Link
|
<Link
|
||||||
to="/privacy-policy"
|
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
|
Privacy Policy
|
||||||
</Link>
|
</Link>
|
||||||
</span>
|
</span>
|
||||||
)
|
),
|
||||||
}}
|
}}
|
||||||
errors={fields.termsOfService.errors}
|
errors={fields.termsOfService.errors}
|
||||||
/>
|
/>
|
||||||
|
@ -113,8 +148,7 @@ export default function SignUp() {
|
||||||
Already have an account?{" "}
|
Already have an account?{" "}
|
||||||
<Link
|
<Link
|
||||||
to="/login"
|
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 →
|
Login here instead →
|
||||||
</Link>
|
</Link>
|
||||||
</p>
|
</p>
|
||||||
|
@ -132,8 +166,7 @@ export default function SignUp() {
|
||||||
<Link to="https://discord.lumeweb.com">
|
<Link to="https://discord.lumeweb.com">
|
||||||
<Button
|
<Button
|
||||||
variant={"link"}
|
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" />
|
<img className="h-5" src={discordLogoPng} alt="Discord Logo" />
|
||||||
Connect with us
|
Connect with us
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -143,8 +176,7 @@ export default function SignUp() {
|
||||||
<Link to="https://lumeweb.com">
|
<Link to="https://lumeweb.com">
|
||||||
<Button
|
<Button
|
||||||
variant={"link"}
|
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" />
|
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
|
||||||
Connect with us
|
Connect with us
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -153,5 +185,5 @@ export default function SignUp() {
|
||||||
</ul>
|
</ul>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
|
@ -1,31 +1,36 @@
|
||||||
import type { MetaFunction } from "@remix-run/node"
|
import type { MetaFunction } from "@remix-run/node";
|
||||||
import { Link } from "@remix-run/react"
|
import { Link } from "@remix-run/react";
|
||||||
import { Button } from "~/components/ui/button"
|
import { Button } from "~/components/ui/button";
|
||||||
import logoPng from "~/images/lume-logo.png?url"
|
import logoPng from "~/images/lume-logo.png?url";
|
||||||
import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
|
import lumeColorLogoPng from "~/images/lume-color-logo.png?url";
|
||||||
import discordLogoPng from "~/images/discord-logo.png?url"
|
import discordLogoPng from "~/images/discord-logo.png?url";
|
||||||
import lumeBgPng from "~/images/lume-bg-image.png?url"
|
import lumeBgPng from "~/images/lume-bg-image.png?url";
|
||||||
import { Field } from "~/components/forms"
|
import { Field } from "~/components/forms";
|
||||||
import { getFormProps, useForm } from "@conform-to/react"
|
import { getFormProps, useForm } from "@conform-to/react";
|
||||||
import { z } from "zod"
|
import { z } from "zod";
|
||||||
import { getZodConstraint, parseWithZod } from "@conform-to/zod"
|
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
|
||||||
|
|
||||||
export const meta: MetaFunction = () => {
|
export const meta: MetaFunction = () => {
|
||||||
return [{ title: "Sign Up" }]
|
return [{ title: "Sign Up" }];
|
||||||
}
|
};
|
||||||
|
|
||||||
const RecoverPasswordSchema = z
|
const RecoverPasswordSchema = z.object({
|
||||||
.object({
|
|
||||||
email: z.string().email(),
|
email: z.string().email(),
|
||||||
})
|
});
|
||||||
export default function RecoverPassword() {
|
export default function RecoverPassword() {
|
||||||
const [form, fields] = useForm({
|
const [form, fields] = useForm({
|
||||||
id: "sign-up",
|
id: "sign-up",
|
||||||
constraint: getZodConstraint(RecoverPasswordSchema),
|
constraint: getZodConstraint(RecoverPasswordSchema),
|
||||||
onValidate({ formData }) {
|
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 (
|
return (
|
||||||
<div className="p-10 h-screen relative">
|
<div className="p-10 h-screen relative">
|
||||||
|
@ -34,8 +39,7 @@ export default function RecoverPassword() {
|
||||||
</header>
|
</header>
|
||||||
<form
|
<form
|
||||||
className="w-full p-2 max-w-md space-y-4 mt-12 bg-background"
|
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">
|
<span className="!mb-12 space-y-2">
|
||||||
<h2 className="text-3xl font-bold">Reset your password</h2>
|
<h2 className="text-3xl font-bold">Reset your password</h2>
|
||||||
</span>
|
</span>
|
||||||
|
@ -44,12 +48,11 @@ export default function RecoverPassword() {
|
||||||
labelProps={{ children: "Email Address" }}
|
labelProps={{ children: "Email Address" }}
|
||||||
errors={fields.email.errors}
|
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">
|
<p className="text-input-placeholder w-full text-left">
|
||||||
<Link
|
<Link
|
||||||
to="/login"
|
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">
|
||||||
>
|
|
||||||
← Back to Login
|
← Back to Login
|
||||||
</Link>
|
</Link>
|
||||||
</p>
|
</p>
|
||||||
|
@ -67,8 +70,7 @@ export default function RecoverPassword() {
|
||||||
<Link to="https://discord.lumeweb.com">
|
<Link to="https://discord.lumeweb.com">
|
||||||
<Button
|
<Button
|
||||||
variant={"link"}
|
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" />
|
<img className="h-5" src={discordLogoPng} alt="Discord Logo" />
|
||||||
Connect with us
|
Connect with us
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -78,8 +80,7 @@ export default function RecoverPassword() {
|
||||||
<Link to="https://lumeweb.com">
|
<Link to="https://lumeweb.com">
|
||||||
<Button
|
<Button
|
||||||
variant={"link"}
|
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" />
|
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
|
||||||
Connect with us
|
Connect with us
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -88,5 +89,5 @@ export default function RecoverPassword() {
|
||||||
</ul>
|
</ul>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -14,7 +14,7 @@
|
||||||
"@conform-to/react": "^1.0.2",
|
"@conform-to/react": "^1.0.2",
|
||||||
"@conform-to/zod": "^1.0.2",
|
"@conform-to/zod": "^1.0.2",
|
||||||
"@fontsource-variable/manrope": "^5.0.19",
|
"@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-avatar": "^1.0.4",
|
||||||
"@radix-ui/react-checkbox": "^1.0.4",
|
"@radix-ui/react-checkbox": "^1.0.4",
|
||||||
"@radix-ui/react-dialog": "^1.0.5",
|
"@radix-ui/react-dialog": "^1.0.5",
|
||||||
|
@ -39,6 +39,7 @@
|
||||||
"class-variance-authority": "^0.7.0",
|
"class-variance-authority": "^0.7.0",
|
||||||
"clsx": "^2.1.0",
|
"clsx": "^2.1.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
|
"react-cookie": "^7.1.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"tailwind-merge": "^2.2.1",
|
"tailwind-merge": "^2.2.1",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
|
Loading…
Reference in New Issue