All files / pages SignIn.vue

0% Statements 0/12
0% Branches 0/12
0% Functions 0/4
0% Lines 0/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92                                                                                                                                                                                       
<template>
  <q-page padding class="flex flex-center content-start">
    <!-- content -->
    <q-card style="min-width: 300px; max-width: 90vw" class="q-pa-lg q-mt-md" flat>
      <q-card-section class="text-center">
        <div class="text-h2">
          <q-icon name="lock" />&nbsp; Sign in
        </div>
        <div class="text-body2 q-mt-md">Please sign in using one of the providers below</div>
      </q-card-section>
      <q-card-actions vertical class="q-mt-xl">
        <q-btn
          class="q-mb-md"
          color="red-6"
          @click="signInWithGoogle"
          :loading="status=='loading'"
          :disable="status=='loading'"
        >Sign in with Google</q-btn>
        <q-btn
          class="q-mb-md"
          color="primary"
          @click="signInWithFablabs"
          :loading="status=='loading'"
          :disable="status=='loading'"
        >Sign in with Fablabs</q-btn>
      </q-card-actions>
    </q-card>
  </q-page>
</template>
 
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  // name: 'PageName',
  computed: {
    ...mapGetters({ status: "auth/status" }),
    ...mapGetters({ user: "auth/user" }),
    ...mapGetters({ error: "auth/error" })
  },
  methods: {
    ...mapActions({
      signInWithGoogle: "auth/signInWithGoogle",
      signInWithFablabs: "auth/signInWithGoogle"
    })
  },
  data() {
    return {};
  },
  watch: {
    // user(val) {
    //   if (val) {
    //     console.log("user changed", val);
    //     const from = (this.$route.query && this.$route.query.from) || null;
    //     if (from) {
    //       this.$router.push(from);
    //     } else {
    //     }
    //   }
    // },
    error(val) {
      if (val) {
        this.$q.notify({
          message: "Some error occurred: " + val,
          color: "red-9"
        });
      }
    },
 
    status(val) {
      if (val == "loading") {
        this.$q.loading.show();
      } else {
        this.$q.loading.hide();
      }
    }
  },
  mounted() {
    if (this.user) {
      const from = this.$route.query.from || null;
      if (from && from != "/sign-in") {
        this.$router.push(from);
      } else {
        this.$router.push("/");
      }
    }
  }
};
</script>
 
<style>
</style>