✨ styled html dialog component

.eslintrc.json

@@ -24,7 +24,8 @@
 			"tab",
 			{
 				"ignoredNodes": ["PropertyDefinition"],
-				"offsetTernaryExpressions": true
+				"offsetTernaryExpressions": true,
+				"SwitchCase": 1
 			}
 		],
 		"vue/multi-word-component-names": "off"

src/front-end/app/app.vue

@@ -1,11 +1,13 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import DarkMode from "./components/darkmode.vue";
+import Dialogs from "./components/dialogs.vue";
 import { ROOT_URI } from "./constants";
 
 const App = defineComponent({
 	components: {
 		DarkMode,
+		Dialogs,
 	},
 	async beforeCreate() {
 		document.cookie = [
@@ -21,6 +23,7 @@ export default App;
 </script>
 
 <template>
+	<Dialogs></Dialogs>
 	<a class="btn ⏩" href="#main">
 		<span aria-hidden="true">⏩</span>
 		Skip to main

src/front-end/app/components/darkmode.vue

@@ -20,7 +20,7 @@ const DarkMode = defineComponent({
 	created() {
 		this.bodyClass(this.enabled);
 		this.$store.subscribe((mutation) => {
-			const keys = Object.getOwnPropertyNames(mutation.payload);
+			const keys = Object.getOwnPropertyNames(mutation.payload ?? {});
 
 			if (mutation.type == "session" && keys.includes("settings"))
 				this.enabled = (mutation.payload as SessionState).settings.darkMode;

src/front-end/app/views/home/profile.vue

@@ -27,29 +27,51 @@ const Profile = defineComponent({
 			(this.$refs.file as HTMLInputElement).click();
 		},
 		async loadFile() {
-			const files = (this.$refs.file as HTMLInputElement).files;
+			const input = this.$refs.file as HTMLInputElement;
+			const files = input.files;
 
 			if (!files || files.length === 0) return;
-			if (files.length > 1) return alert("Please select a single file");
+
+			if (files.length > 1) {
+				input.value = "";
+				await this.$store.dispatch("alert", {
+					text: "Please select a single file",
+				});
+				return;
+			}
 
 			const file = files[0];
 
-			if (!file.name.endsWith(".json"))
-				return alert("Please select a JSON file");
+			if (!file.name.endsWith(".json")) {
+				input.value = "";
+				await this.$store.dispatch("alert", {
+					text: "Please select a JSON file",
+				});
+				return;
+			}
+
+			try {
+				const session: SessionState = JSON.parse(await file.text());
 
-			const session: SessionState = JSON.parse(await file.text());
+				this.$store.commit("session", session);
+				this.name = session.name;
+			} catch (ex) {
+				await this.$store.dispatch("alert", { text: `Error: ${ex}` });
+			} finally {
+				input.value = "";
+			}
 
-			this.$store.commit("session", session);
-			this.name = session.name;
-			requestAnimationFrame(() => {
+			requestAnimationFrame(async () => {
 				this.upToDate = true;
-				alert("Profile imported successfully");
+				await this.$store.dispatch("alert", {
+					text: "Profile imported successfully",
+				});
 			});
 		},
 		submit() {
 			this.$store.commit("session", { name: this.name });
 			this.upToDate = true;
-			alert("Profile updated");
+			this.$store.dispatch("alert", { text: "Profile updated" });
 		},
 	},
 });

src/front-end/app/views/story/actions.vue

@@ -2,22 +2,30 @@
 import { defineComponent } from "vue";
 
 const Actions = defineComponent({
+	async mounted() {
+		this.$store.subscribeAction(async (a) => {
+			if (!(a.type === "confirmed" && a.payload === "reveal")) {
+				return;
+			}
+
+			console.log("Revealing story");
+			await this.$store.dispatch("story.reveal");
+		});
+	},
 	methods: {
 		async copyUrl() {
 			await window.navigator.clipboard.writeText(window.location.href);
-			alert("The room URL has been copied to your clipboard!");
+			await this.$store.dispatch("alert", {
+				text: "The room URL has been copied to your clipboard!",
+			});
 		},
 		async reveal() {
 			const message =
 				this.$store.state.story.story?.owner === this.$store.state.session.id
 					? "Are you ready to reveal the votes?"
 					: "You are not the owner of this story. Are you sure?";
 
-			if (!confirm(message)) {
-				return;
-			}
-
-			await this.$store.dispatch("story.reveal");
+			await this.$store.dispatch("confirm", { id: "reveal", text: message });
 		},
 	},
 });

src/front-end/styles/index.less

@@ -213,6 +213,10 @@ summary {
 	display: none;
 }
 
+.fr {
+	float: right;
+}
+
 .r {
 	text-align: right;
 }