fix: LoginPage -> Redux
This commit is contained in:
parent
2f7e468285
commit
95fc93f690
@ -13,3 +13,36 @@ export function setDrawerButton(state: boolean) {
|
||||
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,
|
||||
};
|
||||
}
|
||||
|
@ -5,7 +5,7 @@ import { BrowserRouter, Route, Redirect } from "react-router-dom";
|
||||
import AuthRoute from "../security/AuthRoute";
|
||||
|
||||
import Dashboard from "../pages/dashboard";
|
||||
import LoginPage from "../pages/login";
|
||||
import LoginPage from "../containers/LoginPage";
|
||||
import LevelListPage from "../pages/levelList";
|
||||
import LevelPage from "../pages/level";
|
||||
import ReviewPage from "../pages/review";
|
||||
@ -22,22 +22,15 @@ import { IVocab, VocabType } from "../models/vocab";
|
||||
import { IReviewMetadata, ReviewType } from "../models/review";
|
||||
import { IUser } from "../models/user";
|
||||
|
||||
interface IProps {
|
||||
setAuthenticated: (status: boolean) => void;
|
||||
setUser: (user: IUser) => void;
|
||||
};
|
||||
|
||||
// TODO: Replace the sessionStorage with localStorage?
|
||||
// TODO: Cache API-Calls
|
||||
// TODO: When mounting without a login, check if the sessionToken is still valid
|
||||
export default class Application extends React.Component<{}> {
|
||||
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);
|
||||
}
|
||||
|
||||
export default class Application extends React.Component<IProps> {
|
||||
getLevels(): ILevel[] {
|
||||
console.log("STUB: Application::getLevels");
|
||||
// TODO: Actually fetch them from somewhere
|
||||
@ -184,27 +177,25 @@ export default class Application extends React.Component<{}> {
|
||||
} */] as IVocab[];
|
||||
}
|
||||
|
||||
login(username: string, password: string): Promise<IUser | {}> {
|
||||
login = (username: string, password: string): Promise<IUser | {}> => {
|
||||
return new Promise((res, rej) => {
|
||||
// TODO: First login? Redirect to /welcome
|
||||
fetch(`${BACKEND_URL}/login`, {
|
||||
method: "POST",
|
||||
headers: new Headers({
|
||||
'Content-Type': "application/json",
|
||||
"Content-Type": "application/json",
|
||||
}),
|
||||
body: JSON.stringify({
|
||||
// NOTE: We will force HTTPS and hash using pbkdf2 on the
|
||||
// server
|
||||
username: username,
|
||||
hash: password,
|
||||
// NOTE: We will force HTTPS, so this should not be a
|
||||
// problem
|
||||
username,
|
||||
password,
|
||||
}),
|
||||
}).then(data => data.json())
|
||||
.then((resp) => {
|
||||
.then(resp => {
|
||||
if (resp.error === "0") {
|
||||
this.setState({
|
||||
loggedIn: true,
|
||||
user: resp.data,
|
||||
});
|
||||
// Successful login
|
||||
// TODO: Set the auth token here
|
||||
this.props.setUser(resp.data);
|
||||
res(resp.data);
|
||||
} else {
|
||||
rej({});
|
||||
@ -214,7 +205,7 @@ export default class Application extends React.Component<{}> {
|
||||
}
|
||||
|
||||
// Checks whether the user is logged in
|
||||
isAuthenticated() {
|
||||
isAuthenticated = () => {
|
||||
// TODO: Security?
|
||||
// TODO: Implement
|
||||
return true;
|
||||
@ -239,12 +230,12 @@ export default class Application extends React.Component<{}> {
|
||||
render() {
|
||||
return <BrowserRouter
|
||||
basename="/app/">
|
||||
<div className="flex">
|
||||
< div className="flex" >
|
||||
<Drawer />
|
||||
<div className="content">
|
||||
<Route exact path="/" component={() => <Redirect to="/login" />} />
|
||||
<Route exact path="/login" component={() => {
|
||||
return <LoginPage loggedIn={this.state.loggedIn} login={this.login} />
|
||||
return <LoginPage login={this.login} />
|
||||
}} />
|
||||
<AuthRoute
|
||||
isAuth={this.isAuthenticated}
|
||||
@ -312,7 +303,7 @@ export default class Application extends React.Component<{}> {
|
||||
reviewMeta={this.getLastReview} />
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserRouter>;
|
||||
</div >
|
||||
</BrowserRouter >;
|
||||
}
|
||||
};
|
||||
|
22
src/containers/Application.ts
Normal file
22
src/containers/Application.ts
Normal 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;
|
23
src/containers/LoginPage.ts
Normal file
23
src/containers/LoginPage.ts
Normal 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;
|
@ -6,7 +6,7 @@ import { Provider } from "react-redux";
|
||||
|
||||
import { LateinicusApp } from "./reducers";
|
||||
|
||||
import Application from "./components/app";
|
||||
import Application from "./containers/Application";
|
||||
|
||||
const store = createStore(LateinicusApp);
|
||||
|
||||
|
@ -14,74 +14,41 @@ import { IUser } from "../models/user";
|
||||
|
||||
interface IProps {
|
||||
login: (username: string, password: string) => Promise<IUser | {}>;
|
||||
loggedIn: boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
username: string;
|
||||
password: string;
|
||||
authenticated: boolean;
|
||||
|
||||
setLoading: (state: boolean) => void;
|
||||
setSnackbar: (state: boolean, msg: string) => void;
|
||||
loading: boolean;
|
||||
|
||||
snack: string; // The message
|
||||
open: boolean;
|
||||
snackOpen: boolean;
|
||||
snackMsg: string;
|
||||
}
|
||||
/*
|
||||
* interface IState {
|
||||
* loading: boolean;
|
||||
*
|
||||
* snack: string; // The message
|
||||
* open: boolean;
|
||||
* } */
|
||||
|
||||
export default class LoginPage extends React.Component<IProps, IState> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
export default class LoginPage extends React.Component<IProps> {
|
||||
private usernameRef: any = undefined;
|
||||
private passwordRef: any = undefined;
|
||||
|
||||
this.state = {
|
||||
username: "",
|
||||
password: "",
|
||||
loading: false,
|
||||
snack: "",
|
||||
open: false,
|
||||
};
|
||||
performLogin = () => {
|
||||
this.props.setLoading(true);
|
||||
|
||||
this.update = this.update.bind(this);
|
||||
this.performLogin = this.performLogin.bind(this);
|
||||
}
|
||||
|
||||
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);
|
||||
const username = this.usernameRef.value || "";
|
||||
const password = this.passwordRef.value || "";
|
||||
this.props.login(username, password).then((res: IUser) => {
|
||||
// Set the session key
|
||||
window.sessionStorage.setItem("sessionToken", res.sessionToken);
|
||||
}, (err) => {
|
||||
load(false);
|
||||
showSnackbar("Failed to log in");
|
||||
this.props.setLoading(false);
|
||||
this.props.setSnackbar(true, "Failed to log in");
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const snackbarClose = () => {
|
||||
this.setState({ open: false });
|
||||
};
|
||||
|
||||
return <div>
|
||||
<Grid
|
||||
container
|
||||
@ -97,15 +64,13 @@ export default class LoginPage extends React.Component<IProps, IState> {
|
||||
<Grid item>
|
||||
<TextField
|
||||
label="Username"
|
||||
onChange={this.update("username")}
|
||||
value={this.state.username} />
|
||||
inputRef={node => this.usernameRef = node} />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<TextField
|
||||
label="Passwort"
|
||||
type="password"
|
||||
value={this.state.password}
|
||||
onChange={this.update("password")} />
|
||||
inputRef={node => this.passwordRef = node} />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button
|
||||
@ -116,7 +81,7 @@ export default class LoginPage extends React.Component<IProps, IState> {
|
||||
Login
|
||||
</Button>
|
||||
{
|
||||
this.state.loading ? (
|
||||
this.props.loading ? (
|
||||
<LinearProgress />
|
||||
) : undefined
|
||||
}
|
||||
@ -126,12 +91,12 @@ export default class LoginPage extends React.Component<IProps, IState> {
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Snackbar
|
||||
open={this.state.open}
|
||||
onClose={snackbarClose}
|
||||
message={this.state.snack}
|
||||
open={this.props.snackOpen}
|
||||
onClose={() => this.props.setSnackbar(false, "")}
|
||||
message={this.props.snackMsg}
|
||||
autoHideDuration={6000} />
|
||||
{
|
||||
this.props.loggedIn ? (
|
||||
this.props.authenticated ? (
|
||||
<Redirect to="/dashboard" />
|
||||
) : undefined
|
||||
}
|
||||
|
@ -1,16 +1,47 @@
|
||||
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?
|
||||
drawer: false,
|
||||
// Should we show the button to open the drawer?
|
||||
drawerButton: true,
|
||||
// Is the user authenticated?
|
||||
// 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) {
|
||||
case Actions.SET_DRAWER:
|
||||
return Object.assign({}, state, {
|
||||
@ -20,6 +51,30 @@ export function LateinicusApp(state = initialState, action: any) {
|
||||
return Object.assign({}, state, {
|
||||
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:
|
||||
return state;
|
||||
}
|
||||
|
Reference in New Issue
Block a user