diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/NodeEditor.tsx | 2 | ||||
| -rw-r--r-- | src/index.tsx | 5 | ||||
| -rw-r--r-- | src/pages/Home.tsx | 17 | ||||
| -rw-r--r-- | src/pages/LogIn.tsx | 48 | ||||
| -rw-r--r-- | src/pages/ProjectsList.tsx | 47 | ||||
| -rw-r--r-- | src/pages/SignUp.tsx | 64 | ||||
| -rw-r--r-- | src/util.ts | 9 |
7 files changed, 108 insertions, 84 deletions
diff --git a/src/NodeEditor.tsx b/src/NodeEditor.tsx index fcfee2d..a77f21b 100644 --- a/src/NodeEditor.tsx +++ b/src/NodeEditor.tsx @@ -1,6 +1,6 @@ import { useContext, useEffect, useMemo, useRef } from 'preact/hooks'; import { signal, computed, batch, useSignal, useComputed, Signal } from '@preact/signals'; -import { Pb } from './pb.ts'; +import { Pb } from './context.ts'; import { nodeRegistry } from './nodes'; import { SocketHandlers, SocketHandler, NodeInfo } from './node.tsx'; import { InputSocket } from './dataflow.ts'; diff --git a/src/index.tsx b/src/index.tsx index 9bcdfe9..ff833cc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -12,11 +12,6 @@ export const App = () => { const pb = useMemo(() => new PocketBase(`/`)); return ( <Pb.Provider value={pb}> - <Header> - <Button kind="ghost" href="/play">Try Now</Button> - <Button kind="ghost" href="/login">Log In</Button> - <Button kind="ghost" href="/signup">Sign Up</Button> - </Header> <Router> <Home path="/" /> <SignUp path="/signup" /> diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index f177a75..43f5955 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,11 +1,18 @@ -import { Content } from '../components'; +import { Header, Content, Button } from '../components'; const Home = () => { return ( - <Content> - <p><a href="/play">Try Now</a></p> - <p><a href="/signup">Create Account</a></p> - </Content> + <> + <Header> + <Button kind="ghost" href="/play">Try Now</Button> + <Button kind="ghost" href="/login">Log In</Button> + <Button kind="ghost" href="/signup">Sign Up</Button> + </Header> + <Content> + <p><a href="/play">Try Now</a></p> + <p><a href="/signup">Create Account</a></p> + </Content> + </> ); }; diff --git a/src/pages/LogIn.tsx b/src/pages/LogIn.tsx index 7e83f98..1f6cb70 100644 --- a/src/pages/LogIn.tsx +++ b/src/pages/LogIn.tsx @@ -2,7 +2,7 @@ import { useContext } from 'preact/hooks'; import { useSignal } from '@preact/signals'; import { route } from 'preact-router'; import { Pb } from '../context.ts'; -import { TextInput, ArrowButton, FormLabel, Content, Form } from '../components'; +import { Header, Content, Form, TextInput, Button, ArrowButton, FormLabel } from '../components'; const LogIn = () => { const pb = useContext(Pb); @@ -12,31 +12,37 @@ const LogIn = () => { const onSubmit = async (event: SubmitEvent) => { event.preventDefault(); - const user = await pb.collection('users').authWithPassword(email.value, password.value); + await pb.collection('users').authWithPassword(email.value, password.value); if (pb.authStore.isValid) { - route('/' + user.username); + route('/' + pb.authStore.model.username); } }; return ( - <Content> - <Form onSubmit={onSubmit}> - <h1>Log In</h1> - <p> - Don't have an account? <a href="/signup">Sign up</a> - </p> - <hr /> - <FormLabel> - Email - <TextInput placeholder="Email" signal={email} /> - </FormLabel> - <FormLabel> - Password - <TextInput type="password" placeholder="Email" signal={email} /> - </FormLabel> - <ArrowButton>Continue</ArrowButton> - </Form> - </Content> + <> + <Header> + <Button kind="ghost" href="/play">Try Now</Button> + <Button kind="ghost" href="/signup">Sign Up</Button> + </Header> + <Content> + <Form onSubmit={onSubmit}> + <h1>Log In</h1> + <p> + Don't have an account? <a href="/signup">Sign up</a> + </p> + <hr /> + <FormLabel> + Email + <TextInput placeholder="Email" signal={email} /> + </FormLabel> + <FormLabel> + Password + <TextInput type="password" placeholder="Password" signal={password} /> + </FormLabel> + <ArrowButton>Continue</ArrowButton> + </Form> + </Content> + </> ); }; diff --git a/src/pages/ProjectsList.tsx b/src/pages/ProjectsList.tsx index d548aa7..324c9bd 100644 --- a/src/pages/ProjectsList.tsx +++ b/src/pages/ProjectsList.tsx @@ -2,7 +2,8 @@ import { useContext, useEffect } from 'preact/hooks'; import { useSignal } from '@preact/signals'; import { route } from 'preact-router'; import { Pb } from '../context.ts'; -import { TextInput, Button, Form, FormLabel, ContainedList, Content } from '../components'; +import { logOut } from '../util.ts'; +import { Header, Content, ContainedList, Form, FormLabel, TextInput, Button } from '../components'; const ProjectsList = ({ user }) => { console.log(user); @@ -25,27 +26,31 @@ const ProjectsList = ({ user }) => { route(`/${user}/${project.name}`); }; - if (projects.value === null) { - return ( - <p>Loading...</p> - ); - } return ( - <Content> - <h1>{user}'s Projects</h1> - <Form onSubmit={onCreateProject}> - <FormLabel> - Name - <TextInput placeholder="Project name" signal={projectName} /> - </FormLabel> - <Button>Create project</Button> - </Form> - <ContainedList> - {projects.value.items.map(p => ( - <li><Button kind="ghost" href={`/${user}/${p.name}`}>{p.name}</Button></li> - ))} - </ContainedList> - </Content> + <> + <Header> + <Button kind="ghost" href="/account">My Account</Button> + <Button kind="ghost" onClick={() => logOut(pb)}>Log Out</Button> + </Header> + <Content> + <h1>{user}'s Projects</h1> + <Form onSubmit={onCreateProject}> + <FormLabel> + Name + <TextInput placeholder="Project name" signal={projectName} /> + </FormLabel> + <Button>Create project</Button> + </Form> + {projects.value === null + ? <p>Loading...</p> + : <ContainedList> + {projects.value.items.map(p => ( + <li><Button kind="ghost" href={`/${user}/${p.name}`}>{p.name}</Button></li> + ))} + </ContainedList> + } + </Content> + </> ); }; diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index 8bdf35b..15b9f95 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -2,7 +2,7 @@ import { useContext } from 'preact/hooks'; import { useSignal } from '@preact/signals'; import { route } from 'preact-router'; import { Pb } from '../context.ts'; -import { TextInput, ArrowButton, Form, FormLabel, Content } from '../components'; +import { Header, Content, Form, FormLabel, TextInput, Button, ArrowButton } from '../components'; const SignUp = () => { const pb = useContext(Pb); @@ -14,7 +14,7 @@ const SignUp = () => { const onSubmit = async (event: SubmitEvent) => { event.preventDefault(); - const user = await pb.collection('users').create({ + await pb.collection('users').create({ username: username.value, email: email.value, emailVisibility: true, @@ -22,37 +22,43 @@ const SignUp = () => { passwordConfirm: confirm.value, }); if (pb.authStore.isValid) { - route('/' + user.username); + route('/' + pb.authStore.model.username); } }; return ( - <Content> - <Form onSubmit={onSubmit}> - <h1>Sign Up</h1> - <p> - Already have an account? <a href="/login">Log in</a> - </p> - <hr /> - <FormLabel> - Username - <TextInput placeholder="Username" signal={username} /> - </FormLabel> - <FormLabel> - Email - <TextInput placeholder="Email" signal={email} /> - </FormLabel> - <FormLabel> - Password - <TextInput type="password" placeholder="Password" signal={password} /> - </FormLabel> - <FormLabel> - Confirm password - <TextInput type="password" placeholder="Confirm password" signal={confirm} /> - </FormLabel> - <ArrowButton>Continue</ArrowButton> - </Form> - </Content> + <> + <Header> + <Button kind="ghost" href="/play">Try Now</Button> + <Button kind="ghost" href="/login">Log In</Button> + </Header> + <Content> + <Form onSubmit={onSubmit}> + <h1>Sign Up</h1> + <p> + Already have an account? <a href="/login">Log in</a> + </p> + <hr /> + <FormLabel> + Username + <TextInput placeholder="Username" signal={username} /> + </FormLabel> + <FormLabel> + Email + <TextInput placeholder="Email" signal={email} /> + </FormLabel> + <FormLabel> + Password + <TextInput type="password" placeholder="Password" signal={password} /> + </FormLabel> + <FormLabel> + Confirm password + <TextInput type="password" placeholder="Confirm password" signal={confirm} /> + </FormLabel> + <ArrowButton>Continue</ArrowButton> + </Form> + </Content> + </> ); }; diff --git a/src/util.ts b/src/util.ts index 9f84ffe..f181289 100644 --- a/src/util.ts +++ b/src/util.ts @@ -1,2 +1,7 @@ -export const cls = (...classes: Array<string | false | null | undefined>) => - classes.filter(c => c).join(' ');
\ No newline at end of file +import { route } from 'preact-router'; +import PocketBase from 'pocketbase'; + +export const logOut = (pb: PocketBase) => { + pb.authStore.clear(); + route('/login'); +};
\ No newline at end of file |