summaryrefslogtreecommitdiffstats
path: root/client/src
diff options
context:
space:
mode:
Diffstat (limited to 'client/src')
-rw-r--r--client/src/admin/api/logout.js7
-rw-r--r--client/src/admin/context/index.js3
-rw-r--r--client/src/admin/data/translations.js (renamed from client/src/common/data/texts.js)9
-rw-r--r--client/src/admin/hocs/WithHover.jsx18
-rw-r--r--client/src/admin/hocs/WithTranslation.jsx11
-rw-r--r--client/src/admin/hocs/index.js4
-rw-r--r--client/src/admin/jsx/App.jsx32
-rw-r--r--client/src/admin/jsx/Info.jsx (renamed from client/src/common/jsx/Info.jsx)3
-rw-r--r--client/src/admin/jsx/LangSwitch.jsx (renamed from client/src/common/jsx/LangSwitch.jsx)11
-rw-r--r--client/src/admin/jsx/MainScreen.jsx10
-rw-r--r--client/src/admin/jsx/TopBar.jsx (renamed from client/src/common/jsx/TopBar.jsx)5
-rw-r--r--client/src/admin/jsx/User.jsx (renamed from client/src/common/jsx/User.jsx)13
-rw-r--r--client/src/admin/scss/_colors.scss (renamed from client/src/common/scss/_colors.scss)4
-rw-r--r--client/src/admin/scss/_forms.scss (renamed from client/src/common/scss/_forms.scss)2
-rw-r--r--client/src/admin/scss/_globals.scss (renamed from client/src/common/scss/_globals.scss)0
-rw-r--r--client/src/admin/scss/_info.scss (renamed from client/src/common/scss/_info.scss)0
-rw-r--r--client/src/admin/scss/_main.scss (renamed from client/src/common/scss/_main.scss)0
-rwxr-xr-xclient/src/admin/scss/_reset.scss (renamed from client/src/common/scss/_reset.scss)0
-rw-r--r--client/src/admin/scss/_topBar.scss (renamed from client/src/common/scss/_topBar.scss)28
-rw-r--r--client/src/admin/scss/index.scss14
-rw-r--r--client/src/common/jsx/WithHover.jsx13
-rw-r--r--client/src/login/api/login.js11
-rw-r--r--client/src/login/data/texts.js0
-rw-r--r--client/src/login/jsx/App.jsx42
-rw-r--r--client/src/login/jsx/LoginPanel.jsx42
-rw-r--r--client/src/login/scss/index.scss14
26 files changed, 163 insertions, 133 deletions
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/common/data/texts.js b/client/src/admin/data/translations.js
index 999460f..b4c34a2 100644
--- a/client/src/common/data/texts.js
+++ b/client/src/admin/data/translations.js
@@ -1,4 +1,6 @@
-export default {
+export const defaultLanguage = 'en';
+export const fallbackLanguage = 'en';
+export const translations = {
"en": {
"main-title": "Website Manager",
"login-to-admin": "Login to Admin Panel",
@@ -28,9 +30,12 @@ export default {
},
"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 (
+ <div
+ onMouseEnter={()=>setHover(message)}
+ onMouseLeave={()=>setHover(null)}
+ className={classes}
+ >
+ {children}
+ </div>
+ )
+};
+
+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 (
- <div className="main">
- <TopBar lang={adminLang} setLang={setAdminLang} setHover={setHover} user={user} setUser={setUser} t={t} />
- <div className="main__content">
- { view === 'main' && <MainScreen projects={projects} t={t} setHover={setHover} /> }
+ <Context.Provider value={{ lang, setHover, setInfo }}>
+ <div className="main">
+ <TopBar lang={lang} setLang={setLang} user={user} setUser={setUser} />
+ <div className="main__content">
+ { view === 'main' && <MainScreen projects={projects} /> }
+ </div>
+ <Info info={info} hover={hover} />
</div>
- <Info info={info} hover={hover} t={t} />
- </div>
+ </Context.Provider>
)
};
diff --git a/client/src/common/jsx/Info.jsx b/client/src/admin/jsx/Info.jsx
index 00d04b3..75294e1 100644
--- a/client/src/common/jsx/Info.jsx
+++ b/client/src/admin/jsx/Info.jsx
@@ -1,6 +1,7 @@
import React from 'react';
+import { t } from '../hocs';
-const Info = ({info, hover, t}) => (
+const Info = ({ info, hover }) => (
<p className="info">
{ hover ? t(hover) : t(info) }
</p>
diff --git a/client/src/common/jsx/LangSwitch.jsx b/client/src/admin/jsx/LangSwitch.jsx
index eba1b27..2494bef 100644
--- a/client/src/common/jsx/LangSwitch.jsx
+++ b/client/src/admin/jsx/LangSwitch.jsx
@@ -1,9 +1,8 @@
import React from 'react';
-import WithHover from './WithHover.jsx';
-import texts from '../data/texts.js';
-
-const LangSwitch = ({ lang, setLang, setHover, opened, setOpened}) => {
+import { WithHover } from '../hocs';
+import { languages } from '../data/translations.js'
+const LangSwitch = ({ lang, setLang, opened, setOpened}) => {
const handleSetLang = (key) => {
setLang(key);
setOpened(false);
@@ -11,7 +10,7 @@ const LangSwitch = ({ lang, setLang, setHover, opened, setOpened}) => {
return (
<div className="lang-switch">
- <WithHover setHover={setHover} message="click-to-change-language">
+ <WithHover message="click-to-change-language">
<span
className={`lang-switch__main-item${opened === 'lang' ? ' lang-switch__main-item--active' : ''}`}
onClick={() => setOpened(opened !== 'lang' ? 'lang' : false)}
@@ -22,7 +21,7 @@ const LangSwitch = ({ lang, setLang, setHover, opened, setOpened}) => {
opened === 'lang' && (
<div className="lang-switch__list">
{
- Object.keys(texts).map(key => key !== lang && (
+ languages.map(key => key !== lang && (
<span
className="lang-switch__item"
key={key}
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 }) => (
<div className="main-screen">
<h1 className="main-screen__header">{ t('main-title') }</h1>
<div className="main-screen__list">
{ !projects.length && (
- <WithHover setHover={setHover} message="edit-current-project-hover">
+ <WithHover message="edit-current-project-hover">
<p className="main-screen__item">{ t('edit-current-project') }</p>
</WithHover>
)}
{ !projects.length && (
- <WithHover setHover={setHover} message="show-saved-projects-hover">
+ <WithHover message="show-saved-projects-hover">
<p className="main-screen__item">{ t('show-saved-projects') }</p>
</WithHover>
)}
- <WithHover setHover={setHover} message="create-new-project-hover">
+ <WithHover message="create-new-project-hover">
<p className="main-screen__item">{ t('create-new-project') }</p>
</WithHover>
</div>
diff --git a/client/src/common/jsx/TopBar.jsx b/client/src/admin/jsx/TopBar.jsx
index 6e5ad6a..e9be676 100644
--- a/client/src/common/jsx/TopBar.jsx
+++ b/client/src/admin/jsx/TopBar.jsx
@@ -2,7 +2,7 @@ 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 TopBar = ({ user, setUser, lang, setLang }) => {
const [opened, setOpened] = useState(false);
return (
@@ -16,7 +16,6 @@ const TopBar = ({user, setUser, setHover, lang, setLang, t={t}}) => {
<LangSwitch
lang={lang}
setLang={setLang}
- setHover={setHover}
opened={opened}
setOpened={setOpened}
/>
@@ -24,8 +23,6 @@ const TopBar = ({user, setUser, setHover, lang, setLang, t={t}}) => {
<User
user={user}
setUser={setUser}
- setHover={setHover}
- t={t}
opened={opened}
setOpened={setOpened}
/>
diff --git a/client/src/common/jsx/User.jsx b/client/src/admin/jsx/User.jsx
index 8b05d44..22b96b4 100644
--- a/client/src/common/jsx/User.jsx
+++ b/client/src/admin/jsx/User.jsx
@@ -1,17 +1,18 @@
import React from 'react';
-import WithHover from './WithHover.jsx';
+import { WithHover, t } from '../hocs';
+import logout from '../api/logout';
-const User = ({user, setUser, setHover, t, opened, setOpened}) => {
+const User = ({ user, setUser, opened, setOpened }) => {
const handleLogout = () => {
setOpened(false);
- setUser(null);
+ logout();
};
const handleChangePass = () => { setOpened(false) };
const handleRemoveUser = () => { setOpened(false) };
return (
<div className="user">
- <WithHover setHover={setHover} message="click-to-change-user">
+ <WithHover message="click-to-change-user">
<span
className={`user__main-item${opened === 'user' ? ' user__main-item--active' : ''}`}
onClick={() => setOpened(opened !== 'user' ? 'user' : false)}
@@ -21,10 +22,10 @@ const User = ({user, setUser, setHover, t, opened, setOpened}) => {
{
opened === 'user' && (
<div className="user__list" >
- <WithHover setHover={setHover} message="click-to-logout">
+ <WithHover message="click-to-logout">
<span className="user__item" onClick={handleLogout}>{t('logout')}</span>
</WithHover>
- <WithHover setHover={setHover} message="click-to-change-user-settings">
+ <WithHover message="click-to-change-user-settings">
<span className="user__item" onClick={handleChangePass}>{t('user-settings')}</span>
</WithHover>
</div>
diff --git a/client/src/common/scss/_colors.scss b/client/src/admin/scss/_colors.scss
index 2dd49a0..45ae737 100644
--- a/client/src/common/scss/_colors.scss
+++ b/client/src/admin/scss/_colors.scss
@@ -1,5 +1,5 @@
$background: #181818;
-$text: #eee;
-$text-highlighted: #fff;
+$background-menu: #222;
+$text: #fff;
$text-selected: orange;
$text-inactive: #aaa;
diff --git a/client/src/common/scss/_forms.scss b/client/src/admin/scss/_forms.scss
index b7ac0f4..0585cd6 100644
--- a/client/src/common/scss/_forms.scss
+++ b/client/src/admin/scss/_forms.scss
@@ -27,7 +27,7 @@
font-size: 1.5rem;
box-shadow: none;
background: $background;
- color: $text-highlighted;
+ color: $text;
border-radius: 0;
border-color: #ccc;
border-style: none none solid none;
diff --git a/client/src/common/scss/_globals.scss b/client/src/admin/scss/_globals.scss
index f03ad86..f03ad86 100644
--- a/client/src/common/scss/_globals.scss
+++ b/client/src/admin/scss/_globals.scss
diff --git a/client/src/common/scss/_info.scss b/client/src/admin/scss/_info.scss
index ac32949..ac32949 100644
--- a/client/src/common/scss/_info.scss
+++ b/client/src/admin/scss/_info.scss
diff --git a/client/src/common/scss/_main.scss b/client/src/admin/scss/_main.scss
index e182f3c..e182f3c 100644
--- a/client/src/common/scss/_main.scss
+++ b/client/src/admin/scss/_main.scss
diff --git a/client/src/common/scss/_reset.scss b/client/src/admin/scss/_reset.scss
index 2928cc4..2928cc4 100755
--- a/client/src/common/scss/_reset.scss
+++ b/client/src/admin/scss/_reset.scss
diff --git a/client/src/common/scss/_topBar.scss b/client/src/admin/scss/_topBar.scss
index fb0e6a5..af9fcd6 100644
--- a/client/src/common/scss/_topBar.scss
+++ b/client/src/admin/scss/_topBar.scss
@@ -29,12 +29,12 @@
bottom: 0;
right: 0;
transform: translateY(100%);
- background: #222;
+ background: $background-menu;
animation: showTopMenu .3s;
}
&__main-item {
- color: white;
+ color: $text;
display: block;
padding: .5em;
white-space: nowrap;
@@ -42,18 +42,18 @@
cursor: pointer;
&--active {
- background: #222;
- color: yellow;
+ background: $background-menu;
+ color: $text-selected;
}
&:hover {
- color: yellow;
+ color: $text-selected;
}
}
&__item {
display: block;
- color: white;
+ color: $text;
padding: .5em;
font-weight: normal;
transition: color .3s;
@@ -62,7 +62,7 @@
text-align: right;
&:hover {
- color: yellow;
+ color: $text-selected;
}
}
}
@@ -77,7 +77,7 @@
left: 0;
right: 0;
transform: translateY(100%);
- background: #222;
+ background: $background-menu;
animation: showTopMenu .3s;
}
@@ -85,30 +85,30 @@
transition: .3s color;
padding: .5em;
display: block;
- color: white;
+ color: $text;
font-weight: normal;
cursor: pointer;
&:hover {
- color: yellow;
+ color: $text-selected;
}
&--active {
- background: #222;
- color: yellow;
+ background: $background-menu;
+ color: $text-selected;
}
}
&__item {
padding: .5em;
display: block;
- color: white;
+ color: $text;
font-weight: normal;
cursor: pointer;
transition: color .3s;
&:hover {
- color: yellow;
+ 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/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 }) => (
- <div
- onMouseEnter={()=>setHover(message)}
- onMouseLeave={()=>setHover(null)}
- className={classes}
- >
- {children}
- </div>
-);
-
-export default WithHover;
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
--- a/client/src/login/data/texts.js
+++ /dev/null
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 (
- <div className="main">
- <TopBar
- lang={lang}
- setLang={setLang}
- setHover={setHover}
- t={t}
- />
- <LoginPanel
- setUser={setUser}
- t={t}
- />
- <Info
- info={info}
- hover={hover}
- t={t}
- />
- </div>
+ <Context.Provider value={{ lang, setHover, setInfo }}>
+ <div className="main">
+ <TopBar
+ lang={lang}
+ setLang={setLang}
+ />
+ <LoginPanel
+ setUser={setUser}
+ />
+ <Info
+ info={info}
+ hover={hover}
+ />
+ </div>
+ </Context.Provider>
)
};
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}) => {
</p>
<div className="text-input">
<input
- onChange={usernameValidation}
+ onChange={e => 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}
/>
<label htmlFor="admin-user-name" className="text-input-label">{t('user')}</label>
</div>
<div className="text-input">
<input
- onChange={passwordValidation}
+ onChange={e => 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';
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-22 21:02:59 +0000