Skip to content

K
kiaisoft_tuananh_nuxt
Commit ce6182cc authored by vietanh-0511's avatar vietanh-0511
Browse files
Options

feature register

parent aa134228
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 67 deletions
pages/login.vue
View file @ ce6182cc
...@@ -36,6 +36,12 @@ ...@@ -36,6 +36,12 @@
<v-btn @click="clear"> <v-btn @click="clear">
clear clear
</v-btn> </v-btn>
<p class="pt-3">
Don't have an account?
<router-link to="/register">
Sign up
</router-link>
</p>
</form> </form>
</div> </div>
</template> </template>
......
pages/register.vue
View file @ ce6182cc
<!-- <template> <template>
<div style="background-color: #8fc2ff"> <div class="body">
<div class="container" style=" <form class="login-form" @submit.prevent="signup">
display: flex; <h1 class="h3 mb-3 fw-normal" style="text-align: center">
justify-content: center; Sign up
align-items: center; </h1>
height: 100vh; <v-text-field
background-color: #8fc2ff; v-model="name"
"> :error-messages="nameErrors"
<div id="form-logout"> label="Name"
<form @submit.prevent="signin"> required
<h1 class="h3 mb-3 fw-normal" style="text-align: center">Sign up</h1> @input="$v.name.$touch()"
<label>Name :</label> @blur="$v.name.$touch()"
<input type="text" class="form-control mb-2" placeholder="name" v-model="name" max="255" min="1" required /> />
<label>Email :</label> <v-text-field
<input type="email" class="form-control mb-2" placeholder="Email" v-model="email" required /> v-model="email"
<label>Password :</label> :error-messages="emailErrors"
<input type="password" class="form-control mb-2" placeholder="password" v-model="password" required /> label="E-mail"
<label>Confirm Password :</label> required
<input type="password" class="form-control mb-2" placeholder="Confirm password" v-model="confirm_password" @input="$v.email.$touch()"
required /> @blur="$v.email.$touch()"
<div class="button"> />
<button class="w-50 btn btn-lg btn-primary" type="submit"> <v-text-field
Sign up v-model="password"
</button> :error-messages="passwordErrors"
</div> :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
</form> :type="showPassword ? 'text' : 'password'"
</div> label="Password"
</div> hint="At least 6 characters"
required
@input="$v.password.$touch()"
@blur="$v.password.$touch()"
@click:append="showPassword = !showPassword"
/>
<v-text-field
v-model="confirmPassword"
:error-messages="confirmPasswordErrors"
:append-icon="showConfirmPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showConfirmPassword ? 'text' : 'password'"
label="confirmPassword"
hint="At least 6 characters"
required
@input="$v.confirmPassword.$touch()"
@blur="$v.confirmPassword.$touch()"
@click:append="showConfirmPassword = !showConfirmPassword"
/>
<v-btn class="mr-4" type="submit">
Sign up
</v-btn>
<v-btn @click="clear">
clear
</v-btn>
<p class="pt-3">
Already have an account?
<router-link to="/login">
Login
</router-link>
</p>
</form>
</div> </div>
</template> </template>
<script> <script>
import { validationMixin } from 'vuelidate'
import { required, minLength, maxLength, email, sameAs } from 'vuelidate/lib/validators'
export default { export default {
layout: 'none', mixins: [validationMixin],
data: () => { layout: 'empty',
return { validations: {
name: '', name: { required, minLength: minLength(1), maxLength: maxLength(255) },
email: '', email: { required, email },
password: '', password: { required, minLength: minLength(6) },
confirm_password: '', confirmPassword: { required, sameAsPassword: sameAs('password') }
},
data: () => ({
name: '',
email: '',
password: '',
confirmPassword: '',
showPassword: false,
showConfirmPassword: false
}),
computed: {
nameErrors () {
const errors = []
if (!this.$v.name.$dirty) {
return errors
}
!this.$v.name.required && errors.push('E-mail is required')
!this.$v.name.minLength && errors.push('Name must be at least 1 character')
!this.$v.name.maxLength && errors.push('Name can not be longer than 255 characters')
return errors
},
emailErrors () {
const errors = []
if (!this.$v.email.$dirty) {
return errors
}
!this.$v.email.email && errors.push('Must be valid e-mail')
!this.$v.email.required && errors.push('E-mail is required')
return errors
},
passwordErrors () {
const errors = []
if (!this.$v.password.$dirty) {
return errors
}
!this.$v.password.minLength && errors.push('Password must be at least 6 charactors')
!this.$v.password.required && errors.push('Password is required')
return errors
},
confirmPasswordErrors () {
const errors = []
if (!this.$v.confirmPassword.$dirty) {
return errors
}
!this.$v.confirmPassword.required && errors.push('Password confirmation is required')
!this.$v.confirmPassword.sameAsPassword && errors.push('Password and confirm password does not match')
return errors
} }
}, },
methods: { methods: {
signin() { submit () {
fetch('http://127.0.0.1:8000/api/register', { this.$v.$touch()
method: 'POST', },
headers: { clear () {
'Content-Type': 'application/json', this.$v.$reset()
Accept: 'application/json', this.name = ''
}, this.email = ''
body: JSON.stringify({ this.password = ''
this.confirmPassword = ''
},
async signup () {
try {
await this.$axios.post('http://127.0.0.1:8000/api/register', {
name: this.name, name: this.name,
email: this.email, email: this.email,
password: this.password, password: this.password,
confirm_password: this.confirm_password, confirm_password: this.confirm_password
}), }
}) ).then((resp) => {
this.$router.push("/login") if (resp.data.status === 'success') {
}, this.$toast.success('Register successfully', {
}, duration: 2000
})
this.$router.push('login')
}
})
} catch (error) {
this.$toast.error(error.response.data.message, {
duration: 2000
})
}
}
}
} }
</script> </script>
<style scoped> <style>
#form-logout { .body {
height: 60%;
width: 30%;
/* border: 1px solid black; */
padding: 12px;
padding-top: 30px;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: white; text-align: center;
border-radius: 3%;
font-weight: 600;
}
.btn {
align-items: center; align-items: center;
justify-content: center; background-color: #2c2c2c;
margin-left: 50px; height: 100vh;
}
.login-form{
width: 27%;
border: #8fc2ff 1px solid;
background-color: #121212;
border-radius: 1rem;
padding: 2rem 1rem;
border-radius: 1rem;
} }
</style> --> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment