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>