Implement Voting flow

package-lock.json

@@ -21,6 +21,7 @@
         "buffer": "^6.0.3",
         "i18next": "^21.9.1",
         "i18next-browser-languagedetector": "^6.1.5",
+        "jwt-decode": "^3.1.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-i18next": "^11.18.4",
@@ -11690,6 +11691,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -25424,6 +25430,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",

package.json

@@ -16,6 +16,7 @@
     "buffer": "^6.0.3",
     "i18next": "^21.9.1",
     "i18next-browser-languagedetector": "^6.1.5",
+    "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^11.18.4",

src/App.tsx

@@ -11,15 +11,16 @@ const theme = createTheme({
 	palette: {
 		primary: {
 			main: 'rgb(19, 71, 175)'
-			// dark: "#D24944"
 		}
 	},
 	typography: {
 		fontFamily: 'Inter',
 		body1: {
 			fontSize: '1rem',
-			color: 'rgb(30, 41, 60)' 
 		},
+		allVariants: {
+			color: 'rgb(39, 49, 58)' 
+		}
 	},
 });
 

src/actions/data-manager.js

@@ -230,16 +230,7 @@ export function getBuilding(buildingId, callback) {
 // }
 
 export function getTenentVoting(buildingId, callback) {
-    return thunkRequestTenant('/' + buildingId + '/voting', null, (err, data, dsp) => {
-        if (err) {
-            if (err.status === 401) {
-                dsp(genericAction(UNAUTHENTICATED))
-            }
-            console.error("Can not get tenant voting")
-            return
-        }
-        dsp(genericAction(TENANT_VOTING_RECEIVED, data))
-    }, "GET", false)(null)
+    return thunkRequestTenant('/' + buildingId + '/voting', null, callback, "GET", false)(null)
 }
 
 export function getTenantInfo(callback) {

src/components/ApplicationTab.tsx

 import { Box } from "@mui/material"
+import jwtDecode from "jwt-decode";
+import { useState } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
+import { JWT_TENANT } from "../actions/network-manager";
 import { BuildingInvoices } from "./BuildingInvoices/BuildingInvoices";
+import { Settings } from "./Settings/Settings";
+import { Voting } from "./Voting/Voting";
 
 const classes = {
     wrapper: {
@@ -10,21 +15,32 @@ const classes = {
         boxSizing: 'border-box',
         paddingBlock: '3%',
         paddingInline: '11%',
+        '@media (max-width: 800px)': {
+            paddingInline: '5%',
+        }
     }
 } as const ;
 
 export const ApplicationTab = () => {
+
+    const getBuildingId = () => {
+        let res: any = jwtDecode(localStorage.getItem(JWT_TENANT)!);
+        return res.bl[0].id;
+    }
+
+    const [buildingId, setBuildingId] = useState(getBuildingId());
+
     return (
         <Box sx={classes.wrapper}>
                 <Routes>
                     <Route path='overview' element={<div>Hello from overview</div>} />
                     <Route path='notifications' element={<div>Hello from notifications</div>} />
                     <Route path='issues' element={<div>Hello from issues</div>} />
-                    <Route path='voting' element={<div>Hello from voting</div>} />
+                    <Route path='voting' element={<Voting buildingId={buildingId}/>} />
                     <Route path='invoices' element={<div>Hello from invoices</div>} />
-                    <Route path='building-invoices' element={<BuildingInvoices />} />
+                    <Route path='building-invoices' element={<BuildingInvoices buildingId={buildingId}/>} />
                     <Route path='documents' element={<div>Hello from documents</div>} />
-                    <Route path='settings' element={<div>Hello from settings</div>} />
+                    <Route path='settings' element={<Settings />} />
                     <Route path='*' element={<Navigate replace to="overview" />} />
                 </Routes>
         </Box>

src/components/BuildingInvoices/BuildingInvoices.tsx

-import { Box, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import { getBuilding } from "../../actions/data-manager";
+import { TabWrapper } from "../TabWrapper/TabWrapper";
 import { BuildingInvoicesList } from "./BuildingInvoicesList";
 
-const classes = {
-    wrapper: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '50px',
-    },
-    header: {
-        fontWeight: 600,
-        fontSize: '1.6em',
-        color: '#27313a'
-    }
-} as const;
-
-export const BuildingInvoices = () => {
+export const BuildingInvoices = ({ buildingId }: { buildingId: string }) => {
 
     const [building, setBuilding] = useState<any>();
 
     useEffect(() => {
-        getBuilding('62a1ca0cf2c321d1f5d4aa8d', (err: any, data: any) => {setBuilding(data)});
+        getBuilding(buildingId, (err: any, data: any) => { setBuilding(data) });
     }, []);
 
 
     return (
         <>
-        { building &&
-        <Box sx={classes.wrapper}>
-            <Typography variant="h5" sx={classes.header}>Finansije Zgrade</Typography>
-            <BuildingInvoicesList building={building}/>
-        </Box>
-        }
+            {building &&
+                <TabWrapper header='Finansije Zgrade'>
+                    <BuildingInvoicesList building={building} />
+                </TabWrapper>
+            }
         </>
     );
 }
\ No newline at end of file

src/components/BuildingInvoices/BuildingInvoicesList.tsx

-import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import { Card } from "../Card/Card";
 import { PayableStatus } from "./PayableStatus";
 
 const classes = {
-    tableWrapper: {
-        borderRadius: '15px',
-        boxSizing: 'border-box',
-        paddingBlock: '10px',
-        paddingInline: '40px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '30px',
-        backgroundColor: 'white',
-        boxShadow: 'rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px'
-    },
     tableHead: {
         '& .MuiTableCell-root': {
             color: '#64748b',
@@ -27,13 +17,13 @@ const classes = {
             paddingInline: '0px',
         }
     },
-    bolder: { 
-        fontWeight: 'bolder' 
+    bolder: {
+        fontWeight: 'bolder'
     },
-    status: { 
-        display: 'flex', 
-        justifyContent: 'center', 
-        alignItems: 'center' 
+    status: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
     }
 
 } as const;
@@ -67,7 +57,7 @@ export const BuildingInvoicesList = ({ building }: { building: any }) => {
     payables.sort((a: any, b: any) => Date.parse(a.created) - Date.parse(b.created))
 
     return (
-        <Box style={classes.tableWrapper}>
+        <Card>
             <TableContainer >
                 <Table size="medium">
                     <TableHead>
@@ -92,6 +82,6 @@ export const BuildingInvoicesList = ({ building }: { building: any }) => {
                     </TableBody>
                 </Table>
             </TableContainer>
-        </Box>
+        </Card>
     );
 }
\ No newline at end of file

src/components/Card/Card.css

+.card {
+    border-radius: 15px;
+    padding-block: 10px;
+    padding-inline: 40px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    background-color: white;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
+    position: relative;
+}
\ No newline at end of file

src/components/Card/Card.tsx

+import { ReactNode } from "react"
+import './Card.css';
+
+export const Card = ({children}: {children: ReactNode}) => {
+    return (<div className="card">{children}</div>)
+}
\ No newline at end of file

src/components/Settings/Settings.tsx

+import { Box, Button, TextField, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import { getTenantInfo } from "../../actions/data-manager";
+import { Card } from "../Card/Card";
+import { CheckMark } from "../icons/CheckMark";
+import { keyToBase64, PRIVATE_KEY } from "../register/RegisterForm";
+import { TabWrapper } from "../TabWrapper/TabWrapper";
+import { Buffer } from "buffer";
+import nacl, { verify } from "tweetnacl";
+
+const classes = {
+    votingSeetings: { 
+        display: 'flex', 
+        flexDirection: 'row', 
+        alignItems: 'center' 
+    },
+    textWrapper: { 
+        display: 'flex', 
+        flexDirection: 'column', 
+        gap: '15px' 
+    },
+    header: { 
+        color: 'gray', 
+        fontSize: '0.9rem' 
+    },
+    button: { 
+        marginLeft: 'auto', 
+        borderRadius: '50px' 
+    }
+
+} as const;
+
+export const Settings = () => {
+
+    const [privateKey, setPrivateKey] = useState(localStorage.getItem(PRIVATE_KEY));
+    const [publicKey, setPublicKey] = useState();
+    const [newPrivateKey, setNewPrivateKey] = useState('');
+    const [helperText, setHelperText] = useState('');
+
+
+    useEffect(() => {
+        getTenantInfo((err: any, user: any) => {
+            if (user.voting.hasVotingKey) {
+                setPublicKey(user.votingKey);
+            }
+        });
+    }, []);
+
+    const verifyKey = () => {
+        try {
+            let buf = Buffer.from(newPrivateKey, 'base64');
+            let keyPair = nacl.sign.keyPair.fromSecretKey(buf);
+
+            if (keyToBase64(keyPair.publicKey) === publicKey) {
+                setPrivateKey(newPrivateKey);
+                localStorage.setItem(PRIVATE_KEY, newPrivateKey);
+                setHelperText('');
+            }
+        } catch (error) {
+            setHelperText('Neispravan kljuc!');
+        }
+    }
+
+    return (
+        <TabWrapper header="Podešavanja">
+            <Card>
+                {!!privateKey &&
+                    <Box sx={classes.votingSeetings}>
+                        <Box sx={classes.textWrapper}>
+                            <Typography sx={classes.header}>Glasanje</Typography>
+                            <Typography>Privatni ključ je uspešno podešen u aplikaciji.</Typography>
+                        </Box>
+                        <CheckMark />
+                    </Box>
+                }
+                {
+                    !privateKey &&
+                    <>
+                        <Typography sx={classes.header}>Glasanje</Typography>
+                        <Typography>Kako bi mogli da učestvujete u glasanju, molimo vas unesite vaš privatni ključ.</Typography>
+                        <TextField
+                            error={!!helperText}
+                            helperText={helperText}
+                            onChange={(e) => {
+                                setNewPrivateKey(e.target.value);
+                            }} size='small' />
+                        <Button variant='contained' sx={classes.button} onClick={verifyKey}>Potvrdi</Button>
+                    </>
+                }
+            </Card>
+
+        </TabWrapper>
+    );
+}
\ No newline at end of file

src/components/SideMenuItem.tsx

@@ -26,11 +26,15 @@ const classes = {
         cursor: 'pointer',
         ':hover': {
             backgroundColor: 'rgba(150, 150, 150, 0.2)'
-        }
+        },
+        '& .MuiTypography-root': {
+            color: 'white'
+        },
     },
     selectedItem: {
         backgroundColor: 'rgba(200, 200, 200, 0.3)',
         '& .MuiTypography-root': {
+            color: 'white',
             fontWeight: 'bold'
         },
         '&:hover': {
@@ -57,7 +61,7 @@ export const SideMenuItem = ({ content, selectedItem, changeSelectedItem }: { co
                     }
                 }}>
                     {!!item.icon && item.icon}
-                    <Typography sx={{color: 'white'}}>{item.title}</Typography>
+                    <Typography>{item.title}</Typography>
                 </Box>
             ))}
         </Box>

src/components/TabWrapper/TabWrapper.css

 .wrapper {
-    box-sizing: border-box;
-    padding-block: 3%;
-    padding-inline: 11%;
-    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+}
+
+.wrapper .MuiTypography-root	 {
+    font-weight: 600;
+    font-size: 1.6em;
 }
\ No newline at end of file

src/components/TabWrapper/TabWrapper.tsx

+import { Box, Typography } from "@mui/material"
 import { ReactNode } from "react"
 import './TabWrapper.css'
 
-export const TabWrapper = ({children}: {children: ReactNode}) => {
+const classes = {
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '50px'
+    },
+    header: {
+        fontWeight: 600,
+        fontSize: '1.6em'
+    }
+} as const;
+
+export const TabWrapper = ({header, children}: {header: string, children?: ReactNode}) => {
     return (
-        <div className="wrapper">
+        <Box sx={classes.wrapper}>
+            <Typography variant='h5' sx={classes.header}>{header}</Typography>
             {children}
-        </div>
+        </Box>
     )
 }
\ No newline at end of file

src/components/Voting/Voting.tsx

+import { Box, Button, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Typography } from "@mui/material";
+import jwtDecode from "jwt-decode";
+import { useEffect, useMemo, useState } from "react";
+import nacl from "tweetnacl";
+import { getTenentVoting, postVote } from "../../actions/data-manager";
+import { JWT_TENANT } from "../../actions/network-manager";
+import { VotingEntity } from "../../internal-types";
+import { keyToBase64, PRIVATE_KEY } from "../register/RegisterForm";
+import { Warning } from "./Warning";
+import { Buffer } from "buffer";
+import { TabWrapper } from "../TabWrapper/TabWrapper";
+import { Card } from "../Card/Card";
+
+const classes = {
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '50px',
+    },
+    header: {
+        fontWeight: 600,
+        fontSize: '1.6em',
+    },
+    subheader: { 
+        color: 'gray', 
+        fontSize: '0.9rem' 
+    },
+    subject: { 
+        fontSize: '1.2rem' 
+    },
+    button: { 
+        marginLeft: 'auto', 
+        borderRadius: '50px' 
+    }
+} as const;
+
+export const Voting = ({ buildingId }: { buildingId: string }): JSX.Element => {
+
+    const [status, setStatus] = useState();
+    const [voting, setVoting] = useState<VotingEntity>();
+    const [selectedCandidateId, setSelectedCandidateId] = useState('');
+    const [errorText, setErrorText] = useState('');
+    const [privateKey, setPrivateKey] = useState(localStorage.getItem(PRIVATE_KEY));
+
+    useEffect(() => {
+        getTenentVoting(buildingId, (err: any, res: any, disp: any) => {
+            console.log(res);
+            setStatus(res.status || "not allowed");
+            setVoting(res);
+        })
+    }, []);
+
+    const handleVote = () => {
+        let voteData = { votingId: voting!._id, votedFor: selectedCandidateId, time: new Date() };
+        let voteDataStr = JSON.stringify(voteData);
+        let dataBuffer = Buffer.from(voteDataStr);
+
+        let buffKey = Buffer.from(privateKey!, 'base64');
+        const signatureRaw = nacl.sign.detached(dataBuffer, buffKey);
+        let signature = keyToBase64(signatureRaw);
+
+        let vote = { vote: voteDataStr, signature };
+
+        postVote(buildingId, vote, (err: any, data: any) => {
+            if (err) {
+                if (err.status === 406) {
+                    setErrorText("Signature not valid!");
+                } else {
+                    setErrorText(err.errorMessage);
+                }
+            } else {
+                setStatus(data.status)
+            }
+
+        })(null);
+
+
+
+    }
+
+    return (<>
+        {
+            !!voting &&
+            <TabWrapper header="Glasanje">
+                {!!privateKey &&
+                    <>
+                        {status === "not allowed" && <Warning text='Vaš nalog nije potvrđen kao vlasnik ni jedne jedinice. Molimo obratite se upravniku stambene zajednice.' />}
+                        {status !== "not allowed" &&
+                            <Card>
+                                <Typography sx={classes.subheader}>Tekuće glasanje</Typography>
+                                {status === "no voting" && <Typography>U ovom trenutku nema aktivnog glasanja.</Typography>}
+                                {status === "in progress" &&
+                                    <>
+                                        <Typography sx={classes.subject}>{voting.subject}</Typography>
+                                        <FormControl>
+                                            <FormLabel>Opcije</FormLabel>
+                                            <RadioGroup value={selectedCandidateId} onChange={(event) => { setSelectedCandidateId(event.target.value) }}>
+                                                {voting.candidates.map((candidate, ind: number) => (<FormControlLabel value={candidate._id} control={<Radio />} label={candidate.name} key={ind} />))}
+                                            </RadioGroup>
+                                        </FormControl>
+                                        <Button variant='contained' sx={classes.button} disabled={selectedCandidateId === ''} onClick={handleVote}>Glasaj</Button>
+                                    </>
+                                }
+                                {status === "voted" && <Typography>Hvala vam na glasanju. </Typography>}
+                            </Card>
+                        }
+                    </>
+                }
+                {
+                    !privateKey && <Warning text='Glasanje je onemogućeno jer privatan ključ nije sačuvan u aplikaciji. Molimo vas, podesite ključ u podešavanjima!' />
+                }
+            </TabWrapper>
+        }
+    </>
+    );
+}
\ No newline at end of file

src/components/Voting/Warning.tsx

+import { Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import { WarningIcon } from "../icons/WarningIcon";
+
+const classes = {
+    wrapper: {
+        padding: '20px',
+        backgroundColor: '#FFCC00',
+        borderRadius: '10px',
+        '& .MuiTypography-root': {
+            fontWeight: 'bolder'
+        },
+        display: 'flex',
+        alignItems: 'center',
+        gap: '20px'
+    }
+} as const;
+
+export const Warning = ({text}: {text: string}) => {
+    return (
+        <Box sx={classes.wrapper}>
+            <WarningIcon />
+            <Typography>{text}</Typography>
+        </Box>
+    );
+}
\ No newline at end of file

src/components/icons/CheckMark.tsx

+import './Icons.css';
+
+export const CheckMark = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="icons-stroke" style={{stroke: '#4BB543', marginLeft: 'auto', width: '50px'}}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+    );
+}
+
+
+
+
+

src/components/icons/Icons.css

@@ -8,6 +8,11 @@
     width: 3%;
 }
 
+.alert {
+    width: 6%;
+    stroke: rgb(39, 49, 58);
+}
+
 .logout:hover {
     stroke: white;
 }
@@ -18,4 +23,11 @@
 
 .user-icon {
     width: 25%;
+}
+
+@media (max-width: 800px) {
+    .alert {
+        width: 100px;
+    }
+
 }
\ No newline at end of file

src/components/icons/WarningIcon.tsx

+import './Icons.css';
+
+export const WarningIcon = ({style}: {style?: any}) => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="alert" style={style}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+        </svg>
+    );
+}
+
+

src/internal-types.ts

@@ -28,4 +28,39 @@ export type SubMenuItem = {
     icon?: ReactElement,
     title: string,
     path?: string
+}
+
+export type Vote = {
+    votedTime: Date,
+    unit: string,
+    user: string,
+    vote: string,
+    signature: string,
+    type: string
+}
+
+export type Candidate = {
+    _id: string,
+    name: string,
+    link: string,
+    votes: Vote[]
+}
+
+export type VotingEntity = {
+    _id: string, 
+    subject: string,
+    description?: string,
+    start: Date,
+    end: Date,
+    status: string,
+    candidates: Candidate[],
+    selection: string,
+    winner: string,
+    currentResults: {
+        voted: number,
+        totalSelection: number,
+        quorum: number,
+        unavailable: number
+    }, 
+    repeating: number
 }
\ No newline at end of file