aleabodo/mywebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sign in and up with email confirmation

Browse Source
This commit is contained in:
Alexander Bell
2018-09-12 18:10:30 +02:00
parent 59beca4846
commit a1f7493ddf
7 changed files with 317 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
src/pages/Login.js
View File

@@ -1,4 +1,5 @@
import React, {Component} from 'react';
import { observer, inject } from 'mobx-react';
import jss from 'jss';
import preset from 'jss-preset-default';
import { Container, Button, Form, Header, Segment, Input, Icon } from 'semantic-ui-react'
@@ -29,68 +30,120 @@ Components -- END
class Login extends Component {
constructor(props){
super(props);
//Initial loading screen
const Login = inject("rootStore") ( observer(
class Login extends Component {
constructor(props){
super(props);
//Initial loading screen
/*
* Expected props
* - /
*/
/*
* Expected props
* - /
*/
//Styles
this.styles = this.getStyles();
this.sheet = jss.createStyleSheet(this.styles);
const {classes} = this.sheet.attach();
this.classes = classes;
//Styles
}
//Stored information
this.stores = this.props.rootStore.stores;
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
email: '',
password: '',
loading: false
}
//Styles
this.styles = this.getStyles();
this.sheet = jss.createStyleSheet(this.styles);
const {classes} = this.sheet.attach();
this.classes = classes;
//Styles
}
componentWillUnmount() {
this.sheet.detach()
}
componentWillUnmount() {
this.sheet.detach()
}
render() {
return(
<Container className={this.classes.container}>
<Segment padded="very">
<Form>
<Header as="h1">
Sign in
</Header>
handleChange(e) {
const value = e.target.value;
const name = e.target.name;
<Form.Field>
<label>Email adress:</label>
<Input iconPosition='left' placeholder='example@example.com'>
<Icon name='at' />
<input type="email" />
</Input>
</Form.Field>
<Form.Field>
<label>Password:</label>
<input type="password" placeholder='*******' />
</Form.Field>
<Button type='submit'>Next</Button>
</Form>
</Segment>
</Container>
);
}
this.setState({
[ name ]: value
});
}
getStyles() {
return {
container: {
padding: '20%',
paddingTop: '10%'
handleSubmit() {
const email = this.state.email;
const password = this.state.password;
this.stores.authStore.signIn(email, password).then(() => {
//Don't stop loading! Component already unmounted by then
}).catch((error) => {
console.log(error);
//Stop loading
this.setState({
loading: false
});
});
//Initialize loading
this.setState({
loading: true
});
}
render() {
return(
<div>
<LoadingPage />
<Container className={this.classes.container}>
<Segment padded="very">
<Form onSubmit={this.handleSubmit}>
<Header as="h1">
Sign in / up
</Header>
<Form.Field>
<label>Email adress:</label>
<Input iconPosition='left' placeholder='example@example.com'>
<Icon name='at' />
<input type="email" name="email" onChange={this.handleChange} autoComplete="off" required />
</Input>
</Form.Field>
<Form.Field>
<label>Password:</label>
<input type="password" name="password" onChange={this.handleChange} placeholder='**********' autoComplete="off" required />
</Form.Field>
<Button loading={this.state.loading} type='submit'>Go!</Button>
</Form>
</Segment>
</Container>
</div>
);
}
getStyles() {
return {
container: {
padding: '0%',
'@media (min-width: 500px)': {
padding: '20%',
paddingTop: '10%',
}
}
}
}
}
}
));
export default Login;

2
src/pages/Main.js
View File

@@ -9,7 +9,6 @@ import preset from 'jss-preset-default';
/*
* Component imports
*/
import LoadingPage from '../components/loadingPage';
import Menu from '../components/Menu/Menu';
jss.setup(preset());
@@ -56,7 +55,6 @@ class Main extends Component {
render() {
return(
<div>
{/*<LoadingPage />*/}
<Menu />
</div>
);

92
src/pages/VerifyEmail.js Normal file
View File

@@ -0,0 +1,92 @@
import React, {Component} from 'react';
import jss from 'jss';
import preset from 'jss-preset-default';
import { Container, Segment, Message, Button } from 'semantic-ui-react'
/*
* Functions import
*/
/*
* Component imports
*/
jss.setup(preset());
/*
###############################
Components -- START
###############################
*/
/*
###############################
Components -- END
###############################
*/
class VerifyEmail extends Component {
constructor(props){
super(props);
//Initial loading screen
/*
* Expected props
* - /
*/
//Styles
this.styles = this.getStyles();
this.sheet = jss.createStyleSheet(this.styles);
const {classes} = this.sheet.attach();
this.classes = classes;
//Styles
}
componentWillUnmount() {
this.sheet.detach()
}
reload() {
window.location.reload();
}
render() {
return(
<div>
<Container className={this.classes.container}>
<Segment padded="very">
<Message warning>
<Message.Header>Pease verify your email adress</Message.Header>
<p>Please check your emails and follow the instructions. Check your spam foulder if you didn't get it.</p>
<p>Reload this page after:</p>
<Button primary onClick={this.reload}>Reload</Button>
</Message>
</Segment>
</Container>
</div>
);
}
getStyles() {
return {
container: {
padding: '0%',
'@media (min-width: 500px)': {
padding: '20%',
paddingTop: '10%',
}
}
}
}
}
export default VerifyEmail;