From bf6617d989bfdd43cf91af4df0220f242fec8e9e Mon Sep 17 00:00:00 2001 From: A-Wodnicki Date: Tue, 16 May 2023 21:19:49 +0200 Subject: [PATCH 1/7] init LoginForm --- ui/package-lock.json | 40 ++++++++- ui/package.json | 7 +- ui/src/components/LoginForm/LoginForm.jsx | 88 +++++++++++++++++++ .../LoginForm/LoginForm.module.scss | 46 ++++++++++ .../LoginForm/LoginForm.stories.jsx | 15 ++++ 5 files changed, 192 insertions(+), 4 deletions(-) create mode 100644 ui/src/components/LoginForm/LoginForm.jsx create mode 100644 ui/src/components/LoginForm/LoginForm.module.scss create mode 100644 ui/src/components/LoginForm/LoginForm.stories.jsx diff --git a/ui/package-lock.json b/ui/package-lock.json index 1bcd290..dcdb639 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -14,7 +14,8 @@ "react-dom": "^18.2.0", "react-icons": "^4.7.1", "react-leaflet": "^4.2.0", - "stylelint-config-prettier-scss": "^0.0.1" + "stylelint-config-prettier-scss": "^0.0.1", + "yup": "^1.1.1" }, "devDependencies": { "@babel/core": "^7.21.0", @@ -15953,6 +15954,11 @@ "react-is": "^16.13.1" } }, + "node_modules/property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==" + }, "node_modules/property-information": { "version": "5.6.0", "dev": true, @@ -18890,6 +18896,11 @@ "node": ">=0.6.0" } }, + "node_modules/tiny-case": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", + "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==" + }, "node_modules/tmpl": { "version": "1.0.5", "dev": true, @@ -18962,6 +18973,11 @@ "node": ">=0.6" } }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" + }, "node_modules/tr46": { "version": "0.0.3", "dev": true, @@ -20540,6 +20556,28 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/yup": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/yup/-/yup-1.1.1.tgz", + "integrity": "sha512-KfCGHdAErqFZWA5tZf7upSUnGKuTOnsI3hUsLr7fgVtx+DK04NPV01A68/FslI4t3s/ZWpvXJmgXhd7q6ICnag==", + "dependencies": { + "property-expr": "^2.0.5", + "tiny-case": "^1.0.3", + "toposort": "^2.0.2", + "type-fest": "^2.19.0" + } + }, + "node_modules/yup/node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/zwitch": { "version": "1.0.5", "dev": true, diff --git a/ui/package.json b/ui/package.json index c493781..262c23a 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/components/LoginForm/LoginForm.jsx b/ui/src/components/LoginForm/LoginForm.jsx new file mode 100644 index 0000000..cc8ed7e --- /dev/null +++ b/ui/src/components/LoginForm/LoginForm.jsx @@ -0,0 +1,88 @@ +import styles from './LoginForm.module.scss' +import Button from '../Button/Button' +import { 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({ + emailOrNick: '', + password: '' + }) + + const schema = object({ + emailOrNick: string().required("Pole 'email/nick' jest wymagane."), + password: string().required("Pole 'hasło' jest wymagane.") + }) + + const handleChange = (e) => { + const { name, value } = e.target + setInputs((prev) => ({ ...prev, [name]: value })) + setErrors((prev) => ({ ...prev, [name]: '' })) + } + + const handleSubmit = (e) => { + e.preventDefault() + schema + .validate(inputs, { abortEarly: false }) + .then(() => { + console.log('ok') + }) + .catch((err) => { + const newErrors = {} + err.inner.forEach((error) => { + newErrors[error.path] = error.message + }) + setErrors(newErrors) + }) + } + + return ( +
+
+ logo +
+ Nie masz konta? +
+
+
+
Logowanie
+ +
+ + + {errors.emailOrNick && {errors.emailOrNick}} +
+ +
+ + + {errors.password && {errors.password}} +
+ + + Zapomniałeś hasła? + + + +
+
+ ) +} diff --git a/ui/src/components/LoginForm/LoginForm.module.scss b/ui/src/components/LoginForm/LoginForm.module.scss new file mode 100644 index 0000000..c07fd0a --- /dev/null +++ b/ui/src/components/LoginForm/LoginForm.module.scss @@ -0,0 +1,46 @@ +@use '../../assets/styles/abstracts' as *; + +.view { + height: 100vh; + display: grid; + grid-template-rows: auto 1fr; + align-items: center; + background-color: $color-bg; + span, + label, + header, + a { + color: white; + } +} + +.viewHeader { + display: flex; + justify-content: space-between; + padding: 1em; + img { + display: block; + max-width: 25%; + } +} + +.form { + padding: 1em; + border: solid $color-tone-shift; + text-align: center; + justify-self: center; + background-color: $color-primary-dark; +} + +.inputGroup { + display: grid; +} + +.inputGroup, +.passwordReset { + text-align: left; +} + +.passwordReset { + display: block; +} diff --git a/ui/src/components/LoginForm/LoginForm.stories.jsx b/ui/src/components/LoginForm/LoginForm.stories.jsx new file mode 100644 index 0000000..077c541 --- /dev/null +++ b/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) => + +export const Primary = Template.bind({}) +Primary.storyName = 'LoginForm' From 881d2a9ea9cb5c4a1c722dcc906d0a29264694bc Mon Sep 17 00:00:00 2001 From: A-Wodnicki <116439661+A-Wodnicki@users.noreply.github.com> Date: Thu, 18 May 2023 21:43:26 +0200 Subject: [PATCH 2/7] LoginForm validation errors handling --- ui/src/components/LoginForm/LoginForm.jsx | 70 +++++++++++++------ .../LoginForm/LoginForm.module.scss | 26 ++++--- 2 files changed, 62 insertions(+), 34 deletions(-) diff --git a/ui/src/components/LoginForm/LoginForm.jsx b/ui/src/components/LoginForm/LoginForm.jsx index cc8ed7e..0d28853 100644 --- a/ui/src/components/LoginForm/LoginForm.jsx +++ b/ui/src/components/LoginForm/LoginForm.jsx @@ -1,8 +1,8 @@ import styles from './LoginForm.module.scss' import Button from '../Button/Button' -import { useState } from 'react' +import { useRef, useState } from 'react' import { object, string } from 'yup' -import logo from '../../assets/images/logo/svgs/logo_white.svg' +import logo from '../../assets/images/logo/svgs/logo_black.svg' export default function LoginForm() { const [inputs, setInputs] = useState({ @@ -10,35 +10,46 @@ export default function LoginForm() { password: '' }) - const [errors, setErrors] = 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 = (e) => { - const { name, value } = e.target + const handleChange = (event) => { + const { name, value } = event.target setInputs((prev) => ({ ...prev, [name]: value })) - setErrors((prev) => ({ ...prev, [name]: '' })) + if (errors[name]) { + setErrors((prev) => { + const newErrors = { ...prev } + delete newErrors[name] + return newErrors + }) + } + setLoginError(false) } - const handleSubmit = (e) => { - e.preventDefault() + 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((err) => { + .catch((error) => { const newErrors = {} - err.inner.forEach((error) => { + error.inner.forEach((error) => { newErrors[error.path] = error.message }) setErrors(newErrors) + loginForm.current[Object.keys(newErrors)[0]]?.focus() }) } @@ -47,22 +58,33 @@ export default function LoginForm() {
logo
- Nie masz konta? + Nie masz konta?{' '} +
-
+
Logowanie
- + - {errors.emailOrNick && {errors.emailOrNick}} + {errors.emailOrNick && ( + {errors.emailOrNick} + )}
@@ -73,15 +95,23 @@ export default function LoginForm() { id="password" name="password" onChange={handleChange} + className={errors.password && styles.errorInput} /> - {errors.password && {errors.password}} + {errors.password && ( + {errors.password} + )}
- + {/* TODO: change view to password reset */} Zapomniałeś hasła? + {loginError && ( + + Nieprawidłowy email/nick lub hasło. + + )} - +
) diff --git a/ui/src/components/LoginForm/LoginForm.module.scss b/ui/src/components/LoginForm/LoginForm.module.scss index c07fd0a..41cfc10 100644 --- a/ui/src/components/LoginForm/LoginForm.module.scss +++ b/ui/src/components/LoginForm/LoginForm.module.scss @@ -5,13 +5,6 @@ display: grid; grid-template-rows: auto 1fr; align-items: center; - background-color: $color-bg; - span, - label, - header, - a { - color: white; - } } .viewHeader { @@ -26,10 +19,19 @@ .form { padding: 1em; - border: solid $color-tone-shift; + border: solid; + display: grid; text-align: center; - justify-self: center; - background-color: $color-primary-dark; + margin-inline: auto; +} + +.error { + &Span { + color: red; + } + &Input { + outline: solid red; + } } .inputGroup { @@ -40,7 +42,3 @@ .passwordReset { text-align: left; } - -.passwordReset { - display: block; -} From 9841b0d8c60259c29510cdf32afef2201889a7e4 Mon Sep 17 00:00:00 2001 From: A-Wodnicki Date: Tue, 1 Aug 2023 17:10:44 +0200 Subject: [PATCH 3/7] Login view styling --- ui/src/components/LoginForm/LoginForm.jsx | 36 ++++--- .../LoginForm/LoginForm.module.scss | 93 ++++++++++++++++--- 2 files changed, 100 insertions(+), 29 deletions(-) diff --git a/ui/src/components/LoginForm/LoginForm.jsx b/ui/src/components/LoginForm/LoginForm.jsx index 0d28853..5196d6b 100644 --- a/ui/src/components/LoginForm/LoginForm.jsx +++ b/ui/src/components/LoginForm/LoginForm.jsx @@ -2,7 +2,7 @@ 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_black.svg' +import logo from '../../assets/images/logo/svgs/logo_white.svg' export default function LoginForm() { const [inputs, setInputs] = useState({ @@ -17,8 +17,8 @@ export default function LoginForm() { const loginForm = useRef(null) const schema = object({ - emailOrNick: string().required("Pole 'email/nick' jest wymagane."), - password: string().required("Pole 'hasło' jest wymagane.") + emailOrNick: string().required('Pole "Email/nick" jest wymagane.'), + password: string().required('Pole "Hasło" jest wymagane.') }) const handleChange = (event) => { @@ -58,8 +58,9 @@ export default function LoginForm() {
logo
- Nie masz konta?{' '} +

Nie masz jeszcze konta?

-
Logowanie
- +
+

Zaloguj się do swojego konta

+
- +
- + @@ -103,15 +107,17 @@ export default function LoginForm() {
{/* TODO: change view to password reset */} - Zapomniałeś hasła? + Zapomniałem hasła {loginError && ( - - Nieprawidłowy email/nick lub hasło. - + Nie udało się zalogować )} - - +
) diff --git a/ui/src/components/LoginForm/LoginForm.module.scss b/ui/src/components/LoginForm/LoginForm.module.scss index 41cfc10..bc83a9e 100644 --- a/ui/src/components/LoginForm/LoginForm.module.scss +++ b/ui/src/components/LoginForm/LoginForm.module.scss @@ -1,36 +1,73 @@ @use '../../assets/styles/abstracts' as *; +$form-gap: 1.875rem; + .view { - height: 100vh; + 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; - padding: 1em; - img { - display: block; - max-width: 25%; - } + align-items: center; } .form { - padding: 1em; - border: solid; + grid-column: 1; + justify-self: center; + min-width: 34rem; display: grid; + gap: $form-gap; text-align: center; - margin-inline: auto; + 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; + } } -.error { - &Span { - color: red; +h3 { + font-weight: 600; + font-size: calc($font-size-h3 * 1px); + .viewHeader & { + display: inline; } - &Input { - outline: solid red; + .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%); } } @@ -42,3 +79,31 @@ .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; +} From d383515fbe4943715cf96cef4eac2f12a4f30fce Mon Sep 17 00:00:00 2001 From: A-Wodnicki Date: Tue, 22 Aug 2023 13:36:50 +0200 Subject: [PATCH 4/7] Add logo with accent color --- .../assets/images/logo/pngs/logo_accent.png | Bin 0 -> 5666 bytes .../assets/images/logo/svgs/logo_accent.svg | 20 ++++++++++++++++++ ui/src/components/LoginForm/LoginForm.jsx | 4 ++-- .../LoginForm/LoginForm.module.scss | 2 +- 4 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 ui/src/assets/images/logo/pngs/logo_accent.png create mode 100644 ui/src/assets/images/logo/svgs/logo_accent.svg diff --git a/ui/src/assets/images/logo/pngs/logo_accent.png b/ui/src/assets/images/logo/pngs/logo_accent.png new file mode 100644 index 0000000000000000000000000000000000000000..fc3170ec51a2f8fa4f25479cedec82c0f9da737c GIT binary patch literal 5666 zcmV+-7TxKIP)g=B zT4fWu{L$Ti7*?%>fZYtLw5V#OI2B=8Z3RP-Fu#|GxqcQ zao_Ws@w0tC(#^!r*Y7?*`+j}Sx#!-?pbdEX;rr8^nfn-HY2cv4vcQYt+*82WwNhz$&4%y%D6>t&<#s`zgjRuo=LmdxERO}<|Qf*@K>Y=z1aDYJBR`79`3W;Ect z|MAWDrhp)bmZCvSX|YHlBPPI+@xAF0APAzR#8Rl9e&qgKi$zMp^h9d$5D)~>QetXR z@qG{*Sca@Bf@m#Ch#5G-2b}93Rc1uN5xNkz91pRb0^gg9YxW1zrsUy99a8%;LEcFtTXr56qFq|HskT48l>qF8%u zcF`Q0EAfU-oYdINNWZqMF{H2O&GdrNm>Q8vKykP)QK&t(P==A><M?(1ccAQdOfFQaE4JZGG6)6Ne zBN2?=WcYigiO*^rlVS;?i_pqODYQr-{cUOywG!bjLo*~8Z|XB6h;{=<{nUcGE)0@T z1qR(+t-0IQ)MrKz?M72VHQcW?+u^zvymw77LKCHlZlbB)vbv8{DlDS|&84sP= zNP!cXugr0nzHY)onFNas>pE*%UhU z@r9Cp@Tc#c1%l`jlK6%H(c@{{JfZ7ALHcZdREX0p@cF_h%nPxqa(Z?n+_~ygh#Qz7 zN+Lyc8?oEhZ#kJR4Z?}9x4?yk5jc5mOPw&;IW@N-mO@1k-AG3Z6}oe1HJ!e`0Zs~m znl2A2zZQk;!3`e(K@hE{qlBt9&h(l1ds@f*@K;+X)p~P3Xp1?p#frX*g-ZL+j_^zSUpD{UeL8rMGMyzglK+VzviP z&ZgjppAEse1@*U#aViojf@nRl7b=xF)3-N&4d2~*6;>x3hc5BhuHgl%e0%dXc>Rk3 z_=j_=l>`f|G=d;nPb`HBh3S+KCQG0^;!J2o{rI;oSt6v$qZ_ZopRApS$3I>JKfBcD zS$EFp5$@y&Z0?-_qW$2Ur^TNKL@6@HUIU_SiG@(1)%44m9f9IZTl>oJ_T66!7tes8 zR0QrT_}l**h1V~7j|8Gvl2ElDLZouyPqyaqxDczI5HaGsxCw3T`t?(yownTlJI=(z zqT&qx?aSW{^pYRkHXTZ&YI)`MX*e%jz~fhXUF)ED{=w+4foMDS*&dGxQQ0FzfZ^}NC-nPK_-vj39DLa6!^i?Ds*q7{cy;V(DN z26Fejc;&Xsu=Bq+xjv5;9$I{Hm`=0Oh>ne4RP6A$Q&Ae~J0yNNr(}6s2tWa1g1m0s z;VB(Dj50HxNHUgFsmrtDqbz?|NmR<3c_dl+%)RSzUJ!qF!!i?_1&}uPPAk{_I}tdK ziYru3HXg&L3Nvu$~GD5(L(9JM4@hO3+RBt7Tl||LBE&A5` z<{EEN!QeQ$a?hL|wuI`j|6K=rPOKN=<-TkUx{=kqD<{zX>jtD1^(uG^R1qp2-;Fd> zEG!*b2#S&@yIF-%8ude1x|IF;yj{MC9W(`iXC4(#!_pw)S^R0tY|mqxWTkN zUQbutJ|24a^yMN}c~o}|p7#x?-!G5QKjyjOhh_#HB* zI2YD0H(yKTUnsbpBUVDSS;3<6!pprwYpWSLeA$;n4#zU8?vkj7VuhoBN1?vMr7`K! zp>vPPx^<@kH85bGt9e`$<<=(Z-9QQlT94RSM_lR@@x0Brl2SymjSP6W*`nTr_>+%V zutw1Ra}x#8)?Oab;&dobV)Ssl4Eza(!o;h~-c`?UiIw<%V8dEwG5>5)xOll__PK_8 z8>?+kb_{&s8>c$&G4;hOWx+34Eco?(SW6PM;mjM1SS>%izVyYu+)a>as5#h~4GG zAaou=AYOM^#;|J3euz0zq|n0C1H4R!Mhnufog6f}$SP#TYhQ(^;KI_)jyGHbOK6e& zs7R4I8d~%ijF+D~Q1^agCsbbfR4;yK2=0Gy4S0dmYA`PfV@@bgC|rJ1ZE$sk^9%l4 ztDo$!GzHl~b=%<_bP>`j!dRMDvD7wX(=XFpN9cj5b#Q_h)QZlVB|3BeS zFC(q7C=fBDp+-^SEDaIRlt@)Cg+pdOd*H_Vjh{v35eK?^dlJ|k;(O8SEh;Z;pMej4 z|Nr6Cy`Nhm) zcc<^DJGS+vB`b>EF%0|{7aHw3!$+<_w^X13SkCHP!EmO{0o|6+qs z?fRXiU^mlO0oyhN{OmPo7X2@7ffq-5ZahYzs*2X}|0%(_FAVtP%yrn@Hw||VehN4D zsn1F5K&q3II|aKH5p>-u6pXY&J$s!=PzMFAR;YAz|AJY*Shvw-jnrkwo5HH{N=#vF3@yKS3e~_D4ae@@Q9mlj9@qr@#~(v8uzQ3H zStC-&@E{YTiz%yo=g+H0*TBcWxC+PqrQ?=+=^8iB1>N>|3WDKVUk+H<$;d_hRB#dr z9Rge{<9w2{1{W9gLAOLh^GG3KQ1G#MmZ~zo%`+WNh>j>nAtbW6*`h>vWKJ>3eo=`^*-QK^jWa8OHyh>#SdCd*(t=V5tROTt2$h$>~F z85T_AN_>S%SXBRUsq%lj+gGI-t15^!gZ}Ld@5`x42P`H5qbpcdhqJB_oYH@DCDjf=band!9b*LmK22LlC`9gMA zqTo=q=x_`>y^2t!Av#c~YOi<9WfHX;zBx@UaV&hVD=Jhelf72f_+i!hA}$qVWYWTb zR3Ryb@!Vl)o_}@^%RXnlcVXq_z&Trg={h(}^yHr3AG?IlT5#DH#Le}qqTRc}H(R|5 z#IArf;5?9l3c#!K+Rg_+%;n%!lRtf$A!13gjI87WrgbAK1D+I`)cAP11uj`dO zX%|P8A^SrRA<}Xx*bb-tRx6PAB*=thySsz0Q+Y4gku$bZgs^bM^|(YELp4d6ftoN4 z1=o&^afJ!scpbu3w5+dK3)RgcPW4B>{k1jf=LZT92G+gM9=jdFaN(1VU5Cm-PUUcN z_0Xz1Du2n-Rnd~0KcJiR1g?<|&Yjk8sTik#J+_szTN|=%Y(v$834+sgWJP-)+J#fT z?+gT7X+es$-R;WArD7WLtYkYlQ95ILN-3k=6>ccKR)mrQyM0x9@-I$6RD&m`@lf@@ zu@)-ivF#r!*TulP8({+IRjys?$kc>7Jm#iAcZl&m=d?*F$ zi2OmocJMvhMY#y!CPUw#vRIzNAPEaER7lcX+|QaF*%UumwNq_kFI1bp5nv*)46NG; z6F{$}6G!}C0oX_sr+4~jx1 zM^SN-v6D-sLq(V};5?VI2tE^~m8r}fbbng3mC8OJ-f9DkhrLuxn2WnZiq#AUKAy^b zukJe(d!br;%lbg|F|f{TmQ$DjdX+ASPt}2Lpj^ttOGNBoC(J=*X%ye2(3-Z2Q0crA z3e~H1mnC^rik0enEC$*L}py`7@?vtP7>LV?5mXi?}jRSHmv%~%~w#>pmXo_A~aBgJ~P z*Mjw{n^o+Q*HN`_it<_}Y;htKk`Y_Ge(mH%8`ZQBr*^7s;rsSHALGVHCL||75p@3+ za|b5e&u7-f6-_Iy(LItj~-8-fr$5EJ9pWDxsvzHpDm*a80hg1l>gNa#vu&mzl#9)uV*R&^pMsR^1;vE zhY#L)zu|bv;BfjY?~PDX2?pEOsijQ>;jdpg=0CbX5FJFUEvleyUo9Au;`&fiB87BI ze2O6AOsr#6J^j7mV?^iz-Z28r(hVbi1QB;)ZBbqL_)|FY(!W~&UwiX0W;uOF;m1CAz2?1Lp1Z$NPu{Gjx?||AG=)P@s z*@z!O#Fe%YDksq5!K`t6<~UkjC|oFDn}zjNwZwu#LPZeqpsj_<4NNJ(f&%ud!ct~? zt^0_@Pr$l0HGv@FMn?*j8+GoZ#LImoi;5uP0ekw9U1$1}OizgMzy1`1K2iK~n^cG@ zkE&ImfO)M!wUT*M*B3d=i+j0H=AvDIxiT+8nWqo_^u4n{5M4kLIOtVDxwcUGn-YC% zKnT{_A5K%d;G&ubblk4NvPp5M6|$>xaMESA@lIW!`|bgBq+6MWbBk z6~RZK2%;FS&b#PWbK zsNy9ODS~i9c?yjoH0r`tlf-HnK#@8>ZIG)+5H19s>v!>*X^lP+(SYtAi4;M26IiIw zvifX>I#yJWND+iTp;k}8nAPQ3asiv=D`B0M3?K-?htSKs%*@g7c{8BPhoh+kLHH9| zsL%x@t13L0ZBEt{L8yU36>6<(WQIlnLvyJ~k*Dc1L^pv#6?#_>w5rfDAcC<_YSNmD zXr~Z@Xcsi#%6qUmLa7SDnQ!)q8+j3`W<}Zc;=}`c1<%5f%m3bFhq=tImWqkzt`fftkB-m2X)^Xta0D7`BKQO z$%IH5i#_{+Ai9h?nRxQy`}SzKtu$k4sNYo46%M@k{Wssc)qecxZ|yn?l?@hMF~Lk9 zdh_Q^Z6Dn##vi>`PZ)_aUUizeH#N+N6HS@S%(d&iB8X=B4Yz!g3IN6ozW@LL07*qo IM6N<$f?e6j<^TWy literal 0 HcmV?d00001 diff --git a/ui/src/assets/images/logo/svgs/logo_accent.svg b/ui/src/assets/images/logo/svgs/logo_accent.svg new file mode 100644 index 0000000..78a189f --- /dev/null +++ b/ui/src/assets/images/logo/svgs/logo_accent.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/components/LoginForm/LoginForm.jsx b/ui/src/components/LoginForm/LoginForm.jsx index 5196d6b..357f365 100644 --- a/ui/src/components/LoginForm/LoginForm.jsx +++ b/ui/src/components/LoginForm/LoginForm.jsx @@ -2,7 +2,7 @@ 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' +import logo from '../../assets/images/logo/svgs/logo_accent.svg' export default function LoginForm() { const [inputs, setInputs] = useState({ @@ -56,7 +56,7 @@ export default function LoginForm() { return (
- logo + logo

Nie masz jeszcze konta?

From 8e6bbc3c634ea22eef8d92e5f8ed51e3de752664 Mon Sep 17 00:00:00 2001 From: A-Wodnicki Date: Tue, 22 Aug 2023 13:45:39 +0200 Subject: [PATCH 6/7] LoginForm: change input values storage from state to ref --- ui/src/components/LoginForm/LoginForm.jsx | 25 ++++++++++++++--------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/ui/src/components/LoginForm/LoginForm.jsx b/ui/src/components/LoginForm/LoginForm.jsx index 732b42d..81a3e5c 100644 --- a/ui/src/components/LoginForm/LoginForm.jsx +++ b/ui/src/components/LoginForm/LoginForm.jsx @@ -6,10 +6,8 @@ import logo from '../../assets/images/logo/svgs/logo_accent.svg' import classNames from 'classnames' export default function LoginForm() { - const [inputs, setInputs] = useState({ - emailOrNick: '', - password: '' - }) + const emailOrNickInput = useRef(null) + const passwordInput = useRef(null) const [errors, setErrors] = useState({}) @@ -23,8 +21,7 @@ export default function LoginForm() { }) const handleChange = (event) => { - const { name, value } = event.target - setInputs((prev) => ({ ...prev, [name]: value })) + const { name } = event.target if (errors[name]) { setErrors((prev) => { const newErrors = { ...prev } @@ -38,7 +35,15 @@ export default function LoginForm() { const handleSubmit = (event) => { event.preventDefault() schema - .validate(inputs, { abortEarly: false }) + .validate( + { + emailOrNick: emailOrNickInput.current.value, + password: passwordInput.current.value + }, + { + abortEarly: false + } + ) .then(() => { console.log('ok') // TODO: send data to server @@ -77,13 +82,13 @@ export default function LoginForm() {
{errors.emailOrNick && ( @@ -94,13 +99,13 @@ export default function LoginForm() {
{errors.password && ( {errors.password} From 8aa5a85dd894286a45c27d70783b787071d0caff Mon Sep 17 00:00:00 2001 From: A-Wodnicki Date: Tue, 22 Aug 2023 13:48:04 +0200 Subject: [PATCH 7/7] Fix LoginForm styling inconsistencies --- ui/src/components/LoginForm/LoginForm.jsx | 8 +++--- .../LoginForm/LoginForm.module.scss | 26 +++++++++---------- 2 files changed, 15 insertions(+), 19 deletions(-) diff --git a/ui/src/components/LoginForm/LoginForm.jsx b/ui/src/components/LoginForm/LoginForm.jsx index 81a3e5c..cdc38f1 100644 --- a/ui/src/components/LoginForm/LoginForm.jsx +++ b/ui/src/components/LoginForm/LoginForm.jsx @@ -64,9 +64,9 @@ export default function LoginForm() {
logo
-

Nie masz jeszcze konta?

+

Nie masz jeszcze konta?

-
-

Zaloguj się do swojego konta

-
+

Zaloguj się do swojego konta

45rem) { + @media screen and (height > 720px) { grid-row: 1 / -1; } } -h3 { +.header__level3 { font-weight: 600; font-size: calc($font-size-h3 * 1px); .viewHeader & { @@ -59,12 +60,12 @@ button.button { border-radius: $border-radius-md; padding: 0.5625rem 1.875rem; - .viewHeader & { + &.registerButton { font-size: calc($font-size-button-md * 1px); margin-left: 1.5rem; } - .form & { + &.submitButton { font-size: calc($font-size-button-lg * 1px); justify-self: center; min-width: calc(2 / 3 * 100%); @@ -73,6 +74,11 @@ button.button { .inputGroup { display: grid; + + input { + font-size: inherit; + padding: 0.8125rem 1.1875rem; + } } .inputGroup, @@ -91,10 +97,7 @@ button.button { } .passwordReset { - margin-top: -$form-gap; -} - -a { + margin-top: $password-reset-offset; text-decoration: none; color: $base-white; } @@ -102,8 +105,3 @@ a { .logo { max-width: 20rem; } - -input { - font-size: inherit; - padding: 0.8125rem 1.1875rem; -}