qmining-page/src/pages/pwRequest.js
2021-02-21 12:09:04 +01:00

132 lines
4.3 KiB
JavaScript

import React, { useState, useEffect } from 'react'
import fetch from 'unfetch'
import Head from 'next/head'
import styles from './pwRequest.module.css'
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('...')
const [addPWCount, setAddPWCount] = useState('...')
const [dayDiff, setDayDiff] = 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)
setAddPWCount(data.addPWCount)
setDaysAfterUserGetsPWs(data.daysAfterUserGetsPWs)
setMaxPWCount(data.maxPWCount)
setDayDiff(data.dayDiff)
})
}, [])
const handleSubmit = async () => {
const rawResponse = await fetch(constants.apiUrl + 'getpw', {
method: 'POST',
credentials: 'include',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({}),
})
try {
rawResponse
.json()
.then((resp) => {
if (resp.result === 'success') {
setResult([...result, resp.pw])
setRemaining(resp.remaining)
setRequestedPWS(resp.requestedPWS)
} else if (resp.result === 'success') {
setResult(['Nem vagy bejelentkezve!']) // this should never happpen
} else {
setResult([
...result,
'Jelszó kérési lehetőségeid elfogytak, nézz vissza később',
])
setRemaining(0)
}
})
.catch((e) => {
setResult([...result, 'Szerver oldali hiba!'])
console.error(e)
})
} catch (e) {
setResult([...result, 'Szerver oldali hiba!'])
console.error(e)
}
}
return (
// TODO: újrafogalmazás, remove hány nap után kapnak új jelszót először
<div>
<Head>
<title>Jelszó kérés - Qmining | Frylabs.net</title>
</Head>
<div id="form">
<div className={styles.text}>
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}>
Új felhasználóknak
<span>{' ' + daysAfterUserGetsPWs + ' '}</span>
napot kell várni, míg kapnak lehetőséget jelszó generálásra.
</div>
<div className={styles.text}>
<span>{' ' + addPwPerDay + ' '}</span>
naponta
<span>{' ' + addPWCount + ' '}</span>
új lehetőség van jelszót generálni, maximum
<span>{' ' + maxPWCount + ' '}</span>
lehetőség gyűlhet össze
</div>
<div className={styles.text}>
Még kérhető jelszavak:
<span>{' ' + remaining}</span>. Felhasználó létrehozva:
<span>{' ' + createDate}</span>,<span>{' ' + dayDiff + ' '}</span>
napja. Eddig
<span>{' ' + requestedPWS + ' '}</span>
jelszót kértél.
</div>
<div className={styles.buttonContainer}>
<div onClick={handleSubmit} className={styles.button}>
Jelszó kérése
</div>
</div>
{result ? (
<div className={styles.pwContainer}>
{result.map((r, i) => {
return (
<div key={i} className={styles.pw}>
{i + 1}.: {r}
</div>
)
})}
</div>
) : null}
</div>
</div>
)
}