feat(web-ui): add button to enable notifcations

Author: Johan Book

services/web-ui/public/locales/en/settings.json

@@ -12,5 +12,14 @@
     }
   },
   "darkmode": "Darkmode",
-  "header": "Settings"
+  "header": "Settings",
+  "notifications": {
+    "header": "Notifications",
+    "enable": {
+      "description": "Enable push notifications for this device",
+      "button": "Enable",
+      "error": "Failed to enable push notifications",
+      "success": "Enabled push notifications"
+    }
+  }
 }

services/web-ui/public/locales/sv/settings.json

@@ -12,5 +12,14 @@
     }
   },
   "darkmode": "Mörkerläge",
-  "header": "Inställningar"
+  "header": "Inställningar",
+  "notifications": {
+    "header": "Push-notiser",
+    "enable": {
+      "description": "Aktivera push-notiser på denna enhet",
+      "button": "Aktivera",
+      "error": "Ett fel uppstod vid aktivering av notiser",
+      "success": "Notiser har aktiverats"
+    }
+  }
 }

services/web-ui/src/features/settings/pages/SettingsPage/SettingsPage.container.tsx

@@ -8,18 +8,28 @@ import { useMutation } from "src/core/query";
 import { useSnackbar } from "src/core/snackbar";
 
 import { SettingsPageNav } from "./SettingsPage.nav";
+import {registerServiceWorker} from "src/registerServiceWorker";
 
 export function SettingsPageContainer(): ReactElement {
   const { t } = useTranslation("settings");
   const { openDialog } = useDialog();
   const snackbar = useSnackbar();
 
   const deleteAccountMutation = useMutation({
-    onError: () => snackbar.success(t("danger-zone.delete-account.success")),
-    onSuccess: () => snackbar.error(t("danger-zone.delete-account.error")),
+    onError: () => snackbar.error(t("danger-zone.delete-account.error")),
+    onSuccess: () => snackbar.success(t("danger-zone.delete-account.success")),
     mutationFn: () => profileApi.deleteCurrentProfile(),
   });
 
+  const enableNotificationsMutation = useMutation({
+    onError: () => snackbar.error(t("notifications.enable.error")),
+    onSuccess: () => snackbar.success(t("notifications.enable.success")),
+    mutationFn: async () => {
+      await Notification.requestPermission();
+      await registerServiceWorker()
+    },
+  });
+
   function handleClickDelete() {
     openDialog(ConfirmationDialog, {
       description: t("danger-zone.delete-account.description"),
@@ -33,6 +43,23 @@ export function SettingsPageContainer(): ReactElement {
 
   return (
     <SettingsPageNav>
+      <Typography gutterBottom sx={{ paddingTop: 3 }} variant="h6">
+        {t("notifications.header")}
+      </Typography>
+
+      <Typography color="textSecondary" sx={{ pb: 2 }}>
+        {t("notifications.enable.description")}
+      </Typography>
+
+      <Button
+        color="inherit"
+        loading={enableNotificationsMutation.isPending}
+        onClick={() => enableNotificationsMutation.mutate()}
+        variant="outlined"
+      >
+        {t("notifications.enable.button")}
+      </Button>
+
       <Typography gutterBottom sx={{ paddingTop: 3 }} variant="h6">
         {t("danger-zone.header")}
       </Typography>
@@ -41,16 +68,14 @@ export function SettingsPageContainer(): ReactElement {
         {t("danger-zone.description")}
       </Typography>
 
-      <div>
-        <Button
-          color="error"
-          loading={deleteAccountMutation.isPending}
-          onClick={handleClickDelete}
-          variant="contained"
-        >
-          {t("danger-zone.delete-account.button")}
-        </Button>
-      </div>
+      <Button
+        color="error"
+        loading={deleteAccountMutation.isPending}
+        onClick={handleClickDelete}
+        variant="contained"
+      >
+        {t("danger-zone.delete-account.button")}
+      </Button>
     </SettingsPageNav>
   );
 }