Commit 10ecac51 authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh

fix cors

parent 681907b9
<template> <template>
<div> <div>
<b-navbar toggleable="lg" type="dark" variant="info" style=" <b-navbar
background-color: #6f2ca6 !important;"> toggleable="lg"
type="dark"
variant="info"
style="background-color: #6f2ca6 !important"
>
<sidebar /> <sidebar />
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
...@@ -17,7 +21,7 @@ ...@@ -17,7 +21,7 @@
<b-nav-item-dropdown right> <b-nav-item-dropdown right>
<!-- Using 'button-content' slot --> <!-- Using 'button-content' slot -->
<template #button-content> <template #button-content>
<em>{{ $auth.$storage.getUniversal('userName')}}</em> <em>{{ $auth.$storage.getUniversal("userName") }}</em>
</template> </template>
<b-dropdown-item href="#">Profile</b-dropdown-item> <b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#" @click="logout">Sign Out</b-dropdown-item> <b-dropdown-item href="#" @click="logout">Sign Out</b-dropdown-item>
...@@ -34,7 +38,7 @@ export default { ...@@ -34,7 +38,7 @@ export default {
</script> </script>
<script> <script>
import sidebar from "@/components/sidebar"; import sidebar from "@/components/sidebar";
import vuex from import vuex from
export default { export default {
components: { sidebar }, components: { sidebar },
...@@ -50,16 +54,16 @@ export default { ...@@ -50,16 +54,16 @@ export default {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"accept": "application/json", accept: "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
token: this.$auth.$storage.getUniversal('token'), token: this.$auth.$storage.getUniversal("token"),
}), }),
}); });
localStorage.setItem("token",''); localStorage.setItem("token", "");
this.$auth.$storage.setUniversal("loggedIn", 'false'); this.$auth.$storage.setUniversal("loggedIn", "false");
this.$auth.$storage.setUniversal("token", ''); this.$auth.$storage.setUniversal("token", "");
this.$auth.$storage.setUniversal("userName", ''); this.$auth.$storage.setUniversal("userName", "");
this.$router.push("/"); this.$router.push("/");
}, },
}, },
......
<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>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
class="form-control mb-3" class="form-control mb-3"
placeholder="password" placeholder="password"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
maxlength = "16" maxlength="16"
min="6" min="6"
required required
/> />
...@@ -43,11 +43,14 @@ ...@@ -43,11 +43,14 @@
> >
Remember me Remember me
</b-form-checkbox> </b-form-checkbox>
<div class="col text-center "> <div class="col text-center">
<button class="w-30 btn btn-lg btn-primary text-center" type="submit"> <button
Sign in class="w-30 btn btn-lg btn-primary text-center"
</button> type="submit"
</div> >
Sign in
</button>
</div>
</form> </form>
</div> </div>
</div> </div>
...@@ -83,6 +86,7 @@ export default { ...@@ -83,6 +86,7 @@ export default {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
Accept: "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
email: this.email, email: this.email,
...@@ -95,7 +99,7 @@ export default { ...@@ -95,7 +99,7 @@ export default {
localStorage.setItem("token", resp.data.bearer_token); localStorage.setItem("token", resp.data.bearer_token);
this.$auth.$storage.setUniversal("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("userName", resp.data.name);
this.$auth.$storage.setUniversal("loggedIn", 'true'); this.$auth.$storage.setUniversal("loggedIn", "true");
if (resp.status == "success") { if (resp.status == "success") {
this.$router.push("home"); this.$router.push("home");
} }
...@@ -126,30 +130,21 @@ export default { ...@@ -126,30 +130,21 @@ export default {
this.errors = []; this.errors = [];
if (!this.name) { if (!this.name) {
this.errors.push('Name required.'); this.errors.push("Name required.");
} }
if (!this.age) { if (!this.age) {
this.errors.push('Age required.'); this.errors.push("Age required.");
} }
e.preventDefault(); e.preventDefault();
} },
}, },
}; };
</script> </script>
<!-- <script>
var demo = new Vue({
el: '#password',
data: {
min:6 ,
}
});
</script> -->
<style scoped> <style scoped>
#form-login { #form-login {
height: 50%; height: 50%;
width: 25%; width: 25%;
/* border: 1px solid black; */
padding: 12px; padding: 12px;
padding-top: 60px; padding-top: 60px;
display: flex; display: flex;
......
<template> <template>
<div style="background-color: #8fc2ff;"> <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; background-color: #8fc2ff;
" "
> >
<div id="form-logout"> <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> <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 mb-2" class="form-control mb-2"
placeholder="name" placeholder="name"
v-model="name" v-model="name"
max="255" max="255"
min="1" min="1"
required required
/> />
<label>Email :</label> <label>Email :</label>
<input <input
type="email" type="email"
class="form-control mb-2" class="form-control mb-2"
placeholder="Email" placeholder="Email"
v-model="email" v-model="email"
required required
/> />
<label>Password :</label> <label>Password :</label>
<input <input
type="password" type="password"
class="form-control mb-2" class="form-control mb-2"
placeholder="password" placeholder="password"
v-model="password" v-model="password"
required required
/> />
<label>Confirm Password :</label> <label>Confirm Password :</label>
<input <input
type="password" type="password"
class="form-control mb-2" class="form-control mb-2"
placeholder="Confirm password" placeholder="Confirm password"
v-model="confirm_password" v-model="confirm_password"
required required
/> />
<div class="button"> <div class="button">
<button class="w-50 btn btn-lg btn-primary" type="submit"> <button class="w-50 btn btn-lg btn-primary" type="submit">
Sign up Sign up
</button> </button>
</div> </div>
</form> </form>
</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -68,7 +68,7 @@ export default { ...@@ -68,7 +68,7 @@ export default {
name: "", name: "",
email: "", email: "",
password: "", password: "",
confirm_password: "" confirm_password: "",
}; };
}, },
methods: { methods: {
...@@ -82,7 +82,7 @@ export default { ...@@ -82,7 +82,7 @@ export default {
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,
}), }),
}); });
this.$router.push("/"); 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