Displaying all requested passwords

src/pages/pwRequest.js

@@ -5,7 +5,7 @@ import styles from './pwRequest.module.css'
 import constants from '../constants.json'
 
 export default function PwRequest (props) {
-  const [resul, setResult] = useState()
+  const [result, setResult] = useState([])
   const [remaining, setRemaining] = useState()
 
   const handleSubmit = async () => {
@@ -22,21 +22,21 @@ export default function PwRequest (props) {
       rawResponse.json()
         .then((resp) => {
           if (resp.result === 'success') {
-            setResult(resp.pw)
+            setResult([...result, resp.pw])
             setRemaining(resp.remaining)
           } else if (resp.result === 'success') {
-            setResult('Nem vagy bejelentkezve!') // this should never happpen
+            setResult([ 'Nem vagy bejelentkezve!' ]) // this should never happpen
           } else {
-            setResult('Jelszó kérési lehetőségeid jelenleg nincsenek, nézz vissza később')
+            setResult(['Jelszó kérési lehetőségeid jelenleg nincsenek, nézz vissza később'])
             setRemaining(0)
           }
         })
         .catch((e) => {
-          setResult('Szerver oldali hiba!')
+          setResult(['Szerver oldali hiba!'])
           console.log(e)
         })
     } catch (e) {
-      setResult('Szerver oldali hiba!')
+      setResult(['Szerver oldali hiba!'])
       console.log(e)
     }
   }
@@ -58,7 +58,13 @@ export default function PwRequest (props) {
             Jelszó kérése
           </div>
         </div>
-        {resul ? <div className={styles.pw}>{resul}</div> : null}
+        {result ? <div className={styles.pwContainer}>{result.map((r, i) => {
+          return (
+            <div key={i} className={styles.pw}>
+              {i}.: {r}
+            </div>
+          )
+        })}</div> : null}
         {remaining ? <div className={styles.remaining}>Még kérhető jelszavak: {remaining}</div> : null}
       </div>
     </div>

src/pages/pwRequest.module.css

@@ -23,6 +23,11 @@
 }
 
 .pw {
+  margin: 10px;
+}
+
+.pwContainer {
+  font-family: "Courier New", Courier, monospace;
   text-align: center;
   font-size: 24px;
   color: white;