fix: LoginPage -> Redux

This commit is contained in:
Alexander Polynomdivision 2018-09-18 18:59:15 +02:00
parent 2f7e468285
commit 95fc93f690
7 changed files with 187 additions and 98 deletions

View File

@ -13,3 +13,36 @@ export function setDrawerButton(state: boolean) {
show: state, show: state,
}; };
}; };
export const LOGIN_SET_SNACKBAR = "LOGIN_SET_SNACKBAR";
export function setLoginSnackbar(visibility: boolean, msg: string = "") {
return {
type: LOGIN_SET_SNACKBAR,
show: visibility,
msg,
};
};
export const LOGIN_SET_LOADING = "LOGIN_SET_LOADING";
export function setLoginLoading(visibility: boolean) {
return {
type: LOGIN_SET_LOADING,
show: visibility,
};
};
export const SET_AUTHENTICATED = "SET_AUTHENTICATED";
export function setAuthenticated(state: boolean) {
return {
type: SET_AUTHENTICATED,
status: state,
};
}
export const SET_USER = "SET_USER";
export function setUser(user: IUser) {
return {
type: SET_USER,
user,
};
}

View File

@ -5,7 +5,7 @@ import { BrowserRouter, Route, Redirect } from "react-router-dom";
import AuthRoute from "../security/AuthRoute"; import AuthRoute from "../security/AuthRoute";
import Dashboard from "../pages/dashboard"; import Dashboard from "../pages/dashboard";
import LoginPage from "../pages/login"; import LoginPage from "../containers/LoginPage";
import LevelListPage from "../pages/levelList"; import LevelListPage from "../pages/levelList";
import LevelPage from "../pages/level"; import LevelPage from "../pages/level";
import ReviewPage from "../pages/review"; import ReviewPage from "../pages/review";
@ -22,22 +22,15 @@ import { IVocab, VocabType } from "../models/vocab";
import { IReviewMetadata, ReviewType } from "../models/review"; import { IReviewMetadata, ReviewType } from "../models/review";
import { IUser } from "../models/user"; import { IUser } from "../models/user";
interface IProps {
setAuthenticated: (status: boolean) => void;
setUser: (user: IUser) => void;
};
// TODO: Replace the sessionStorage with localStorage? // TODO: Replace the sessionStorage with localStorage?
// TODO: Cache API-Calls // TODO: Cache API-Calls
// TODO: When mounting without a login, check if the sessionToken is still valid // TODO: When mounting without a login, check if the sessionToken is still valid
export default class Application extends React.Component<{}> { export default class Application extends React.Component<IProps> {
constructor(props: any) {
super(props);
// Load a key from the SessionStorage
const authKey = window.sessionStorage.getItem("sessionToken") || null;
// TODO
const loggedIn = authKey !== null;
this.login = this.login.bind(this);
this.isAuthenticated = this.isAuthenticated.bind(this);
}
getLevels(): ILevel[] { getLevels(): ILevel[] {
console.log("STUB: Application::getLevels"); console.log("STUB: Application::getLevels");
// TODO: Actually fetch them from somewhere // TODO: Actually fetch them from somewhere
@ -184,27 +177,25 @@ export default class Application extends React.Component<{}> {
} */] as IVocab[]; } */] as IVocab[];
} }
login(username: string, password: string): Promise<IUser | {}> { login = (username: string, password: string): Promise<IUser | {}> => {
return new Promise((res, rej) => { return new Promise((res, rej) => {
// TODO: First login? Redirect to /welcome
fetch(`${BACKEND_URL}/login`, { fetch(`${BACKEND_URL}/login`, {
method: "POST", method: "POST",
headers: new Headers({ headers: new Headers({
'Content-Type': "application/json", "Content-Type": "application/json",
}), }),
body: JSON.stringify({ body: JSON.stringify({
// NOTE: We will force HTTPS and hash using pbkdf2 on the // NOTE: We will force HTTPS, so this should not be a
// server // problem
username: username, username,
hash: password, password,
}), }),
}).then(data => data.json()) }).then(data => data.json())
.then((resp) => { .then(resp => {
if (resp.error === "0") { if (resp.error === "0") {
this.setState({ // Successful login
loggedIn: true, // TODO: Set the auth token here
user: resp.data, this.props.setUser(resp.data);
});
res(resp.data); res(resp.data);
} else { } else {
rej({}); rej({});
@ -214,7 +205,7 @@ export default class Application extends React.Component<{}> {
} }
// Checks whether the user is logged in // Checks whether the user is logged in
isAuthenticated() { isAuthenticated = () => {
// TODO: Security? // TODO: Security?
// TODO: Implement // TODO: Implement
return true; return true;
@ -239,12 +230,12 @@ export default class Application extends React.Component<{}> {
render() { render() {
return <BrowserRouter return <BrowserRouter
basename="/app/"> basename="/app/">
<div className="flex"> < div className="flex" >
<Drawer /> <Drawer />
<div className="content"> <div className="content">
<Route exact path="/" component={() => <Redirect to="/login" />} /> <Route exact path="/" component={() => <Redirect to="/login" />} />
<Route exact path="/login" component={() => { <Route exact path="/login" component={() => {
return <LoginPage loggedIn={this.state.loggedIn} login={this.login} /> return <LoginPage login={this.login} />
}} /> }} />
<AuthRoute <AuthRoute
isAuth={this.isAuthenticated} isAuth={this.isAuthenticated}
@ -312,7 +303,7 @@ export default class Application extends React.Component<{}> {
reviewMeta={this.getLastReview} /> reviewMeta={this.getLastReview} />
}} /> }} />
</div> </div>
</div> </div >
</BrowserRouter>; </BrowserRouter >;
} }
}; };

View File

@ -0,0 +1,22 @@
import { connect } from "react-redux";
import { IUser } from "../models/user";
import Application from "../components/app";
import { setAuthenticated, setUser } from "../actions";
const mapStateToProps = state => {
return {};
};
const mapDispatchToProps = dispatch => {
return {
setAuthenticated: (status: boolean) => dispatch(setAuthenticated(status)),
setUser: (user: IUser) => dispatch(setUser(user)),
};
};
const ApplicationContainer = connect(mapStateToProps,
mapDispatchToProps)(Application);
export default ApplicationContainer;

View File

@ -0,0 +1,23 @@
import { connect } from "react-redux";
import { setLoginSnackbar, setLoginLoading } from "../actions";
import LoginPage from "../pages/login";
const mapStateToProps = state => {
return {
loading: state.login.loading,
snackOpen: state.login.snackOpen,
snackMsg: state.login.snackMsg,
authenticated: state.authenticated,
};
};
const mapDispatchToProps = dispatch => {
return {
setLoading: (state: boolean) => dispatch(setLoginLoading(state)),
setSnackbar: (state: boolean, msg: string) => dispatch(setLoginSnackbar(state, msg)),
};
};
const LoginPageContainer = connect(mapStateToProps, mapDispatchToProps)(LoginPage);
export default LoginPageContainer;

View File

@ -6,7 +6,7 @@ import { Provider } from "react-redux";
import { LateinicusApp } from "./reducers"; import { LateinicusApp } from "./reducers";
import Application from "./components/app"; import Application from "./containers/Application";
const store = createStore(LateinicusApp); const store = createStore(LateinicusApp);

View File

@ -14,74 +14,41 @@ import { IUser } from "../models/user";
interface IProps { interface IProps {
login: (username: string, password: string) => Promise<IUser | {}>; login: (username: string, password: string) => Promise<IUser | {}>;
loggedIn: boolean; authenticated: boolean;
}
interface IState {
username: string;
password: string;
setLoading: (state: boolean) => void;
setSnackbar: (state: boolean, msg: string) => void;
loading: boolean; loading: boolean;
snackOpen: boolean;
snack: string; // The message snackMsg: string;
open: boolean;
} }
/*
* interface IState {
* loading: boolean;
*
* snack: string; // The message
* open: boolean;
* } */
export default class LoginPage extends React.Component<IProps, IState> { export default class LoginPage extends React.Component<IProps> {
constructor(props: any) { private usernameRef: any = undefined;
super(props); private passwordRef: any = undefined;
this.state = { performLogin = () => {
username: "", this.props.setLoading(true);
password: "",
loading: false,
snack: "",
open: false,
};
this.update = this.update.bind(this); const username = this.usernameRef.value || "";
this.performLogin = this.performLogin.bind(this); const password = this.passwordRef.value || "";
}
update(prop: string) {
return (event: any) => {
this.setState({
[prop]: event.target.value,
});
};
}
performLogin() {
const load = (loading: boolean) => {
this.setState({
loading
});
}
const showSnackbar = (msg: string) => {
this.setState({
open: true,
snack: msg,
});
};
load(true);
const { username, password } = this.state;
console.log(this.state);
this.props.login(username, password).then((res: IUser) => { this.props.login(username, password).then((res: IUser) => {
// Set the session key // Set the session key
window.sessionStorage.setItem("sessionToken", res.sessionToken); window.sessionStorage.setItem("sessionToken", res.sessionToken);
}, (err) => { }, (err) => {
load(false); this.props.setLoading(false);
showSnackbar("Failed to log in"); this.props.setSnackbar(true, "Failed to log in");
}); });
} }
render() { render() {
const snackbarClose = () => {
this.setState({ open: false });
};
return <div> return <div>
<Grid <Grid
container container
@ -97,15 +64,13 @@ export default class LoginPage extends React.Component<IProps, IState> {
<Grid item> <Grid item>
<TextField <TextField
label="Username" label="Username"
onChange={this.update("username")} inputRef={node => this.usernameRef = node} />
value={this.state.username} />
</Grid> </Grid>
<Grid item> <Grid item>
<TextField <TextField
label="Passwort" label="Passwort"
type="password" type="password"
value={this.state.password} inputRef={node => this.passwordRef = node} />
onChange={this.update("password")} />
</Grid> </Grid>
<Grid item> <Grid item>
<Button <Button
@ -116,7 +81,7 @@ export default class LoginPage extends React.Component<IProps, IState> {
Login Login
</Button> </Button>
{ {
this.state.loading ? ( this.props.loading ? (
<LinearProgress /> <LinearProgress />
) : undefined ) : undefined
} }
@ -126,12 +91,12 @@ export default class LoginPage extends React.Component<IProps, IState> {
</Grid> </Grid>
</Grid> </Grid>
<Snackbar <Snackbar
open={this.state.open} open={this.props.snackOpen}
onClose={snackbarClose} onClose={() => this.props.setSnackbar(false, "")}
message={this.state.snack} message={this.props.snackMsg}
autoHideDuration={6000} /> autoHideDuration={6000} />
{ {
this.props.loggedIn ? ( this.props.authenticated ? (
<Redirect to="/dashboard" /> <Redirect to="/dashboard" />
) : undefined ) : undefined
} }

View File

@ -1,16 +1,47 @@
import * as Actions from "../actions"; import * as Actions from "../actions";
const initialState = { import { ILearner } from "../models/learner";
import { IUser } from "../models/user";
interface IState {
drawer: boolean;
drawerButton: boolean;
authenticated: boolean;
// TODO: Rework this
user: IUser | {},
login: {
loading: boolean;
snackMsg: string;
snackOpen: boolean;
};
topTen: ILearner[];
};
const initialState: IState = {
// Show the drawer? // Show the drawer?
drawer: false, drawer: false,
// Should we show the button to open the drawer? // Should we show the button to open the drawer?
drawerButton: true, drawerButton: true,
// Is the user authenticated? // Is the user authenticated?
// TODO: Set this to false // TODO: Set this to false
authenticated: true, authenticated: false,
user: {},
login: {
loading: false,
snackMsg: "",
snackOpen: false,
},
// The top ten
topTen: [],
}; };
export function LateinicusApp(state = initialState, action: any) { export function LateinicusApp(state: IState = initialState, action: any) {
switch (action.type) { switch (action.type) {
case Actions.SET_DRAWER: case Actions.SET_DRAWER:
return Object.assign({}, state, { return Object.assign({}, state, {
@ -20,6 +51,30 @@ export function LateinicusApp(state = initialState, action: any) {
return Object.assign({}, state, { return Object.assign({}, state, {
drawerButton: action.show, drawerButton: action.show,
}); });
case Actions.LOGIN_SET_SNACKBAR:
return Object.assign({}, state, {
login: {
loading: state.login.loading,
snackMsg: action.msg,
snackOpen: action.show,
},
});
case Actions.LOGIN_SET_LOADING:
return Object.assign({}, state, {
login: {
loading: action.show,
snackMsg: state.login.snackMsg,
snackOpen: state.login.snackOpen,
},
});
case Actions.SET_AUTHENTICATED:
return Object.assign({}, state, {
authenticated: action.status,
});
case Actions.SET_USER:
return Object.assign({}, state, {
user: action.user,
});
default: default:
return state; return state;
} }