[CODEBREW] Video 006

Author: strobsi

src/App.vue

@@ -1,41 +1,51 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />    
+    <LoginForm @login="login" v-if="!loggedIn" msg="Bitte einloggen" /> 
+    <div v-else>
+    Sie sind eingeloggt
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
+import LoginForm from "./components/LoginForm.vue";
 import * as fb from "./firebase";
 
 export default {
   name: "App",
   components: {
-    HelloWorld,
+    LoginForm,
+  },
+data() {
+    return {
+      loggedIn: false
+    }
   },
 
-  mounted() {
-    /*
-    fb.auth.createUserWithEmailAndPassword("[email protected]","")
-    .then((userCredentials) => {
-      var user = userCredentials.user;
-      console.log("Newly created user: ",user);
-    })
-    */
-    let email = "[email protected]";
-    let pwd = ""
-    fb.auth.signInWithEmailAndPassword(email,pwd).then((userCredentials) => {
+  methods: {
+    login(payload) {
+     fb.auth.signInWithEmailAndPassword(payload.email,payload.password).then((userCredentials) => {
       var user = userCredentials.user;
        console.log("Logged in user:",user);
+       this.loggedIn = true;
     }).catch((error) => {
       var errorCode = error.code;
       var errorMessage = error.message;
       console.log("Failed to login: ",errorCode,errorMessage);
+      this.loggedIn = false;
     });
+    }
+  },
 
-
-
+  mounted() {
+    /*
+    fb.auth.createUserWithEmailAndPassword("[email protected]","")
+    .then((userCredentials) => {
+      var user = userCredentials.user;
+      console.log("Newly created user: ",user);
+    })
+    */
     /*
     fb.demoCollection
       .doc("pbLh3aRXvxHzNCtp4QKb")

src/components/HelloWorld.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+      <form
+      >
+      <input type="email" v-model="email" placeholder="Email Adresse">
+      <br>
+      <input type="password" v-model="password" placeholder="Passwort">
+      <br>
+      <input type="button" value="LOG IN" @click="login">
+      </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoginForm',
+  props: {
+    msg: String
+  },
+
+  data() {
+    return {
+      email: "",
+      password: ""
+    }
+  },
+
+  methods: {
+    login() {
+      this.$emit("login", {
+        email: this.email,
+        password: this.password
+      })
+    },
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>