Skip to content

K
kiaisoft_tuananh_nuxt
Commit d2ac3c22 authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh
Browse files
Options

Merge branch 'feature/login' into 'main' 

Feature/login

See merge request !1
parents 927c9a8a 2f21fd36
Show whitespace changes
Inline Side-by-side
Showing with 1716 additions and 853 deletions
components/nav.vue
View file @ d2ac3c22
<template> <template>
<div> <div>
<b-navbar toggleable="lg" type="dark" variant="info"> <b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">NavBar</b-navbar-brand> <sidebar />
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
...@@ -14,8 +14,14 @@ ...@@ -14,8 +14,14 @@
<!-- Right aligned nav items --> <!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto"> <b-navbar-nav class="ml-auto">
<b-nav-form> <b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input> <b-form-input
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button> size="sm"
class="mr-sm-2"
placeholder="Search"
></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit"
>Search</b-button
>
</b-nav-form> </b-nav-form>
<b-nav-item-dropdown text="Lang" right> <b-nav-item-dropdown text="Lang" right>
...@@ -31,20 +37,45 @@ ...@@ -31,20 +37,45 @@
<em>User</em> <em>User</em>
</template> </template>
<b-dropdown-item href="#">Profile</b-dropdown-item> <b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item> <b-dropdown-item href="#" @click="logout">Sign Out</b-dropdown-item>
</b-nav-item-dropdown> </b-nav-item-dropdown>
</b-navbar-nav> </b-navbar-nav>
</b-collapse> </b-collapse>
</b-navbar> </b-navbar>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'nav' name: "nav",
} };
</script>
<script>
import Sidebar from "@/components/sidebar";
export default {
components: { sidebar },
};
</script>
<script>
const token_access = localStorage.getItem("token");
export default {
name: "logout",
methods: {
logout() {
fetch("http://127.0.0.1:8000/api/logout", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
token: token_access,
}),
});
localStorage.removeItem("token");
this.$router.push("/");
},
},
};
</script> </script>
<style> <style></style>
</style>
\ No newline at end of file
components/notification.vue 0 → 100644
View file @ d2ac3c22
<template>
<div class="notification is-danger bg-danger">
{{ message }}
</div>
</template>
<style>
.notification {
padding: 11px;
margin: 10px 0px;
}
</style>
<script>
export default {
name: "Notification",
props: ["message"],
};
</script>
components/sidebar.vue 0 → 100644
View file @ d2ac3c22
<template>
<div>
<b-button v-b-toggle.sidebar-backdrop>More</b-button>
<b-sidebar
id="sidebar-backdrop"
title="Sidebar with backdrop"
:backdrop-variant="variant"
backdrop
shadow
>
<div class="px-3 py-2">
<b-form-group label="Backdrop variant" label-for="backdrop-variant">
<b-form-select id="backdrop-variant" v-model="variant" :options="variants"></b-form-select>
</b-form-group>
</div>
</b-sidebar>
</div>
</template>
<script>
export default {
name: "sidebar",
};
</script>
<script>
export default {
data() {
return {
variant: 'dark',
variants: [
'transparent',
'white',
'light',
'dark',
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
]
}
}
}
</script>
\ No newline at end of file
middleware/auth.js 0 → 100644
View file @ d2ac3c22
export default function(context) {
console.log('[LOG]: middleware is running ...')
}
\ No newline at end of file
middleware/stats.js 0 → 100644
View file @ d2ac3c22
import http from 'http'
export default function ({ route }) {
return http.post('http://my-stats-api.com', {
url: route.fullPath
})
}
\ No newline at end of file
middleware/web.js 0 → 100644
View file @ d2ac3c22
const token_access = localStorage.getItem('token');
export default function ({ redirect }) {
if (!token_access) {
// this.$router.push('/')
console.log('[LOG]: running ...');
}
}
\ No newline at end of file
nuxt.config.js
View file @ d2ac3c22
...@@ -41,9 +41,23 @@ export default { ...@@ -41,9 +41,23 @@ export default {
modules: [ modules: [
// https://go.nuxtjs.dev/bootstrap // https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt', 'bootstrap-vue/nuxt',
'@nuxtjs/axios',
'@nuxtjs/auth-next',
], ],
axios: {
baseURL: process.env.API_URL || ' http://localhost:8000/api/',
debug: process.env.DEBUG || false,
proxyHeaders: false,
credentials: false,
},
auth: {
},
// Build Configuration: https://go.nuxtjs.dev/config-build // Build Configuration: https://go.nuxtjs.dev/config-build
build: { build: {
},
router: {
middleware: 'web'
} }
} }
package-lock.json
View file @ d2ac3c22
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ d2ac3c22
{ {
"name": "KiaiSoft_Tuan_Anh", "name": "kiaisoft_tuan_anh",
"version": "1.0.0", "version": "1.0.0",
"private": true, "private": true,
"scripts": { "scripts": {
...@@ -9,13 +9,31 @@ ...@@ -9,13 +9,31 @@
"generate": "nuxt generate" "generate": "nuxt generate"
}, },
"dependencies": { "dependencies": {
"@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
"@nuxtjs/axios": "^5.0.0",
"axios": "^1.2.1",
"bootstrap": "^4.6.2", "bootstrap": "^4.6.2",
"bootstrap-vue": "^2.22.0", "bootstrap-vue": "^2.23.1",
"core-js": "^3.25.3", "core-js": "^3.25.3",
"jsonwebtoken": "^9.0.0", "jsonwebtoken": "^9.0.0",
"nuxt": "^2.15.8", "nuxt": "^2.15.8",
"prism-themes": "^1.9.0",
"vue": "^2.7.10", "vue": "^2.7.10",
"vue-axios": "^3.5.2",
"vue-server-renderer": "^2.7.10", "vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10" "vue-template-compiler": "^2.7.10"
} },
"devDependencies": {
"sass": "^1.57.1",
"sass-loader": "^10.4.1"
},
"description": "## Build Setup",
"main": "nuxt.config.js",
"repository": {
"type": "git",
"url": "https://gitlab.kiaisoft.com/kiaisoft.anh.tran2/kiaisoft_tuananh_nuxt.git"
},
"keywords": [],
"author": "",
"license": "ISC"
} }
pages/home/index.vue
View file @ d2ac3c22
<template> <template>
<div>
<Nav />
<h1 style="text-align: center;">HOME</h1> <h1 style="text-align: center;">HOME</h1>
</div>
</template> </template>
<script> <script>
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import Nav from "@/components/Nav";
export default {
components: { Nav },
};
// export default {
// name: "Home",
// data() {
// return {
// users: [],
// }
// },
// setup() {
// onMounted(async ()=> {
// await fetch('http://localhost:3000/api/login', {
// method: 'GET',
// headers: {'Content-Type': 'application/json'},
// data: Response.data,
// credentials: 'include',
// });
// })
// }
// }
// </script>
// <script>
// console.log(data);
</script>
<!-- <script>
export default { export default {
name: "Home", middleware: "web"
setup() {
onMounted(async ()=> {
await fetch('http://localhost:3000/api/', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
credentials: 'include',
});
})
}
} }
</script> </script> -->
<style> <style>
</style> </style>
pages/index.vue
View file @ d2ac3c22
<template> <template>
<div> <div style="background-color: #8fc2ff">
<Nav /> <Notification :message="error" v-if="error" />
<div <div
class="container" class="container"
style=" style="
...@@ -8,16 +8,17 @@ ...@@ -8,16 +8,17 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
background-color: #8fc2ff;
" "
> >
<div id="form-group"> <div id="form-group">
<form @submit.prevent="login"> <form @submit.prevent="login">
<h1 class="h3 mb-3 fw-normal">Sign In</h1> <h1 class="h3 mb-2 fw-normal" style="text-align: center">Sign In</h1>
<input <input
id="email" id="email"
v-model="email" v-model="email"
type="email" type="email"
class="form-control" class="form-control mb-3"
placeholder="Email" placeholder="Email"
required required
/> />
...@@ -25,10 +26,20 @@ ...@@ -25,10 +26,20 @@
id="password" id="password"
v-model="password" v-model="password"
type="password" type="password"
class="form-control" class="form-control mb-3"
placeholder="password" placeholder="password"
required required
/> />
<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>
<button class="w-100 btn btn-lg btn-primary" type="submit"> <button class="w-100 btn btn-lg btn-primary" type="submit">
Sign in Sign in
</button> </button>
...@@ -40,51 +51,28 @@ ...@@ -40,51 +51,28 @@
<script> <script>
import Nav from "@/components/Nav"; import Nav from "@/components/Nav";
import Notification from "@/components/Notification";
export default { export default {
components: { Nav }, components: { Nav },
components: { Notification },
}; };
</script> </script>
<script> <script>
import { reactive } from "vue"; import { reactive } from "vue";
import axios from "axios";
// export default {
// name: 'login',
// setup() {
// const data = reactive({
// email: '',
// password: '',
// checked: ''
// });
// const submit = async () => {
// await fetch('http://localhost:3000/api/', {
// method: 'POST',
// headers: {'Content-Type': 'application/json'},
// credentials: 'include',
// body: JSON.stringify(data)
// });
// await router.push('/');
// }
// return {
// data,
// submit
// }
// }
// }
export default { export default {
data: () => { data: () => {
return { return {
email: "", email: "",
password: "", password: "",
error: null,
}; };
}, },
methods: { methods: {
login() { async login() {
fetch("http://localhost:3000/login", { try {
const resp = await fetch("http://127.0.0.1:8000/api/login", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
...@@ -93,7 +81,31 @@ export default { ...@@ -93,7 +81,31 @@ export default {
email: this.email, email: this.email,
password: this.password, password: this.password,
}), }),
}).then((response) => {
return response.json();
}); });
console.log(resp.status);
localStorage.setItem("token", resp.data.bearer_token);
if (resp.status == "success") {
this.$router.push("home");
}
} catch (e) {
this.error = "Username or Password not valid";
}
// async login() {
// try {
// const response = await this.$axios.post('http://127.0.0.1:8000/api/login', {
// email: this.email,
// password: this.password
// });
// await this.$auth.setToken('local', "Bearer " + response.data.access);
// await this.$auth.setRefreshToken('local', response.data.refresh);
// await this.$auth.setUserToken(response.data.access);
// } catch (e) {
// this.error = 'Username or Password not valid'
// }
}, },
}, },
}; };
...@@ -101,14 +113,14 @@ export default { ...@@ -101,14 +113,14 @@ export default {
<style scoped> <style scoped>
#form-group { #form-group {
height: 50%; height: 50%;
width: 50%; width: 25%;
border: 1px solid black; /* border: 1px solid black; */
padding: 12px; padding: 12px;
padding-top: 60px; padding-top: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: #17a2b8; background-color: white;
border-radius: 10%; border-radius: 3%;
font-weight: 600; font-weight: 600;
} }
</style> </style>
pages/register.vue 0 → 100644
View file @ d2ac3c22
<template>
<div style="background-color: #8fc2ff;">
<div
class="container"
style="
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #8fc2ff;
"
>
<div id="form-logout">
<form @submit.prevent="signin">
<h1 class="h3 mb-3 fw-normal" style="text-align:center;">Sign up</h1>
<label>Name :</label>
<input
type="text"
class="form-control mb-2"
placeholder="name"
v-model="name"
max="255"
min="1"
required
/>
<label>Email :</label>
<input
type="email"
class="form-control mb-2"
placeholder="Email"
v-model="email"
required
/>
<label>Password :</label>
<input
type="password"
class="form-control mb-2"
placeholder="password"
v-model="password"
required
/>
<label>Confirm Password :</label>
<input
type="password"
class="form-control mb-2"
placeholder="Confirm password"
required
/>
<div class="button">
<button class="w-50 btn btn-lg btn-primary" type="submit">
Sign up
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import { reactive } from "vue";
export default {
data: () => {
return {
name: "",
email: "",
password: "",
};
},
methods: {
signin() {
fetch("http://127.0.0.1:8000/api/register", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: this.name,
email: this.email,
password: this.password,
}),
});
this.$router.push("/");
},
},
};
</script>
<style scoped>
#form-logout {
height: 60%;
width: 30%;
/* border: 1px solid black; */
padding: 12px;
padding-top: 30px;
display: flex;
justify-content: center;
background-color: white;
border-radius: 3%;
font-weight: 600;
}
.btn {
align-items: center;
justify-content: center;
margin-left: 50px;
}
</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