finish translations, force maximize

5 files changed, 124 insertions, 53 deletions

diff --git a/components/App.js b/components/App.js
index 59fd5a0..210e0e0 100644
--- a/components/App.js
+++ b/components/App.js
@@ -1,10 +1,14 @@
 import React, {useEffect, useRef} from 'react'
+import useSettings from 'hooks/useSettings'
+import useMediaQuery from 'hooks/useMediaQuery'
 import {close, toggleMin, toggleMax, move} from 'helpers/windowActions'
 import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 
 const App = ({children, app, setApps}) => {
+  const {t} = useSettings()
   const winRef = useRef(null);
+  const forceMax = useMediaQuery(`(max-width: ${app.width}) or (max-height: ${app.height})`);
 
   useEffect(() => {
     move(app.name, winRef, setApps)
@@ -17,20 +21,20 @@ const App = ({children, app, setApps}) => {
         className={
           'window'
           + (app.min ? ' hidden' : '')
-          + (app.max ? ' maximized' : '')
+          + (app.max || forceMax ? ' maximized' : '')
         }
         style={{
-          maxHeight: app.height,
-          maxWidth: app.width,
+          height: app.height,
+          width: app.width,
           ...app.pos.length
             ? {top: app.pos[1], left: app.pos[0]}
             : {
-                // top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
-                // left: `calc(( 100vw - ${app.width} ) / 2)`,
+                top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
+                left: `calc(( 100vw - ${app.width} ) / 2)`,
             }
         }}
       >
-        <h2 className='window__title'>{app.name}</h2>
+        <h2 className='window__title'>{t(app.name)}</h2>
         <div className='window__content'>{children}</div>
         <div className='window__title-buttons'>
           { app.buttons.includes('min') && (
@@ -38,7 +42,7 @@ const App = ({children, app, setApps}) => {
               <FontAwesomeIcon icon={faArrowUp} />
             </span>
           )}
-          { app.buttons.includes('max') && (
+          { app.buttons.includes('max') && !forceMax && (
             <span onClick={() => toggleMax(app.name, setApps)}>
               <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
             </span>
diff --git a/components/Form.js b/components/Form.js
index f41c958..59f9710 100644
--- a/components/Form.js
+++ b/components/Form.js
@@ -1,20 +1,72 @@
 import styles from 'styles/Main.module.scss'
 import React from 'react'
 import PropTypes from 'prop-types'
+import useSettings from 'hooks/useSettings'
 
-const Form = ({errorMessage, onSubmit, isLogin}) => (
-  <form className={`window window--popup ${styles.userForm}`} onSubmit={onSubmit}>
-    <div className="window__content--popup">
-      {isLogin ? 'Login to access your notes' : 'Register new user'}
-    </div>
-    <input type="email" name="email" placeholder="email" required />
-    <input type="password" name="password" minLength="6" placeholder="password" required />
+const Form = ({errorMessage, onSubmit, isLogin}) => {
+  const {settings, setSettings, t} = useSettings()
 
-    <input className='window__button' type="submit" value={isLogin ? 'Login' : 'Register'} />
+  const themeChange = c => {
+    setSettings(prev => ({...prev, theme: c}))
+  }
 
-    {errorMessage && <p className="error">{errorMessage}</p>}
-  </form>
-)
+  const languageChange = l => {
+    setSettings(prev => ({...prev, language: l}))
+  }
+
+  return (
+    <form className={`window window--popup ${styles.userForm}`} onSubmit={onSubmit}>
+      <div className="window__content--popup">
+        {isLogin ? t('log_in') : t('register_user')}
+      </div>
+      <input type="email" name="email" placeholder="email" required />
+      <input type="password" name="password" minLength="6" placeholder={t('password')} required />
+      {!isLogin && (
+        <>
+          <input type="password" name="password_confirm" placeholder={t('confirm_password')} required />
+          <fieldset>
+            <legend>{t('language')}</legend>
+            {['en', 'pl', 'es', 'de'].map(l => (
+              <>
+                <input
+                  key={`i_${l}`}
+                  id={`language_${l}`}
+                  type="radio"
+                  name="language"
+                  value={l}
+                  defaultChecked={settings.language === l}
+                  onChange={() => languageChange(l)}
+                />
+                <label key={`l_${l}`} htmlFor={`language_${l}`}>{l.toUpperCase()}</label>
+              </>
+            ))}
+          </fieldset>
+          <fieldset>
+            <legend>{t('color_theme')}</legend>
+            {['green', 'blue', 'black'].map(c => (
+              <>
+                <input
+                  key={`i_${c}`}
+                  id={`theme_${c}`}
+                  type="radio"
+                  name="theme"
+                  value={c}
+                  defaultChecked={settings.theme === c}
+                  onChange={() => themeChange(c)}
+                />
+                <label key={`l_${c}`} htmlFor={`theme_${c}`} />
+              </>
+            ))}
+          </fieldset>
+        </>
+      )}
+
+      <input className='window__button' type="submit" value={isLogin ? t('login') : t('register')} />
+
+      {errorMessage && <p className="error">{t(errorMessage)}</p>}
+    </form>
+  )
+}
 
 export default Form
 
diff --git a/components/Header.js b/components/Header.js
index 5279c80..9ff3d75 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -2,15 +2,17 @@ import styles from 'styles/Main.module.scss'
 import React, {useState} from 'react'
 import {useRouter} from 'next/router'
 import Link from 'next/link'
-import useUser from 'lib/useUser'
-import fetchJson from 'lib/fetchJson'
+import useUser from 'hooks/useUser'
+import fetchJson from 'helpers/fetchJson'
 import {focus, toggleMin} from 'helpers/windowActions'
 import {open} from 'helpers/windowActions'
-import appList from 'helpers/appList'
+import appList from 'configs/appList'
+import useSettings from 'hooks/useSettings'
 
 const Header = ({apps, setApps}) => {
   const [userMenu, setUserMenu] = useState(false);
   const {user, mutateUser} = useUser()
+  const {t} = useSettings()
   const router = useRouter()
 
   const handleLogout = async (e) => {
@@ -46,7 +48,7 @@ const Header = ({apps, setApps}) => {
                     ...app.min ? {color: '#888'} : {}
                   }}
                 >
-                  {app.name}
+                  {t(app.name)}
                 </span>
               </li>
             ))
@@ -56,14 +58,14 @@ const Header = ({apps, setApps}) => {
           {!user?.isLoggedIn && (
             <li>
               <Link href="/register">
-                <a>Register</a>
+                <a>{t('register')}</a>
               </Link>
             </li>
           )}
           {!user?.isLoggedIn && (
             <li>
               <Link href="/login">
-                <a>Login</a>
+                <a>{t('login')}</a>
               </Link>
             </li>
           )}
@@ -79,17 +81,19 @@ const Header = ({apps, setApps}) => {
                 <>
                   <div className={styles.headerOverlay} onClick={() => setUserMenu(false)} />
                   <ul className={styles.submenu}>
-                    <li>
-                      <span onClick={() => {
-                        open({appName: 'Settings', ...appList.Settings}, setApps)
-                        setUserMenu()
-                      }}>
-                        Settings
-                      </span>
-                    </li>
+                    {user.isVerified && (
+                      <li>
+                        <span onClick={() => {
+                          open({appName: 'Settings', ...appList.Settings}, setApps)
+                          setUserMenu()
+                        }}>
+                          {t('Settings')}
+                        </span>
+                      </li>
+                    )}
                     <li>
                       <a href="/api/logout" onClick={handleLogout}>
-                        Logout
+                        {t('logout')}
                       </a>
                     </li>
                   </ul>
diff --git a/components/Layout.js b/components/Layout.js
index e915285..d5627e3 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -1,26 +1,32 @@
 import styles from 'styles/Main.module.scss'
 import React from 'react'
 import Head from 'next/head'
-import {Header, Popup} from 'components'
+import {Header, Popup, Splash} from 'components'
+import useSettings from 'hooks/useSettings'
 import PropTypes from 'prop-types'
 
 const Layout = ({
   children,
   apps,
   setApps,
-  settings,
-}) => (
-  <section className={styles.layout +' '+ (settings ? settings.theme : 'green')}>
-    <Head>
-      <title>My Apps</title>
-    </Head>
-    <main>
-      <div className="container">{children}</div>
-    </main>
-    <Header apps={apps} setApps={setApps} />
-    <Popup/>
-  </section>
-)
+}) => {
+  const {settings} = useSettings()
+
+  if (!settings || !settings.theme || !settings.language) return <Splash fixed />
+
+  return (
+    <section className={styles.layout +' '+ settings.theme}>
+      <Head>
+        <title>My Apps</title>
+      </Head>
+      <main>
+        <div className="container">{children}</div>
+      </main>
+      <Header apps={apps} setApps={setApps} />
+      <Popup/>
+    </section>
+  )
+}
 
 export default Layout
 
diff --git a/components/Splash.js b/components/Splash.js
index 7976de4..f807202 100644
--- a/components/Splash.js
+++ b/components/Splash.js
@@ -1,13 +1,18 @@
 import styles from 'styles/Main.module.scss'
 import React from 'react'
+import useSettings from 'hooks/useSettings'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 import {faBan, faSpinner} from '@fortawesome/free-solid-svg-icons'
 
-const Splash = ({type, fixed = false}) => (
-  <div className={`${type === 'connection' ? styles.connection : styles.loader} ${fixed ? styles.fixed : ''}`}>
-    <FontAwesomeIcon icon={type === 'connection' ? faBan : faSpinner} />
-    <p>{type === 'connection' ? 'No connection' : 'Loading...'}</p>
-  </div>
-)
+const Splash = ({type, fixed = false}) => {
+  const {t} = useSettings()
+
+  return (
+    <div className={`${type === 'connection' ? styles.connection : styles.loader} ${fixed ? styles.fixed : ''}`}>
+      <FontAwesomeIcon icon={type === 'connection' ? faBan : faSpinner} />
+      <p>{type === 'connection' ? t('no_connection') : t('loading')}</p>
+    </div>
+  )
+}
 
 export default Splash