Prettier pw request tab

src/pages/pwRequest.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import fetch from 'unfetch'
 
 import styles from './pwRequest.module.css'
@@ -7,6 +7,31 @@ import constants from '../constants.json'
 export default function PwRequest (props) {
   const [result, setResult] = useState([])
   const [remaining, setRemaining] = useState()
+  const [requestedPWS, setRequestedPWS] = useState()
+  const [createDate, setCreateDate] = useState()
+
+  const [addPwPerDay, setAddPwPerDay] = useState()
+  const [daysAfterUserGetsPWs, setDaysAfterUserGetsPWs] = useState()
+  const [maxPWCount, setMaxPWCount] = useState()
+
+  useEffect(() => {
+    console.info('Fetching avaible pws')
+    fetch(`${constants.apiUrl}avaiblePWS`, {
+      credentials: 'include'
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((data) => {
+        setRemaining(data.avaiblePWS)
+        setCreateDate(data.userCreated)
+        setRequestedPWS(data.requestedPWS)
+
+        setAddPwPerDay(data.addPWPerDay)
+        setDaysAfterUserGetsPWs(data.daysAfterUserGetsPWs)
+        setMaxPWCount(data.maxPWCount)
+      })
+  }, [])
 
   const handleSubmit = async () => {
     const rawResponse = await fetch(constants.apiUrl + 'getpw', {
@@ -45,10 +70,39 @@ export default function PwRequest (props) {
     <div>
       <div id='form'>
         <div className={styles.text}>
-          Itt Egy új jelszót tudsz kérni új felhasználóknak. Korlátozott mennyiségű jelszót tudsz
-          csak kérni, de ez idővel visszatöltődik, szóval óvatosan. Közös jelszóhasználat nem
-          ajánlott, mert ha belépsz valahol akkor azonnal kijelentkeztet mindenhonnan máshonnan.
-          Szerintem van elég jelszó hogy ne kelljen közös
+          Itt új jelszavakat tudsz kérni új felhasználóknak. Közös jelszóhasználat nem ajánlott,
+          mert ha valaki belép azzal a jelszóval amit te használsz akkor téged kiléptet
+          mindenhonnan. Szerintem van elég jelszó hogy ne kelljen közös
+        </div>
+        <div className={styles.text}>
+          Minden nap
+          <span>
+            {' ' + addPwPerDay + ' '}
+          </span>
+          új lehetőség van jelszót generálni, maximum
+          <span>
+            {' ' + maxPWCount + ' '}
+          </span>
+          lehetőség gyűlhet össze. Új felhasználók
+          <span>
+            {' ' + daysAfterUserGetsPWs + ' '}
+          </span>
+          nap után kapnak először lehetőséget.
+        </div>
+        <div className={styles.text}>
+          Még kérhető jelszavak:
+          <span>
+            {' ' + remaining + ' '}
+          </span>
+          Felhasználó létrehozva:
+          <span>
+            {' ' + createDate + ' '}
+          </span>
+          . Eddig
+          <span>
+            {' ' + requestedPWS + ' '}
+          </span>
+          jelszót kértél.
         </div>
         <div className={styles.buttonContainer}>
           <div
@@ -65,7 +119,6 @@ export default function PwRequest (props) {
             </div>
           )
         })}</div> : null}
-        {remaining ? <div className={styles.remaining}>Még kérhető jelszavak: {remaining}</div> : null}
       </div>
     </div>
   )