fix: LoginPage -> Redux
This commit is contained in:
parent
2f7e468285
commit
95fc93f690
@ -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,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
@ -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 >;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
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 { LateinicusApp } from "./reducers";
|
||||||
|
|
||||||
import Application from "./components/app";
|
import Application from "./containers/Application";
|
||||||
|
|
||||||
const store = createStore(LateinicusApp);
|
const store = createStore(LateinicusApp);
|
||||||
|
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user