qmining-page/src/pages/pwRequest.js
2021-06-09 09:48:31 +02:00

197 lines
5.6 KiB
JavaScript

import React, { useState, useEffect } from 'react'
import fetch from 'unfetch'
import Head from 'next/head'
import Link from 'next/link'
import styles from './pwRequest.module.css'
import constants from '../constants.json'
function fetchAvailablePWS() {
return new Promise((resolve) => {
fetch(`${constants.apiUrl}avaiblePWS`, {
credentials: 'include',
})
.then((resp) => {
return resp.json()
})
.then((res) => {
resolve(res)
})
})
}
function requestPw() {
return new Promise((resolve) => {
fetch(constants.apiUrl + 'getpw', {
method: 'POST',
credentials: 'include',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({}),
})
.then((res) => {
return res.json()
})
.then((res) => {
resolve(res)
})
})
}
export default function PwRequest({ globalData, globalState, setGlobalState }) {
const userId = globalData.userId || '...'
const [result, setResult] = useState([])
const [daysTillNext, setDaysTillNext] = useState('...')
const [data, setData] = useState({
userCreated: '...',
availablePWS: '...',
requestedPWS: '...',
maxPWCount: '...',
daysAfterUserGetsPWs: '...',
dayDiff: '...',
userCount: '...',
})
const {
userCreated,
availablePWS,
requestedPWS,
maxPWCount,
daysAfterUserGetsPWs,
dayDiff,
userCount,
} = data
useEffect(() => {
if (globalState.availablePWS) {
setData(globalState.availablePWS)
} else {
fetchAvailablePWS().then((data) => {
setData(data)
setGlobalState({
availablePWS: data,
})
})
}
const nextDate = 1
const now = new Date()
if (now.getDate() === nextDate) {
setDaysTillNext(0)
return
}
const now2 = new Date(now.getFullYear(), now.getMonth(), now.getDate())
let next = new Date(
now.getFullYear(),
now.getMonth() + (now.getDate() < nextDate ? 0 : 1),
nextDate
)
let daysTillNext = (next.getTime() - now2.getTime()) / 1000 / 60 / 60 / 24
daysTillNext = (next.getTime() - now2.getTime()) / 1000 / 60 / 60 / 24
setDaysTillNext(daysTillNext)
}, [])
return (
<div>
<Head>
<title>Jelszó generálás - Qmining | Frylabs.net</title>
</Head>
<div className={'pageHeader'}>
<h1>Jelszó generálás</h1>
</div>
<center>
<div id="form">
<div className={styles.text}>
<p className={styles.descrip}>
Minden felhasználó egyedi jelszót kap. Ne használjatok többen egy
jelszót, mert egy idő után -biztonsági okokból- kidob a rendszer,
ha ugyan az a felhasználó több helyen is belépve marad. A
jelszavakról bővebben a{' '}
<Link href="/faq?tab=pw">
<a>GYIK</a>
</Link>{' '}
vonatkozó részében olvashatsz.
</p>
</div>
<div className={styles.text}>
Havonta minden felhasználó
<span>{' ' + maxPWCount + ' db '}</span>
jelszót generálhat. Új felhasználóknak
<span>{' ' + daysAfterUserGetsPWs + ' '}</span>
napot kell várniuk, hogy tudjanak jelszót generálni, de a
<span>{' ' + daysAfterUserGetsPWs + '. '}</span>
nap azonnal kapnak
<span>{' ' + maxPWCount + ' db '}</span>
lehetőséget.
<p />
Jelenleg
<span>{' ' + availablePWS + ' db '}</span>
jelszót generálhatsz még. Eddig összesen
<span>{' ' + requestedPWS + ' '}</span>
jelszót generáltál.{' '}
{daysTillNext === 0 ? (
<>
<span>Ma éjfél</span> után
</>
) : (
<>
<span>{daysTillNext} </span>nap múlva
</>
)}{' '}
áll rendelkezésre ismét a maximum elérhető jelszógenerálási
lehetőség
<p />A jelenleg bejelentkezett felhasználó (
<span>{' #' + userId + ' '}</span>)
<span>{' ' + dayDiff + ' '}</span>
napos,{' '}
<span>
{userCreated ? new Date(userCreated).toLocaleString() : '...'}
</span>
-kor lett létrehozva.
<p />
Az oldalnak jelenleg
<span>{' ' + userCount + ' '}</span>
felhasználója van.
</div>
<div className={'buttonContainer'}>
<div
onClick={() => {
requestPw().then((res) => {
setData(res)
setGlobalState({
availablePWS: res,
})
if (res.success) {
setResult([...result, res.pw])
} else {
setResult([
...result,
'Jelszó kérési lehetőségeid elfogytak, nézz vissza később',
])
}
})
}}
>
Jelszó kérése
</div>
</div>
{result ? (
<div className={styles.pwContainer}>
{result.map((res, i) => {
return (
<div key={i} className={styles.pw}>
{i + 1}.: {res}
</div>
)
})}
</div>
) : null}
</div>
</center>
</div>
)
}