Skip to content

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

fix layouts

parent 2250c2ba
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 106 deletions
components/nav.vue
View file @ 2f21fd36
<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>
...@@ -49,7 +49,13 @@ export default { ...@@ -49,7 +49,13 @@ export default {
name: "nav", name: "nav",
}; };
</script> </script>
<script>
import Sidebar from "@/components/sidebar";
export default {
components: { sidebar },
};
</script>
<script> <script>
const token_access = localStorage.getItem("token"); const token_access = localStorage.getItem("token");
export default { export default {
......
components/notification.vue
View file @ 2f21fd36
<template> <template>
<div class="notification is-danger bg-danger"> <div class="notification is-danger bg-danger">
{{ message }} {{ message }}
</div> </div>
</template> </template>
<style> <style>
.notification { .notification {
padding: 11px; padding: 11px;
margin: 10px 0px; margin: 10px 0px;
} }
</style> </style>
<script> <script>
export default { export default {
name: 'Notification', name: "Notification",
props: ['message'] props: ["message"],
} };
</script> </script>
\ No newline at end of file
components/sidebar.vue 0 → 100644
View file @ 2f21fd36
<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/web.js
View file @ 2f21fd36
const token_access = localStorage.getItem('token'); const token_access = localStorage.getItem('token');
export default function () { export default function ({ redirect }) {
if (!token_access) { if (!token_access) {
// this.$router.push('/') // this.$router.push('/')
console.log('[LOG]: running ...') console.log('[LOG]: running ...');
} }
} }
\ No newline at end of file
package-lock.json
View file @ 2f21fd36
...@@ -9,8 +9,9 @@ ...@@ -9,8 +9,9 @@
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@nuxtjs/auth": "^4.9.1",
"@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54", "@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
"@nuxtjs/axios": "^5.0.0", "@nuxtjs/axios": "^5.13.6",
"axios": "^1.2.1", "axios": "^1.2.1",
"bootstrap": "^4.6.2", "bootstrap": "^4.6.2",
"bootstrap-vue": "^2.23.1", "bootstrap-vue": "^2.23.1",
...@@ -2383,6 +2384,21 @@ ...@@ -2383,6 +2384,21 @@
"webpackbar": "^4.0.0" "webpackbar": "^4.0.0"
} }
}, },
"node_modules/@nuxtjs/auth": {
"version": "4.9.1",
"resolved": "https://registry.npmjs.org/@nuxtjs/auth/-/auth-4.9.1.tgz",
"integrity": "sha512-h5VZanq2+P47jq3t0EnsZv800cg/ufOPC6JqvcyeDFJM99p58jHSODAjDuePo3PrZxd8hovMk7zusU5lOHgjvQ==",
"dependencies": {
"@nuxtjs/axios": "^5.9.5",
"body-parser": "^1.19.0",
"consola": "^2.11.3",
"cookie": "^0.4.0",
"is-https": "^1.0.0",
"js-cookie": "^2.2.1",
"lodash": "^4.17.15",
"nanoid": "^2.1.11"
}
},
"node_modules/@nuxtjs/auth-next": { "node_modules/@nuxtjs/auth-next": {
"version": "5.0.0-1667386184.dfbbb54", "version": "5.0.0-1667386184.dfbbb54",
"resolved": "https://registry.npmjs.org/@nuxtjs/auth-next/-/auth-next-5.0.0-1667386184.dfbbb54.tgz", "resolved": "https://registry.npmjs.org/@nuxtjs/auth-next/-/auth-next-5.0.0-1667386184.dfbbb54.tgz",
...@@ -7082,6 +7098,11 @@ ...@@ -7082,6 +7098,11 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/is-https": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-https/-/is-https-1.0.0.tgz",
"integrity": "sha512-1adLLwZT9XEXjzhQhZxd75uxf0l+xI9uTSFaZeSESjL3E1eXSPpO+u5RcgqtzeZ1KCaNvtEwZSTO2P4U5erVqQ=="
},
"node_modules/is-negative-zero": { "node_modules/is-negative-zero": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz", "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
...@@ -7306,6 +7327,11 @@ ...@@ -7306,6 +7327,11 @@
"integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==", "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==",
"peer": true "peer": true
}, },
"node_modules/js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
},
"node_modules/js-tokens": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
...@@ -7954,6 +7980,11 @@ ...@@ -7954,6 +7980,11 @@
"integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==", "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
"optional": true "optional": true
}, },
"node_modules/nanoid": {
"version": "2.1.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
"integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
},
"node_modules/nanomatch": { "node_modules/nanomatch": {
"version": "1.2.13", "version": "1.2.13",
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
...@@ -15462,6 +15493,21 @@ ...@@ -15462,6 +15493,21 @@
"webpackbar": "^4.0.0" "webpackbar": "^4.0.0"
} }
}, },
"@nuxtjs/auth": {
"version": "4.9.1",
"resolved": "https://registry.npmjs.org/@nuxtjs/auth/-/auth-4.9.1.tgz",
"integrity": "sha512-h5VZanq2+P47jq3t0EnsZv800cg/ufOPC6JqvcyeDFJM99p58jHSODAjDuePo3PrZxd8hovMk7zusU5lOHgjvQ==",
"requires": {
"@nuxtjs/axios": "^5.9.5",
"body-parser": "^1.19.0",
"consola": "^2.11.3",
"cookie": "^0.4.0",
"is-https": "^1.0.0",
"js-cookie": "^2.2.1",
"lodash": "^4.17.15",
"nanoid": "^2.1.11"
}
},
"@nuxtjs/auth-next": { "@nuxtjs/auth-next": {
"version": "5.0.0-1667386184.dfbbb54", "version": "5.0.0-1667386184.dfbbb54",
"resolved": "https://registry.npmjs.org/@nuxtjs/auth-next/-/auth-next-5.0.0-1667386184.dfbbb54.tgz", "resolved": "https://registry.npmjs.org/@nuxtjs/auth-next/-/auth-next-5.0.0-1667386184.dfbbb54.tgz",
...@@ -19124,6 +19170,11 @@ ...@@ -19124,6 +19170,11 @@
"is-extglob": "^2.1.1" "is-extglob": "^2.1.1"
} }
}, },
"is-https": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-https/-/is-https-1.0.0.tgz",
"integrity": "sha512-1adLLwZT9XEXjzhQhZxd75uxf0l+xI9uTSFaZeSESjL3E1eXSPpO+u5RcgqtzeZ1KCaNvtEwZSTO2P4U5erVqQ=="
},
"is-negative-zero": { "is-negative-zero": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz", "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
...@@ -19270,6 +19321,11 @@ ...@@ -19270,6 +19321,11 @@
"integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==", "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==",
"peer": true "peer": true
}, },
"js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
},
"js-tokens": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
...@@ -19794,6 +19850,11 @@ ...@@ -19794,6 +19850,11 @@
"integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==", "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
"optional": true "optional": true
}, },
"nanoid": {
"version": "2.1.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
"integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
},
"nanomatch": { "nanomatch": {
"version": "1.2.13", "version": "1.2.13",
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
......
pages/home/index.vue
View file @ 2f21fd36
...@@ -39,11 +39,11 @@ export default { ...@@ -39,11 +39,11 @@ export default {
// console.log(data); // console.log(data);
</script> </script>
<script> <!-- <script>
export default { export default {
middleware: "web" middleware: "web"
} }
</script> </script> -->
<style> <style>
</style> </style>
pages/index.vue
View file @ 2f21fd36
<template> <template>
<div> <div style="background-color: #8fc2ff">
<Notification :message="error" v-if="error"/> <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,87 +51,76 @@ ...@@ -40,87 +51,76 @@
<script> <script>
import Nav from "@/components/Nav"; import Nav from "@/components/Nav";
import Notification from '@/components/Notification'; import Notification from "@/components/Notification";
export default { export default {
components: { Nav }, components: { Nav },
components: {Notification} components: { Notification },
}; };
</script> </script>
<script> <script>
import { reactive } from "vue"; import { reactive } from "vue";
import axios from 'axios'; import axios from "axios";
export default { export default {
data: () => { data: () => {
return { return {
email: "", email: "",
password: "", password: "",
error: null error: null,
}; };
}, },
methods: { methods: {
async login() { async login() {
try { try {
const resp = await fetch("http://127.0.0.1:8000/api/login", { 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",
}, },
body: JSON.stringify({ body: JSON.stringify({
email: this.email, email: this.email,
password: this.password, password: this.password,
}), }),
}).then((response) => { }).then((response) => {
return response.json(); return response.json();
});
}); console.log(resp.status);
console.log(resp.status); localStorage.setItem("token", resp.data.bearer_token);
localStorage.setItem('token', resp.data.bearer_token); if (resp.status == "success") {
if(resp.status == "success"){ this.$router.push("home");
}
this.$router.push('home') } catch (e) {
} this.error = "Username or Password not valid";
} 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); // async login() {
// await this.$auth.setRefreshToken('local', response.data.refresh); // try {
// await this.$auth.setUserToken(response.data.access); // const response = await this.$axios.post('http://127.0.0.1:8000/api/login', {
// } catch (e) { // email: this.email,
// this.error = 'Username or Password not valid' // 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'
// }
},
}, },
}; };
</script> </script>
<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
View file @ 2f21fd36
<template> <template>
<div style="background-color: #8fc2ff;">
<div <div
class="container" class="container"
style=" style="
display: flex; display: flex;
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-logout">
<form @submit.prevent="signin"> <form @submit.prevent="signin">
<h1 class="h3 mb-3 fw-normal" style="text-align:center;">Sign up</h1>
<label>Name :</label> <label>Name :</label>
<input <input
type="text" type="text"
class="form-control" class="form-control mb-2"
placeholder="name" placeholder="name"
v-model="name" v-model="name"
max="255" max="255"
...@@ -23,7 +26,7 @@ ...@@ -23,7 +26,7 @@
<label>Email :</label> <label>Email :</label>
<input <input
type="email" type="email"
class="form-control" class="form-control mb-2"
placeholder="Email" placeholder="Email"
v-model="email" v-model="email"
required required
...@@ -32,7 +35,7 @@ ...@@ -32,7 +35,7 @@
<label>Password :</label> <label>Password :</label>
<input <input
type="password" type="password"
class="form-control" class="form-control mb-2"
placeholder="password" placeholder="password"
v-model="password" v-model="password"
required required
...@@ -40,18 +43,19 @@ ...@@ -40,18 +43,19 @@
<label>Confirm Password :</label> <label>Confirm Password :</label>
<input <input
type="password" type="password"
class="form-control" class="form-control mb-2"
placeholder="Confirm_password" placeholder="Confirm password"
required required
/> />
<div class="button"> <div class="button">
<button class="w-75 btn btn-lg btn-primary" type="submit"> <button class="w-50 btn btn-lg btn-primary" type="submit">
Sign up here Sign up
</button> </button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -84,22 +88,21 @@ export default { ...@@ -84,22 +88,21 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
#form-group { #form-logout {
height: 50%; height: 60%;
width: 50%; width: 30%;
border: 1px solid black; /* border: 1px solid black; */
padding: 12px; padding: 12px;
padding-top: 30px; padding-top: 30px;
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;
} }
.btn { .btn {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 20px; margin-left: 50px;
margin-top: 5px;
} }
</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