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

This commit is contained in:
Juan Di Toro 2024-03-14 16:43:28 +01:00
commit 1732c18059
9 changed files with 20489 additions and 322 deletions

View File

@ -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'];
}

View File

@ -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/>

View File

@ -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 />;
} }

View File

@ -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>
);
} }

View File

@ -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>

View File

@ -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>
) );
} }

View File

@ -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>
) );
} }

19971
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -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",