All files / pages SignUp.vue

0% Statements 0/1
100% Branches 0/0
0% Functions 0/1
0% Lines 0/1

Press n or j to go to the next uncoveteal 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 115 116 117 118 119 120 121                                                                                                                                                                                                                                                 
<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">Create an account</div>
            </div>
            <div class="col-12 text-center q-pa-md">
              <q-btn class="bg-teal-2">SIGN UP with Google</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-sm">
              <q-input
                filled
                v-model="name"
                label="Your name *"
                hint="Name and surname"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Please type something']"
              />
 
              <q-input
                filled
                type="email"
                v-model="email"
                label="Your email *"
                hint="Used only for account validation"
                lazy-rules
                :rules="[
          val => val !== null && val !== '' || 'Please type your email',
          val => val.indexOf('@') == -1 || 'Please type a real email'
        ]"
              />
              <q-separator class="q-my-md"/>
              <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'
        ]"
              />
              <q-input
                filled
                type="password"
                v-model="confirm_password"
                label="Confirm *"
                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 label="Forgot Password" dense color="grey-10" flat/>
                <q-space/>-->
                <q-btn label="Submit" type="submit" 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>
export default {
  // name: 'PageName',
  data() {
    return {
      email: "",
      password: "",
      confirm_password: "",
      name: ""
    };
  }
};
</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>