@kaizoku2508
My partner create a login page
btw I don’t see any page( containing a q-page) in your original ‘page’ code
Login component in components/Login.vue:
<template>
<div class="q-pa-md" style="width: 400px">
<q-form
@submit="onSubmit"
@reset="onReset"
class="q-gutter-md"
>
<q-input
filled
v-model="email"
label="Your email *"
lazy-rules
:rules="[val => !!val || 'Email is missing', isValidEmail]"
/>
<q-input
filled
type="password"
v-model="password"
label="Password *"
hint="Password should be 8 characters"
lazy-rules
:rules="[
val => val !== null && val !== '' || 'Please enter your password',
val => val.length === 8 || 'Please enter a valid password'
]"
/>
<q-input
filled
type="number"
v-model="phone"
label="Your phone number *"
lazy-rules
:rules="[
val => val !== null && val !== '' || 'Please enter your phone number',
val => val.length > 8 && val.length < 12 || 'Please enter a valid number'
]"
/>
<div>
<q-btn label="Login" type="submit" color="primary"/>
<q-btn flat to="/user/requestpassword" label="Forgot Password?" type="submit"/>
</div> -->
</q-form>
</div>
</template>
<script>
export default {
data () {
return {
email: null,
password: null,
phone: null,
accept: false
}
},
methods: {
isValidEmail (val) {
const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/
return emailPattern.test(val) || 'Invalid email'
},
onSubmit () {
if (this.accept !== true) {
this.$q.notify({
color: 'red-5',
textColor: 'white',
icon: 'warning'
})
} else {
this.$q.notify({
color: 'green-4',
textColor: 'white',
icon: 'cloud_done',
message: 'Submitted'
})
}
this.onReset()
},
onReset () {
this.email = null
this.password = null
this.phone = null
this.accept = false
}
}
}
</script>
Login page containing a QPage and your custom Login component:
<template>
<q-page>
<Login/>
</q-page>
</template>
<script>
import Login from "src/components/Login"
export default {
components:{Login},
data () {}
}
</script>
