Skip to content

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

feature login

parent 6a0b13e8
Show whitespace changes
Inline Side-by-side
Showing with 142 additions and 130 deletions
layouts/empty.vue
View file @ 5a873b10
<template>
<div>
<v-app>
<Nuxt />
</div>
</v-app>
</template>
<script>
export default {};
export default {}
</script>
<style>
</style>
\ No newline at end of file
nuxt.config.js
View file @ 5a873b10
......@@ -46,13 +46,16 @@ export default {
'@nuxtjs/axios',
'@nuxtjs/auth-next',
'@nuxtjs/toast',
'@pinia/nuxt',
'@pinia/nuxt'
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
baseURL: '/',
baseURL: 'http://127.0.0.1:8000/api/',
debug: false,
proxyHeaders: true,
credentials: false
},
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
......@@ -88,6 +91,6 @@ export default {
}
}
]
},
}
}
package.json
View file @ 5a873b10
......@@ -22,6 +22,7 @@
"vue": "^2.7.10",
"vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.10"
},
"devDependencies": {
......
pages/login.vue
View file @ 5a873b10
<template>
<div style="background-color: #8fc2ff">
<Notification :message="error" v-if="error" />
<div
class="container"
style="
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #8fc2ff;
"
>
<div id="form-login">
<form @submit.prevent="login">
<div class="body">
<form class="login-form">
<NuxtLogo />
<input
id="email"
<v-text-field
v-model="email"
type="email"
class="form-control mb-3"
placeholder="Email"
:error-messages="emailErrors"
label="E-mail"
required
@input="$v.email.$touch()"
@blur="$v.email.$touch()"
/>
<input
id="password"
<v-text-field
v-model="password"
type="password"
class="form-control mb-3"
placeholder="password"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
maxlength="16"
min="6"
:error-messages="passwordErrors"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
label="Password"
hint="At least 6 characters"
required
@input="$v.password.$touch()"
@blur="$v.password.$touch()"
@click:append="showPassword = !showPassword"
/>
<b-form-checkbox
id="checkbox-1"
v-model="status"
name="checkbox-1"
value="accepted"
class="mb-2"
unchecked-value="not_accepted"
>
Remember me
</b-form-checkbox>
<div class="col text-center">
<button
class="w-30 btn btn-lg btn-primary text-center"
type="submit"
>
Sign in
</button>
</div>
<v-checkbox
v-model="checkbox"
:error-messages="checkboxErrors"
label="Remember me"
required
@change="$v.checkbox.$touch()"
@blur="$v.checkbox.$touch()"
/>
<v-btn class="mr-4" @click="login">
Login
</v-btn>
<v-btn @click="clear">
clear
</v-btn>
</form>
</div>
</div>
</div>
</template>
<script>
import notification from "@/components/notification"
export default {
layout: "none",
components: { notification },
components: { NuxtLogo },
};
// eslint-disable-next-line no-undef
components: { NuxtLogo }
}
</script>
<script>
import { reactive } from "vue";
import axios from "axios";
import { validationMixin } from 'vuelidate'
import { required, minLength, email } from 'vuelidate/lib/validators'
export default {
layout: "none",
data: () => {
return {
email: "",
password: "",
status: null,
error: null,
};
mixins: [validationMixin],
layout: 'empty',
validations: {
email: { required, email },
password: { required, minLength: minLength(6) },
checkbox: {
checked (val) {
return val
}
}
},
data: () => ({
email: '',
password: '',
showPassword: false,
checkbox: false
}),
computed: {
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
}
},
methods: {
async login() {
submit () {
this.$v.$touch()
},
clear () {
this.$v.$reset()
this.email = ''
this.password = ''
this.checkbox = false
},
async login () {
try {
const resp = await fetch("http://127.0.0.1:8000/api/login", {
method: "POST",
const resp = await fetch('http://127.0.0.1:8000/api/login', {
method: 'POST',
headers: {
"Content-Type": "application/json",
Accept: "application/json",
'Content-Type': 'application/json',
Accept: 'application/json'
},
body: JSON.stringify({
email: this.email,
password: this.password,
status: this.status,
}),
status: this.status
})
}).then((response) => {
return response.json();
});
console.log(resp.status);
localStorage.setItem("token", resp.data.bearer_token);
this.$auth.$storage.setUniversal("token", resp.data.bearer_token);
this.$auth.$storage.setUniversal("userName", resp.data.name);
this.$auth.$storage.setUniversal("loggedIn", "true");
if (resp.status == "success") {
this.$toast.success("Successfully authenticated", {
duration: 2000,
});
this.$router.push("home");
return response.json()
})
console.log(resp.status)
localStorage.setItem('token', resp.data.bearer_token)
this.$auth.$storage.setUniversal('token', resp.data.bearer_token)
this.$auth.$storage.setUniversal('userName', resp.data.name)
this.$auth.$storage.setUniversal('loggedIn', 'true')
if (resp.status == 'success') {
this.$toast.success('Successfully authenticated', {
duration: 2000
})
this.$router.push('home')
}
} catch (e) {
// this.error = "Username or Password not valid";
this.$toast.error("Username or Password not valid", {
duration: 2000,
});
this.$router.push("/login");
this.$toast.error('Username or Password not valid', {
duration: 2000
})
this.$router.push('/login')
}
},
checkForm: function (e) {
if (this.name && this.age) {
return true;
}
this.errors = [];
if (!this.name) {
this.errors.push("Name required.");
}
if (!this.age) {
this.errors.push("Age required.");
}
e.preventDefault();
},
},
};
}
</script>
<style scoped>
#form-login {
height: 50%;
width: 25%;
padding: 12px;
padding-top: 60px;
<style>
.body {
display: flex;
justify-content: center;
background-color: white;
border-radius: 3%;
font-weight: 600;
text-align: center;
align-items: center;
background-color: #2c2c2c;
height: 100vh;
}
.login-form{
width: 27%;
border: #8fc2ff 1px solid;
background-color: #121212;
border-radius: 1rem;
padding: 2rem 1rem;
border-radius: 1rem;
}
</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