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> |