From 961aceb727227a73859414070e3cc1b09d2281b0 Mon Sep 17 00:00:00 2001 From: Santo Cariotti Date: Wed, 14 Sep 2022 18:29:25 +0200 Subject: Add store --- nuxt.config.js | 4 ++ store/README.md | 10 ----- store/auth.js | 121 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ store/index.js | 14 +++++++ 4 files changed, 139 insertions(+), 10 deletions(-) delete mode 100644 store/README.md create mode 100644 store/auth.js create mode 100644 store/index.js diff --git a/nuxt.config.js b/nuxt.config.js index 72fc201..0e259bf 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -43,4 +43,8 @@ export default { build: {}, css: ["~assets/sass/main.sass"], + + publicRuntimeConfig: { + api: process.env.BACKEND_URL, + }, }; diff --git a/store/README.md b/store/README.md deleted file mode 100644 index 1972d27..0000000 --- a/store/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# STORE - -**This directory is not required, you can delete it if you don't want to use it.** - -This directory contains your Vuex Store files. -Vuex Store option is implemented in the Nuxt.js framework. - -Creating a file in this directory automatically activates the option in the framework. - -More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). diff --git a/store/auth.js b/store/auth.js new file mode 100644 index 0000000..55126dc --- /dev/null +++ b/store/auth.js @@ -0,0 +1,121 @@ +export const state = () => ({ + token: localStorage.getItem("access_token") || null, + user: null, +}); + +export const getters = { + accessToken: (state) => { + return state.token; + }, + isLogged: (state) => { + return state.token != null; + }, + me: (state) => { + return state.user; + }, +}; + +export const mutations = { + saveAccessToken: (state, value) => { + localStorage.setItem("access_token", key); + state.token = value; + }, + // Remove access_token and credentials from the browser data + logout: (state) => { + localStorage.removeItem("access_token"); + state.token = null; + state.user = null; + }, + // Save user's informations from the endpoint `/me` + saveUserInfo: (state, data) => { + state.user = data; + }, +}; + +export const actions = { + // Make the login and then save the credentials. + async login({ commit }, credentials) { + commit("loadingStatus", true, { root: true }); + let res = { status: 0, data: null }; + let api = this.$config.api; + + await fetch(`${api}/v1/auth/login`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(credentials), + }) + .then(async (response) => { + res.data = await response.json(); + res.status = response.status; + if (res.status == 200) { + // This is usefull if the login is called by `keepAccess` + commit("saveUserInfo", res.data); + } else { + commit("logout"); + } + }) + .catch((e) => { + res.status = e.status; + }); + + commit("loadingStatus", false, { root: true }); + + return res; + }, + // Make a signup request and then returns a dictionary with response + // status and response data + async signup({ commit }, credentials) { + commit("loadingStatus", true, { root: true }); + let res = { status: 0, data: null }; + let api = this.$config.api; + + await fetch(`${api}/v1/auth/signup`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(credentials), + }) + .then(async (response) => { + res.data = await response.json(); + res.status = response.status; + }) + .catch((e) => { + res.status = e.status; + }); + + commit("loadingStatus", false, { root: true }); + + return res; + }, + // Search my info + async findMe({ commit, getters }) { + commit("loadingStatus", true, { root: true }); + let res = { status: 0, data: null }; + let api = this.$config.api; + + await fetch(`${api}/v1/users/me`, { + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${getters.accessToken}`, + }, + }) + .then(async (response) => { + if (response.status == 200) { + res.data = await response.json(); + + commit("saveUserInfo", res.data); + } else { + commit("logout"); + } + }) + .catch((e) => { + res.status = e.status; + }); + + commit("loadingStatus", false, { root: true }); + + return res; + }, + logout({ commit }) { + commit("logout"); + }, +}; diff --git a/store/index.js b/store/index.js new file mode 100644 index 0000000..eabe2e5 --- /dev/null +++ b/store/index.js @@ -0,0 +1,14 @@ +export const state = () => ({ + loading: false, +}); + +export const getters = { + animation: (state) => { + return state.loading ? "animate-none" : "animate-spin"; + }, +}; +export const mutations = { + loadingStatus: (state, value) => { + state.loading = value; + }, +}; -- cgit v1.2.3-18-g5258