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 { Button, Form, Input } from 'antd' |
||||||
import Axios from 'axios' |
import FormItem from 'antd/lib/form/FormItem' |
||||||
import { Link } from 'react-router-dom' |
import { Link } from 'react-router-dom' |
||||||
|
import { User } from '../../types' |
||||||
|
|
||||||
type Props = { |
import '../../scss/login.scss' |
||||||
handleLogin: (v: string) => void |
import { useUserContext } from '../../contexts/UserContext' |
||||||
} |
|
||||||
|
|
||||||
export const Login = ({ handleLogin }: Props) => { |
type FormValues = Pick<User, 'name'> & { password: string } |
||||||
const [email, setEmail] = useState('') |
|
||||||
const [password, setPassword] = useState('') |
|
||||||
const [valid, setValid] = useState(false) |
|
||||||
const [error, setError] = useState('') |
|
||||||
|
|
||||||
useEffect(() => { |
export const Login = () => { |
||||||
if (window.localStorage.userId) handleLogin(window.localStorage.userId) |
const userContext = useUserContext() |
||||||
}, [handleLogin]) |
|
||||||
|
|
||||||
useEffect(() => { |
const [form] = Form.useForm<FormValues>() |
||||||
email && password ? setValid(true) : setValid(false) |
|
||||||
}, [email, password]) |
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => { |
const handleFinish = ({ name, password }: FormValues) => { |
||||||
e.preventDefault() |
userContext.handleLogin(name, password) |
||||||
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) |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div className="login"> |
<div className="login"> |
||||||
<form onSubmit={handleSubmit}> |
<h1>Log In</h1> |
||||||
<label> |
<Form onFinish={handleFinish} form={form}> |
||||||
Type Yo Email: |
<FormItem label="Username" name="username"> |
||||||
<input |
<Input /> |
||||||
autoFocus |
</FormItem> |
||||||
onChange={e => setEmail(e.target.value)} |
<FormItem label="Password" name="password"> |
||||||
value={email} |
<Input type="password" /> |
||||||
></input> |
</FormItem> |
||||||
</label> |
|
||||||
<label> |
<div className="form-footer"> |
||||||
Type Yo Password: |
<Link to="/sign-up">No Account? Sign Up!</Link> |
||||||
<input |
<Button type="primary" htmlType="submit"> |
||||||
type="password" |
Log In! |
||||||
onChange={e => setPassword(e.target.value)} |
</Button> |
||||||
value={password} |
</div> |
||||||
></input> |
</Form> |
||||||
</label> |
|
||||||
<label> |
|
||||||
<button disabled={!valid} type="submit"> |
|
||||||
Submit |
|
||||||
</button> |
|
||||||
</label> |
|
||||||
{error && <p>{error}</p>} |
|
||||||
<Link to="/sign-up">No Account? Sign Up!</Link> |
|
||||||
</form> |
|
||||||
</div> |
</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