summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-10-04 12:00:53 +0200
committerSanto Cariotti <santo@dcariotti.me>2022-10-04 12:00:53 +0200
commitc593fb22ac9c572a6f65306424ece315d0809836 (patch)
tree5e8948fcf90176b058c5e5cbfac866a363c384fa
parentfed3772dfd88667ed91a86f51f90d4dd1413c676 (diff)
Modal which asks login first
-rw-r--r--pages/models/_id/index.vue30
1 files changed, 26 insertions, 4 deletions
diff --git a/pages/models/_id/index.vue b/pages/models/_id/index.vue
index a353170..6ab1086 100644
--- a/pages/models/_id/index.vue
+++ b/pages/models/_id/index.vue
@@ -1,12 +1,27 @@
<template lang="pug">
.mx-auto.w-90p.py-6#modelpage(class="sm:px-6 lg:px-8 md:max-w-7xl")
+ .relative.z-10(aria-labelledby="modal-title", role="dialog", aria-modal="true" v-if="modalLoginError")
+ .fixed.inset-0.bg-gray-900.bg-opacity-90.transition-opacity
+ .fixed.inset-0.z-10.overflow-y-auto
+ .flex.min-h-full.items-end.justify-center.p-4.text-center(class="sm:items-center sm:p-0")
+ .relative.transform.overflow-hidden.rounded-lg.bg-white.text-left.shadow-xl.transition-all(class="sm:my-8 sm:w-full sm:max-w-lg")
+ .bg-white.px-4.pt-5.pb-4(class="sm:p-6 sm:pb-4")
+ div
+ h2 You must <a class="underline" :href="'/signin?ref=/models/'+model.id">log in</a> first.
+ .bg-gray-50.px-4.py-3(class="sm:flex sm:flex-row-reverse sm:px-6")
+ button.mt-3.inline-flex.w-full.justify-center.rounded-md.border.border-gray-300.bg-white.px-4.py-2.text-base.font-medium.text-gray-700.shadow-sm(
+ type="button"
+ class="hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+ @click="modalLoginError = false"
+ ) Cancel
+
.relative.z-10(aria-labelledby="modal-title", role="dialog", aria-modal="true" v-if="boxReport")
.fixed.inset-0.bg-gray-900.bg-opacity-90.transition-opacity
.fixed.inset-0.z-10.overflow-y-auto
.flex.min-h-full.items-end.justify-center.p-4.text-center(class="sm:items-center sm:p-0")
.relative.transform.overflow-hidden.rounded-lg.bg-white.text-left.shadow-xl.transition-all(class="sm:my-8 sm:w-full sm:max-w-lg")
.bg-white.px-4.pt-5.pb-4(class="sm:p-6 sm:pb-4")
- div(v-if="isLogged")
+ div
label.block.text-sm.font-medium.text-gray-700(for="warning_note") Note
.mt-1
textarea#description.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
@@ -16,8 +31,6 @@
v-model="report.warning_note"
required
)
- div(v-else)
- h2 You must <a class="underline" :href="'/signin?ref=/models/'+model.id">log in</a> first.
.bg-gray-50.px-4.py-3(class="sm:flex sm:flex-row-reverse sm:px-6")
button.inline-flex.w-full.justify-center.rounded-md.border.border-transparent.bg-green-600.px-4.py-2.text-base.font-medium.text-white.shadow-sm(
type="button"
@@ -103,7 +116,7 @@
| {{ model.likes ? model.likes.length : 0 }}
button.inline-flex.leading-6.justify-center.rounded-md.border.border-transparent.bg-yellow-600.py-2.px-4.mr-2.text-sm.font-medium.text-white.shadow-sm(
class="hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2"
- @click="boxReport = true"
+ @click="openBoxReport()"
)
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5" />
@@ -219,6 +232,7 @@ export default {
boxFilesToDownload: false,
boxDeleteModel: false,
boxReport: false,
+ modalLoginError: false,
report: {},
};
},
@@ -252,6 +266,10 @@ export default {
});
},
methods: {
+ openBoxReport() {
+ if (this.isLogged) this.boxReport = true;
+ else this.modalLoginError = true;
+ },
getFileName(path) {
return path.split("/").at(-1);
},
@@ -305,6 +323,10 @@ export default {
return this.model.likes.filter((x) => x.user_id == this.me.id).length > 0;
},
toggleLike() {
+ if (!this.isLogged) {
+ this.modalLoginError = true;
+ return;
+ }
if (this.likedByUser()) {
this.$store
.dispatch("models/removeLike", this.model.id)