Manuals update / refactor

src/pages/contribute.js

@@ -54,12 +54,12 @@ export default function contribute() {
       <hr />
       <Todos />
       <hr />
-      <div className={styles.gitRepos}>
+      <div id={'gitrepo'} className={styles.gitRepos}>
         <div>
           <div className={'subtitle'}>
             <b>Git repos</b>
           </div>
-          <div id={'gitrepo'}>
+          <div>
             {Object.keys(repos.repos).map((key) => {
               let repo = repos.repos[key]
               return (

src/pages/faq.js

@@ -3,6 +3,9 @@ import Link from 'next/link'
 
 import Head from 'next/head'
 
+import constants from '../constants.json'
+import styles from './faq.module.css'
+
 function PasswordSection() {
   return (
     <>
@@ -15,7 +18,7 @@ function PasswordSection() {
           <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>!
+            <i>mentsd le biztos helyre a jelszót, hogy később is meglegyen</i>!
             Ha többször kell megadnod, akkor az bug lesz. Ilyenkor ezt{' '}
             <a
               href="http://qmining.frylabs.net/feedback?man"
@@ -33,7 +36,7 @@ function PasswordSection() {
             </i>
           </li>
           <li>
-            Ha van jelszavad akkor <b>bizonyos határok között</b> te is{' '}
+            Ha van jelszavad akkor <i>bizonyos határok között</i> te is{' '}
             <a
               href="https://qmining.frylabs.net/pwRequest?man"
               target="_blank"
@@ -44,9 +47,9 @@ function PasswordSection() {
             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)
+            Saját jelszavadat ne oszd meg, mivel egyszerre korlátozott 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
@@ -66,33 +69,78 @@ function FAQSection() {
         <ul>
           <li>
             <b>
-              Olyan helyeken fut le a script, ahol nem kellene, vagy
-              ideiglenesen ki akarod kapcsolni;
+              Hogy kell a scriptet telepíteni, milyen oldalakon működik és hogy
+              működik?
             </b>
-            <br />
-            <i>
-              Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet
-              kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)
-            </i>
+            <Link href="/script">
+              <a>Ezen az oldalon van leírva</a>
+            </Link>{' '}
           </li>
+          <li>
+            <b>
+              Lehet-e valahol szerkeszteni, törölni, illetve manuálisan
+              hozzáadni a meglévő kéréseket?
+            </b>
+            Igen,{' '}
+            <a
+              href={`${constants.siteUrl}dataeditor`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              ezen az oldalon
+            </a>{' '}
+            van lehetőség erre.
+          </li>
+          <li>
+            <b>
+              A teszt ellenőrző oldal nem elérhető. Ilyenkor lehet valamit
+              tenni, hogy mégis el legyenek mentve a válaszok?
+            </b>
+            A{' '}
+            <a
+              href={`${constants.siteUrl}dataeditor`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              dataeditor
+            </a>{' '}
+            oldal erre is jó, a <i>Kitöltetlen tesztek</i> részhez a script
+            automatikusan feltölti a kérdéseket még megoldás közben. Ehhez nincs
+            lementve helyes válasz, de ezt te utólag bejelölheted, és
+            beküldheted.
+          </li>
+          <li>
+            <b>
+              Mennyire anonymus a weboldal/script, és kiderülhet-e hogy
+              használom?
+            </b>
+            A weboldal teljesen anonymus, mindenki csak egy számként van
+            nyilvántartva (ami a user ID), random generált uuidv4 jelszavak
+            vannak (így nicknevek sem kellenek), és még IP cím sincs sehol
+            letárolva szerver oldalon.
             <br />
+            Több infó a kockázatok résznél ezen az oldalon.
+          </li>
+          <li>
+            <b>
+              Olyan helyeken fut le a script, ahol nem kellene, vagy
+              ideiglenesen ki akarom kapcsolni
+            </b>
+            Tampermonkey bővítmény ikon böngészőben -{'>'} click -{'>'} a
+            scriptet kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)
+          </li>
           <li>
             <b>
               Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a
-              válaszra kattintani;
+              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 />
+            <b>Gombok, %-ok, számok</b>
             <img className={'manual_img'} src="img/6.png" alt="img" />
           </li>
         </ul>
@@ -106,17 +154,21 @@ function RiskSection() {
     <>
       <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.
+          <b>Bármikor észrevehetik hogy használod a scriptet</b>A weboldalt már
+          kevésbé, de úgy nem menti el a kérdéseket a script, mert nem fut.{' '}
+          <a
+            href={`${constants.siteUrl}dataeditor`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Manuálisan is be lehet küldeni kérdés-válaszokat.
+          </a>
           <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
+          végez. Egy Matomo nevű script látja hogy milyen oldalakra 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 />
@@ -124,22 +176,37 @@ function RiskSection() {
         </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>
+        <li>
+          <b>
+            Ha esetleg {'"'}lebukik{'"'} a szerver, és személyes infók
+          </b>
+          Semmi személyes információ nincs eltárolva szerveren. Egyedüli
+          információ amit egyáltalán ki tudnék deríteni az amúgy is az IP címed,
+          de az nincs letárolva. Ha nagyon gonosz lennék, akkor a script el
+          tudná küldeni a neved és talán még 1-2 adatot a szervernek, de ezt nem
+          teszi.
+          <p />
+          Bizonyíték? A script, weboldal és szerver teljesen nyílt forráskódú,{' '}
+          <Link href="/contribute#gitrepo">
+            <a>ezek repository-ja publikus</a>
+          </Link>{' '}
+          (contribute oldal alja), és akármikor felülvizsgálható. A script a te
+          böngésződben fut, tampermonkey bővítmény menüjében megtekinthető
+          milyen kód fut pontosan.
+        </li>
       </ul>
     </>
   )
@@ -261,11 +328,11 @@ function AddSite() {
           <img className={'manual_img'} src={`img/siteadd/3.png`} />
         </li>
         <li>
-          Itt az egyik <b>@require ...</b> sor után egy új sorban írd be az
+          Itt az egyik <i>@require ...</i> sor után egy új sorban írd be az
           egyetemed moodle oldalának címét. Ha ez a cím pl.:{' '}
-          <b>https://moodle.egyetem.hu/main/akármi</b>, akkor a következőre írd
-          át: <b>https://moodle.egyetem.hu/*</b>. Fenti képen látsz néhány
-          példát. <b>A {'"*"'} a végén fontos!</b>
+          <i>https://moodle.egyetem.hu/main/akármi</i>, akkor a következőre írd
+          át: <i>https://moodle.egyetem.hu/*</i>. Fenti képen látsz néhány
+          példát. <i>A {'"*"'} a végén fontos!</i>
         </li>
         <li>
           Ezután mentsd el (ctrl + s, vagy file {'->'} save). Ha minden jól
@@ -290,8 +357,8 @@ function AddSite() {
 }
 
 const pages = {
-  faq: { name: 'GYIK', component: FAQSection },
-  pw: { name: 'Jelszavak', component: PasswordSection },
+  faq: { name: 'Vegyes általános kérdések', component: FAQSection },
+  pw: { name: 'Infó jelszavakról', component: PasswordSection },
   risk: { name: 'Kockázatok', component: RiskSection },
   websitedl: {
     name: 'Teszt közbeni hiba jelentése',
@@ -302,7 +369,7 @@ const pages = {
     component: ScriptReinstallSection,
   },
   addsite: {
-    name: 'Új oldalon tesztelés',
+    name: 'Futtatás (még) nem támogatott oldalon',
     component: AddSite,
   },
 }
@@ -318,6 +385,12 @@ export default function FAQ({ router }) {
     }
   }
 
+  useEffect(() => {
+    router.replace(`${router.asPath.replace('.html', '')}`, undefined, {
+      shallow: true,
+    })
+  }, [])
+
   useEffect(() => {
     if (router.query.tab) {
       setCurrPage(pages[router.query.tab])
@@ -341,6 +414,12 @@ export default function FAQ({ router }) {
               key={key}
               onClick={() => {
                 setCurrPage(page)
+
+                router.replace(
+                  `${router.pathname}?tab=${encodeURIComponent(key)}`,
+                  undefined,
+                  { shallow: true }
+                )
               }}
             >
               {page.name}
@@ -349,7 +428,7 @@ export default function FAQ({ router }) {
         })}
       </div>
       <hr />
-      {renderCurrPage(currPage)}
+      <div className={styles.content}>{renderCurrPage(currPage)}</div>
       <hr />
     </div>
   )

src/pages/script.js

@@ -1,12 +1,38 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 
 import Head from 'next/head'
+import Link from 'next/link'
 
+import constants from '../constants.json'
 import ExternalLinkIcon from '../components/externalLinkIcon'
 
+import styles from './script.module.css'
+
+function fetchSupportedSites(from) {
+  return new Promise((resolve) => {
+    fetch(`${constants.apiUrl}supportedSites`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((res) => {
+        resolve(res)
+      })
+  })
+}
+
 export default function Script() {
+  const [supportedSites, setSupportedSites] = useState()
+
+  useEffect(() => {
+    fetchSupportedSites().then((res) => {
+      setSupportedSites(res)
+    })
+  }, [])
+
   return (
-    <div>
+    <div className={styles.content}>
       <Head>
         <title>Script - Qmining | Frylabs.net</title>
       </Head>
@@ -27,14 +53,6 @@ export default function Script() {
           <ExternalLinkIcon size={15} />
         </a>
       </div>
-      {renderManual()}
-    </div>
-  )
-}
-
-function renderManual() {
-  return (
-    <>
       <center>
         <h2 className={'subtitle'}>A userscript telepítése, és használata</h2>
       </center>
@@ -43,6 +61,17 @@ function renderManual() {
           Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során
           segítséget jelenít meg.
         </p>
+        {supportedSites && (
+          <>
+            <b>Script jelenleg a következő oldalakon működik:</b>
+            <ul>
+              {supportedSites.map((ss) => {
+                return <li key={ss}>{ss}</li>
+              })}
+            </ul>
+          </>
+        )}
+        <b>Telepítés lépései:</b>
         <ol>
           <li>
             Tölts le egy userscript futtató kiegészítőt a böngésződhöz: pl. a{' '}
@@ -53,7 +82,7 @@ function renderManual() {
             >
               Tampermonkey
             </a>
-            -t.
+            -t
           </li>
           <li>
             <a
@@ -65,51 +94,71 @@ function renderManual() {
             </a>{' '}
           </li>
           <li>
-            A script ezt követően udvariasan megkér, hogy hadd beszélgessen a
-            szerverrel, ezt engedélyezd neki. (Always allow domain)
+            Ha megnyitod az egyik támogatott oldalon a scriptet, akkor
+            használata előtt engedélyezned kell, hogy a szerverrel kommunikáljon
+            a script
           </li>
           <li>
-            A támogatott oldalakon a script egy apró menü ablakot jelenít meg a
-            weboldal bal alsó részén
+            Ezután a script egy apró menü ablakot jelenít meg a weboldal bal
+            alsó részén
           </li>
           <li>
-            Ezután a kitöltendő teszt oldalán a kérdésre a választ kell látnod
-            felül egy lebegő ablakban.
-          </li>
-          <li>
-            Teszt ellenőrzés oldalon a script beküldi a szervernek a helyes
-            válaszokat, az lementi az új kérdéseket, amik ezután azonnal
-            elérhetők lesznek (neked, és másoknak is)
+            Ha be vagy jelentkezve, akkor a teszt oldalakon a megoldásokat
+            kellene látnod egy felugró ablakban felül. Ha nem, akkor{' '}
+            <Link href="/faq">
+              <a>GYIK</a>
+            </Link>
+            -be olvass bele, vagy{' '}
+            <Link href="/contact">
+              <a>írj üzenetet mi nem működik</a>
+            </Link>
           </li>
         </ol>
-        Egyéb fontos tudnivalók:
+        <b>Script működési elve:</b>
         <ul>
           <li>
-            Ezt ments sokszor akár minden nap:{' '}
+            Az egész folyamat a teszt ellenőrzés oldalon kezdődik, a script
+            onnan beolvassa, és szervernek beküldi a helyes válaszokat
+          </li>
+          <li>
+            Ezután ha újból kitöltöd a tesztet, vagy ugyanazzal a kérdéssel
+            találkozol másik tesztben (pl.: zh/vizsga) akkor ott megjeleníti a
+            választ
+          </li>
+          <li>
+            Más felhasználóknak köszönhetően már valószínűleg lesznek megoldások
+            a tesztjeidhez.{' '}
+            <Link href="/allQuestions">
+              <a>Itt</a>
+            </Link>{' '}
+            meg tudod tekinteni, hogy vannak-e válaszok a tárgyadhoz.
+          </li>
+          <li>
+            Ha teszt ellenőrzés oldal nem elérhető, vagy nem egyértelműen
+            kitalálható a helyes válasz, akkor a script nem tud mit csinálni,
+            nem ment le semmit
+          </li>
+        </ul>
+        <b>Egyéb fontos tudnivalók:</b>
+        <ul>
+          <li>
+            <Link href="/allQuestions">
+              <a>Itt elérhető online az összes kérdés</a>
+            </Link>{' '}
+            ha esetleg a script valamiért nem működne.
+          </li>
+          <li>
             <a
               href="http://qmining.frylabs.net/allqr.txt"
               target="_blank"
               rel="noreferrer"
             >
-              {' '}
-              Összes kérdés TXT
+              Itt megtalálható az összes kérdés letölthető TXT változatban
             </a>{' '}
-            (az összes összegyűjtött kérdés, ha elszállna a szerver)
-          </li>
-          <li>
-            Az{' '}
-            <a href="/allQuestions" rel="noreferrer">
-              összes kérdés oldal
-            </a>{' '}
-            az oldal, ahol manuálisan tudsz keresni, ha valami gáz lenne a
-            scripttel.
+            ha esetleg nem lenne elérhető a szerver, vagy bármi hiba történne
           </li>
         </ul>
-        <div>
-          Ha útközben elakadsz, vagy hibát észlelsz, akkor oldalt a Kapcsolat
-          résznél sok elérhetőséget találsz, amin segítséget kérhetsz.
       </div>
     </div>
-    </>
   )
 }

src/pages/script.module.css

@@ -0,0 +1,3 @@
+.content b {
+  color: #fff;
+}