From 1870f3fdf43707a15fda0f609a021f516f45eb63 Mon Sep 17 00:00:00 2001 From: Piotr Russ Date: Wed, 18 Nov 2020 23:15:38 +0100 Subject: finish auth routes, create cookie token, fix folder structure, add context to FE --- client/src/admin/api/logout.js | 7 ++ client/src/admin/context/index.js | 3 + client/src/admin/data/translations.js | 41 +++++++++++ client/src/admin/hocs/WithHover.jsx | 18 +++++ client/src/admin/hocs/WithTranslation.jsx | 11 +++ client/src/admin/hocs/index.js | 4 ++ client/src/admin/jsx/App.jsx | 32 +++++---- client/src/admin/jsx/Info.jsx | 10 +++ client/src/admin/jsx/LangSwitch.jsx | 42 +++++++++++ client/src/admin/jsx/MainScreen.jsx | 10 +-- client/src/admin/jsx/TopBar.jsx | 35 +++++++++ client/src/admin/jsx/User.jsx | 39 ++++++++++ client/src/admin/scss/_colors.scss | 5 ++ client/src/admin/scss/_forms.scss | 52 ++++++++++++++ client/src/admin/scss/_globals.scss | 12 ++++ client/src/admin/scss/_info.scss | 8 +++ client/src/admin/scss/_main.scss | 16 +++++ client/src/admin/scss/_reset.scss | 52 ++++++++++++++ client/src/admin/scss/_topBar.scss | 114 ++++++++++++++++++++++++++++++ client/src/admin/scss/index.scss | 14 ++-- client/src/common/data/texts.js | 36 ---------- client/src/common/jsx/Info.jsx | 9 --- client/src/common/jsx/LangSwitch.jsx | 43 ----------- client/src/common/jsx/TopBar.jsx | 38 ---------- client/src/common/jsx/User.jsx | 38 ---------- client/src/common/jsx/WithHover.jsx | 13 ---- client/src/common/scss/_colors.scss | 5 -- client/src/common/scss/_forms.scss | 52 -------------- client/src/common/scss/_globals.scss | 12 ---- client/src/common/scss/_info.scss | 8 --- client/src/common/scss/_main.scss | 16 ----- client/src/common/scss/_reset.scss | 52 -------------- client/src/common/scss/_topBar.scss | 114 ------------------------------ client/src/login/api/login.js | 11 +++ client/src/login/data/texts.js | 0 client/src/login/jsx/App.jsx | 42 ++++++----- client/src/login/jsx/LoginPanel.jsx | 42 ++++------- client/src/login/scss/index.scss | 14 ++-- 38 files changed, 550 insertions(+), 520 deletions(-) create mode 100644 client/src/admin/api/logout.js create mode 100644 client/src/admin/context/index.js create mode 100644 client/src/admin/data/translations.js create mode 100644 client/src/admin/hocs/WithHover.jsx create mode 100644 client/src/admin/hocs/WithTranslation.jsx create mode 100644 client/src/admin/hocs/index.js create mode 100644 client/src/admin/jsx/Info.jsx create mode 100644 client/src/admin/jsx/LangSwitch.jsx create mode 100644 client/src/admin/jsx/TopBar.jsx create mode 100644 client/src/admin/jsx/User.jsx create mode 100644 client/src/admin/scss/_colors.scss create mode 100644 client/src/admin/scss/_forms.scss create mode 100644 client/src/admin/scss/_globals.scss create mode 100644 client/src/admin/scss/_info.scss create mode 100644 client/src/admin/scss/_main.scss create mode 100755 client/src/admin/scss/_reset.scss create mode 100644 client/src/admin/scss/_topBar.scss delete mode 100644 client/src/common/data/texts.js delete mode 100644 client/src/common/jsx/Info.jsx delete mode 100644 client/src/common/jsx/LangSwitch.jsx delete mode 100644 client/src/common/jsx/TopBar.jsx delete mode 100644 client/src/common/jsx/User.jsx delete mode 100644 client/src/common/jsx/WithHover.jsx delete mode 100644 client/src/common/scss/_colors.scss delete mode 100644 client/src/common/scss/_forms.scss delete mode 100644 client/src/common/scss/_globals.scss delete mode 100644 client/src/common/scss/_info.scss delete mode 100644 client/src/common/scss/_main.scss delete mode 100755 client/src/common/scss/_reset.scss delete mode 100644 client/src/common/scss/_topBar.scss create mode 100644 client/src/login/api/login.js delete mode 100644 client/src/login/data/texts.js (limited to 'client/src') diff --git a/client/src/admin/api/logout.js b/client/src/admin/api/logout.js new file mode 100644 index 0000000..b0a9841 --- /dev/null +++ b/client/src/admin/api/logout.js @@ -0,0 +1,7 @@ +export default () => ( + fetch('/api/user/logout', { + method: 'POST', + }) + .then(() => window.location.href = "/") + .catch(() => {}) +); diff --git a/client/src/admin/context/index.js b/client/src/admin/context/index.js new file mode 100644 index 0000000..6353dc0 --- /dev/null +++ b/client/src/admin/context/index.js @@ -0,0 +1,3 @@ +import React from 'react'; + +export default React.createContext(); diff --git a/client/src/admin/data/translations.js b/client/src/admin/data/translations.js new file mode 100644 index 0000000..b4c34a2 --- /dev/null +++ b/client/src/admin/data/translations.js @@ -0,0 +1,41 @@ +export const defaultLanguage = 'en'; +export const fallbackLanguage = 'en'; +export const translations = { + "en": { + "main-title": "Website Manager", + "login-to-admin": "Login to Admin Panel", + "login-info": "Put your user name and password, then click login button", + "login": "Login", + "user": "User name", + "password": "Password", + "no-saved-websites": "You don't have any saved projects, create a new one", + "create-new-project": "Create new project", + "create-new-project-hover": "Click to create new project", + "edit-current-project": "Edit current project", + "edit-current-project-hover": "Click to edit current active projecct", + "show-saved-projects": "Show saved projects", + "show-saved-projects-hover": "Click to show list of all saved projects", + "click-to-change-language": "Click to change language in the website manager", + "click-to-change-user": "Click to logout or change user password", + "logout": "Logout", + "click-to-logout": "Click to logout/change current user", + "user-settings": "User settings", + "click-to-change-user-settings": "Click to change user name, password or to completely remove current user", + }, + "de": { + "main-title": "Website Manager", + }, + "es": { + "main-title": "Website Manager", + }, + "pl": { + "main-title": "Website Manager", + "login-to-admin": "Zaloguj do Panelu Administracyjnego", + "no-saved-websites": "Nie masz jeszcze żadnych zapisanych projektów, utwórz nowy", + "create-new-project": "Utwórz nowy projekt", + "edit-current-project": "Edytuj bieżący projekt", + "show-saved-projects": "Pokaż zapisane projekty", + }, +}; + +export const languages = Object.keys(translations); diff --git a/client/src/admin/hocs/WithHover.jsx b/client/src/admin/hocs/WithHover.jsx new file mode 100644 index 0000000..2a5cdcb --- /dev/null +++ b/client/src/admin/hocs/WithHover.jsx @@ -0,0 +1,18 @@ +import React, {useContext} from 'react'; +import Context from '../context'; + + +const WithHover = ({ children, message, classes }) => { + const { setHover } = useContext(Context); + return ( +
setHover(message)} + onMouseLeave={()=>setHover(null)} + className={classes} + > + {children} +
+ ) +}; + +export default WithHover; diff --git a/client/src/admin/hocs/WithTranslation.jsx b/client/src/admin/hocs/WithTranslation.jsx new file mode 100644 index 0000000..b31b7c9 --- /dev/null +++ b/client/src/admin/hocs/WithTranslation.jsx @@ -0,0 +1,11 @@ +import React, {useContext} from 'react'; +import Context from '../context'; +import { translations, fallbackLanguage } from '../data/translations'; + +const WithTranslation = (key) => { + const { lang } = useContext(Context); + + return translations[lang][key] || translations[fallbackLanguage][key]; +}; + +export default WithTranslation; diff --git a/client/src/admin/hocs/index.js b/client/src/admin/hocs/index.js new file mode 100644 index 0000000..df8c0c7 --- /dev/null +++ b/client/src/admin/hocs/index.js @@ -0,0 +1,4 @@ +import WithHover from './WithHover.jsx'; +import WithTranslation from './WithTranslation.jsx'; + +export { WithHover, WithTranslation as t }; diff --git a/client/src/admin/jsx/App.jsx b/client/src/admin/jsx/App.jsx index c5be77c..146af70 100644 --- a/client/src/admin/jsx/App.jsx +++ b/client/src/admin/jsx/App.jsx @@ -3,33 +3,35 @@ import ReactDOM from 'react-dom'; import "../scss/index.scss"; -import texts from '../../common/data/texts.js'; -import TopBar from '../../common/jsx/TopBar.jsx'; -import Info from '../../common/jsx/Info.jsx'; +import TopBar from './TopBar.jsx'; +import Info from './Info.jsx'; import MainScreen from './MainScreen.jsx'; +import Context from '../context'; +import { defaultLanguage } from '../data/translations'; const App = () => { - const [adminLang, setAdminLang] = useState('en'); + const [lang, setLang] = useState(defaultLanguage); const [projects, setProjects] = useState([]); const [info, setInfo] = useState(''); const [hover, setHover] = useState(''); const [view, setView] = useState('main'); const [user, setUser] = useState(null); - const t = (key) => texts[adminLang][key] || texts['en'][key]; - // useEffect(() => { - // setInfo('no-saved-websites') - // setHover(''); - // }, [user]); + useEffect(() => { + setInfo('no-saved-websites'); + setUser('admin@op.pl'); + }, []); return ( -
- -
- { view === 'main' && } + +
+ +
+ { view === 'main' && } +
+
- -
+ ) }; diff --git a/client/src/admin/jsx/Info.jsx b/client/src/admin/jsx/Info.jsx new file mode 100644 index 0000000..75294e1 --- /dev/null +++ b/client/src/admin/jsx/Info.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { t } from '../hocs'; + +const Info = ({ info, hover }) => ( +

+ { hover ? t(hover) : t(info) } +

+); + +export default Info; diff --git a/client/src/admin/jsx/LangSwitch.jsx b/client/src/admin/jsx/LangSwitch.jsx new file mode 100644 index 0000000..2494bef --- /dev/null +++ b/client/src/admin/jsx/LangSwitch.jsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { WithHover } from '../hocs'; +import { languages } from '../data/translations.js' + +const LangSwitch = ({ lang, setLang, opened, setOpened}) => { + const handleSetLang = (key) => { + setLang(key); + setOpened(false); + }; + + return ( +
+ + setOpened(opened !== 'lang' ? 'lang' : false)} + > + {lang} + + { + opened === 'lang' && ( +
+ { + languages.map(key => key !== lang && ( + handleSetLang(key)} + > + {key} + + )) + } +
+ ) + } + +
+ ); +}; + +export default LangSwitch; diff --git a/client/src/admin/jsx/MainScreen.jsx b/client/src/admin/jsx/MainScreen.jsx index ff28256..3d65384 100644 --- a/client/src/admin/jsx/MainScreen.jsx +++ b/client/src/admin/jsx/MainScreen.jsx @@ -1,21 +1,21 @@ import React, { Fragment } from 'react'; -import WithHover from '../../common/jsx/WithHover.jsx'; +import { WithHover, t } from '../hocs'; -const MainScreen = ({ projects, t, setHover }) => ( +const MainScreen = ({ projects }) => (

{ t('main-title') }

{ !projects.length && ( - +

{ t('edit-current-project') }

 )} { !projects.length && ( - +

{ t('show-saved-projects') }

 )} - +

{ t('create-new-project') }
diff --git a/client/src/admin/jsx/TopBar.jsx b/client/src/admin/jsx/TopBar.jsx new file mode 100644 index 0000000..e9be676 --- /dev/null +++ b/client/src/admin/jsx/TopBar.jsx @@ -0,0 +1,35 @@ +import React, {useState} from 'react'; +import LangSwitch from './LangSwitch.jsx'; +import User from './User.jsx'; + +const TopBar = ({ user, setUser, lang, setLang }) => { + const [opened, setOpened] = useState(false); + + return ( +
+ { opened !== false && ( +
setOpened(false)} + /> + )} + + { user && ( + + ) + } +
+ ); +}; + +export default TopBar; diff --git a/client/src/admin/jsx/User.jsx b/client/src/admin/jsx/User.jsx new file mode 100644 index 0000000..22b96b4 --- /dev/null +++ b/client/src/admin/jsx/User.jsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { WithHover, t } from '../hocs'; +import logout from '../api/logout'; + +const User = ({ user, setUser, opened, setOpened }) => { + const handleLogout = () => { + setOpened(false); + logout(); + }; + const handleChangePass = () => { setOpened(false) }; + const handleRemoveUser = () => { setOpened(false) }; + + return ( +
+ + setOpened(opened !== 'user' ? 'user' : false)} + > + {user} + + { + opened === 'user' && ( +
+ + {t('logout')} + + + {t('user-settings')} + +
+ ) + } + +
+ ); +}; + +export default User; diff --git a/client/src/admin/scss/_colors.scss b/client/src/admin/scss/_colors.scss new file mode 100644 index 0000000..45ae737 --- /dev/null +++ b/client/src/admin/scss/_colors.scss @@ -0,0 +1,5 @@ +$background: #181818; +$background-menu: #222; +$text: #fff; +$text-selected: orange; +$text-inactive: #aaa; diff --git a/client/src/admin/scss/_forms.scss b/client/src/admin/scss/_forms.scss new file mode 100644 index 0000000..0585cd6 --- /dev/null +++ b/client/src/admin/scss/_forms.scss @@ -0,0 +1,52 @@ +// Text Input + +.text-input { + text-align: left; + margin-bottom: 1.5em; + transition: all .3s; + cursor: text; + + &:focus-within { + transform: scale(1.05,1.05); + } +} + +.text-input-label { + font-size: 1.25em; + width: 100%; + color: #aaa; + display:block; + transform:translateY(-1.75em); + transform-origin: 0 0; + transition: all .3s; + z-index: -1; + cursor: text; +} + +.text-input-field { + font-size: 1.5rem; + box-shadow: none; + background: $background; + color: $text; + border-radius: 0; + border-color: #ccc; + border-style: none none solid none; + width: 100%; + transition: all .5s; + padding: 5px; + + &::placeholder { + color: transparent; + } + + &:focus { + box-shadow: none; + outline: none; + border-color: $text-selected; + } + + &:focus + .text-input-label, + &:not(:placeholder-shown) + .text-input-label { + transform: translateY(-3em) scale(0.8); + } +} diff --git a/client/src/admin/scss/_globals.scss b/client/src/admin/scss/_globals.scss new file mode 100644 index 0000000..f03ad86 --- /dev/null +++ b/client/src/admin/scss/_globals.scss @@ -0,0 +1,12 @@ +html { + background: $background; +} + +* { + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: -moz-none; + -o-user-select: none; + user-select: none; +} + diff --git a/client/src/admin/scss/_info.scss b/client/src/admin/scss/_info.scss new file mode 100644 index 0000000..ac32949 --- /dev/null +++ b/client/src/admin/scss/_info.scss @@ -0,0 +1,8 @@ +.info { + display: block; + color: #ddd; + flex-grow: 0; + text-align: center; + padding-bottom: 3vh; + padding-top: 3vh; +} diff --git a/client/src/admin/scss/_main.scss b/client/src/admin/scss/_main.scss new file mode 100644 index 0000000..e182f3c --- /dev/null +++ b/client/src/admin/scss/_main.scss @@ -0,0 +1,16 @@ +.main { + display: flex; + flex-direction: column; + justify-content: space-between; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + + &__content { + flex-grow: 1; + display: flex; + flex-direction: column; + } +} diff --git a/client/src/admin/scss/_reset.scss b/client/src/admin/scss/_reset.scss new file mode 100755 index 0000000..2928cc4 --- /dev/null +++ b/client/src/admin/scss/_reset.scss @@ -0,0 +1,52 @@ +* { + box-sizing: border-box; +} + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +html{ + min-width: 320px; + background: white; +} + diff --git a/client/src/admin/scss/_topBar.scss b/client/src/admin/scss/_topBar.scss new file mode 100644 index 0000000..af9fcd6 --- /dev/null +++ b/client/src/admin/scss/_topBar.scss @@ -0,0 +1,114 @@ +@keyframes showTopMenu { + 0% {transform: translateY(100%) scale(0.8) ; opacity: 0;} + 80% {transform: translateY(100%) scale(1.1); opacity: 100%;} + 100% {transform: translateY(100%) scale(1); opacity: 100%;} +} + +.top-bar { + flex-grow: 0; + display: flex; + justify-content: end; + padding: 1em; + + + &__fog { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +.user { + position: relative; + + &__list { + position: absolute; + display: block; + bottom: 0; + right: 0; + transform: translateY(100%); + background: $background-menu; + animation: showTopMenu .3s; + } + + &__main-item { + color: $text; + display: block; + padding: .5em; + white-space: nowrap; + transition: color .3s; + cursor: pointer; + + &--active { + background: $background-menu; + color: $text-selected; + } + + &:hover { + color: $text-selected; + } + } + + &__item { + display: block; + color: $text; + padding: .5em; + font-weight: normal; + transition: color .3s; + cursor: pointer; + white-space: nowrap; + text-align: right; + + &:hover { + color: $text-selected; + } + } +} + +.lang-switch { + display: inline-block; + position: relative; + + &__list { + position: absolute; + bottom: 0; + left: 0; + right: 0; + transform: translateY(100%); + background: $background-menu; + animation: showTopMenu .3s; + } + + &__main-item { + transition: .3s color; + padding: .5em; + display: block; + color: $text; + font-weight: normal; + cursor: pointer; + + &:hover { + color: $text-selected; + } + + &--active { + background: $background-menu; + color: $text-selected; + } + } + + &__item { + padding: .5em; + display: block; + color: $text; + font-weight: normal; + cursor: pointer; + transition: color .3s; + + &:hover { + color: $text-selected; + } + } +} diff --git a/client/src/admin/scss/index.scss b/client/src/admin/scss/index.scss index 67553bb..ab61dd9 100644 --- a/client/src/admin/scss/index.scss +++ b/client/src/admin/scss/index.scss @@ -1,8 +1,8 @@ -@import '../../common/scss/reset'; -@import '../../common/scss/colors'; -@import '../../common/scss/globals'; -@import '../../common/scss/forms'; -@import '../../common/scss/main'; -@import '../../common/scss/info'; -@import '../../common/scss/topBar'; +@import 'reset'; +@import 'colors'; +@import 'globals'; +@import 'forms'; +@import 'main'; +@import 'info'; +@import 'topBar'; @import 'mainScreen'; diff --git a/client/src/common/data/texts.js b/client/src/common/data/texts.js deleted file mode 100644 index 999460f..0000000 --- a/client/src/common/data/texts.js +++ /dev/null @@ -1,36 +0,0 @@ -export default { - "en": { - "main-title": "Website Manager", - "login-to-admin": "Login to Admin Panel", - "login-info": "Put your user name and password, then click login button", - "login": "Login", - "user": "User name", - "password": "Password", - "no-saved-websites": "You don't have any saved projects, create a new one", - "create-new-project": "Create new project", - "create-new-project-hover": "Click to create new project", - "edit-current-project": "Edit current project", - "edit-current-project-hover": "Click to edit current active projecct", - "show-saved-projects": "Show saved projects", - "show-saved-projects-hover": "Click to show list of all saved projects", - "click-to-change-language": "Click to change language in the website manager", - "click-to-change-user": "Click to logout or change user password", - "logout": "Logout", - "click-to-logout": "Click to logout/change current user", - "user-settings": "User settings", - "click-to-change-user-settings": "Click to change user name, password or to completely remove current user", - }, - "de": { - "main-title": "Website Manager", - }, - "es": { - "main-title": "Website Manager", - }, - "pl": { - "main-title": "Website Manager", - "no-saved-websites": "Nie masz jeszcze żadnych zapisanych projektów, utwórz nowy", - "create-new-project": "Utwórz nowy projekt", - "edit-current-project": "Edytuj bieżący projekt", - "show-saved-projects": "Pokaż zapisane projekty", - }, -} diff --git a/client/src/common/jsx/Info.jsx b/client/src/common/jsx/Info.jsx deleted file mode 100644 index 00d04b3..0000000 --- a/client/src/common/jsx/Info.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -const Info = ({info, hover, t}) => ( -

- { hover ? t(hover) : t(info) } -

-); - -export default Info; diff --git a/client/src/common/jsx/LangSwitch.jsx b/client/src/common/jsx/LangSwitch.jsx deleted file mode 100644 index eba1b27..0000000 --- a/client/src/common/jsx/LangSwitch.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import WithHover from './WithHover.jsx'; -import texts from '../data/texts.js'; - -const LangSwitch = ({ lang, setLang, setHover, opened, setOpened}) => { - - const handleSetLang = (key) => { - setLang(key); - setOpened(false); - }; - - return ( -
- - setOpened(opened !== 'lang' ? 'lang' : false)} - > - {lang} - - { - opened === 'lang' && ( -
- { - Object.keys(texts).map(key => key !== lang && ( - handleSetLang(key)} - > - {key} - - )) - } -
- ) - } - -
- ); -}; - -export default LangSwitch; diff --git a/client/src/common/jsx/TopBar.jsx b/client/src/common/jsx/TopBar.jsx deleted file mode 100644 index 6e5ad6a..0000000 --- a/client/src/common/jsx/TopBar.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, {useState} from 'react'; -import LangSwitch from './LangSwitch.jsx'; -import User from './User.jsx'; - -const TopBar = ({user, setUser, setHover, lang, setLang, t={t}}) => { - const [opened, setOpened] = useState(false); - - return ( -
- { opened !== false && ( -
setOpened(false)} - /> - )} - - { user && ( - - ) - } -
- ); -}; - -export default TopBar; diff --git a/client/src/common/jsx/User.jsx b/client/src/common/jsx/User.jsx deleted file mode 100644 index 8b05d44..0000000 --- a/client/src/common/jsx/User.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import WithHover from './WithHover.jsx'; - -const User = ({user, setUser, setHover, t, opened, setOpened}) => { - const handleLogout = () => { - setOpened(false); - setUser(null); - }; - const handleChangePass = () => { setOpened(false) }; - const handleRemoveUser = () => { setOpened(false) }; - - return ( -
- - setOpened(opened !== 'user' ? 'user' : false)} - > - {user} - - { - opened === 'user' && ( -
- - {t('logout')} - - - {t('user-settings')} - -
- ) - } - -
- ); -}; - -export default User; diff --git a/client/src/common/jsx/WithHover.jsx b/client/src/common/jsx/WithHover.jsx deleted file mode 100644 index bb1a7f4..0000000 --- a/client/src/common/jsx/WithHover.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -const WithHover = ({ children, setHover, message, classes }) => ( -
setHover(message)} - onMouseLeave={()=>setHover(null)} - className={classes} - > - {children} -
-); - -export default WithHover; diff --git a/client/src/common/scss/_colors.scss b/client/src/common/scss/_colors.scss deleted file mode 100644 index 2dd49a0..0000000 --- a/client/src/common/scss/_colors.scss +++ /dev/null @@ -1,5 +0,0 @@ -$background: #181818; -$text: #eee; -$text-highlighted: #fff; -$text-selected: orange; -$text-inactive: #aaa; diff --git a/client/src/common/scss/_forms.scss b/client/src/common/scss/_forms.scss deleted file mode 100644 index b7ac0f4..0000000 --- a/client/src/common/scss/_forms.scss +++ /dev/null @@ -1,52 +0,0 @@ -// Text Input - -.text-input { - text-align: left; - margin-bottom: 1.5em; - transition: all .3s; - cursor: text; - - &:focus-within { - transform: scale(1.05,1.05); - } -} - -.text-input-label { - font-size: 1.25em; - width: 100%; - color: #aaa; - display:block; - transform:translateY(-1.75em); - transform-origin: 0 0; - transition: all .3s; - z-index: -1; - cursor: text; -} - -.text-input-field { - font-size: 1.5rem; - box-shadow: none; - background: $background; - color: $text-highlighted; - border-radius: 0; - border-color: #ccc; - border-style: none none solid none; - width: 100%; - transition: all .5s; - padding: 5px; - - &::placeholder { - color: transparent; - } - - &:focus { - box-shadow: none; - outline: none; - border-color: $text-selected; - } - - &:focus + .text-input-label, - &:not(:placeholder-shown) + .text-input-label { - transform: translateY(-3em) scale(0.8); - } -} diff --git a/client/src/common/scss/_globals.scss b/client/src/common/scss/_globals.scss deleted file mode 100644 index f03ad86..0000000 --- a/client/src/common/scss/_globals.scss +++ /dev/null @@ -1,12 +0,0 @@ -html { - background: $background; -} - -* { - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: -moz-none; - -o-user-select: none; - user-select: none; -} - diff --git a/client/src/common/scss/_info.scss b/client/src/common/scss/_info.scss deleted file mode 100644 index ac32949..0000000 --- a/client/src/common/scss/_info.scss +++ /dev/null @@ -1,8 +0,0 @@ -.info { - display: block; - color: #ddd; - flex-grow: 0; - text-align: center; - padding-bottom: 3vh; - padding-top: 3vh; -} diff --git a/client/src/common/scss/_main.scss b/client/src/common/scss/_main.scss deleted file mode 100644 index e182f3c..0000000 --- a/client/src/common/scss/_main.scss +++ /dev/null @@ -1,16 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - - &__content { - flex-grow: 1; - display: flex; - flex-direction: column; - } -} diff --git a/client/src/common/scss/_reset.scss b/client/src/common/scss/_reset.scss deleted file mode 100755 index 2928cc4..0000000 --- a/client/src/common/scss/_reset.scss +++ /dev/null @@ -1,52 +0,0 @@ -* { - box-sizing: border-box; -} - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} - -html{ - min-width: 320px; - background: white; -} - diff --git a/client/src/common/scss/_topBar.scss b/client/src/common/scss/_topBar.scss deleted file mode 100644 index fb0e6a5..0000000 --- a/client/src/common/scss/_topBar.scss +++ /dev/null @@ -1,114 +0,0 @@ -@keyframes showTopMenu { - 0% {transform: translateY(100%) scale(0.8) ; opacity: 0;} - 80% {transform: translateY(100%) scale(1.1); opacity: 100%;} - 100% {transform: translateY(100%) scale(1); opacity: 100%;} -} - -.top-bar { - flex-grow: 0; - display: flex; - justify-content: end; - padding: 1em; - - - &__fog { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - } -} - -.user { - position: relative; - - &__list { - position: absolute; - display: block; - bottom: 0; - right: 0; - transform: translateY(100%); - background: #222; - animation: showTopMenu .3s; - } - - &__main-item { - color: white; - display: block; - padding: .5em; - white-space: nowrap; - transition: color .3s; - cursor: pointer; - - &--active { - background: #222; - color: yellow; - } - - &:hover { - color: yellow; - } - } - - &__item { - display: block; - color: white; - padding: .5em; - font-weight: normal; - transition: color .3s; - cursor: pointer; - white-space: nowrap; - text-align: right; - - &:hover { - color: yellow; - } - } -} - -.lang-switch { - display: inline-block; - position: relative; - - &__list { - position: absolute; - bottom: 0; - left: 0; - right: 0; - transform: translateY(100%); - background: #222; - animation: showTopMenu .3s; - } - - &__main-item { - transition: .3s color; - padding: .5em; - display: block; - color: white; - font-weight: normal; - cursor: pointer; - - &:hover { - color: yellow; - } - - &--active { - background: #222; - color: yellow; - } - } - - &__item { - padding: .5em; - display: block; - color: white; - font-weight: normal; - cursor: pointer; - transition: color .3s; - - &:hover { - color: yellow; - } - } -} diff --git a/client/src/login/api/login.js b/client/src/login/api/login.js new file mode 100644 index 0000000..4ed36a7 --- /dev/null +++ b/client/src/login/api/login.js @@ -0,0 +1,11 @@ +export default (email, password) => ( + fetch('/api/user/login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json;charset=utf-8' + }, + body: JSON.stringify({ email, password }), + }) + .then(() => window.location.href = "/admin") + .catch(() => {}) +); diff --git a/client/src/login/data/texts.js b/client/src/login/data/texts.js deleted file mode 100644 index e69de29..0000000 diff --git a/client/src/login/jsx/App.jsx b/client/src/login/jsx/App.jsx index a0109dd..e33e6c2 100644 --- a/client/src/login/jsx/App.jsx +++ b/client/src/login/jsx/App.jsx @@ -3,36 +3,34 @@ import ReactDOM from 'react-dom'; import "../scss/index.scss"; -import texts from '../../common/data/texts.js'; -import TopBar from '../../common/jsx/TopBar.jsx'; -import Info from '../../common/jsx/Info.jsx'; +import TopBar from '../../admin/jsx/TopBar.jsx'; +import Info from '../../admin/jsx/Info.jsx'; import LoginPanel from './LoginPanel.jsx'; +import Context from '../../admin/context'; +import { defaultLanguage } from '../../admin/data/translations'; const App = () => { - const [lang, setLang] = useState('en'); + const [lang, setLang] = useState(defaultLanguage); const [info, setInfo] = useState('login-info'); const [hover, setHover] = useState(''); const [user, setUser] = useState(null); - const t = (key) => texts[lang][key] || texts['en'][key]; return ( -
- - - -
+ +
+ + + +
+ ) }; diff --git a/client/src/login/jsx/LoginPanel.jsx b/client/src/login/jsx/LoginPanel.jsx index 296dc0e..e90a5c4 100644 --- a/client/src/login/jsx/LoginPanel.jsx +++ b/client/src/login/jsx/LoginPanel.jsx @@ -1,36 +1,22 @@ -import React, {useState, useEffect} from 'react'; +import React, {useState, useEffect, useContext} from 'react'; +import login from '../api/login'; +import { t } from '../../admin/hocs'; -const LoginPanel = ({setUser, t}) => { - const [username, setUsername] = useState(''); +const LoginPanel = ({setUser}) => { + const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [active, setActive] = useState(false); useEffect(() => { - if (username.length > 4 && password.length > 4) { - setActive(true); - } else { - setActive(false); - } - }, [username, password]) - - const usernameValidation = (e) => { - const value = e.target.value; - const regex = /^[0-9a-zA-Z]+$/; - - if ((value.length < 20 && value.match(regex)) || value === "") { - setUsername(value); - } - }; - - const passwordValidation = (e) => { - e.target.value.length < 20 && setPassword(e.target.value); - }; + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + emailRegex.test(email) && password.length > 5 + ? setActive(true) + : setActive(false); + }, [email, password]) const submit = (e) => { e.preventDefault(); - if (username === 'admin' && password === 'admin') { - setUser('admin'); - } + login(email, password); } return ( @@ -41,19 +27,19 @@ const LoginPanel = ({setUser, t}) => {

setEmail(e.target.value)} placeholder={t('user')} id="admin-user-name" name="admin-user-name" type="text" className="text-input-field" - value={username} + value={email} />
setPassword(e.target.value)} placeholder={t('password')} id="admin-password" name="admin-password" diff --git a/client/src/login/scss/index.scss b/client/src/login/scss/index.scss index 6a7eb52..d904eb1 100644 --- a/client/src/login/scss/index.scss +++ b/client/src/login/scss/index.scss @@ -1,8 +1,8 @@ -@import '../../common/scss/reset'; -@import '../../common/scss/colors'; -@import '../../common/scss/globals'; -@import '../../common/scss/forms'; -@import '../../common/scss/main'; -@import '../../common/scss/info'; -@import '../../common/scss/topBar'; +@import '../../admin/scss/reset'; +@import '../../admin/scss/colors'; +@import '../../admin/scss/globals'; +@import '../../admin/scss/forms'; +@import '../../admin/scss/main'; +@import '../../admin/scss/info'; +@import '../../admin/scss/topBar'; @import 'loginPanel'; -- cgit v1.2.3