diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/App.js | 18 | ||||
| -rw-r--r-- | components/Form.js | 74 | ||||
| -rw-r--r-- | components/Header.js | 34 | ||||
| -rw-r--r-- | components/Layout.js | 34 | ||||
| -rw-r--r-- | components/Splash.js | 17 |
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 |