From 6b91f81941fcb9efbb9732cbc588c8b76490c8fd Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Wed, 2 Feb 2022 00:26:22 +0100 Subject: [PATCH] add basic notifications --- package-lock.json | 119 +++++++++--------- package.json | 14 +-- src/lib/layout/notification.svelte | 52 ++++++++ src/lib/layout/notifications.svelte | 34 +++++ src/lib/notifications.ts | 31 +++++ src/routes/__layout.svelte | 2 + .../[project]/users/user/[user]/index.svelte | 6 +- .../users/user/[user]/sessions.svelte | 31 ++++- 8 files changed, 216 insertions(+), 73 deletions(-) create mode 100644 src/lib/layout/notification.svelte create mode 100644 src/lib/layout/notifications.svelte create mode 100644 src/lib/notifications.ts diff --git a/package-lock.json b/package-lock.json index 4eafdcb4f..b001c518d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,20 +16,20 @@ "@testing-library/user-event": "^13.5.0", "@typescript-eslint/eslint-plugin": "^5.9.1", "@typescript-eslint/parser": "^5.9.1", - "eslint": "^8.7.0", + "eslint": "^8.8.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.4.0", "jest": "^27.4.7", "prettier": "^2.4.1", "prettier-plugin-svelte": "^2.6.0", - "sass": "^1.48.0", - "svelte": "^3.46.2", - "svelte-check": "^2.3.0", - "svelte-jester": "^2.1.5", - "svelte-preprocess": "^4.10.1", + "sass": "^1.49.7", + "svelte": "^3.46.3", + "svelte-check": "^2.4.1", + "svelte-jester": "^2.3.1", + "svelte-preprocess": "^4.10.2", "ts-jest": "^27.1.3", "tslib": "^2.3.1", - "typescript": "^4.5.4" + "typescript": "^4.5.5" } }, "node_modules/@babel/code-frame": { @@ -3048,9 +3048,9 @@ } }, "node_modules/eslint": { - "version": "8.7.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.7.0.tgz", - "integrity": "sha512-ifHYzkBGrzS2iDU7KjhCAVMGCvF6M3Xfs8X8b37cgrUlDt6bWRTpRh6T/gtSXv1HJ/BUGgmjvNvOEGu85Iif7w==", + "version": "8.8.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.8.0.tgz", + "integrity": "sha512-H3KXAzQGBH1plhYS3okDix2ZthuYJlQQEGE5k0IKuEqUSiyu4AmxxlJ2MtTYeJ3xB4jDhcYCwGOg2TXYdnDXlQ==", "dev": true, "dependencies": { "@eslint/eslintrc": "^1.0.5", @@ -5440,9 +5440,9 @@ "dev": true }, "node_modules/nanoid": { - "version": "3.1.30", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", - "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", + "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==", "dev": true, "bin": { "nanoid": "bin/nanoid.cjs" @@ -6036,10 +6036,11 @@ } }, "node_modules/sass": { - "version": "1.48.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.48.0.tgz", - "integrity": "sha512-hQi5g4DcfjcipotoHZ80l7GNJHGqQS5LwMBjVYB/TaT0vcSSpbgM8Ad7cgfsB2M0MinbkEQQPO9+sjjSiwxqmw==", + "version": "1.49.7", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz", + "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==", "dev": true, + "license": "MIT", "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", @@ -6049,7 +6050,7 @@ "sass": "sass.js" }, "engines": { - "node": ">=8.9.0" + "node": ">=12.0.0" } }, "node_modules/saxes": { @@ -6335,18 +6336,18 @@ } }, "node_modules/svelte": { - "version": "3.46.2", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.2.tgz", - "integrity": "sha512-RXSAtYNefe01Sb1lXtZ2I+gzn3t/h/59hoaRNeRrm8IkMIu6BSiAkbpi41xb+C44x54YKnbk9+dtfs3pM4hECA==", + "version": "3.46.3", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.3.tgz", + "integrity": "sha512-mTOXvv74CVQqJHqoIZDprVfRKVVmYNadXP0VKnOEA54223kLGCr1nMrifS4Zx29qMt/xRB38Eq1D7dDH/fM8fQ==", "dev": true, "engines": { "node": ">= 8" } }, "node_modules/svelte-check": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-2.3.0.tgz", - "integrity": "sha512-SBKdJyUmxzPmJf/ZPqDSQOoa9JzOcgEpV7u3UaYcgVn7fA0veZ3FA5JgLU8KYtf84Gp6guBVcrC7XKLjJa5SXQ==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-2.4.1.tgz", + "integrity": "sha512-xhf3ShP5rnRwBokrgTBJ/0cO9QIc1DAVu1NWNRTfCDsDBNjGmkS3HgitgUadRuoMKj1+irZR/yHJ+Uqobnkbrw==", "dev": true, "dependencies": { "chokidar": "^3.4.1", @@ -6376,12 +6377,12 @@ } }, "node_modules/svelte-jester": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/svelte-jester/-/svelte-jester-2.1.5.tgz", - "integrity": "sha512-T3JoPsNYltlN2MiVFDxAMOulIO4fztFFI3DhOkzbs1yZQCUFp6sqS6aqusBsIEMVmXaEDW4HO/6bX+CuwuEUSw==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/svelte-jester/-/svelte-jester-2.3.1.tgz", + "integrity": "sha512-Iss/w6EhWRqQ8e3I+UwT4JQCexwnA22jhr+1PcOD8+P99yQh3SsHHK2r2Fvr4bHHjBtvOTgzxhkOyRXP45lj4Q==", "dev": true, "engines": { - "node": ">= 12" + "node": ">=14" }, "peerDependencies": { "jest": ">= 27", @@ -6389,9 +6390,9 @@ } }, "node_modules/svelte-preprocess": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.1.tgz", - "integrity": "sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==", + "version": "4.10.2", + "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.2.tgz", + "integrity": "sha512-aPpkCreSo8EL/y8kJSa1trhiX0oyAtTjlNNM7BNjRAsMJ8Yy2LtqHt0zyd4pQPXt+D4PzbO3qTjjio3kwOxDlA==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -6408,12 +6409,12 @@ "peerDependencies": { "@babel/core": "^7.10.2", "coffeescript": "^2.5.1", - "less": "^3.11.3", + "less": "^3.11.3 || ^4.0.0", "postcss": "^7 || ^8", "postcss-load-config": "^2.1.0 || ^3.0.0", "pug": "^3.0.0", "sass": "^1.26.8", - "stylus": "^0.54.7", + "stylus": "^0.55.0", "sugarss": "^2.0.0", "svelte": "^3.23.0", "typescript": "^4.5.2" @@ -6679,9 +6680,9 @@ } }, "node_modules/typescript": { - "version": "4.5.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz", - "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz", + "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -9518,9 +9519,9 @@ } }, "eslint": { - "version": "8.7.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.7.0.tgz", - "integrity": "sha512-ifHYzkBGrzS2iDU7KjhCAVMGCvF6M3Xfs8X8b37cgrUlDt6bWRTpRh6T/gtSXv1HJ/BUGgmjvNvOEGu85Iif7w==", + "version": "8.8.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.8.0.tgz", + "integrity": "sha512-H3KXAzQGBH1plhYS3okDix2ZthuYJlQQEGE5k0IKuEqUSiyu4AmxxlJ2MtTYeJ3xB4jDhcYCwGOg2TXYdnDXlQ==", "dev": true, "requires": { "@eslint/eslintrc": "^1.0.5", @@ -11447,9 +11448,9 @@ "dev": true }, "nanoid": { - "version": "3.1.30", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", - "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", + "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==", "dev": true }, "natural-compare": { @@ -11871,9 +11872,9 @@ } }, "sass": { - "version": "1.48.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.48.0.tgz", - "integrity": "sha512-hQi5g4DcfjcipotoHZ80l7GNJHGqQS5LwMBjVYB/TaT0vcSSpbgM8Ad7cgfsB2M0MinbkEQQPO9+sjjSiwxqmw==", + "version": "1.49.7", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz", + "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==", "dev": true, "requires": { "chokidar": ">=3.0.0 <4.0.0", @@ -12096,15 +12097,15 @@ "dev": true }, "svelte": { - "version": "3.46.2", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.2.tgz", - "integrity": "sha512-RXSAtYNefe01Sb1lXtZ2I+gzn3t/h/59hoaRNeRrm8IkMIu6BSiAkbpi41xb+C44x54YKnbk9+dtfs3pM4hECA==", + "version": "3.46.3", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.3.tgz", + "integrity": "sha512-mTOXvv74CVQqJHqoIZDprVfRKVVmYNadXP0VKnOEA54223kLGCr1nMrifS4Zx29qMt/xRB38Eq1D7dDH/fM8fQ==", "dev": true }, "svelte-check": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-2.3.0.tgz", - "integrity": "sha512-SBKdJyUmxzPmJf/ZPqDSQOoa9JzOcgEpV7u3UaYcgVn7fA0veZ3FA5JgLU8KYtf84Gp6guBVcrC7XKLjJa5SXQ==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-2.4.1.tgz", + "integrity": "sha512-xhf3ShP5rnRwBokrgTBJ/0cO9QIc1DAVu1NWNRTfCDsDBNjGmkS3HgitgUadRuoMKj1+irZR/yHJ+Uqobnkbrw==", "dev": true, "requires": { "chokidar": "^3.4.1", @@ -12126,16 +12127,16 @@ "requires": {} }, "svelte-jester": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/svelte-jester/-/svelte-jester-2.1.5.tgz", - "integrity": "sha512-T3JoPsNYltlN2MiVFDxAMOulIO4fztFFI3DhOkzbs1yZQCUFp6sqS6aqusBsIEMVmXaEDW4HO/6bX+CuwuEUSw==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/svelte-jester/-/svelte-jester-2.3.1.tgz", + "integrity": "sha512-Iss/w6EhWRqQ8e3I+UwT4JQCexwnA22jhr+1PcOD8+P99yQh3SsHHK2r2Fvr4bHHjBtvOTgzxhkOyRXP45lj4Q==", "dev": true, "requires": {} }, "svelte-preprocess": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.1.tgz", - "integrity": "sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==", + "version": "4.10.2", + "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.2.tgz", + "integrity": "sha512-aPpkCreSo8EL/y8kJSa1trhiX0oyAtTjlNNM7BNjRAsMJ8Yy2LtqHt0zyd4pQPXt+D4PzbO3qTjjio3kwOxDlA==", "dev": true, "requires": { "@types/pug": "^2.0.4", @@ -12306,9 +12307,9 @@ } }, "typescript": { - "version": "4.5.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz", - "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz", + "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", "dev": true }, "universalify": { diff --git a/package.json b/package.json index 4aacddb52..46b7253ba 100644 --- a/package.json +++ b/package.json @@ -23,20 +23,20 @@ "@testing-library/user-event": "^13.5.0", "@typescript-eslint/eslint-plugin": "^5.9.1", "@typescript-eslint/parser": "^5.9.1", - "eslint": "^8.7.0", + "eslint": "^8.8.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.4.0", "jest": "^27.4.7", "prettier": "^2.4.1", "prettier-plugin-svelte": "^2.6.0", - "sass": "^1.48.0", - "svelte": "^3.46.2", - "svelte-check": "^2.3.0", - "svelte-jester": "^2.1.5", - "svelte-preprocess": "^4.10.1", + "sass": "^1.49.7", + "svelte": "^3.46.3", + "svelte-check": "^2.4.1", + "svelte-jester": "^2.3.1", + "svelte-preprocess": "^4.10.2", "ts-jest": "^27.1.3", "tslib": "^2.3.1", - "typescript": "^4.5.4" + "typescript": "^4.5.5" }, "type": "module", "jest": { diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte new file mode 100644 index 000000000..ce6b109e4 --- /dev/null +++ b/src/lib/layout/notification.svelte @@ -0,0 +1,52 @@ + + + + + diff --git a/src/lib/layout/notifications.svelte b/src/lib/layout/notifications.svelte new file mode 100644 index 000000000..32a840957 --- /dev/null +++ b/src/lib/layout/notifications.svelte @@ -0,0 +1,34 @@ + + +{#if $toasts} +
+ {#each $toasts as toast (toast.id)} + dismissToast(toast.id)} + > + {toast.message} + + {/each} +
+{/if} + + diff --git a/src/lib/notifications.ts b/src/lib/notifications.ts new file mode 100644 index 000000000..3dbf43191 --- /dev/null +++ b/src/lib/notifications.ts @@ -0,0 +1,31 @@ +import { writable } from 'svelte/store'; + +export type Notification = { + id: number; + type: 'success' | 'error' | 'info'; + dismissible: boolean; + timeout: number; + message: string; +}; + +let counter = 0; + +export const toasts = writable([]); + +export const dismissToast = (id: number) => { + toasts.update((all) => all.filter((t) => t.id !== id)); +}; + +export const addToast = (notification: Omit) => { + const defaults = { + id: counter++, + type: 'info', + dismissible: true, + timeout: 3000 + }; + + const n = { ...defaults, ...notification }; + toasts.update((all) => [n, ...all]); + + if (n.timeout) setTimeout(() => dismissToast(n.id), n.timeout); +}; diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 2f2909558..6caac2d32 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -1,6 +1,7 @@ +
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte index fe132dbb0..35f27d7c9 100644 --- a/src/routes/console/[project]/users/user/[user]/index.svelte +++ b/src/routes/console/[project]/users/user/[user]/index.svelte @@ -24,7 +24,7 @@

Overview

{user.name}

-

{user.$id}

+

{user.$id}

Member since {user.registration}

{user.emailVerification ? 'Verified' : 'Unverified'}

{user.email}

@@ -54,10 +54,6 @@ flex-direction: column; align-items: center; - .id { - cursor: pointer; - } - .avatar { border-radius: 50%; } diff --git a/src/routes/console/[project]/users/user/[user]/sessions.svelte b/src/routes/console/[project]/users/user/[user]/sessions.svelte index ac2f0d2db..a1be07d54 100644 --- a/src/routes/console/[project]/users/user/[user]/sessions.svelte +++ b/src/routes/console/[project]/users/user/[user]/sessions.svelte @@ -1,10 +1,34 @@