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/Button/Button.jsx

@@ -43,7 +43,7 @@ Button.propTypes = {
   /** color variant */
   variant: PropTypes.oneOf(buttonVariants),
   /** event that will be triggered when the button is clicked */
-  onClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
   /** content that will be displayed in the button */
   children: PropTypes.string.isRequired,
   /** additional css styles */

ui/src/components/LoginForm/LoginForm.jsx

@@ -0,0 +1,125 @@
+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_accent.svg'
+import classNames from 'classnames'
+
+export default function LoginForm() {
+  const emailOrNickInput = useRef(null)
+  const passwordInput = useRef(null)
+
+  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 } = event.target
+    if (errors[name]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev }
+        delete newErrors[name]
+        return newErrors
+      })
+    }
+    setLoginError(false)
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+    schema
+      .validate(
+        {
+          emailOrNick: emailOrNickInput.current.value,
+          password: passwordInput.current.value
+        },
+        {
+          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" className={styles.logo} />
+        <div>
+          <h3 className={styles.header__level3}>Nie masz jeszcze konta?</h3>
+          <Button
+            style={classNames(styles.button, styles.registerButton)}
+            onClick={() => {
+              // TODO: change view to register
+            }}
+          >
+            Zarejestruj się
+          </Button>
+        </div>
+      </header>
+      <form className={styles.form} ref={loginForm} onSubmit={handleSubmit}>
+        <h3 className={styles.header__level3}>Zaloguj się do swojego konta</h3>
+        <div className={styles.inputGroup}>
+          <label htmlFor="emailOrNick">Email/nick</label>
+          <input
+            type="text"
+            id="emailOrNick"
+            placeholder="[email protected] / Gigachad"
+            name="emailOrNick"
+            onChange={handleChange}
+            className={errors.emailOrNick && styles.errorInput}
+            ref={emailOrNickInput}
+            autoFocus
+          />
+          {errors.emailOrNick && (
+            <span className={styles.errorSpan}>{errors.emailOrNick}</span>
+          )}
+        </div>
+
+        <div className={styles.inputGroup}>
+          <label htmlFor="password">Hasło</label>
+          <input
+            type="password"
+            id="password"
+            placeholder="********"
+            name="password"
+            onChange={handleChange}
+            className={errors.password && styles.errorInput}
+            ref={passwordInput}
+          />
+          {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={classNames(styles.button, styles.submitButton)}>
+          Zaloguj się
+        </Button>
+      </form>
+    </div>
+  )
+}

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

@@ -0,0 +1,107 @@
+@use '../../assets/styles/abstracts' as *;
+
+$form-gap: 1.875rem;
+$password-reset-offset: -$form-gap;
+
+.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: 0.375rem solid $primary-p700;
+  border-radius: 0.625rem;
+  padding: 2.875rem 5.4375rem;
+
+  @media screen and (height > 720px) {
+    grid-row: 1 / -1;
+  }
+}
+
+.header__level3 {
+  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;
+
+  &.registerButton {
+    font-size: calc($font-size-button-md * 1px);
+    margin-left: 1.5rem;
+  }
+
+  &.submitButton {
+    font-size: calc($font-size-button-lg * 1px);
+    justify-self: center;
+    min-width: calc(2 / 3 * 100%);
+  }
+}
+
+.inputGroup {
+  display: grid;
+
+  input {
+    font-size: inherit;
+    padding: 0.8125rem 1.1875rem;
+  }
+}
+
+.inputGroup,
+.passwordReset {
+  text-align: left;
+}
+
+.error {
+  &Span {
+    color: $communicates-error;
+  }
+
+  &Input {
+    outline: solid $communicates-error;
+  }
+}
+
+.passwordReset {
+  margin-top: $password-reset-offset;
+  text-decoration: none;
+  color: $base-white;
+}
+
+.logo {
+  max-width: 20rem;
+}

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'