Page MenuHomeSealhub
Files F10360490

No OneTemporary
Actions

View Options

diff --git a/src/frontend/components/Login/Login.jsx b/src/frontend/components/Login/Login.jsx
deleted file mode 100644
index e11529b..0000000
--- a/src/frontend/components/Login/Login.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { PureComponent } from "react";
-import { RouterLink } from "sealious-react-components";
-
-export default class Login extends PureComponent {
- render() {
- return (
- <div>
- <h2>Login</h2>
- <RouterLink routeParams={{ view: "main" }}>
- Strona główna
- </RouterLink>
- </div>
- );
- }
-}
diff --git a/src/frontend/components/Login/LoginForm.jsx b/src/frontend/components/Login/LoginForm.jsx
new file mode 100644
index 0000000..fcbfd1b
--- /dev/null
+++ b/src/frontend/components/Login/LoginForm.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import S from "sealious-react-components";
+
+const LoginForm = props => (
+ <section className="auth-section">
+ <h2 className="auth-section__header">Zaloguj się</h2>
+ <form className="auth-section__form" onSubmit={props.onSubmit}>
+ <label className="auth-section__form__label" htmlFor="username">
+ Email:
+ </label>
+ <input
+ className="auth-section__form__input"
+ type="text"
+ placeholder="jan.nowak@example.com"
+ name="username"
+ id="username"
+ value={props.body.username}
+ onChange={props.handlers.username}
+ required
+ autoFocus
+ />
+
+ <label className="auth-section__form__label" htmlFor="password">
+ Hasło:
+ </label>
+ <input
+ className="auth-section__form__input"
+ type="password"
+ placeholder="pa55w0rd"
+ name="password"
+ id="password"
+ value={props.body.password}
+ onChange={props.handlers.password}
+ required
+ />
+ <button className="auth-section__form__button">Zaloguj się</button>
+ <div className="auth-section__form__help">
+ <span className="auth-section__form__help__text">
+ Nie masz konta?
+ </span>
+ <S.RouterLink
+ className="auth-section__form__help__link"
+ routeParams={{ view: "register" }}
+ >
+ Załóż je!
+ </S.RouterLink>
+ </div>
+ <div className="auth-section__form__help">
+ <S.RouterLink
+ className="auth-section__form__help__link"
+ routeParams={{ view: "reset-password" }}
+ replaceParams={true}
+ >
+ Nie pamiętasz hasła?
+ </S.RouterLink>
+ </div>
+ </form>
+ </section>
+);
+
+module.exports = LoginForm;
diff --git a/src/frontend/components/Login/index.jsx b/src/frontend/components/Login/index.jsx
new file mode 100644
index 0000000..9069af7
--- /dev/null
+++ b/src/frontend/components/Login/index.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import S from "sealious-react-components";
+import LoginForm from "./LoginForm.jsx";
+import handle_login from "../../utils/handle_login";
+
+const Login = () =>
+ React.createElement(
+ S.form(["username", "password"], handle_login, LoginForm)
+ );
+
+module.exports = Login;
diff --git a/src/frontend/components/Navbar/Navbar.jsx b/src/frontend/components/Navbar/Navbar.jsx
index c1cfe51..1bf6337 100644
--- a/src/frontend/components/Navbar/Navbar.jsx
+++ b/src/frontend/components/Navbar/Navbar.jsx
@@ -1,7 +1,7 @@
import React, { PureComponent } from "react";
export default class Navbar extends PureComponent {
render() {
- return <nav>Navbar</nav>;
+ return <nav className="navigation">Navbar</nav>;
}
}
diff --git a/src/frontend/css/auth-section.scss b/src/frontend/css/auth-section.scss
new file mode 100644
index 0000000..dcc6c9e
--- /dev/null
+++ b/src/frontend/css/auth-section.scss
@@ -0,0 +1,50 @@
+.auth-section {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-top: 2rem;
+ &__header {
+ margin-bottom: 1rem;
+ text-align: center;
+ }
+ &__form {
+ display: inline-block;
+ margin: 0 auto;
+ padding: 0;
+ &__label {
+ display: block;
+ }
+ &__input {
+ margin: 0 0 0.5rem auto;
+ padding: 0 0.75rem;
+ height: 2rem;
+ min-width: 10rem;
+ border: 1px solid #ccc;
+ color: #444;
+ outline: none;
+ }
+ &__button {
+ display: block;
+ margin: 0 auto 1rem auto;
+ height: 2rem;
+ width: 100%;
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ &__help {
+ height: 1rem;
+ text-align: center;
+ &__text {
+ padding-right: 0.25rem;
+ }
+ &__link {}
+ }
+ }
+}
+
+@media all and (max-width: 15.5rem) {
+ .auth-section {
+ margin-top: 0;
+ }
+}
diff --git a/src/frontend/css/style.scss b/src/frontend/css/style.scss
index 03a7113..cb41bf4 100644
--- a/src/frontend/css/style.scss
+++ b/src/frontend/css/style.scss
@@ -1,6 +1,42 @@
-$bgcolor: #e9ccd2;
@import "reset.css";
+@import "auth-section.scss";
+:required {
+ box-shadow: none;
+}
+
body {
- background: $bgcolor;
+ padding: 0;
+ background-color: #fafafa;
font-family: sans-serif;
}
+
+h2 {
+ font-weight: 400;
+ color: #444;
+}
+
+a {
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"] {
+ height: 2rem;
+}
+
+.main-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ min-height: 100vh;
+}
+
+.navigation {
+ height: 2rem;
+ border-bottom: 1px solid #999;
+}
diff --git a/src/frontend/utils/handle_login.js b/src/frontend/utils/handle_login.js
new file mode 100644
index 0000000..0283133
--- /dev/null
+++ b/src/frontend/utils/handle_login.js
@@ -0,0 +1,15 @@
+import axios from "axios";
+module.exports = ({ body }) =>
+ axios
+ .post("/api/v1/sessions", body)
+ .then(() => {
+ alert(`Zalogowano!`);
+ })
+ .catch(e => {
+ console.error(e);
+ const msg =
+ e.response.data.type === "invalid_credentials"
+ ? "Nieprawidłowy login lub hasło."
+ : "Wystąpił błąd.";
+ alert(msg);
+ });

File Metadata

Mime Type
text/x-diff
Expires
Sat, Nov 8, 06:53 (1 d, 16 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1034247
Default Alt Text
(5 KB)

Event Timeline