diff options
| -rw-r--r-- | components/VHeader.vue | 2 | ||||
| -rw-r--r-- | nuxt.config.js | 2 | ||||
| -rw-r--r-- | package-lock.json | 15 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | pages/signin.vue | 73 | ||||
| -rw-r--r-- | plugins/vue-toastification.js | 8 | ||||
| -rw-r--r-- | store/auth.js | 5 |
7 files changed, 101 insertions, 5 deletions
diff --git a/components/VHeader.vue b/components/VHeader.vue index 2af549a..a9b85ff 100644 --- a/components/VHeader.vue +++ b/components/VHeader.vue @@ -34,7 +34,7 @@ a#user-menu-item-1.block.px-4.py-2.text-sm.text-gray-700(href="#" role="menuitem" tabindex="-1") Settings a#user-menu-item-2.block.px-4.py-2.text-sm.text-gray-700(href="#" role="menuitem" tabindex="-1") Sign out .absolute.inset-y-0.right-0.flex.items-center.pr-2(class="sm:static sm:inset-auto sm:ml-6 sm:pr-0" v-else) - a + a(href="/signin") button.text-white Entra #mobile-menu(class="sm:hidden" v-if="boxInfo") .space-y-1.px-2.pt-2.pb-3 diff --git a/nuxt.config.js b/nuxt.config.js index 0e259bf..d85fdc0 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -24,7 +24,7 @@ export default { css: [], // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins - plugins: [], + plugins: ["~plugins/vue-toastification.js"], // Auto import components: https://go.nuxtjs.dev/config-components components: true, diff --git a/package-lock.json b/package-lock.json index b4da6b2..bcf3768 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "vue": "^2.6.14", "vue-server-renderer": "^2.6.14", "vue-template-compiler": "^2.6.14", + "vue-toastification": "^1.7.14", "webpack": "^4.46.0" }, "devDependencies": { @@ -18802,6 +18803,14 @@ "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==" }, + "node_modules/vue-toastification": { + "version": "1.7.14", + "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.14.tgz", + "integrity": "sha512-khZR8t3NWZ/JJ2MZxXLbesHrRJ8AKa75PY5Zq8yMifF9x8lHq8ljYkC0d2PD9yahooygQB5tcFyRDkbbIPx8hw==", + "peerDependencies": { + "vue": "^2.0.0" + } + }, "node_modules/vuex": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz", @@ -34621,6 +34630,12 @@ "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==" }, + "vue-toastification": { + "version": "1.7.14", + "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.14.tgz", + "integrity": "sha512-khZR8t3NWZ/JJ2MZxXLbesHrRJ8AKa75PY5Zq8yMifF9x8lHq8ljYkC0d2PD9yahooygQB5tcFyRDkbbIPx8hw==", + "requires": {} + }, "vuex": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz", diff --git a/package.json b/package.json index d13a735..01a1623 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "vue": "^2.6.14", "vue-server-renderer": "^2.6.14", "vue-template-compiler": "^2.6.14", + "vue-toastification": "^1.7.14", "webpack": "^4.46.0" }, "devDependencies": { diff --git a/pages/signin.vue b/pages/signin.vue new file mode 100644 index 0000000..66d09f0 --- /dev/null +++ b/pages/signin.vue @@ -0,0 +1,73 @@ +<template lang="pug"> + div + VHeader + main + .mx-auto.max-w-7xl.py-6(class="sm:px-6 lg:px-8") + .flex.min-h-full.items-center.justify-center.py-12.px-4(class="sm:px-6 lg:px-8") + .w-full.max-w-md.space-y-8 + div + h2.mt-6.text-center.text-3xl.font-bold.tracking-tight.text-gray-900 Sign in + p.mt-2.text-center.text-sm.text-gray-600 Or + a.font-medium.text-indigo-600(class="hover:text-indigo-500" href="/signup") create a new account + form.mt-8.space-y-6(method="POST") + input(type="hidden" name="remember" value="true") + .-space-y-px.rounded-md.shadow-sm + div + label.sr-only(for="username") Username + input#username.relative.block.w-full.appearance-none.rounded-none.rounded-t-md.border.border-gray-300.px-3.py-2.text-gray-900.placeholder-gray-500(name="text" type="text" autocomplete="username" required class="focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" placeholder="Username" v-model="form.username") + div + label.sr-only(for="password") Password + input#password.relative.block.w-full.appearance-none.rounded-none.rounded-b-md.border.border-gray-300.px-3.py-2.text-gray-900.placeholder-gray-500(name="password" type="password" autocomplete="current-password" required class="focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" placeholder="Password" v-model="form.password") + .flex.items-center.justify-between + .flex.items-center + input#remember-me.h-4.w-4.rounded.border-gray-300.text-indigo-600(name="remember-me" type="checkbox" class="focus:ring-indigo-500") + label.ml-2.block.text-sm.text-gray-900(for="remember-me") Remember me + div + button.group.relative.flex.w-full.justify-center.rounded-md.border.border-transparent.bg-indigo-600.py-2.px-4.text-sm.font-medium.text-white(type="submit" class="hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" @click="save") + span.absolute.inset-y-0.left-0.flex.items-center.pl-3 + // Heroicon name: mini/lock-closed + svg.h-5.w-5.text-indigo-500(class="group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true") + path(fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd") + | Sign in + +</template> + +<script> +import { mapGetters } from "vuex"; + +export default { + name: "IndexPage", + head: { + title: "Signin ยท Verden", + }, + computed: { + ...mapGetters("auth", ["isLogged", "me"]), + }, + created() { + if (this.isLogged) window.location.href = "/"; + }, + data() { + return { + form: {}, + }; + }, + methods: { + save(event) { + event.preventDefault(); + + const f = this.form; + if (!(f.username && f.password)) return; + this.$store.dispatch("auth/login", f).then((response) => { + if (response.status != 200) { + this.$toast.error(response.data.error); + } else { + this.$toast.success("Logged successfully"); + setTimeout(() => { + window.location.href = "/"; + }, 1000); + } + }); + }, + }, +}; +</script> diff --git a/plugins/vue-toastification.js b/plugins/vue-toastification.js new file mode 100644 index 0000000..a37fcfa --- /dev/null +++ b/plugins/vue-toastification.js @@ -0,0 +1,8 @@ +import Vue from "vue"; +import Toast from "vue-toastification"; + +import "vue-toastification/dist/index.css"; + +const options = {}; + +Vue.use(Toast, options); diff --git a/store/auth.js b/store/auth.js index 55126dc..dbf989f 100644 --- a/store/auth.js +++ b/store/auth.js @@ -17,7 +17,7 @@ export const getters = { export const mutations = { saveAccessToken: (state, value) => { - localStorage.setItem("access_token", key); + localStorage.setItem("access_token", value); state.token = value; }, // Remove access_token and credentials from the browser data @@ -48,8 +48,7 @@ export const actions = { 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); + commit("saveAccessToken", res.data.access_token); } else { commit("logout"); } |