Skip to content

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

fix cors

parent 681907b9
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 428 deletions
components/nav.vue
View file @ 10ecac51
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info" style="
background-color: #6f2ca6 !important;">
<b-navbar
toggleable="lg"
type="dark"
variant="info"
style="background-color: #6f2ca6 !important"
>
<sidebar />
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
......@@ -17,7 +21,7 @@
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template #button-content>
<em>{{ $auth.$storage.getUniversal('userName')}}</em>
<em>{{ $auth.$storage.getUniversal("userName") }}</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#" @click="logout">Sign Out</b-dropdown-item>
......@@ -34,7 +38,7 @@ export default {
</script>
<script>
import sidebar from "@/components/sidebar";
import vuex from
import vuex from
export default {
components: { sidebar },
......@@ -50,16 +54,16 @@ export default {
method: "POST",
headers: {
"Content-Type": "application/json",
"accept": "application/json",
accept: "application/json",
},
body: JSON.stringify({
token: this.$auth.$storage.getUniversal('token'),
token: this.$auth.$storage.getUniversal("token"),
}),
});
localStorage.setItem("token",'');
this.$auth.$storage.setUniversal("loggedIn", 'false');
this.$auth.$storage.setUniversal("token", '');
this.$auth.$storage.setUniversal("userName", '');
localStorage.setItem("token", "");
this.$auth.$storage.setUniversal("loggedIn", "false");
this.$auth.$storage.setUniversal("token", "");
this.$auth.$storage.setUniversal("userName", "");
this.$router.push("/");
},
},
......
pages/home/users.vue deleted 100644 → 0
View file @ 681907b9
<template>
<div>
<div>
<Nav />
<h1 style="text-align: center">User</h1>
</div>
<v-data-table
:headers="headers"
:items="desserts"
sort-by="calories"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar
flat
>
<v-toolbar-title>My CRUD</v-toolbar-title>
<v-divider
class="mx-4"
inset
vertical
></v-divider>
<v-spacer></v-spacer>
<v-dialog
v-model="dialog"
max-width="500px"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
class="mb-2"
v-bind="attrs"
v-on="on"
v-on:click="getUser"
>
New User
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="editedItem.name"
label="Dessert name"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="editedItem.calories"
label="Calories"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="editedItem.fat"
label="Fat (g)"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="editedItem.carbs"
label="Carbs (g)"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="editedItem.protein"
label="Protein (g)"
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="blue darken-1"
text
@click="close"
>
Cancel
</v-btn>
<v-btn
color="blue darken-1"
text
@click="save"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
<v-btn color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon
small
class="mr-2"
@click="editItem(item)"
>
mdi-pencil
</v-icon>
<v-icon
small
@click="deleteItem(item)"
>
mdi-delete
</v-icon>
</template>
<template v-slot:no-data>
<v-btn
color="primary"
@click="initialize"
>
Reset
</v-btn>
</template>
</v-data-table>
</div>
</template>
<script>
import Nav from "@/components/Nav";
import navigation from "@/components/navigation";
import axios from "axios";
export default {
components: { Nav },
components: { navigation },
middleware: ["web"],
data: () => ({
dialog: false,
dialogDelete: false,
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Actions', value: 'actions', sortable: false },
],
desserts: [],
editedIndex: -1,
editedItem: {
name: '',
calories: 0,
fat: 0,
carbs: 0,
protein: 0,
},
defaultItem: {
name: '',
calories: 0,
fat: 0,
carbs: 0,
protein: 0,
},
}),
computed: {
formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
},
},
watch: {
dialog (val) {
val || this.close()
},
dialogDelete (val) {
val || this.closeDelete()
},
},
created () {
this.initialize()
},
methods: {
initialize () {
this.desserts = [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
},
]
},
editItem (item) {
this.editedIndex = this.desserts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
},
deleteItem (item) {
this.editedIndex = this.desserts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialogDelete = true
},
deleteItemConfirm () {
this.desserts.splice(this.editedIndex, 1)
this.closeDelete()
},
close () {
this.dialog = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
closeDelete () {
this.dialogDelete = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
save () {
if (this.editedIndex > -1) {
Object.assign(this.desserts[this.editedIndex], this.editedItem)
} else {
this.desserts.push(this.editedItem)
}
this.close()
},
getUser () {
axios
.get('http://127.0.0.1:8000/api/users/index')
.then(function (response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
},
},
};
</script>
pages/index.vue
View file @ 10ecac51
......@@ -29,7 +29,7 @@
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"
maxlength="16"
min="6"
required
/>
......@@ -43,11 +43,14 @@
>
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>
<div class="col text-center">
<button
class="w-30 btn btn-lg btn-primary text-center"
type="submit"
>
Sign in
</button>
</div>
</form>
</div>
</div>
......@@ -83,6 +86,7 @@ export default {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
email: this.email,
......@@ -95,7 +99,7 @@ export default {
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');
this.$auth.$storage.setUniversal("loggedIn", "true");
if (resp.status == "success") {
this.$router.push("home");
}
......@@ -126,30 +130,21 @@ export default {
this.errors = [];
if (!this.name) {
this.errors.push('Name required.');
this.errors.push("Name required.");
}
if (!this.age) {
this.errors.push('Age required.');
this.errors.push("Age required.");
}
e.preventDefault();
}
},
},
};
</script>
<!-- <script>
var demo = new Vue({
el: '#password',
data: {
min:6 ,
}
});
</script> -->
<style scoped>
#form-login {
height: 50%;
width: 25%;
/* border: 1px solid black; */
padding: 12px;
padding-top: 60px;
display: flex;
......
pages/register.vue
View file @ 10ecac51
<template>
<div style="background-color: #8fc2ff;">
<div
class="container"
<div style="background-color: #8fc2ff">
<div
class="container"
style="
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #8fc2ff;
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
/>
>
<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"
v-model="confirm_password"
required
/>
<div class="button">
<button class="w-50 btn btn-lg btn-primary" type="submit">
Sign up
</button>
</div>
</form>
<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"
v-model="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>
</div>
</template>
<script>
......@@ -68,7 +68,7 @@ export default {
name: "",
email: "",
password: "",
confirm_password: ""
confirm_password: "",
};
},
methods: {
......@@ -82,7 +82,7 @@ export default {
name: this.name,
email: this.email,
password: this.password,
confirm_password: this.confirm_password
confirm_password: this.confirm_password,
}),
});
this.$router.push("/");
......
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