summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-09-14 19:11:34 +0200
committerSanto Cariotti <santo@dcariotti.me>2022-09-14 19:11:34 +0200
commitbeba244ea3c28aed4c7cf09b77377b55a5960daa (patch)
tree571c6a6a874a768b3d9c96c4689833d57fb96230
parent8aee0d826a38cc7c78660a8af70edbd85dbf3745 (diff)
Add signin page
-rw-r--r--components/VHeader.vue2
-rw-r--r--nuxt.config.js2
-rw-r--r--package-lock.json15
-rw-r--r--package.json1
-rw-r--r--pages/signin.vue73
-rw-r--r--plugins/vue-toastification.js8
-rw-r--r--store/auth.js5
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");
}