All files / pages Login.vue

0% Statements 0/5
100% Branches 0/0
0% Functions 0/6
0% Lines 0/5

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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114                                                                                                                                                                                                                                   
<template>
  <q-page padding class="flex justify-center content-center">
    <!-- content -->
 
    <q-card class="q-pa-md page-row">
      <div class="row">
        <div class="col-md-6 col-sm-12 q-pa-sm">
          <div class="row">
            <div class="col-12 text-center q-pa-md">
              <div class="text-grey">Please sign in to your account</div>
            </div>
            <div class="col-12 text-center q-pa-md">
              <q-btn class="bg-teal-5 text-white q-pa-sm full-width" @click="handleGoogle">
                Sign in with
                <q-icon name="fab fa-google" class="q-ml-sm"/>
              </q-btn>
            </div>
            <div class="col-12 text-center q-pa-md">
              <p>-- or --</p>
            </div>
          </div>
          <div class="login-form q-pa-md">
            <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
              <q-input
                filled
                v-model="email"
                label="Your email address *"
                hint="Email"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please type your email address',
                val => val.email.indexOf('@') != -1 || 'Please type a valid email address'
                ]"
              />
 
              <q-input
                filled
                type="password"
                v-model="password"
                label="Password *"
                lazy-rules
                :rules="[
          val => val !== null && val !== '' || 'Please type your password',
          val => val.length >= 6 || 'Please type a valid password'
        ]"
              />
 
              <div class="flex justify-start">
                <q-btn to="/signup" label="Sign up" dense color="grey-5" flat/>
                <q-space/>
                <q-btn label="Sign in" to="/account/projects" color="teal-4"/>
                <q-btn label="Reset" type="reset" color="teal-5" flat class="q-ml-sm"/>
              </div>
            </q-form>
          </div>
        </div>
        <div class="col-sm-12 col-md-6 q-pa-lg has-decoration">
          <div class="text-center">
            <q-img src="/statics/600x600fabr.png" basic style="max-width: 200px;"/>
            <div class="text-h5">Open-source Circular Fashion</div>
            <div
              class="text-display3"
            >A growing collection of open designs, patterns, recipes and zero waste projects.</div>
 
            <q-separator class="q-my-md"/>
            <div class="text-overline">A project by</div>
            <div class="text-display-3">Fabricademy: a new textile and technology academy</div>
          </div>
        </div>
      </div>
    </q-card>
  </q-page>
</template>
 
<script>
import { mapActions } from "vuex";
export default {
  // name: 'PageName',
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    ...mapActions({ signInWithGoogle: "auth/signInWithGoogle" }),
    onSubmit() {},
    onReset() {},
    handleGoogle() {
      const vm = this;
      this.signInWithGoogle()
        .then(success => {
          vm.$router.push("/account");
        })
        .catch(error => {});
    }
  }
};
</script>
 
<style>
.page-row {
  width: 100%;
  max-width: 800px;
}
.has-decoration {
  background-image: url(/statics/splash.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-blend-mode: saturation;
  background-color: rgba(255, 255, 255, 0.85);
}
</style>