Notification toasts, nicer loading, add new user support

frontend/src/notifications/Msg.module.css

@@ -0,0 +1,14 @@
+.toaster {
+	padding: 0;
+	background: transparent !important;
+	box-shadow: none !important;
+	border: none !important;
+
+	&.toast {
+		border-radius: 0;
+		box-shadow: none;
+		font-size: 14px;
+		padding: 16px 24px;
+		background: transparent;
+	}
+}

frontend/src/notifications/Msg.tsx

@@ -0,0 +1,36 @@
+import { IconCheck, IconExclamationCircle } from "@tabler/icons-react";
+import cn from "classnames";
+import type { ReactNode } from "react";
+
+function Msg({ data }: any) {
+	const cns = cn("toast", "show", data.type || null);
+
+	let icon: ReactNode = null;
+	switch (data.type) {
+		case "success":
+			icon = <IconCheck className="text-green mr-1" size={16} />;
+			break;
+		case "error":
+			icon = <IconExclamationCircle className="text-red mr-1" size={16} />;
+			break;
+	}
+
+	return (
+		<div
+			className={cns}
+			role="alert"
+			aria-live="assertive"
+			aria-atomic="true"
+			data-bs-autohide="false"
+			data-bs-toggle="toast"
+		>
+			{data.title && (
+				<div className="toast-header">
+					{icon} {data.title}
+				</div>
+			)}
+			<div className="toast-body">{data.message}</div>
+		</div>
+	);
+}
+export { Msg };

frontend/src/notifications/helpers.tsx

@@ -0,0 +1,27 @@
+import { toast } from "react-toastify";
+import { intl } from "src/locale";
+import { Msg } from "./Msg";
+import styles from "./Msg.module.css";
+
+const showSuccess = (message: string) => {
+	toast(Msg, {
+		className: styles.toaster,
+		data: {
+			type: "success",
+			title: intl.formatMessage({ id: "notification.success" }),
+			message,
+		},
+	});
+};
+
+const showError = (message: string) => {
+	toast(<Msg />, {
+		data: {
+			type: "error",
+			title: intl.formatMessage({ id: "notification.error" }),
+			message,
+		},
+	});
+};
+
+export { showSuccess, showError };

frontend/src/notifications/index.ts

@@ -0,0 +1 @@
+export * from "./helpers";