Merge pull request #129 from s0lvang/feature/emailauthentication

Legge til epost og passord som et innloggingsalternativ

src/components/LoginArea.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="container">
+    <div class="formContainer">
+      <form>
+        <div class="inputContainer">
+          <label for="email">Epostaddresse</label>
+          <input id="email" type="email" v-model="email" />
+        </div>
+        <div class="authContainer">
+          <Button
+            btnText="Send login-lenke"
+            class="authBtn"
+            :btnDisabled="false"
+            @btnClicked="register"
+            required
+          />
+        </div>
+      </form>
+    </div>
+    <p class="error" v-if="errorCode">{{ errorMessage }}</p>
+    <p class="success" v-if="sentMail">
+      Sjekk eposten din for lenke å logge inn med!
+    </p>
+  </div>
+</template>
+
+<script>
+import firebase from "firebase";
+import {
+  handleSignedIn,
+  getErrorMessage,
+  getRedirectUrl
+} from "@/helpers/auth";
+import Button from "@/components/shared/Button.vue";
+
+export default {
+  name: "LoginArea",
+  data() {
+    return {
+      email: "",
+      errorCode: null,
+      sentMail: false
+    };
+  },
+  components: {
+    Button
+  },
+  computed: {
+    errorMessage() {
+      return getErrorMessage(this.errorCode);
+    }
+  },
+  methods: {
+    register() {
+      const actionCodeSettings = {
+        // URL you want to redirect back to. The domain (www.example.com) for this
+        // URL must be whitelisted in the Firebase Console.
+        url: getRedirectUrl(),
+        // This must be true.
+        handleCodeInApp: true,
+        lang: "no"
+      };
+      firebase
+        .auth()
+        .sendSignInLinkToEmail(this.email, actionCodeSettings)
+        .then(() => {
+          window.localStorage.setItem("emailForSignIn", this.email);
+          this.sentMail = true;
+        })
+        .catch(err => {
+          this.errorCode = err.code;
+        });
+    }
+  },
+  async beforeMount() {
+    const login = async url => {
+      try {
+        const fb = firebase.auth();
+        if (fb.isSignInWithEmailLink(url)) {
+          let email = window.localStorage.getItem("emailForSignIn");
+          if (!email) {
+            // If the user opens the link on another device
+            email = window.prompt("Skriv inn epostadressen din");
+          }
+          await fb
+            .signInWithEmailLink(email, url)
+            .then(() => handleSignedIn(this, fb.currentUser))
+            .then(() => window.localStorage.removeItem("emailForSignIn"));
+        }
+      } catch (err) {
+        this.error = err.code;
+      }
+    };
+    await login(window.location.href);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  margin-bottom: 3rem;
+}
+
+.formContainer {
+  display: flex;
+  justify-content: center;
+}
+.inputContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 300px;
+
+  input {
+    width: 100%;
+    color: $color-text;
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    border: 1px solid $color-background-contrast;
+    @include elevation-soft;
+    margin-bottom: 0.5rem;
+  }
+}
+
+.authContainer {
+  display: flex;
+  flex-direction: column;
+
+  .authBtn {
+    margin: 0.5rem 0;
+    width: 100%;
+    max-width: 250px;
+    align-self: center;
+  }
+  #signinBtn {
+    background: none;
+    border: 1px solid $color-primary;
+    color: $color-primary;
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+}
+
+.error {
+  text-align: center;
+  color: $color-danger;
+}
+
+.success {
+  text-align: center;
+  color: #066f06;
+}
+</style>

src/components/shared/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    @click="btnClick"
+    @click.prevent="btnClick"
     :class="isDanger ? 'isDanger' : ''"
     :disabled="btnDisabled"
   >

src/components/shared/TextInput.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <label for="text-input">{{ labelText }}</label>
     <input
-      type="text"
+      :type="inputType"
       name="text-input"
       @input="emitInputText"
       :placeholder="placeholderText"
@@ -27,6 +27,12 @@ export default {
       type: Number,
       required: false
     },
+    inputType: {
+      type: String,
+      default: "text",
+      required: false
+    },
+
     existing: String
   },
   methods: {

src/helpers/auth.js

@@ -1,7 +1,7 @@
 import firebase from "firebase";
 import fb from "@/firebaseConfig.js";
 
-export default (context, user) => {
+export const handleSignedIn = (context, user) => {
   fb.additionalUserInfoCollection
     .doc(user.uid)
     .get()
@@ -43,3 +43,22 @@ export default (context, user) => {
       }
     });
 };
+
+export const getErrorMessage = errorCode => {
+  switch (errorCode) {
+    case "auth/invalid-password":
+      return "Passordet er feil!";
+    case "auth/invalid-email":
+      return "Formatet på mailen er feil!";
+    case "auth/email-already-in-use":
+      return "Mailen skrevet inn er allerede i bruk";
+    case "auth/too-many-requests":
+      return "For mange login forsøk, prøv igjen senere";
+    default:
+      return `Ukjent errorkode: ${errorCode}`;
+  }
+};
+
+export const getRedirectUrl = () => {
+  return `${window.location.origin}/login`;
+};

src/views/Login.vue

@@ -1,7 +1,9 @@
 <template>
   <section>
     <h1 class="title">Karantenehjelpen</h1>
-    <LoginButton />
+    <GoogleLoginButton />
+    <hr class="hr-text" data-content="OR" />
+    <LoginArea />
     <strong>Hva er Karantenehjelpen?</strong>
     <p>
       Når du sitter i hjemmekarantene skal du ikke oppholde deg på steder der
@@ -28,16 +30,16 @@
 </template>
 
 <script>
+import GoogleLoginButton from "@/components/GoogleLoginButton.vue";
+import LoginArea from "@/components/LoginArea.vue";
 import firebase from "firebase";
-
-import handleSignedIn from "@/helpers/auth";
-
-import LoginButton from "@/components/LoginButton.vue";
+import { handleSignedIn } from "@/helpers/auth";
 
 export default {
   name: "login",
   components: {
-    LoginButton
+    GoogleLoginButton,
+    LoginArea
   },
   methods: {
     googleSetUpSignInCompleteListener() {
@@ -81,4 +83,45 @@ export default {
 button {
   margin: 2rem auto;
 }
+
+@media #{$tabletAndUp} {
+  h1 {
+    display: inherit;
+    margin-top: 4rem;
+    text-align: center;
+  }
+}
+.hr-text {
+  line-height: 1em;
+  position: relative;
+  outline: 0;
+  border: 0;
+  color: black;
+  text-align: center;
+  height: 1.5em;
+  opacity: 0.5;
+  &:before {
+    content: "";
+    // use the linear-gradient for the fading effect
+    // use a solid background color for a solid bar
+    background: linear-gradient(to right, transparent, #818078, transparent);
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+  }
+  &:after {
+    content: "Eller";
+    position: relative;
+    display: inline-block;
+    color: black;
+
+    padding: 0 0.5em;
+    line-height: 1.5em;
+    // this is really the only tricky part, you need to specify the background color of the container element...
+    color: #818078;
+    background-color: #fcfcfa;
+  }
+}
 </style>