<script>
import axios from "axios";
import Login from "./components/Login.vue";
import Navbar from "./components/Navbar.vue";
export default {
data() {
return {
currentPage: "",
articles: [],
usersFetch: [],
categories: [],
logs: [],
articlesData: [],
categoriesData: [],
message: "Hallo Vue",
};
},
methods: {
async handleLogin(login) {
try {
const { data } = await axios({
method: "post",
url: `http://localhost:3000/login`,
data: login,
});
const accessToken = data.access_token;
localStorage.setItem("access_token", accessToken);
if (data) {
const userName = data.name; // Assuming the user's name is available in the response
Swal.fire("Good job!", `You are logged in as ${login.email}`, "success");
this.currentPage = "navbar";
this.currentPage = "dashboard";
// this.currentPage = "navbar";
this.fetchArticle();
this.fetchCategory();
}
} catch (error) {
Swal.fire("Error", "Login failed. Please try again.", "error");
console.log(error);
}
},
async updateArticleStatus(article) {
async fetchArticle() {
try {
const response = await axios({
method: "GET",
url: "http://localhost:3000/categories/user",
headers: {
access_token: localStorage.access_token,
},
});
this.articles = response.data;
} catch (error) {
console.log(error);
}
},
async handleRegister(formRegister) {
try {
const { data } = await axios({
method: "POST",
url: `http://localhost:3000/register`,
data: formRegister,
});
Swal.fire(
'Success',
`User is has created`,
'success'
);
formRegister.username = "";
formRegister.email = "";
formRegister.password = "";
formRegister.address = "";
formRegister.phoneNumber = "";
} catch (error) {
console.log(error);
Swal.fire(
'Error',
'Failed to create user status',
'error'
);
}
},
async handleAddNew(dataInput) {
try {
await axios({
method: "post",
url: `http://localhost:3000/news`,
data: dataInput,
headers: {
access_token: localStorage.getItem("access_token"),
},
});
Swal.fire(
'Success',
`Article has created`,
'success'
);
this.currentPage = "article";
this.fetchArticle();
} catch (error) {
console.log(error);
Swal.fire(
'Error',
'Failed to create article',
'error'
);
}
},
moveToDashboard() {
this.currentPage = "dashboard";
},
moveToArticles() {
this.currentPage = "article";
this.fetchArticle();
},
toggleLogout() {
localStorage.removeItem("access_token");
this.currentPage = "login";
this.formLogin.email = "";
this.formLogin.password = "";
},
},
created() {
if (localStorage.access_token) {
this.currentPage = "navbar";
} else {
this.currentPage = "login";
}
},
components: {
Login
},
};
</script>
<template>
<div class="containerr">
<Navbar
@dashboard="moveToDashboard"
@article="moveToArticles"
@category="moveToCategory"
@log="moveToLog"
@logout="toggleLogout"
:users="user"
/>
<div class="page">
<Login
@handleLogin="handleLogin"
@handleRegister="handleRegister"
v-if="currentPage === `login`"
/>
<Article
:articles="articles"
@updateStatus="updateArticleStatus"
v-if="currentPage === `article`"
@formInputArticle="formArticle"
/>
<Category :categories="categories" v-if="currentPage === `categorie`" />
<Logs :logs="logs" v-if="currentPage === `log`" />
<FormArticle
v-if="currentPage === `formInput`"
@handleAddNew="handleAddNew"
:categories="categories"
/>
<Dashboard
v-if="currentPage === `dashboard`"
:articles="articles"
:categories="categories"
/>
<!-- <Footer /> -->
</div>
</div>
</template>
<style scoped>
.containerr {
display: flex;
}
</style>
No comments:
Post a Comment