parent
486955a861
commit
c73bcf8a57
18 changed files with 7077 additions and 5495 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,49 @@ |
||||
import { DataBuddy } from '@dank-inc/data-buddy' |
||||
import { Account, Stack, Transaction, User } from '../../types' |
||||
|
||||
export const users = new DataBuddy<User>([ |
||||
{ |
||||
id: 'mock-user', |
||||
name: 'TestUser42', |
||||
email: 'testuser@email.com', |
||||
}, |
||||
]) |
||||
|
||||
export const accounts = new DataBuddy<Account>([ |
||||
{ |
||||
id: 'home', |
||||
name: 'Home Expenses', |
||||
details: 'ya', |
||||
users: ['42'], |
||||
income: 1000, |
||||
expenses: 500, |
||||
}, |
||||
]) |
||||
export const stacks = new DataBuddy<Stack>([ |
||||
{ |
||||
id: 'ccrap', |
||||
name: 'crap', |
||||
account: 'asdf', |
||||
amount: 200, |
||||
details: 'for all my crap!', |
||||
transactions: [], |
||||
}, |
||||
{ |
||||
id: 'shit', |
||||
name: 'shit', |
||||
account: 'home', |
||||
amount: 500, |
||||
details: 'for all my shit!', |
||||
transactions: [], |
||||
}, |
||||
{ |
||||
id: 'poo', |
||||
name: 'poo', |
||||
account: 'home', |
||||
amount: 800, |
||||
details: 'for all my poo!', |
||||
transactions: [], |
||||
}, |
||||
]) |
||||
|
||||
export const transactions = new DataBuddy<Transaction>([]) |
@ -1,14 +0,0 @@ |
||||
import { DataBuddy } from '@dank-inc/data-buddy' |
||||
import { Account, Stack, Transaction, User } from '../../types' |
||||
|
||||
export const users = new DataBuddy<User>([ |
||||
{ |
||||
id: '42', |
||||
name: 'TestUser42', |
||||
email: 'testuser@email.com', |
||||
}, |
||||
]) |
||||
|
||||
export const accounts = new DataBuddy<Account>([]) |
||||
export const stacks = new DataBuddy<Stack>([]) |
||||
export const transactions = new DataBuddy<Transaction>([]) |
@ -1,71 +1,40 @@ |
||||
import React, { useState, useEffect } from 'react' |
||||
import Axios from 'axios' |
||||
import { Button, Form, Input } from 'antd' |
||||
import FormItem from 'antd/lib/form/FormItem' |
||||
import { Link } from 'react-router-dom' |
||||
import { User } from '../../types' |
||||
|
||||
type Props = { |
||||
handleLogin: (v: string) => void |
||||
} |
||||
import '../../scss/login.scss' |
||||
import { useUserContext } from '../../contexts/UserContext' |
||||
|
||||
export const Login = ({ handleLogin }: Props) => { |
||||
const [email, setEmail] = useState('') |
||||
const [password, setPassword] = useState('') |
||||
const [valid, setValid] = useState(false) |
||||
const [error, setError] = useState('') |
||||
type FormValues = Pick<User, 'name'> & { password: string } |
||||
|
||||
useEffect(() => { |
||||
if (window.localStorage.userId) handleLogin(window.localStorage.userId) |
||||
}, [handleLogin]) |
||||
export const Login = () => { |
||||
const userContext = useUserContext() |
||||
|
||||
useEffect(() => { |
||||
email && password ? setValid(true) : setValid(false) |
||||
}, [email, password]) |
||||
const [form] = Form.useForm<FormValues>() |
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => { |
||||
e.preventDefault() |
||||
if (process.env.NODE_ENV === 'development') { |
||||
handleLogin(email) |
||||
return |
||||
} |
||||
if (!email || !password) { |
||||
setError('please fill out both fields') |
||||
return |
||||
} |
||||
try { |
||||
const { data } = await Axios.post('/api/login', { email, password }) |
||||
handleLogin(data.id) |
||||
window.localStorage.userId = data.id |
||||
} catch (err) { |
||||
setError(err.message) |
||||
} |
||||
const handleFinish = ({ name, password }: FormValues) => { |
||||
userContext.handleLogin(name, password) |
||||
} |
||||
|
||||
return ( |
||||
<div className="login"> |
||||
<form onSubmit={handleSubmit}> |
||||
<label> |
||||
Type Yo Email: |
||||
<input |
||||
autoFocus |
||||
onChange={e => setEmail(e.target.value)} |
||||
value={email} |
||||
></input> |
||||
</label> |
||||
<label> |
||||
Type Yo Password: |
||||
<input |
||||
type="password" |
||||
onChange={e => setPassword(e.target.value)} |
||||
value={password} |
||||
></input> |
||||
</label> |
||||
<label> |
||||
<button disabled={!valid} type="submit"> |
||||
Submit |
||||
</button> |
||||
</label> |
||||
{error && <p>{error}</p>} |
||||
<Link to="/sign-up">No Account? Sign Up!</Link> |
||||
</form> |
||||
<h1>Log In</h1> |
||||
<Form onFinish={handleFinish} form={form}> |
||||
<FormItem label="Username" name="username"> |
||||
<Input /> |
||||
</FormItem> |
||||
<FormItem label="Password" name="password"> |
||||
<Input type="password" /> |
||||
</FormItem> |
||||
|
||||
<div className="form-footer"> |
||||
<Link to="/sign-up">No Account? Sign Up!</Link> |
||||
<Button type="primary" htmlType="submit"> |
||||
Log In! |
||||
</Button> |
||||
</div> |
||||
</Form> |
||||
</div> |
||||
) |
||||
} |
||||
|
@ -1,3 +0,0 @@ |
||||
export const Profile = () => { |
||||
return <p>Look, A user profile!</p> |
||||
} |
@ -0,0 +1,33 @@ |
||||
.login { |
||||
display: flex; |
||||
box-shadow: 5px 5px #111, 2px 2px #111; |
||||
flex-direction: column; |
||||
margin: auto; |
||||
background: #222; |
||||
border-radius: 0.2rem; |
||||
padding: 2rem 2rem; |
||||
|
||||
h1 { |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
form { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
text-align: center; |
||||
|
||||
.ant-row { |
||||
margin: 1rem 2rem; |
||||
} |
||||
|
||||
.form-footer { |
||||
margin-top: 1rem; |
||||
|
||||
button { |
||||
width: 50%; |
||||
margin: auto 0 auto 1rem; |
||||
} |
||||
} |
||||
} |
||||
} |
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue