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
+ })}
/>
+}
+
+export function RegisterWindowControlled(props: {
+ state: RegisterWindowState,
+ dispatch: (action: any) => void,
+}) {
+ let history: any = useHistory();
+ let location: any = useLocation();
+ let auth: Auth = useAuth();
+ let { from } = location.state || { from: { pathname: "/" } };
+
+ const onSubmit = (event: any) => {
+ event.preventDefault();
+ auth.signup(props.state.email, props.state.password)
+ .then(() => {
+ console.log("succes!")
+ props.dispatch({
+ type: RegisterWindowStateActions.SetStatus,
+ value: RegistrationStatus.Successful,
+ })
+ }).catch((e: any) => {
+ console.log("Fail!")
+ props.dispatch({
+ type: RegisterWindowStateActions.SetStatus,
+ value: RegistrationStatus.Unsuccessful,
+ })
+ })
+ }
+
+ return
+
+
+
+ Sign up
+
+
+
+
+
+}
\ 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);