diff --git a/client/src/components/MainWindow.tsx b/client/src/components/MainWindow.tsx index dee2afe..725f24b 100644 --- a/client/src/components/MainWindow.tsx +++ b/client/src/components/MainWindow.tsx @@ -12,6 +12,7 @@ import ManageTagsWindow from './windows/manage_tags/ManageTagsWindow'; import { BrowserRouter, Switch, Route, useParams, Redirect } from 'react-router-dom'; import LoginWindow from './windows/login/LoginWindow'; import { useAuth } from '../lib/useAuth'; +import RegisterWindow from './windows/register/RegisterWindow'; var _ = require('lodash'); const darkTheme = createMuiTheme({ @@ -54,6 +55,10 @@ export default function MainWindow(props: any) { + + + + diff --git a/client/src/components/windows/Windows.tsx b/client/src/components/windows/Windows.tsx index a75ceac..9188b2f 100644 --- a/client/src/components/windows/Windows.tsx +++ b/client/src/components/windows/Windows.tsx @@ -12,6 +12,8 @@ import AlbumWindow, { AlbumWindowReducer } from './album/AlbumWindow'; import TagWindow, { TagWindowReducer } from './tag/TagWindow'; import { songGetters } from '../../lib/songGetters'; import ManageTagsWindow, { ManageTagsWindowReducer } from './manage_tags/ManageTagsWindow'; +import { RegisterWindowReducer } from './register/RegisterWindow'; +import { LoginWindowReducer } from './login/LoginWindow'; export enum WindowType { Query = "Query", @@ -21,6 +23,7 @@ export enum WindowType { Song = "Song", ManageTags = "ManageTags", Login = "Login", + Register = "Register", } export interface WindowState { } @@ -32,6 +35,8 @@ export const newWindowReducer = { [WindowType.Song]: SongWindowReducer, [WindowType.Tag]: TagWindowReducer, [WindowType.ManageTags]: ManageTagsWindowReducer, + [WindowType.Login]: LoginWindowReducer, + [WindowType.Register]: RegisterWindowReducer, } export const newWindowState = { @@ -82,5 +87,11 @@ export const newWindowState = { alert: null, pendingChanges: [], } - } + }, + [WindowType.Login]: () => { + return {} + }, + [WindowType.Register]: () => { + return {} + }, } \ No newline at end of file diff --git a/client/src/components/windows/login/LoginWindow.tsx b/client/src/components/windows/login/LoginWindow.tsx index 5631852..134248a 100644 --- a/client/src/components/windows/login/LoginWindow.tsx +++ b/client/src/components/windows/login/LoginWindow.tsx @@ -1,25 +1,49 @@ -import React, { useState } from 'react'; +import React, { useState, useReducer } from 'react'; import { WindowState } from "../Windows"; import { Box, Paper, Typography, TextField, Button } from "@material-ui/core"; import { useHistory, useLocation } from 'react-router'; import { useAuth, Auth } from '../../../lib/useAuth'; -export interface LoginWindowState extends WindowState { } -export enum LoginWindowStateActions { } -export function LoginWindowReducer(state: LoginWindowState, action: any) { } +export interface LoginWindowState extends WindowState { + email: string, + password: string, +} +export enum LoginWindowStateActions { + SetEmail = "SetEmail", + SetPassword = "SetPassword", +} +export function LoginWindowReducer(state: LoginWindowState, action: any) { + switch (action.type) { + case LoginWindowStateActions.SetEmail: + return { ...state, email: action.value } + case LoginWindowStateActions.SetPassword: + return { ...state, password: action.value } + default: + throw new Error("Unimplemented LoginWindow state update.") + } +} export default function LoginWindow(props: {}) { + const [state, dispatch] = useReducer(LoginWindowReducer, { + email: "", + password: "", + }); + + return +} + +export function LoginWindowControlled(props: { + state: LoginWindowState, + dispatch: (action: any) => void, +}) { let history: any = useHistory(); let location: any = useLocation(); let auth: Auth = useAuth(); let { from } = location.state || { from: { pathname: "/" } }; - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const onSubmit = (event: any) => { event.preventDefault(); - auth.signin(email, password) + auth.signin(props.state.email, props.state.password) .then(() => { history.replace(from); }) @@ -43,7 +67,10 @@ export default function LoginWindow(props: {}) { label="Email" name="email" autoFocus - onInput={(e: any) => setEmail(e.target.value)} + onInput={(e: any) => props.dispatch({ + type: LoginWindowStateActions.SetEmail, + value: e.target.value + })} /> setPassword(e.target.value)} + onInput={(e: any) => props.dispatch({ + type: LoginWindowStateActions.SetPassword, + value: e.target.value + })} /> } + + + + + +} \ No newline at end of file diff --git a/client/src/components/windows/song/SongWindow.tsx b/client/src/components/windows/song/SongWindow.tsx index 6016366..8ba8b6a 100644 --- a/client/src/components/windows/song/SongWindow.tsx +++ b/client/src/components/windows/song/SongWindow.tsx @@ -44,11 +44,6 @@ export function SongWindowReducer(state: SongWindowState, action: any) { } } -export interface IProps { - state: SongWindowState, - dispatch: (action: any) => void, -} - export async function getSongMetadata(id: number) { return (await querySongs({ query: { diff --git a/client/src/lib/useAuth.tsx b/client/src/lib/useAuth.tsx index 76cf601..6f4f0b9 100644 --- a/client/src/lib/useAuth.tsx +++ b/client/src/lib/useAuth.tsx @@ -15,7 +15,7 @@ export interface Auth { user: AuthUser | null, signout: () => void, signin: (email: string, password: string) => Promise, - signup: (email: string, password: string) => void, + signup: (email: string, password: string) => Promise, }; const authContext = createContext({ @@ -49,14 +49,14 @@ function useProvideAuth() { const response = await fetch(url, { method: "POST" }); const json = await response.json(); - if(!("userId" in json)) { + if (!("userId" in json)) { throw new Error("No UserID received from login."); } const user = { id: json.userId, email: email, - icon: , + icon: , } setUser(user); return user; @@ -73,13 +73,11 @@ function useProvideAuth() { password: password, }) }; - - return (async () => { - const response = await fetch((process.env.REACT_APP_BACKEND || "") + serverApi.RegisterUserEndpoint, requestOpts) - if(!response.ok) { - throw new Error("Failed to register user.") - } - })(); + + const response = await fetch((process.env.REACT_APP_BACKEND || "") + serverApi.RegisterUserEndpoint, requestOpts) + if (!response.ok) { + throw new Error("Failed to register user.") + } })(); }; @@ -87,7 +85,7 @@ function useProvideAuth() { return (async () => { const url = (process.env.REACT_APP_BACKEND || "") + serverApi.LogoutEndpoint; const response = await fetch(url, { method: "POST" }); - if(!response.ok) { + if (!response.ok) { throw new Error("Failed to log out."); } setUser(null);