sign in and up with email confirmation
This commit is contained in:
parent
59beca4846
commit
a1f7493ddf
10
src/App.js
10
src/App.js
@ -11,6 +11,7 @@ import { observer, inject } from 'mobx-react';
|
||||
import Loading from './pages/Loading';
|
||||
import Main from './pages/Main';
|
||||
import Login from './pages/Login';
|
||||
import VerifyEmail from './pages/VerifyEmail';
|
||||
|
||||
|
||||
/*
|
||||
@ -48,10 +49,13 @@ const App = inject("rootStore") ( observer(
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.stores.authStore.userData.uid)
|
||||
if(this.stores.rootStore.isLoaded.app === true) {
|
||||
if(this.stores.authStore.userData.uid !== null) {
|
||||
return(<Main />);
|
||||
if(this.stores.authStore.userData.uid !== null && this.stores.authStore.userData.userData !== null) {
|
||||
if(this.stores.authStore.userData.userData.emailVerified) {
|
||||
return(<Main />);
|
||||
} else {
|
||||
return(<VerifyEmail />);
|
||||
}
|
||||
} else {
|
||||
return(<Login />);
|
||||
}
|
||||
|
||||
@ -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 { Menu, Button } from 'semantic-ui-react'
|
||||
@ -28,79 +29,84 @@ Components -- END
|
||||
|
||||
|
||||
|
||||
class Main extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
//Initial loading screen
|
||||
const Main = inject("rootStore") ( observer(
|
||||
class Main extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
//Initial loading screen
|
||||
|
||||
/*
|
||||
* Expected props
|
||||
* - /
|
||||
*/
|
||||
/*
|
||||
* Expected props
|
||||
* - /
|
||||
*/
|
||||
|
||||
this.handleItemClick = this.handleItemClick.bind(this);
|
||||
//Stored information
|
||||
this.stores = this.props.rootStore.stores;
|
||||
|
||||
this.state = {
|
||||
activeItem: 'Home'
|
||||
this.handleItemClick = this.handleItemClick.bind(this);
|
||||
|
||||
this.state = {
|
||||
activeItem: 'Home'
|
||||
}
|
||||
|
||||
//Styles
|
||||
this.styles = this.getStyles();
|
||||
this.sheet = jss.createStyleSheet(this.styles);
|
||||
const {classes} = this.sheet.attach();
|
||||
this.classes = classes;
|
||||
//Styles
|
||||
}
|
||||
|
||||
//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()
|
||||
}
|
||||
handleItemClick(e, { name }) {
|
||||
this.setState({
|
||||
activeItem: name
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
handleItemClick(e, { name }) {
|
||||
this.setState({
|
||||
activeItem: name
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const activeItem = this.state.activeItem
|
||||
|
||||
|
||||
render() {
|
||||
const activeItem = this.state.activeItem
|
||||
|
||||
return(
|
||||
<Menu stackable fixed="top">
|
||||
<Menu.Item header>
|
||||
<img alt="" src={require('../../files/images/logo.svg')} style={{display: 'block', width: '60px', height: '45px'}} />
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
name='Home'
|
||||
active={activeItem === 'Home'}
|
||||
onClick={this.handleItemClick}
|
||||
>
|
||||
Home
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='A' active={activeItem === 'A'} onClick={this.handleItemClick}>
|
||||
Password manager
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Menu position='right'>
|
||||
<Menu.Item>
|
||||
<Button primary>Sign out</Button>
|
||||
return(
|
||||
<Menu stackable fixed="top">
|
||||
<Menu.Item header>
|
||||
<img alt="" src={require('../../files/images/logo.svg')} style={{display: 'block', width: '60px', height: '45px'}} />
|
||||
</Menu.Item>
|
||||
</Menu.Menu>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
<Menu.Item
|
||||
name='Home'
|
||||
active={activeItem === 'Home'}
|
||||
onClick={this.handleItemClick}
|
||||
>
|
||||
Home
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='A' active={activeItem === 'A'} onClick={this.handleItemClick}>
|
||||
Password manager
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Menu position='right'>
|
||||
<Menu.Item>
|
||||
<Button primary onClick={this.stores.authStore.signOut}>Sign out</Button>
|
||||
</Menu.Item>
|
||||
</Menu.Menu>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
getStyles() {
|
||||
return {
|
||||
|
||||
getStyles() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
));
|
||||
|
||||
export default Main;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
92
src/pages/VerifyEmail.js
Normal 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;
|
||||
@ -5,7 +5,7 @@ import alertify from 'alertify.js';
|
||||
var firebase = require('./fb').fb
|
||||
var firebase_orig = require('./fb').firebase
|
||||
// Initialize Cloud Firestore through Firebase
|
||||
var db = firebase.firestore();
|
||||
//var db = firebase.firestore();
|
||||
|
||||
|
||||
class AuthStore {
|
||||
@ -36,9 +36,10 @@ class AuthStore {
|
||||
if (user) {
|
||||
//Logged in
|
||||
|
||||
console.info("Logged in as " + user.uid);
|
||||
console.info("Signed in as " + user.uid);
|
||||
Object.assign(this.userData, {
|
||||
uid: user.uid
|
||||
uid: user.uid,
|
||||
userData: user
|
||||
});
|
||||
|
||||
console.info("AuthStore loaded");
|
||||
@ -47,7 +48,7 @@ class AuthStore {
|
||||
} else {
|
||||
//Logged out
|
||||
|
||||
console.info("Logged out");
|
||||
console.info("Signed out");
|
||||
Object.assign(this.userData, {
|
||||
uid: null
|
||||
});
|
||||
@ -59,40 +60,46 @@ class AuthStore {
|
||||
}
|
||||
|
||||
|
||||
signIn(){
|
||||
//Verify phone number and then sign in
|
||||
signIn(email, password){
|
||||
//Sign in user with email and password
|
||||
|
||||
return(
|
||||
new Promise((resolve, reject) => {
|
||||
firebase.auth().signInWithEmailAndPassword(email, password).then(function(){
|
||||
alertify.success("Signed in");
|
||||
resolve();
|
||||
}).catch(function(error) {
|
||||
var errorCode = error.code;
|
||||
|
||||
if(errorCode === 'auth/wrong-password') {
|
||||
//Wrong password
|
||||
alertify.error("Password incorrect!");
|
||||
reject(error);
|
||||
}
|
||||
|
||||
if(errorCode === 'auth/user-not-found') {
|
||||
//User not signed up yet. Sign up user now
|
||||
|
||||
firebase.auth().createUserWithEmailAndPassword(email, password).then(function(){
|
||||
alertify.success("Signed in");
|
||||
|
||||
console.info("Verify phone number");
|
||||
var user = firebase.auth().currentUser;
|
||||
|
||||
const phoneNumber = this.userData.phoneCode + this.userData.phoneNumber;
|
||||
|
||||
alertify.log("....Sending verification code....");
|
||||
firebase_orig.auth().signInWithPhoneNumber(phoneNumber, window.recaptchaVerifier).then(function (confirmationResult) {
|
||||
//Code verification prompt
|
||||
alertify.log("You will receive a SMS with a verification code soon.");
|
||||
alertify.prompt("You will receive a SMS with a verification code soon. Please check your SMS on your phone. Enter the code below:",
|
||||
function (val, ev) {
|
||||
ev.preventDefault();
|
||||
//Confirm code
|
||||
confirmationResult.confirm(val).then(function (result){
|
||||
alertify.success("Successfully signed in");
|
||||
}).catch(function () {
|
||||
|
||||
alertify.error("Wrong code!");
|
||||
});
|
||||
},
|
||||
function(ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
alertify.error("You've cancelled the phone verification");
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch(function (error) {
|
||||
window.recaptchaVerifier.reset(window.recaptchaWidgetId);
|
||||
alertify.delay(0).error("Base Web doesn't support signing up yet. Please install the mobile app to sign up! Refresh Base Web after!");
|
||||
console.error(error.code);
|
||||
});
|
||||
user.sendEmailVerification().then(function() {
|
||||
// Confirmation email sent.
|
||||
resolve();
|
||||
}).catch(function(error) {
|
||||
// An error happened.
|
||||
reject(error);
|
||||
});
|
||||
}).catch(function(error) {
|
||||
alertify.error("Something went wrong. Please check your internet connection");
|
||||
reject(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -100,7 +107,7 @@ class AuthStore {
|
||||
//Signes user out
|
||||
|
||||
firebase_orig.auth().signOut().then(function(){
|
||||
|
||||
console.log('User signed out');
|
||||
}).catch(function(error){
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
@ -9,21 +9,13 @@ require("firebase/storage");
|
||||
|
||||
|
||||
var config = {
|
||||
apiKey: "AIzaSyCjWyrIzayUmEBcMcQyPvcXjNDkQONfJA8",
|
||||
authDomain: "base-6d44c.firebaseapp.com",
|
||||
databaseURL: "https://base-6d44c.firebaseio.com",
|
||||
projectId: "base-6d44c",
|
||||
storageBucket: "base-6d44c.appspot.com"
|
||||
apiKey: "AIzaSyDpuphZnuu8U-5CDm1xxdiAFmXukOFav_g",
|
||||
authDomain: "homepagelogin-d83db.firebaseapp.com",
|
||||
databaseURL: "https://homepagelogin-d83db.firebaseio.com",
|
||||
projectId: "homepagelogin-d83db",
|
||||
storageBucket: "homepagelogin-d83db.appspot.com"
|
||||
};
|
||||
|
||||
/*var config = {
|
||||
apiKey: "AIzaSyDHnDObdPUAOFJfRpgC1tOG59NhheQYUmk",
|
||||
authDomain: "netwoko-staging.firebaseapp.com",
|
||||
databaseURL: "https://netwoko-staging.firebaseio.com",
|
||||
projectId: "netwoko-staging",
|
||||
storageBucket: "netwoko-staging.appspot.com"
|
||||
};*/
|
||||
|
||||
var fb;
|
||||
|
||||
try {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user