Changed lotsa stuff

src/pages/faq.js

@@ -0,0 +1,275 @@
+import React, { useState } from 'react'
+
+import Sleep from '../components/sleep'
+import Head from 'next/head'
+
+function PasswordSection() {
+  return (
+    <>
+      <div className={'manualBody'}>
+        <p>
+          Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy
+          nagyjából zárt legyen a felhasználók köre.
+        </p>
+        <ul>
+          <li>Minden felhasználónak más jelszava van.</li>
+          <li>
+            Elvileg elég csak 1 szer beírnod, és többet nem kell, de{' '}
+            <b>mentsd le biztos helyre a jelszót, hogy később is meglegyen</b>!
+            Ha többször kell megadnod, akkor az bug lesz. Ilyenkor ezt{' '}
+            <a
+              href="http://qmining.frylabs.net/feedback?man"
+              target="_blank"
+              rel="noreferrer"
+            >
+              jelentsd
+            </a>
+            .
+          </li>
+          <li>
+            <i>
+              Jelenleg nincs elfelejtett jelszó funkció, ha elfelejted, akkor az
+              örökre eltűnik!
+            </i>
+          </li>
+          <li>
+            Ha van jelszavad akkor <b>bizonyos határok között</b> te is{' '}
+            <a
+              href="https://qmining.frylabs.net/pwRequest?man"
+              target="_blank"
+              rel="noreferrer"
+            >
+              tudsz generálni
+            </a>{' '}
+            másoknak (ncore style).
+          </li>
+          <li>
+            Saját jelszavadat ne oszd meg, mivel egyszerre egy helyen lehetsz
+            belépve, máshol automatikusan ki leszel jelentkeztetve. (meg minek,
+            ha tudsz adni másoknak az előző pont alapján)
+          </li>
+          <li>
+            Mivel senkinek sincs felhasználóneve, csak egy UserID (amit bal alul
+            találsz), így az egész teljesen anonim. Emiatt a jelszavakat nem
+            lehet megváltoztatni, hogy a szükséges komplexitás megmaradjon.
+          </li>
+        </ul>
+      </div>
+      <hr />
+    </>
+  )
+}
+
+function FAQSection() {
+  return (
+    <>
+      <div className={'manualBody'}>
+        <ul>
+          <li>
+            <b>
+              Olyan helyeken fut le a script, ahol nem kellene, vagy
+              ideiglenesen ki akarod kapcsolni;
+            </b>
+            <br />
+            <i>
+              Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet
+              kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)
+            </i>
+          </li>
+          <br />
+          <li>
+            <b>
+              Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a
+              válaszra kattintani;
+            </b>
+            <br />
+            <i>
+              A felugró ablakot ha minden jól megy akkor a szélénél fogva tudod
+              mozgatni, vagy egeret rajtatartva a görgővel tudod állítani az
+              áttetszőségét, vagy be tudod zárni jobb felül X-el, vagy egér
+              középső gombbal.
+            </i>
+          </li>
+          <br />
+          <li>
+            <b>Gombok, %-ok, számok;</b>
+            <br />
+            <img
+              style={{ maxWidth: '100%' }}
+              src="img/6.png"
+              alt="img"
+              className={'manual_img'}
+            />
+          </li>
+        </ul>
+      </div>
+    </>
+  )
+}
+
+function RiskSection() {
+  return (
+    <>
+      <ul>
+        <li>
+          <b>Bármikor észrevehetik hogy használod a scriptet</b>
+          <br />
+          A weboldalt már kevésbé, de úgy nem menti el a kérdéseket a script,
+          mert nem fut. Később manuálisan is be lehet majd küldeni
+          kérdés-válaszokat.
+          <p />
+          A script shadow-root hoz teszi hozzá az összes megjelenített
+          elementet, így ezeket szinte lehetetlen detektálni. A moodle
+          semmiféleképpen nem látja, hogy milyen más oldalak vannak megnyitva a
+          böngésződben. Nem látja az XMLHttp requesteket se, amit a script
+          végez. Egy Matomo nevű script látja hogy milyen oldalarka navigálsz a
+          moodle-ről, de a script nem linkekkel irányít át, hanem javascript
+          eseménnyel, amit nem tud nyomon követni.
+          <p />
+          Aztán ki tudja ténylegesen hogy lehet
+        </li>
+        <li>
+          <b>Bármikor leállhat a szerver</b>
+          <br />
+          És akkor nem bírod megnézni a válaszokat. Erre van az{' '}
+          <a
+            href="http://qmining.frylabs.net/allqr.txt?man"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {' '}
+            összes kérdés TXT
+          </a>
+        </li>
+        <li>
+          <b>Akármelyik válasz rossz lehet</b>
+          <br />
+          Pl.: ha a script rosszul menti le, vagy rossz kérdésre ad választ
+        </li>
+      </ul>
+      <hr />
+    </>
+  )
+}
+
+function WebsiteSaveSection() {
+  return (
+    <>
+      <p>
+        Ha hibát észlesz, kérlek jelents. Hogy a hibákat a saját gépemen
+        reprodukálni tudjam, és könnyen ki bírjam javítani, sokszor jól jön, ha
+        egy lementett weboldalt megkapok, amin a hiba történik. Így lehet
+        menteni egy oldalt:
+      </p>
+      <center>
+        <img
+          style={{ maxWidth: '100%' }}
+          src="img/websitesave.png"
+          alt="img"
+          className={'manual_img'}
+        />
+        <br />
+        <a href="/feedback" rel="noreferrer">
+          Ide tudod feltölteni
+        </a>
+      </center>
+      <p>
+        Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom
+        hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd
+        azt az oldalt amin hibával találkozol.
+      </p>
+    </>
+  )
+}
+
+function ScriptReinstallSection() {
+  return (
+    <>
+      <p>
+        Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a
+        weboldalról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha
+        onnan telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon
+        fontosak (de tényleg)). Ezért a következő rövid manővert kellene
+        végrehajtani, hogy minden zökkenőmentesen menjen:
+      </p>
+      <ul>
+        <li>Böngésző bővítményeidnél kattints a tampermonkey-ra</li>
+        <li>Válaszd ki alulról második opciót, ami dashboard néven fut</li>
+        <li>
+          Ekkor új tabban felugranak telepített scriptjeid. Keresd meg a
+          Moodle/Elearning/KMOOC test help-et, és a sor végén kattints a kuka
+          gombra
+        </li>
+        <li>Ha megkérdezi mondd neki, hogy biztos törölni akarod</li>
+        <li>
+          Ezután simán kattints{' '}
+          <a
+            href="http://qmining.frylabs.net/install?man"
+            target="_blank"
+            rel="noreferrer"
+          >
+            ide
+          </a>{' '}
+          a script újratelepítéséhez a weboldalról.
+        </li>
+        <li>
+          Kész! Lehet megkérdezi újra, hogy elérheti-e a szervert, de azt csak
+          egyszer. Szokásos módon engedélyezd, hogy le bírja kérni a helyes
+          válaszokat
+        </li>
+      </ul>
+      Ezzel semmi adat nem vész el, régi jelszó ugyanolyan jó marad (csak ne
+      felejtsd azt el)
+    </>
+  )
+}
+
+const pages = {
+  faq: { name: 'GYIK', component: FAQSection },
+  pw: { name: 'Jelszavak', component: PasswordSection },
+  risk: { name: 'Kockázatok', component: RiskSection },
+  websitedl: { name: 'Weboldal letöltése', component: WebsiteSaveSection },
+  reinstall: {
+    name: 'Script újratelepítése',
+    component: ScriptReinstallSection,
+  },
+}
+
+export default function FAQ() {
+  const [currPage, setCurrPage] = useState(pages.faq)
+
+  const renderCurrPage = (page) => {
+    if (page) {
+      return <page.component />
+    } else {
+      return null
+    }
+  }
+
+  return (
+    <div>
+      <Head>
+        <title>GYIK - Qmining | Frylabs.net</title>
+      </Head>
+      <div className={'buttonContainer'}>
+        {Object.keys(pages).map((key) => {
+          const page = pages[key]
+          return (
+            <div
+              className={`${page === currPage && 'activeButton'}`}
+              key={key}
+              onClick={() => {
+                setCurrPage(page)
+              }}
+            >
+              {page.name}
+            </div>
+          )
+        })}
+      </div>
+      {renderCurrPage(currPage)}
+      <Sleep />
+      <p className={'endofpage'} />
+    </div>
+  )
+}