sign in and up with email confirmation

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) {
+        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 />);
         }

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,6 +29,7 @@ Components -- END
 
 
 
+const Main = inject("rootStore") ( observer(
   class Main extends Component {
     constructor(props){
       super(props);
@@ -38,6 +40,9 @@ class Main extends Component {
       *   - /
       */
 
+      //Stored information
+      this.stores = this.props.rootStore.stores;
+
       this.handleItemClick = this.handleItemClick.bind(this);
 
       this.state = {
@@ -88,7 +93,7 @@ class Main extends Component {
 
           <Menu.Menu position='right'>
             <Menu.Item>
-            <Button primary>Sign out</Button>
+              <Button primary onClick={this.stores.authStore.signOut}>Sign out</Button>
             </Menu.Item>
           </Menu.Menu>
         </Menu>
@@ -102,5 +107,6 @@ class Main extends Component {
       }
     }
   }
+));
 
 export default Main;

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,6 +30,7 @@ Components -- END
 
 
 
+const Login = inject("rootStore") ( observer(
   class Login extends Component {
     constructor(props){
       super(props);
@@ -39,6 +41,18 @@ class Login extends Component {
       *   - /
       */
 
+      //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);
@@ -53,32 +67,67 @@ class Login extends Component {
     }
 
 
+    handleChange(e) {
+      const value = e.target.value;
+      const name = e.target.name;
+
+      this.setState({
+        [ name ]: value 
+      });
+    }
+
+
+    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>
+              <Form onSubmit={this.handleSubmit}>
                 <Header as="h1">
-              Sign in
+                  Sign in / up
                 </Header>
 
                 <Form.Field>
                   <label>Email adress:</label>
                   <Input iconPosition='left' placeholder='example@example.com'>
                     <Icon name='at' />
-                <input type="email" />
+                    <input type="email" name="email" onChange={this.handleChange} autoComplete="off" required />
                   </Input>
                 </Form.Field>
 
                 <Form.Field>
                   <label>Password:</label>
-              <input type="password" placeholder='*******' />
+                  <input type="password" name="password" onChange={this.handleChange} placeholder='**********' autoComplete="off" required />
                 </Form.Field>
 
-            <Button type='submit'>Next</Button>
+                <Button loading={this.state.loading} type='submit'>Go!</Button>
               </Form>
             </Segment>
           </Container>
+        </div>
       );
     }
 
@@ -86,11 +135,15 @@ class Login extends Component {
     getStyles() {
       return {
         container: {
+          padding: '0%',
+          '@media (min-width: 500px)': {
             padding: '20%',
-        paddingTop: '10%'
+            paddingTop: '10%',
           }
         }
       }
     }
+  }
+));
 
 export default Login;

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(
       <div>
-        {/*<LoadingPage />*/}
         <Menu />
       </div>
     );

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(
+      <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;

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(){
+  signIn(email, password){
-    //Verify phone number and then sign in
+    //Sign in user with email and password
     
-    console.info("Verify phone number");
+    return( 
+      new Promise((resolve, reject) => {
+        firebase.auth().signInWithEmailAndPassword(email, password).then(function(){
+          alertify.success("Signed in");
+          resolve();
+        }).catch(function(error) {
+          var errorCode = error.code;
     
-    const phoneNumber = this.userData.phoneCode + this.userData.phoneNumber;
+          if(errorCode === 'auth/wrong-password') {
-
+            //Wrong password
-    alertify.log("....Sending verification code....");
+            alertify.error("Password incorrect!");
-    firebase_orig.auth().signInWithPhoneNumber(phoneNumber, window.recaptchaVerifier).then(function (confirmationResult) {
+            reject(error);
-      //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");
           }
-      );
+    
-    })
+          if(errorCode === 'auth/user-not-found') {
-    .catch(function (error) {
+            //User not signed up yet. Sign up user now
-      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!");
+            firebase.auth().createUserWithEmailAndPassword(email, password).then(function(){
-      console.error(error.code);
+              alertify.success("Signed in");
+
+              var user = firebase.auth().currentUser;
+
+              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);
     });

src/stores/fb.js

@@ -9,21 +9,13 @@ require("firebase/storage");
 
 
 var config = {
-  apiKey: "AIzaSyCjWyrIzayUmEBcMcQyPvcXjNDkQONfJA8",
+  apiKey: "AIzaSyDpuphZnuu8U-5CDm1xxdiAFmXukOFav_g",
-  authDomain: "base-6d44c.firebaseapp.com",
+  authDomain: "homepagelogin-d83db.firebaseapp.com",
-  databaseURL: "https://base-6d44c.firebaseio.com",
+  databaseURL: "https://homepagelogin-d83db.firebaseio.com",
-  projectId: "base-6d44c",
+  projectId: "homepagelogin-d83db",
-  storageBucket: "base-6d44c.appspot.com"
+  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 {