From e06ec920f7a5d784e674c4c4b4e6d1da3dc7391d Mon Sep 17 00:00:00 2001
From: Piotr Russ <mail@pruss.it>
Date: Mon, 16 Nov 2020 00:10:28 +0100
Subject: api, login, auth

---
 client/src/login/data/texts.js         |  0
 client/src/login/jsx/App.jsx           | 39 +++++++++++++++++
 client/src/login/jsx/LoginPanel.jsx    | 80 ++++++++++++++++++++++++++++++++++
 client/src/login/scss/_loginPanel.scss | 43 ++++++++++++++++++
 client/src/login/scss/index.scss       |  8 ++++
 5 files changed, 170 insertions(+)
 create mode 100644 client/src/login/data/texts.js
 create mode 100644 client/src/login/jsx/App.jsx
 create mode 100644 client/src/login/jsx/LoginPanel.jsx
 create mode 100644 client/src/login/scss/_loginPanel.scss
 create mode 100644 client/src/login/scss/index.scss

(limited to 'client/src/login')

diff --git a/client/src/login/data/texts.js b/client/src/login/data/texts.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/login/jsx/App.jsx b/client/src/login/jsx/App.jsx
new file mode 100644
index 0000000..a0109dd
--- /dev/null
+++ b/client/src/login/jsx/App.jsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+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 LoginPanel from './LoginPanel.jsx';
+
+const App = () => {
+  const [lang, setLang] = useState('en');
+  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>
+  )
+};
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/client/src/login/jsx/LoginPanel.jsx b/client/src/login/jsx/LoginPanel.jsx
new file mode 100644
index 0000000..296dc0e
--- /dev/null
+++ b/client/src/login/jsx/LoginPanel.jsx
@@ -0,0 +1,80 @@
+import React, {useState, useEffect} from 'react';
+
+const LoginPanel = ({setUser, t}) => {
+  const [username, setUsername] = 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 submit = (e) => {
+    e.preventDefault();
+    if (username === 'admin' && password === 'admin') {
+      setUser('admin');
+    }
+  }
+
+  return (
+    <div className="login-panel">
+      <form className="login-panel__form" onSubmit={submit}>
+        <p className="login-panel__header">
+          {t('login-to-admin')}
+        </p>
+        <div className="text-input">
+          <input
+            onChange={usernameValidation}
+            placeholder={t('user')}
+            id="admin-user-name"
+            name="admin-user-name"
+            type="text"
+            className="text-input-field"
+            value={username}
+          />
+          <label htmlFor="admin-user-name" className="text-input-label">{t('user')}</label>
+        </div>
+        <div className="text-input">
+          <input
+            onChange={passwordValidation}
+            placeholder={t('password')}
+            id="admin-password"
+            name="admin-password"
+            type="password"
+            className="text-input-field"
+            value={password}
+          />
+          <label htmlFor="admin-password" className="text-input-label">
+            {t('password')}
+          </label>
+        </div>
+        <div>
+          <input
+            type="submit"
+            className={`login-panel__button${active ? ' active' : ''}`}
+            value={t('login')}
+          />
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default LoginPanel;
diff --git a/client/src/login/scss/_loginPanel.scss b/client/src/login/scss/_loginPanel.scss
new file mode 100644
index 0000000..8afb066
--- /dev/null
+++ b/client/src/login/scss/_loginPanel.scss
@@ -0,0 +1,43 @@
+.login-panel {
+  text-align: center;
+
+  &__form {
+    display: inline-block;
+  }
+
+  &__header {
+    color: white;
+    font-size: 2em;
+    margin-bottom: 4em;
+  }
+
+  &__button {
+    display: inline-block;
+    color: $text-inactive;
+    background: $background;
+    font-size: 1.25em;
+    border-radius: 1em;
+    border: 2px solid $text-inactive;
+    padding: .5em 1.5em;
+    margin: 0 auto;
+    transition: .3s color, .3s background;
+    cursor: pointer;
+
+    &:hover {
+      background: $text-inactive;
+      color: $background;
+    }
+
+    &.active {
+      background: $background;
+      color: $text-selected;
+      border: 2px solid $text-selected;
+
+      &:hover {
+        background: $text-selected;
+        color: $background;
+      }
+    }
+  }
+
+}
diff --git a/client/src/login/scss/index.scss b/client/src/login/scss/index.scss
new file mode 100644
index 0000000..6a7eb52
--- /dev/null
+++ b/client/src/login/scss/index.scss
@@ -0,0 +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 'loginPanel';
-- 
cgit v1.2.3