Frontend login form

ui/package.json

@@ -14,13 +14,14 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "leaflet": "^1.9.3",
     "classnames": "^2.3.2",
+    "leaflet": "^1.9.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-leaflet": "^4.2.0",
     "react-icons": "^4.7.1",
-    "stylelint-config-prettier-scss": "^0.0.1"
+    "react-leaflet": "^4.2.0",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "yup": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",

ui/src/components/LoginForm/LoginForm.jsx

@@ -0,0 +1,124 @@
+import styles from './LoginForm.module.scss'
+import Button from '../Button/Button'
+import { useRef, useState } from 'react'
+import { object, string } from 'yup'
+import logo from '../../assets/images/logo/svgs/logo_white.svg'
+
+export default function LoginForm() {
+  const [inputs, setInputs] = useState({
+    emailOrNick: '',
+    password: ''
+  })
+
+  const [errors, setErrors] = useState({})
+
+  const [loginError, setLoginError] = useState(false)
+
+  const loginForm = useRef(null)
+
+  const schema = object({
+    emailOrNick: string().required('Pole "Email/nick" jest wymagane.'),
+    password: string().required('Pole "Hasło" jest wymagane.')
+  })
+
+  const handleChange = (event) => {
+    const { name, value } = event.target
+    setInputs((prev) => ({ ...prev, [name]: value }))
+    if (errors[name]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev }
+        delete newErrors[name]
+        return newErrors
+      })
+    }
+    setLoginError(false)
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+    schema
+      .validate(inputs, { abortEarly: false })
+      .then(() => {
+        console.log('ok')
+        // TODO: send data to server
+        setLoginError(true) // if failed to login
+      })
+      .catch((error) => {
+        const newErrors = {}
+        error.inner.forEach((error) => {
+          newErrors[error.path] = error.message
+        })
+        setErrors(newErrors)
+        loginForm.current[Object.keys(newErrors)[0]]?.focus()
+      })
+  }
+
+  return (
+    <div className={styles.view}>
+      <header className={styles.viewHeader}>
+        <img src={logo} alt="logo" />
+        <div>
+          <h3>Nie masz jeszcze konta?</h3>
+          <Button
+            style={styles.button}
+            onClick={() => {
+              // TODO: change view to register
+            }}
+          >
+            Zarejestruj się
+          </Button>
+        </div>
+      </header>
+      <form className={styles.form} ref={loginForm} onSubmit={handleSubmit}>
+        <header>
+          <h3>Zaloguj się do swojego konta</h3>
+        </header>
+        <div className={styles.inputGroup}>
+          <label htmlFor="emailOrNick">Email/nick</label>
+          <input
+            value={inputs.emailOrNick}
+            type="text"
+            id="emailOrNick"
+            placeholder="[email protected] / Gigachad"
+            name="emailOrNick"
+            onChange={handleChange}
+            className={errors.emailOrNick && styles.errorInput}
+            autoFocus
+          />
+          {errors.emailOrNick && (
+            <span className={styles.errorSpan}>{errors.emailOrNick}</span>
+          )}
+        </div>
+
+        <div className={styles.inputGroup}>
+          <label htmlFor="password">Hasło</label>
+          <input
+            value={inputs.password}
+            type="password"
+            id="password"
+            name="password"
+            placeholder="********"
+            onChange={handleChange}
+            className={errors.password && styles.errorInput}
+          />
+          {errors.password && (
+            <span className={styles.errorSpan}>{errors.password}</span>
+          )}
+        </div>
+        <a className={styles.passwordReset} href="#">
+          {/* TODO: change view to password reset */}
+          Zapomniałem hasła
+        </a>
+        {loginError && (
+          <span className={styles.errorSpan}>Nie udało się zalogować</span>
+        )}
+        <Button
+          style={styles.button}
+          onClick={() => loginForm.current.onSubmit}
+        >
+          Zaloguj się
+        </Button>
+      </form>
+    </div>
+  )
+}

ui/src/components/LoginForm/LoginForm.module.scss

@@ -0,0 +1,109 @@
+@use '../../assets/styles/abstracts' as *;
+
+$form-gap: 1.875rem;
+
+.view {
+  min-height: 100vh;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  align-items: center;
+  background-color: #282828;
+  color: $base-white;
+  font-size: calc($font-size-p * 1px);
+  font-weight: 600;
+  padding: 1rem 2rem;
+  gap: 1.875rem;
+}
+
+.viewHeader {
+  grid-row: 1;
+  grid-column: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form {
+  grid-column: 1;
+  justify-self: center;
+  min-width: 34rem;
+  display: grid;
+  gap: $form-gap;
+  text-align: center;
+  background-color: $alternative-a900;
+  border: 6px solid $primary-p700;
+  border-radius: 0.625rem;
+  padding: 2.875rem 5.4375rem;
+
+  @media screen and (height > 45rem) {
+    grid-row: 1 / -1;
+  }
+}
+
+h3 {
+  font-weight: 600;
+  font-size: calc($font-size-h3 * 1px);
+  .viewHeader & {
+    display: inline;
+  }
+  .form & {
+    margin-bottom: 1.875rem;
+  }
+}
+
+button.button {
+  background-color: $primary-p500;
+  color: $alternative-a900;
+  font-weight: 600;
+  border-radius: $border-radius-md;
+  padding: 0.5625rem 1.875rem;
+
+  .viewHeader & {
+    font-size: calc($font-size-button-md * 1px);
+    margin-left: 1.5rem;
+  }
+
+  .form & {
+    font-size: calc($font-size-button-lg * 1px);
+    justify-self: center;
+    min-width: calc(2 / 3 * 100%);
+  }
+}
+
+.inputGroup {
+  display: grid;
+}
+
+.inputGroup,
+.passwordReset {
+  text-align: left;
+}
+
+.error {
+  &Span {
+    color: $communicates-error;
+  }
+
+  &Input {
+    outline: solid $communicates-error;
+  }
+}
+
+.passwordReset {
+  margin-top: -$form-gap;
+}
+
+a {
+  text-decoration: none;
+  color: $base-white;
+}
+
+img {
+  max-width: 20rem;
+}
+
+input {
+  font-size: inherit;
+  padding: 0.8125rem 1.1875rem;
+}

ui/src/components/LoginForm/LoginForm.stories.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import LoginForm from './LoginForm'
+import '../../assets/styles/index.scss'
+
+export default {
+  component: LoginForm,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+const Template = (args) => <LoginForm {...args} />
+
+export const Primary = Template.bind({})
+Primary.storyName = 'LoginForm'