From b0d7cad5f3669cdb15f5c6fe0166fb71c45bfedb Mon Sep 17 00:00:00 2001
From: Liam <liam.stojanovic@gmail.com>
Date: Thu, 10 Nov 2022 14:11:25 -0500
Subject: [PATCH] view for background push checkbox, install button

---
 web/src/components/Preferences.js | 58 +++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/web/src/components/Preferences.js b/web/src/components/Preferences.js
index 2bafa7e9..b255556c 100644
--- a/web/src/components/Preferences.js
+++ b/web/src/components/Preferences.js
@@ -3,6 +3,7 @@ import {useEffect, useState} from 'react';
 import {
     CardActions,
     CardContent,
+    Checkbox,
     FormControl,
     Select,
     Stack,
@@ -42,6 +43,7 @@ const Preferences = () => {
                 <Notifications/>
                 <Appearance/>
                 <Users/>
+                <Installation/>
             </Stack>
         </Container>
     );
@@ -58,6 +60,7 @@ const Notifications = () => {
                 <Sound/>
                 <MinPriority/>
                 <DeleteAfter/>
+                <BackgroundPush/>
             </PrefGroup>
         </Card>
     );
@@ -173,6 +176,33 @@ const DeleteAfter = () => {
     )
 };
 
+const BackgroundPush = () => {
+    const { t } = useTranslation();
+
+    const handleChange = () => {
+        console.log('The checkbox was toggled.');
+    }
+
+    return (
+        <Pref
+            labelId={"background_push"} 
+            title={"prefs_notification_background"}
+            description={"Enable background notifications?"}
+            >
+        <FormControl 
+            fullWidth 
+            variant="standard" 
+            sx={{ m: 1 }}
+            >
+            <Checkbox
+                onChange={handleChange}
+            >
+            </Checkbox>
+        </FormControl>
+        </Pref>
+    )
+};
+
 const PrefGroup = (props) => {
     return (
         <div role="table">
@@ -473,4 +503,32 @@ const Language = () => {
     )
 };
 
+const Installation = () => {
+    const { t } = useTranslation(); // Need help setting up the locale
+
+
+    return (
+        <Card sx={{p: 3}} aria-label={"Install ntfy"}>
+        <Typography variant="h5" sx={{marginBottom: 2}}>
+            {"Install NTFY"}
+        </Typography>
+        <Install/>
+        </Card>
+    )
+}
+
+const Install = () => {
+    const { t } = useTranslation();
+
+
+
+    return (
+        <FormControl fullWidth variant="standard" sx={{ m: 1 }}>
+            <Button variant="contained">
+                Install
+            </Button>
+        </FormControl>
+    )
+}
+
 export default Preferences;