Merge branch 'new_style-2' into new_style

src/components/QuestionSearchResult.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 
 import Questions from './Questions.js'
 
@@ -8,75 +8,74 @@ const countReducer = (acc, subj) => {
   return acc + subj.Questions.length
 }
 
-class QuestionSearchResult extends PureComponent {
+export default function QuestionSearchResult({ data, searchTerm }) {
-  render() {
+  let subjs = []
-    const { data, searchTerm } = this.props
+  let results = -1
 
-    let subjs = []
+  if (searchTerm) {
-    let results = -1
+    subjs = data.reduce((acc, subj) => {
-
+      const resultQuestions = subj.Questions.reduce((qacc, question) => {
-    if (searchTerm) {
+        const keys = ['Q', 'A', 'data']
-      subjs = data.reduce((acc, subj) => {
+        keys.some((key) => {
-        const resultQuestions = subj.Questions.reduce((qacc, question) => {
+          if (typeof question[key] !== 'string') {
-          const keys = ['Q', 'A', 'data']
+            return false
-          keys.some((key) => {
+          }
-            if (typeof question[key] !== 'string') {
+          if (
-              return false
+            question[key] &&
-            }
+            question[key].toLowerCase().includes(searchTerm.toLowerCase())
-            if (
+          ) {
-              question[key] &&
+            qacc.push(question)
-              question[key].toLowerCase().includes(searchTerm.toLowerCase())
+            return true
-            ) {
+          }
-              qacc.push(question)
+        })
-              return true
+        return qacc
-            }
-          })
-          return qacc
-        }, [])
-        if (resultQuestions.length > 0) {
-          acc.push({
-            Name: subj.Name,
-            Questions: resultQuestions,
-          })
-        }
-        return acc
       }, [])
-      results = subjs.reduce(countReducer, 0)
+      if (resultQuestions.length > 0) {
-    } else {
+        acc.push({
-      results = data.reduce(countReducer, 0)
+          Name: subj.Name,
-    }
+          Questions: resultQuestions,
+        })
+      }
+      return acc
+    }, [])
+    results = subjs.reduce(countReducer, 0)
+  } else {
+    results = data.reduce(countReducer, 0)
+  }
 
-    const renderCount = () => {
+  const renderCount = () => {
-      return (
+    return (
+      <div>
         <div>
-          <div>
+          {searchTerm ? '' : 'Kezdj el írni kereséshez! '}
-            {searchTerm ? '' : 'Kezdj el írni kereséshez! '}
+          {`${results} találat, ${subjs.length || data.length} tárgyból`}
-            {`${results} találat, ${subjs.length} tárgyból`}
-          </div>
-          {results === 0 && (
-            <div>
-              {
-                'Pontos egyezést keres a kereső, próbálj kisebb részletre keresni'
-              }
-            </div>
-          )}
         </div>
-      )
+        {results === 0 && (
-    }
+          <div>
+            {'Pontos egyezést keres a kereső, próbálj kisebb részletre keresni'}
+          </div>
+        )}
+      </div>
+    )
+  }
 
-    if (results > constants.maxQuestionsToRender) {
+  if (results > constants.maxQuestionsToRender) {
-      return renderCount()
+    return (
-    } else {
+      <div>
-      return (
+        {renderCount()}
+        {searchTerm ? (
+          <div>Szűkítsd a keresést találatok megjelenítéséhez!</div>
+        ) : null}
+      </div>
+    )
+  } else {
+    return (
+      <div>
+        <div>{renderCount()}</div>
         <div>
-          <div>{renderCount()}</div>
+          <Questions subjs={subjs} />
-          <div>
-            <Questions subjs={subjs} />
-          </div>
         </div>
-      )
+      </div>
-    }
+    )
   }
 }
-
-export default QuestionSearchResult

src/components/externalLinkIcon.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export default function ExternalLinkIcon({ size }) {
+  return (
+    <span style={{ margin: '4px', display: 'inline-block' }}>
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 24 24`}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+        <polyline points="15 3 21 3 21 9"></polyline>
+        <line x1="10" y1="14" x2="21" y2="3"></line>
+      </svg>
+    </span>
+  )
+}

src/components/layout.js

@@ -15,6 +15,51 @@ const renderSnow = () => {
   return date.getMonth() === 11 && date.getDate() > 5
 }
 
+function MessageButton({
+  userSpecificMotd,
+  setShowMotdModal,
+  refetchGlobalData,
+}) {
+  return (
+    <div className="msgs">
+      <div
+        onClick={() => {
+          if (!userSpecificMotd) {
+            return
+          }
+          setShowMotdModal(true)
+          if (userSpecificMotd.seen) {
+            return
+          }
+          fetch(constants.apiUrl + 'infos', {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              userSpecificMotdSeen: true,
+            }),
+          })
+            .then((resp) => {
+              return resp.json()
+            })
+            .then(() => {
+              refetchGlobalData()
+            })
+        }}
+        style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }}
+        title={
+          userSpecificMotd && !userSpecificMotd.seen ? "You've got Mail!" : ''
+        }
+      >
+        {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
+      </div>
+    </div>
+  )
+}
+
 export default function Layout({
   children,
   route,
@@ -25,6 +70,7 @@ export default function Layout({
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [windowSize, setWindowSize] = useState([100, 200])
   const [showMotdModal, setShowMotdModal] = useState(false)
+  const [donateShowing, setDonateShowing] = useState(false)
   const [showNewMsgModal, setShowNewMsgModal] = useState(true)
 
   const userId = globalData.userId
@@ -109,55 +155,22 @@ export default function Layout({
                 )
               })}
               <a
-                href={`/donate`}
+                onClick={() => {
-                className="donate"
+                  console.log('AAAAAAAAA')
-                onClick={closeSideBar}
+                  closeSideBar()
-                target="_blank"
+                  setDonateShowing(true)
-                rel="noreferrer"
+                }}
               >
                 Donate
               </a>
             </div>
             <div className="userStatus">
-              <div className="msgs">
+              <MessageButton
-                <div
+                userSpecificMotd={userSpecificMotd}
-                  onClick={() => {
+                setShowMotdModal={setShowMotdModal}
-                    if (!userSpecificMotd) {
+                refetchGlobalData={refetchGlobalData}
-                      return
+              />
-                    }
+              <div title="User ID">UID: {userId || '...'}</div>
-                    setShowMotdModal(true)
-                    if (userSpecificMotd.seen) {
-                      return
-                    }
-                    fetch(constants.apiUrl + 'infos', {
-                      method: 'POST',
-                      credentials: 'include',
-                      headers: {
-                        Accept: 'application/json',
-                        'Content-Type': 'application/json',
-                      },
-                      body: JSON.stringify({
-                        userSpecificMotdSeen: true,
-                      }),
-                    })
-                      .then((resp) => {
-                        return resp.json()
-                      })
-                      .then(() => {
-                        refetchGlobalData()
-                      })
-                  }}
-                  style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }}
-                  title={
-                    userSpecificMotd && !userSpecificMotd.seen
-                      ? "You've got Mail!"
-                      : ''
-                  }
-                >
-                  {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
-                </div>
-                <div title="User ID">UID: {userId || '...'}</div>
-              </div>
               <div
                 className="logout"
                 onClick={() => {
@@ -175,21 +188,28 @@ export default function Layout({
                 Logout
               </div>
             </div>
-            {showMotdModal ? (
-              <Modal
-                closeClick={() => {
-                  setShowMotdModal(false)
-                }}
-              >
-                <div style={{ textAlign: 'center' }}>Üzenet admintól:</div>
-                <div
-                  dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }}
-                />
-              </Modal>
-            ) : null}
           </>
         ) : null}
       </div>
+      {donateShowing ? (
+        <Modal
+          closeClick={() => {
+            setDonateShowing(false)
+          }}
+        >
+          <div>hi</div>
+        </Modal>
+      ) : null}
+      {showMotdModal ? (
+        <Modal
+          closeClick={() => {
+            setShowMotdModal(false)
+          }}
+        >
+          <div style={{ textAlign: 'center' }}>Üzenet admintól:</div>
+          <div dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }} />
+        </Modal>
+      ) : null}
       <div className="content">{children}</div>
       {userSpecificMotd && !userSpecificMotd.seen && showNewMsgModal ? (
         <Modal

src/data/links.json

@@ -1,22 +0,0 @@
-{
-  "install": {
-    "href": "/install",
-    "text": "Install"
-  },
-  "allqr": {
-    "href": "/allqr.txt",
-    "text": "Összes kérdés TXT"
-  },
-  "data": {
-    "href": "/data.json",
-    "text": "Összes kérdés JSON"
-  },
-  "irc": {
-    "href": "/irc?index",
-    "text": "IRC chat"
-  },
-  "dataeditor": {
-    "href": "/dataeditor?index",
-    "text": "Dataeditor"
-  }
-}

src/data/tabs.json

@@ -3,14 +3,14 @@
     "href": "/",
     "text": "Főoldal"
   },
+  "script": {
+    "href": "/script",
+    "text": "Script"
+  },
   "allQuestions": {
     "href": "/allQuestions",
     "text": "Kérdések és tárgyak"
   },
-  "pwRequest": {
-    "href": "/pwRequest",
-    "text": "Jelszó generálás"
-  },
   "contribute": {
     "href": "/contribute",
     "text": "Teendők"
@@ -18,5 +18,17 @@
   "ranklist": {
     "href": "/ranklist",
     "text": "Ranklista"
+  },
+  "pwRequest": {
+    "href": "/pwRequest",
+    "text": "Jelszó generálás"
+  },
+  "faq": {
+    "href": "/faq",
+    "text": "GYIK"
+  },
+  "contact": {
+    "href": "/contact",
+    "text": "Kapcsolat"
   }
 }

src/defaultStyles.css

@@ -30,7 +30,7 @@ textarea {
   color: var(--text-color);
   background-color: var(--background-color);
   box-sizing: border-box;
-  height: 120px;
+  height: 140px;
   width: 100%;
   border: 1px solid #666;
   border-radius: 3px;
@@ -39,10 +39,14 @@ textarea {
 input {
   color: var(--text-color);
   background-color: var(--background-color);
-  border: 1px solid #444;
+  border: 0px solid #444;
   width: 100%;
 }
 
+input:focus {
+  border: 0px solid #444;
+}
+
 .link {
   margin: 20px;
   font-size: 20px;
@@ -184,6 +188,7 @@ input {
   }
 
   .rtfmImage {
+    text-align: center;
     display: flex;
     justify-content: center;
     border: 2px solid white;
@@ -263,6 +268,7 @@ input {
 }
 
 .rtfmImage {
+  text-align: center;
   justify-content: center;
   margin: 0px 10px;
 }
@@ -377,3 +383,50 @@ select:hover {
 .actions > span:hover {
   background-color: var(--hoover-color);
 }
+
+.buttonContainer {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+
+  margin: 10px 0px;
+  height: 50px;
+  display: flex;
+}
+
+.buttonContainer > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+
+  background-color: #f2cb05;
+  border: none;
+  color: black;
+  padding: 5px 10px;
+  font-weight: bold;
+  font-size: 15px;
+  margin: 8px 2px 2px 2px;
+  cursor: pointer;
+  text-shadow: 1px 1px 8px black;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
+
+  user-select: none;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+}
+
+.buttonContainer > *:active {
+  transform: translateY(2.5px);
+}
+
+.buttonContainer > *:hover {
+  text-shadow: 2px 2px 8px black;
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
+  background-color: #a38c1a;
+}
+
+.buttonContainer > .activeButton {
+  color: var(--text-color);
+}

src/pages/allQuestions.js

@@ -6,6 +6,7 @@ import QuestionSearchResult from '../components/QuestionSearchResult.js'
 import Subject from '../components/Subject.js'
 import SubjectSelector from '../components/SubjectSelector.js'
 import Sleep from '../components/sleep'
+import ExternalLinkIcon from '../components/externalLinkIcon'
 
 import styles from './allQuestions.module.css'
 
@@ -74,6 +75,7 @@ export default function AllQuestions({ router }) {
   const [searchTerm, setSearchTerm] = useState('')
   const [activeSubjName, setActiveSubjName] = useState('')
   const [dbs, setDbs] = useState(null)
+  const [selectedDb, setSelectedDb] = useState('')
   const [data, setData] = useState(null)
   const [fetchingData, setFetchingData] = useState(false)
   const subjectCount = data ? data.length : 0
@@ -106,11 +108,13 @@ export default function AllQuestions({ router }) {
               setData(null)
               setFetchingData(true)
               if (key === 'all') {
+                setSelectedDb(key)
                 fetchAllData(dbs).then((res) => {
                   setData(mergeData(res))
                   setFetchingData(false)
                 })
               } else {
+                setSelectedDb(dbs[key].name)
                 fetchData(dbs[key]).then((res) => {
                   setData(res.data)
                   setFetchingData(false)
@@ -238,11 +242,11 @@ export default function AllQuestions({ router }) {
 
   return (
     <div>
-      {dbs ? (
+      {dbs ? <>{renderDbSelector()}</> : <LoadingIndicator />}
+      {dbs && data ? (
         <>
-          {renderDbSelector()}
+          {`${questionCount} kérdés, ${subjectCount} tárgy`}
-          {data && `${questionCount} kérdés, ${subjectCount} tárgy`}
+          <div className={'buttonContainer'}>
-          <div className={styles.typeSelector}>
             <div
               className={!subjectsShowing ? styles.activeTypeSelector : ''}
               onClick={() => setSubjectsShowing(false)}
@@ -255,6 +259,21 @@ export default function AllQuestions({ router }) {
             >
               Tárgyak
             </div>
+            <a
+              onClick={() => {
+                if (selectedDb === 'all') {
+                  window.open(`${constants.apiUrl}allqr.txt`, '_blank')
+                } else {
+                  window.open(
+                    `${constants.apiUrl}allqr.txt?db=${selectedDb}`,
+                    '_blank'
+                  )
+                }
+              }}
+            >
+              {'Kérdések letöltése'}
+              <ExternalLinkIcon size={15} />
+            </a>
           </div>
           {fetchingData ? (
             <LoadingIndicator />
@@ -266,9 +285,7 @@ export default function AllQuestions({ router }) {
             </div>
           )}
         </>
-      ) : (
+      ) : null}
-        <LoadingIndicator />
-      )}
     </div>
   )
 }

src/pages/allQuestions.module.css

@@ -11,28 +11,3 @@
   cursor: pointer;
   border: none;
 }
-
-.typeSelector {
-  margin: 10px 0px;
-  height: 50px;
-  display: flex;
-}
-
-.typeSelector div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-
-  font-size: 18px;
-  color: #fff;
-  cursor: pointer;
-}
-
-.typeSelector div:hover {
-  background-color: #333;
-}
-
-.activeTypeSelector {
-  background-color: #444;
-}

src/pages/contact.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import Head from 'next/head'
 
+import FeedbackArea from '../components/feedbackArea'
+
 import styles from './contact.module.css'
 
 const contactMethods = {
@@ -26,6 +28,7 @@ export default function Contact() {
       <Head>
         <title>Kapcsolat - Qmining | Frylabs.net</title>
       </Head>
+      <FeedbackArea from={'contact'} />
       <div className={styles.contactsContainer}>
         <div>Itt vannak hogy hogy lehet kontaktolni</div>
         {Object.keys(contactMethods).map((key) => {

src/pages/contribute.js

@@ -1,65 +1,15 @@
-import React, { useState } from 'react'
+import React from 'react'
 import Head from 'next/head'
 
 import Sleep from '../components/sleep'
 import Todos from '../components/todoStuff/todos'
+import FeedbackArea from '../components/feedbackArea'
 
 import constants from '../constants.json'
 import styles from './contribute.module.css'
 import repos from '../data/repos.json'
 
 export default function contribute() {
-  const [newTask, setNewTask] = useState('')
-
-  const submitNewTask = async () => {
-    if (!newTask) {
-      return
-    }
-
-    fetch(constants.apiUrl + 'postfeedback', {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        newTask: newTask,
-        from: 'contribute',
-      }),
-    })
-      .then((resp) => {
-        return resp.json()
-      })
-      .then((resp) => {
-        if (resp.success) {
-          alert('Elküldve')
-          setNewTask('')
-        } else {
-          alert('Hiba küldés közben')
-        }
-      })
-      .catch((err) => {
-        alert('Hiba küldés közben')
-        console.error(err)
-      })
-  }
-
-  const renderNewTaskArea = () => {
-    return (
-      <div className={styles.inputArea}>
-        <textarea
-          onChange={(event) => setNewTask(event.target.value)}
-          value={newTask || ''}
-          className={styles.feedback}
-        />
-        <button className={styles.button} onClick={submitNewTask}>
-          Küldés
-        </button>
-      </div>
-    )
-  }
-
   return (
     <div>
       <Head>
@@ -98,7 +48,7 @@ export default function contribute() {
         </a>
         -n és megbeszéljük.
       </div>
-      {renderNewTaskArea()}
+      <FeedbackArea from={'contribute'} />
       <hr />
       <Todos />
       <Sleep />

src/pages/contribute.module.css

@@ -14,28 +14,6 @@
   text-align: center;
 }
 
-.feedback {
-  color: var(--text-color);
-  background-color: var(--background-color);
-  font-size: 14px;
-  width: 100%;
-  box-sizing: border-box;
-  height: 60px;
-}
-
-.button {
-  background-color: var(--text-color);
-  border: none;
-  padding: 5px 15px;
-  margin: 5px;
-  color: white;
-  width: 200px;
-}
-
-.inputArea {
-  display: flex;
-}
-
 .title {
   color: var(--text-color);
   font-size: 30px;

src/pages/faq.js

@@ -1,116 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import Sleep from '../components/sleep'
 import Head from 'next/head'
 
-export default function Manual() {
+function PasswordSection() {
-  return <div>{renderMaual()}</div>
-}
-
-function renderMaual() {
   return (
-    <div>
+    <>
-      <Head>
-        <title>Manual - Qmining | Frylabs.net</title>
-      </Head>
-      <center>
-        <div className={'pageHeader'}>
-          <h1>Manual</h1>
-        </div>
-        <h3 className={'warning'}>
-          Ha az oldalt vagy a scriptet használod: akármikor észrevehetik,
-          leállhat a szerver, és rossz lehet az összes válasz!
-        </h3>
-        <p id="manualWarn">
-          Valószínűleg semmi baj nem lesz, de én szóltam. Ha emiatt aggódsz,
-          olvasd el a <a href="#risk">kockázatok részt</a>.
-        </p>
-      </center>
-      <Sleep />
-      <center></center>
-      <hr />
-      <center>
-        <h2 className={'subtitle'}>A userscript használata</h2>
-      </center>
-      <div className={'manualUsage manualBody'}>
-        <div>
-          <p>
-            Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során
-            segítséget jelenít meg.
-          </p>
-          <ul>
-            <li>
-              Tölts le egy userscript futtató kiegészítőt a böngésződhöz: pl. a{' '}
-              <a
-                href="https://www.tampermonkey.net/"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Tampermonkey
-              </a>
-              -t.
-            </li>
-            <li>
-              <a
-                href="http://qmining.frylabs.net/install?man"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Kattints ide hogy felrakd a scriptet
-              </a>{' '}
-            </li>
-            <li>
-              A script ezt követően udvariasan megkér, hogy hadd beszélgessen a
-              szerverrel, mert mással nem tud, ezért ezt engedélyezd neki.
-            </li>
-            <li>
-              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)
-            </li>
-          </ul>
-          Egyéb fontos tudnivalók:
-          <ul>
-            <li>
-              Ezt ments sokszor akár minden nap:{' '}
-              <a
-                href="http://qmining.frylabs.net/allqr.txt?man"
-                target="_blank"
-                rel="noreferrer"
-              >
-                {' '}
-                Összes kérdés TXT
-              </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.
-            </li>
-          </ul>
-        </div>
-        <div className={'rtfmImage'}>
-          <img
-            style={{ maxWidth: '100%', minWidth: '200px' }}
-            src="img/rtfm.jpg"
-            alt="img"
-          />
-        </div>
-      </div>
-      <hr />
-      <center>
-        <h2 id="pw" className={'subtitle'}>
-          Jelszavak
-        </h2>
-      </center>
       <div className={'manualBody'}>
         <p>
           Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy
@@ -161,9 +56,13 @@ function renderMaual() {
         </ul>
       </div>
       <hr />
-      <center>
+    </>
-        <h2 className={'subtitle'}>Gyakran Ismételt Kérdések</h2>
+  )
-      </center>
+}
+
+function FAQSection() {
+  return (
+    <>
       <div className={'manualBody'}>
         <ul>
           <li>
@@ -204,12 +103,13 @@ function renderMaual() {
           </li>
         </ul>
       </div>
-      <hr />
+    </>
-      <center>
+  )
-        <h2 id="risk" className={'subtitle'}>
+}
-          Kockázatok
+
-        </h2>
+function RiskSection() {
-      </center>
+  return (
+    <>
       <ul>
         <li>
           <b>Bármikor észrevehetik hogy használod a scriptet</b>
@@ -248,9 +148,13 @@ function renderMaual() {
         </li>
       </ul>
       <hr />
-      <h2 id="sitesave" className={'subtitle'}>
+    </>
-        Weboldal lementése
+  )
-      </h2>
+}
+
+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
@@ -274,10 +178,13 @@ function renderMaual() {
         hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd
         azt az oldalt amin hibával találkozol.
       </p>
-      <hr />
+    </>
-      <h2 id="scriptreinstall" className={'subtitle'}>
+  )
-        Script újratelepítése
+}
-      </h2>
+
+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
@@ -313,6 +220,55 @@ function renderMaual() {
       </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>
   )

src/pages/index.js

@@ -1,36 +1,15 @@
 import React, { useState, useEffect } from 'react'
 import fetch from 'unfetch'
 import Head from 'next/head'
-import Link from 'next/link'
 
 import LoadingIndicator from '../components/LoadingIndicator'
 import Sleep from '../components/sleep'
 import NewsEntry from '../components/newsEntry'
 import Composer from '../components/composer'
-import DbSelector from '../components/dbSelector.js'
 
 import styles from './index.module.css'
 import constants from '../constants.json'
 
-const links = {
-  install: {
-    href: '/install',
-    text: 'Install',
-  },
-  manual: {
-    href: '/manual',
-    text: 'A script használata',
-  },
-  post: {
-    href: '/',
-    text: 'Bejegyzés írása...',
-  },
-  dataeditor: {
-    href: '/dataeditor',
-    text: 'Kérdés szerkesztő',
-  },
-}
-
 function fetchNews() {
   return new Promise((resolve) => {
     fetch(`${constants.apiUrl}news.json`, {
@@ -115,7 +94,6 @@ export default function Index({ globalData }) {
   const userId = globalData.userId
   const motd = globalData.motd
   const [news, setNews] = useState(null)
-  const [allQrSelector, setAllQrSelector] = useState(null)
   // const userSpecificMotd = props.globalData.userSpecificMotd
 
   useEffect(() => {
@@ -299,66 +277,15 @@ export default function Index({ globalData }) {
     )
   }
 
-  const renderDbSelector = () => {
-    if (allQrSelector) {
-      return (
-        <DbSelector
-          text={`Válaszd ki melyik adatbázist szeretnéd letölteni!`}
-          showAll={allQrSelector === 'txt'}
-          closeClick={() => {
-            setAllQrSelector(null)
-          }}
-          onDbSelect={(selectedDb) => {
-            if (allQrSelector === 'txt') {
-              if (selectedDb === 'all') {
-                window.open(`${constants.apiUrl}allqr.txt`, '_blank')
-              } else {
-                window.open(
-                  `${constants.apiUrl}allqr.txt?db=${selectedDb.name}`,
-                  '_blank'
-                )
-              }
-            } else if (allQrSelector === 'json') {
-              window.open(`${constants.apiUrl}${selectedDb.path}`, '_blank')
-            }
-          }}
-        />
-      )
-    } else {
-      return null
-    }
-  }
-
   return (
     <div>
       <Head>
         <title>Qmining | Frylabs.net</title>
       </Head>
-      <div className={styles.buttonContainer}>
-        {Object.keys(links).map((key) => {
-          let link = links[key]
-          return (
-            <Link key={key} href={link.href}>
-              <a className={styles.button} target="_blank">
-                {link.text}
-              </a>
-            </Link>
-          )
-        })}
-        <a
-          onClick={() => {
-            setAllQrSelector('txt')
-          }}
-          className={styles.button}
-        >
-          {'Összes kérdés TXT'}
-        </a>
-      </div>
       {renderMotd()}
       {/*{userSpecificMotd && renderUserSpecificMotd()} */}
       <Sleep />
       {renderNews()}
-      {renderDbSelector()}
     </div>
   )
 }

src/pages/index.module.css

@@ -1,33 +1,3 @@
-.buttonContainer {
-  display: flex;
-}
-
-.button {
-  color: white;
-  background-color: #313131;
-  margin: 0px 4px;
-  padding: 15px 4px;
-  max-width: 100%;
-  text-align: center;
-  font-size: 16px;
-  cursor: pointer;
-  word-wrap: break-word;
-  text-decoration: none;
-  transition: width 0.5s, height 0.5s, ease-in 0.5s;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  user-select: none;
-}
-
-.button:hover {
-  background-color: #555;
-  color: var(--text-color);
-  transition: width 0.5s, height 0.5s, ease-out 0.5s;
-  text-shadow: 2px 1.5px 8px black;
-}
-
 .hr {
   width: 100%;
 }

src/pages/pwRequest.js

@@ -1,11 +1,12 @@
 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'
 
-export default function PwRequest(props) {
+export default function PwRequest() {
   const [result, setResult] = useState([])
   const [remaining, setRemaining] = useState('...')
   const [requestedPWS, setRequestedPWS] = useState('...')
@@ -56,7 +57,7 @@ export default function PwRequest(props) {
             setResult([...result, resp.pw])
             setRemaining(resp.remaining)
             setRequestedPWS(resp.requestedPWS)
-          } else if (resp.result === 'success') {
+          } else if (resp.result === 'nouser') {
             setResult(['Nem vagy bejelentkezve!']) // this should never happpen
           } else {
             setResult([
@@ -99,11 +100,11 @@ export default function PwRequest(props) {
             egyet és add oda másnak, mint hogy közösen használjatok egyet, mert
             egyszerre, egy felhasználó csak egy helyen, egy eszközön lehet
             belépve, mindenhol máshol automatikusan kijelentkeztetésre kerül. A
-            jelszavakról bővebben a Script használata oldal{' '}
+            jelszavakról bővebben a{' '}
-            <a href="/manual#pw" target="_blank">
+            <Link href="/faq">
-              vonatkozó részén
+              <a>GYIK</a>
-            </a>{' '}
+            </Link>
-            olvashatsz.
+            -ben olvashatsz.
           </p>
         </div>
         <div className={styles.text}>
@@ -131,10 +132,8 @@ export default function PwRequest(props) {
           <br />
           <br />
         </div>
-        <div className={styles.buttonContainer}>
+        <div className={'buttonContainer'}>
-          <div onClick={handleSubmit} className={styles.button}>
+          <div onClick={handleSubmit}>Jelszó kérése</div>
-            Jelszó kérése
-          </div>
         </div>
         {result ? (
           <div className={styles.pwContainer}>

src/pages/pwRequest.module.css

@@ -1,33 +1,3 @@
-.buttonContainer {
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.button {
-  background-color: #f2cb05;
-  border: none;
-  color: black;
-  padding: 15px 30px;
-  font-weight: bold;
-  font-size: 15px;
-  margin: 8px 2px 2px 2px;
-  cursor: pointer;
-  text-shadow: 1px 1px 8px black;
-  transition: width 0.5s, height 0.5s, ease-in 0.5s;
-}
-
-.button:active {
-  transform: translateY(2.5px);
-}
-
-.button:hover {
-  text-shadow: 2px 2px 8px black;
-  transition: width 0.5s, height 0.5s, ease-out 0.5s;
-  background-color: #a38c1a;
-}
-
 .text {
   text-align: center;
   font-size: 18px;

src/pages/script.js

@@ -0,0 +1,110 @@
+import React from 'react'
+
+import Sleep from '../components/sleep'
+import Head from 'next/head'
+
+import ExternalLinkIcon from '../components/externalLinkIcon'
+
+export default function Script() {
+  return (
+    <div>
+      <Head>
+        <title>Manual - Qmining | Frylabs.net</title>
+      </Head>
+      <div className={'buttonContainer'}>
+        <a href="https://www.tampermonkey.net/">
+          Ajánlott userscript kezelő bővítmény
+          <ExternalLinkIcon size={15} />
+        </a>
+        <a href="/install">
+          Script telepítése
+          <ExternalLinkIcon size={15} />
+        </a>
+      </div>
+      <Sleep />
+      {renderManual()}
+    </div>
+  )
+}
+
+function renderManual() {
+  return (
+    <>
+      <center>
+        <h2 className={'subtitle'}>A userscript telepítése, és használata</h2>
+      </center>
+      <div>
+        <p>
+          Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során
+          segítséget jelenít meg.
+        </p>
+        <ol>
+          <li>
+            Tölts le egy userscript futtató kiegészítőt a böngésződhöz: pl. a{' '}
+            <a
+              href="https://www.tampermonkey.net/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Tampermonkey
+            </a>
+            -t.
+          </li>
+          <li>
+            <a
+              href="http://qmining.frylabs.net/install"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Kattints ide hogy felrakd a scriptet
+            </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)
+          </li>
+          <li>
+            A támogatott oldalakon 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)
+          </li>
+        </ol>
+        Egyéb fontos tudnivalók:
+        <ul>
+          <li>
+            Ezt ments sokszor akár minden nap:{' '}
+            <a
+              href="http://qmining.frylabs.net/allqr.txt"
+              target="_blank"
+              rel="noreferrer"
+            >
+              {' '}
+              Összes kérdés TXT
+            </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.
+          </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>
+    </>
+  )
+}