Login, Registrieren reperiert

express-server/public/javascripts/login.js

@@ -10,26 +10,16 @@ var config = {
 firebase.initializeApp(config);
 
 
-function checkAuth() {
+async function checkAuth() {
-  firebase.auth().onAuthStateChanged(async function (user) {
+  await firebase.auth().onAuthStateChanged(async function (user) {
     if (user) {
-      try {
+      await firebase.auth().currentUser.getIdToken(true).then(function (idToken) {
-        firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idToken) {
         console.log("Vor Replace");
 
         window.location.replace("/dash/" + idToken);
       }).catch(function (error) {
-          console.error("Get id token client error: ", error)
+        console.error("Get id token client error: ", error);
       });
-      } catch {
-        console.error("checkAuth error: ");
-      }
-
-      // document.getElementById("loginbutton").style.display = "none";
-      // 
-    } else {
-      // document.getElementById("loginbutton").style.display = "block";
-      console.log("Check Auth error", user)
     }
   });
 }
@@ -43,9 +33,17 @@ var vue = new Vue({
   el: '#vue-app',
   data: {
     email: "",
-    password: ""
+    password: "",
+    emailandpwd: false
   },
   methods: {
+    emailpasswdfilled() {
+      var filled = false;
+      if (email && password) {
+        filled = true;
+      }
+      emailandpwd = filled;
+    },
     login() {
       var provider = new firebase.auth.GoogleAuthProvider();
       provider.addScope('profile');

express-server/public/javascripts/registerEmail.js

@@ -15,38 +15,45 @@ var vue = new Vue({
     data: {
         name: "",
         email: "",
-        picurl: "",
         password: ""
     },
     methods: {
-        registerEmail() {
+        async registerEmail() {
-            var user = firebase.auth().currentUser;
 
-            firebase.auth().createUserWithEmailAndPassword(this.email, this.password).catch(function (error) {
+
+            console.log("Start register: ", this.name, this.email, this.password)
+
+            await firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
+                .then(user => {
+                    console.log("User created: ", user);
+
+                })
+                .catch(function (error) {
                     // Handle Errors here.
                     var errorCode = error.code;
                     var errorMessage = error.message;
 
-                console.error(error)
+                    console.error(error.code + '_' + error.message);
-                // ...
+                    alert(error.code + '_' + error.message);
                 });
-
+            var user = firebase.auth().currentUser;
-            user.updateProfile({
+            if (user != null) {
+                await user.updateProfile({
                     displayName: this.name,
-                photoURL: this.picurl
+                    photoURL: "http://techfrage.de/upfiles/13547334191038217.png"
                 }).then(function () {
-                // Update successful.
+                    console.log("update name and photo");
-            }).catch(function (error) {
-                console.error(error)
-            });
 
-            user.updateEmail(this.email).then(function () {
-                // Update successful.
                 }).catch(function (error) {
-                console.error(error)
+                    console.error(error);
+                });
+                await user.updateEmail(this.email).then(function () {
+                    console.log("Email");
+                }).catch(function (error) {
+                    console.error(error);
                 });
-
                 window.location.href = "/";
             }
+        }
     },
 })

express-server/routes/index.js

@@ -13,13 +13,13 @@ var serviceAccount = require('../login/firebaseAdminKey.json');
 var firebaseAdmin = admin.initializeApp({
   credential: admin.credential.cert(serviceAccount),
   databaseURL: 'https://test-667ca.firebaseio.com'
-  });
+});
 
-  router.get('/user', function(req, res, next){
+router.get('/user', function (req, res, next) {
   res.status(200).render('user');
-  });
+});
 
-  router.post('/userbearbeiten', function(req, res, next){
+router.post('/userbearbeiten', function (req, res, next) {
   var mid = req.body.mid;
   var token = req.body.token;
   var name = req.body.name;
@@ -28,7 +28,7 @@ var firebaseAdmin = admin.initializeApp({
   firebaseAdmin.auth().verifyIdToken(token)
     .then(async function (decodedToken) {
       console.log("UID: ", decodedToken.uid);
-      console.log("Name: ", name, ' \nPic: ', pic, ' \nToken: ', token, ' \nMID: ' , mid, "\nDecoded token: ", decodedToken.uid, decodedToken.email);
+      console.log("Name: ", name, ' \nPic: ', pic, ' \nToken: ', token, ' \nMID: ', mid, "\nDecoded token: ", decodedToken.uid, decodedToken.email);
       try {
 
         res.status(200).send(await postgres.realUpdateUser(decodedToken.uid, mid, name, pic, decodedToken.email));
@@ -39,15 +39,15 @@ var firebaseAdmin = admin.initializeApp({
       console.error(await error);
     });
 
-  });
+});
-  router.get('/getuser/:uid', async function(req, res){
+router.get('/getuser/:uid', async function (req, res) {
   try {
     var sender = await postgres.getUser(req.params.uid);
     res.status(200).send(sender);
-    }catch (err) {
+  } catch (err) {
     res.status(400).send(await err);
   }
-  });
+});
 
 //Push
 router.get('/push/:msgtoken/:message/:title', function (req, res, next) {

express-server/views/index.ejs

@@ -2,29 +2,124 @@
 <html>
 
 <head>
-
   <link rel='stylesheet' href='/stylesheets/style.css' />
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
+  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-green.min.css" />
-
+  <script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-auth.js"></script>
 </head>
 
 <body>
-
   <div id='vue-app'>
+    <div class="mdl-layout mdl-js-layout">
+      <div id="login-conatiner" class="mdl-card mdl-shadow--16dp">
+        <div class="mdl-card__supporting-text">
+          <div id="login-fab" class="mdl-color--accent mdl-color-text--white">
+            <i id="lock-icon" class="material-icons">lock</i>
+          </div>
+          <div id="card-heading">
+            User Login
+          </div>
+          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <input class="mdl-textfield__input" v-model="email" id="email" type="email">
+            <label class="mdl-textfield__label" for="email">Email</label>
+          </div>
+          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <input class="mdl-textfield__input" v-model="password" id="password" type="password">
+            <label class="mdl-textfield__label" for="password">Password</label>
+          </div>
+          <p>
+            <button id="login-button" v-show="email && password"
+              class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">
+              Login mit Email
+            </button>
+          </p>
+          <p>
+            <button id="login-button" @click="login()" v-show="!email && !password"
+              class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">
+              Login mit Google
+            </button>
+          </p>
+        </div>
 
-    <input v-model="email" id="email" type="email">
+        <div class="mdl-card__actions">
-    <input v-model="password" id="password" type="password">
+          <a href="/register"><button class="mdl-button mdl-js-button mdl-button--primary">Email
-    <button id="loginemailbutton" @click="loginemail">Login with Email</button>
+              Registrieren</button></a>
+        </div>
+      </div>
+    </div>
 
-    <button id="loginbutton" @click="login">Login with google</button>
-
-    <a href="/registrieren"><button>Jetzt mit Email und Passwort Registrieren!</button></a>
 
+  </div>
+  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
   <script src="javascripts/login.js"></script>
 
+  <style>
+    * {
+      overflow-x: hidden;
+      margin: 0px;
+      padding: 0px;
+    }
 
+    body {
+      background-color: rgba(0, 0, 0, 0.0392156862745098);
+      background: linear-gradient(-45deg, rgba(16, 0, 78, 0.3686274509803922), rgba(20, 4, 81, 0));
+    }
+
+    #login-conatiner {
+      margin: auto;
+    }
+
+    .mdl-card,
+    .mdl-card__supporting-text {
+      overflow: inherit !important;
+    }
+
+    .mdl-card {
+      overflow: visible !important;
+      z-index: auto !important;
+    }
+
+    #login-fab {
+      border-radius: 50%;
+      height: 56px;
+      margin: auto;
+      min-width: 56px;
+      width: 56px;
+      overflow: hidden;
+      background: rgba(158, 158, 158, .2);
+      box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
+      position: absolute;
+      top: -30px;
+      text-align: center;
+      left: 0;
+      right: 0;
+    }
+
+    #lock-icon {
+      line-height: 56px;
+    }
+
+    #login-button {
+      width: 100%;
+      height: 40px;
+      min-width: initial;
+    }
+
+    #card-heading {
+      text-align: center;
+      font-weight: 600;
+      font-size: 32px;
+      height: 30px;
+      padding-top: 30px;
+      color: rgba(0, 0, 0, 0.31);
+    }
+
+    #forgotpassword {
+      float: right;
+    }
+  </style>
 </body>
 
 </html>

express-server/views/registrieremail.ejs

@@ -6,26 +6,116 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
+    <script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-auth.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-green.min.css" />
     <title>Registrieren</title>
 </head>
 
 <body>
     <div id="vue-app">
-        <label for="name">Name: </label>
-        <input v-model="name" type="text" id="name">
-        <label for="email">Email: </label>
-        <input v-model="email" type="email" name="email">
-        <label for="picURL">Bild URL: </label>
-        <input v-model="picurl" type="url" id="picURL">
-        <label for="password">Passwort: </label>
-        <input type="password" id="password" v-model="password">
 
-        <button @click="registerEmail()"></button>
+        <div class="mdl-layout mdl-js-layout">
+            <div id="login-conatiner" class="mdl-card mdl-shadow--16dp">
+                <div class="mdl-card__supporting-text">
+                    <div id="login-fab" class="mdl-color--accent mdl-color-text--white">
+                        <i id="lock-icon" class="material-icons">lock</i>
                     </div>
-
+                    <div id="card-heading">
+                        User Registrieren
+                    </div>
+                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                        <input class="mdl-textfield__input" v-model="name" id="name" type="name">
+                        <label class="mdl-textfield__label" for="name">Name</label>
+                    </div>
+                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                        <input class="mdl-textfield__input" v-model="email" id="email" type="email">
+                        <label class="mdl-textfield__label" for="email">Email</label>
+                    </div>
+                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                        <input class="mdl-textfield__input" v-model="password" id="password" type="password">
+                        <label class="mdl-textfield__label" for="password">Password</label>
+                    </div>
+                    <button id="login-button" @click="registerEmail()" v-show="email && password && name"
+                        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">
+                        Jetzt Registrieren
+                    </button>
+                </div>
+                <div class="mdl-card__actions">
+                    <a href="/"><button class="mdl-button mdl-js-button mdl-button--primary">Zurück zum
+                            Login</button></a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
     <script src="javascripts/registerEmail.js"></script>
+    <style>
+        * {
+            overflow-x: hidden;
+            margin: 0px;
+            padding: 0px;
+        }
+
+        body {
+            background-color: rgba(0, 0, 0, 0.0392156862745098);
+            background: linear-gradient(-45deg, rgba(16, 0, 78, 0.3686274509803922), rgba(20, 4, 81, 0));
+        }
+
+        #login-conatiner {
+            margin: auto;
+        }
+
+        .mdl-card,
+        .mdl-card__supporting-text {
+            overflow: inherit !important;
+        }
+
+        .mdl-card {
+            overflow: visible !important;
+            z-index: auto !important;
+        }
+
+        #login-fab {
+            border-radius: 50%;
+            height: 56px;
+            margin: auto;
+            min-width: 56px;
+            width: 56px;
+            overflow: hidden;
+            background: rgba(158, 158, 158, .2);
+            box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
+            position: absolute;
+            top: -30px;
+            text-align: center;
+            left: 0;
+            right: 0;
+        }
+
+        #lock-icon {
+            line-height: 56px;
+        }
+
+        #login-button {
+            width: 100%;
+            height: 40px;
+            min-width: initial;
+        }
+
+        #card-heading {
+            text-align: center;
+            font-weight: 600;
+            font-size: 32px;
+            height: 30px;
+            padding-top: 30px;
+            color: rgba(0, 0, 0, 0.31);
+        }
+
+        #forgotpassword {
+            float: right;
+        }
+    </style>
 </body>
 
 </html>

express-server/views/user.ejs

@@ -22,7 +22,8 @@
     <!-- Square card -->
     <center>
       <div class="demo-card-image mdl-card mdl-shadow--2dp">
-          <button @click="backToDash" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> Zurück
+        <button @click="backToDash"
+          class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> Zurück
           zu SmartShopper</button>
         <img v-bind:src="this.dataPic" width="100%" />
         <div class="mdl-card__title mdl-card--expand">
@@ -33,7 +34,8 @@
         </div>
         <div class="mdl-card__actions mdl-card--border">
           <div v-if="!showUploadButtons">
-              <Label class="input-custom-file mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
+            <Label
+              class="input-custom-file mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
               Foto ändern
               <input type="file" @change="onFileChange">
             </label>
@@ -42,8 +44,11 @@
             </button>
           </div>
           <div v-else>
-            <button @click="removeImage" class="mdl-button mdl-js-button mdl-button--raised mdl-button--coloredmdl-js-ripple-effect mdl-button--accent">Remove image</button>
+            <button @click="removeImage"
-            <button @click="fotoChoose" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
+              class="mdl-button mdl-js-button mdl-button--raised mdl-button--coloredmdl-js-ripple-effect mdl-button--accent">Remove
+              image</button>
+            <button @click="fotoChoose"
+              class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
               Foto setzten
             </button>
           </div>