diff --git a/src/App.js b/src/App.js index 1bc93f9..d0f6f89 100644 --- a/src/App.js +++ b/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(
); + if(this.stores.authStore.userData.uid !== null && this.stores.authStore.userData.userData !== null) { + if(this.stores.authStore.userData.userData.emailVerified) { + return(
); + } else { + return(); + } } else { return(); } diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js index 3dbda03..745cec9 100644 --- a/src/components/Menu/Menu.js +++ b/src/components/Menu/Menu.js @@ -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( - - - - - - - Home - - - - Password manager - - - - - + return( + + + - - - ); - } + + + Home + + + + Password manager + + + + + + + + + ); + } - getStyles() { - return { - + getStyles() { + return { + + } } } -} +)); export default Main; diff --git a/src/pages/Login.js b/src/pages/Login.js index 112d5aa..81cad09 100644 --- a/src/pages/Login.js +++ b/src/pages/Login.js @@ -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( - - -
-
- Sign in -
+ handleChange(e) { + const value = e.target.value; + const name = e.target.name; - - - - - - - - - - - - - - -
-
-
- ); - } + 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( +
+ + + +
+
+ Sign in / up +
+ + + + + + + + + + + + + + + +
+
+
+
+ ); + } + + + getStyles() { + return { + container: { + padding: '0%', + '@media (min-width: 500px)': { + padding: '20%', + paddingTop: '10%', + } + } } } } -} +)); export default Login; diff --git a/src/pages/Main.js b/src/pages/Main.js index f329cc7..f15c615 100644 --- a/src/pages/Main.js +++ b/src/pages/Main.js @@ -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(
- {/**/}
); diff --git a/src/pages/VerifyEmail.js b/src/pages/VerifyEmail.js new file mode 100644 index 0000000..c966b24 --- /dev/null +++ b/src/pages/VerifyEmail.js @@ -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( +
+ + + + Pease verify your email adress +

Please check your emails and follow the instructions. Check your spam foulder if you didn't get it.

+

Reload this page after:

+ +
+
+
+
+ ); + } + + + getStyles() { + return { + container: { + padding: '0%', + '@media (min-width: 500px)': { + padding: '20%', + paddingTop: '10%', + } + } + } + } +} + +export default VerifyEmail; diff --git a/src/stores/authStore.js b/src/stores/authStore.js index bad2431..6af90e2 100644 --- a/src/stores/authStore.js +++ b/src/stores/authStore.js @@ -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); }); diff --git a/src/stores/fb.js b/src/stores/fb.js index e9e5273..94d921f 100644 --- a/src/stores/fb.js +++ b/src/stores/fb.js @@ -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 {