Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#841 [Redesign] Login Page #842

Merged
merged 12 commits into from
Oct 25, 2024
Merged

#841 [Redesign] Login Page #842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4e6a9a7
login desktop styles updated
Lvyshnevska Oct 19, 2024
d222d97
console log removed
Lvyshnevska Oct 19, 2024
cd3c441
main block sizes
Lvyshnevska Oct 20, 2024
8d310c1
media query updated
Lvyshnevska Oct 21, 2024
cd309d0
redundant styles removed
Lvyshnevska Oct 21, 2024
dd4d46c
login header font updated
Lvyshnevska Oct 21, 2024
d6e6e07
media removed from global, vars updated without -new
Lvyshnevska Oct 22, 2024
8a472f0
media, styles updated
Lvyshnevska Oct 22, 2024
2b2aa6d
media query removed
Lvyshnevska Oct 22, 2024
8a2fcac
padding for auth page
Lvyshnevska Oct 22, 2024
2bd086f
background color renamed
Lvyshnevska Oct 23, 2024
d7bdd2d
small components moved to login page component, styles upd
Lvyshnevska Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions FrontEnd/src/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
--about-as-main-background: #0B6C61;
--star-background: #FFD800;
--hint-background: #25292C;
--light-seashell-background: #F9F5EC;

/* text color*/
--main-text-color: #292E32;
Expand All @@ -44,14 +45,16 @@
--delete-text-color: #F15831;
--notification-text-color: #F34444;
--footer-dark-text-color: #A0ABC0;
--link-text-color: #000000;
--error-text-color: #F15831;

/* button color*/
--main-button-color: #1F9A7C;
--button-color-hover: #0b6c61 ;
--button-color-hover: #0b6c61;
--light-button-color: #FFFFFF;

/* fonts */
--font-main: 'Inter', sans-serif;
--font-main: 'Geologica', sans-serif;
--font-messages: 'Roboto', sans-serif;
--font-error: 'Roboto', sans-serif;
--font-logo: 'Geologica', sans-serif;
Expand Down Expand Up @@ -111,7 +114,7 @@
--character-title-85: rgba(0, 0, 0, 0.85);

--wf-base-white: #FFF;

--profile-min-height-block: calc(100vh - 565px);
--min-height-block-main: calc(100vh - 305px);
--company-card-color: #FFF;
Expand Down
19 changes: 0 additions & 19 deletions FrontEnd/src/pages/Authorization/AuthorizationPage.jsx
View file
Open in desktop

This file was deleted.

30 changes: 0 additions & 30 deletions FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions FrontEnd/src/pages/Authorization/EyeVisible.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ const EyeVisible = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M7.00008 3.52734C4.7948 3.52734 3.18015 4.6457 2.04129 7C3.18015 9.3543 4.7948 10.4727 7.00008 10.4727C9.20672 10.4727 10.8214 9.3543 11.9589 7C10.82 4.6457 9.20535 3.52734 7.00008 3.52734ZM6.94539 9.40625C5.61648 9.40625 4.53914 8.32891 4.53914 7C4.53914 5.67109 5.61648 4.59375 6.94539 4.59375C8.2743 4.59375 9.35164 5.67109 9.35164 7C9.35164 8.32891 8.2743 9.40625 6.94539 9.40625Z" fill="white"/>
<path d="M12.8817 6.64727C11.5856 3.91699 9.6264 2.54297 7.00003 2.54297C4.3723 2.54297 2.41449 3.91699 1.11839 6.64863C1.06641 6.75871 1.03944 6.87894 1.03944 7.00068C1.03944 7.12242 1.06641 7.24265 1.11839 7.35273C2.41449 10.083 4.37367 11.457 7.00003 11.457C9.62777 11.457 11.5856 10.083 12.8817 7.35137C12.9869 7.12988 12.9869 6.87285 12.8817 6.64727ZM7.00003 10.4727C4.79476 10.4727 3.18011 9.3543 2.04124 7C3.18011 4.6457 4.79476 3.52734 7.00003 3.52734C9.20531 3.52734 10.82 4.6457 11.9588 7C10.8213 9.3543 9.20667 10.4727 7.00003 10.4727Z" fill="#1F9A7C"/>
<path d="M6.94531 4.59375C5.61641 4.59375 4.53906 5.67109 4.53906 7C4.53906 8.32891 5.61641 9.40625 6.94531 9.40625C8.27422 9.40625 9.35156 8.32891 9.35156 7C9.35156 5.67109 8.27422 4.59375 6.94531 4.59375ZM6.94531 8.53125C6.09903 8.53125 5.41406 7.84629 5.41406 7C5.41406 6.15371 6.09903 5.46875 6.94531 5.46875C7.7916 5.46875 8.47656 6.15371 8.47656 7C8.47656 7.84629 7.7916 8.53125 6.94531 8.53125Z" fill="#1F9A7C"/>
<path d="M12.8817 6.64727C11.5856 3.91699 9.6264 2.54297 7.00003 2.54297C4.3723 2.54297 2.41449 3.91699 1.11839 6.64863C1.06641 6.75871 1.03944 6.87894 1.03944 7.00068C1.03944 7.12242 1.06641 7.24265 1.11839 7.35273C2.41449 10.083 4.37367 11.457 7.00003 11.457C9.62777 11.457 11.5856 10.083 12.8817 7.35137C12.9869 7.12988 12.9869 6.87285 12.8817 6.64727ZM7.00003 10.4727C4.79476 10.4727 3.18011 9.3543 2.04124 7C3.18011 4.6457 4.79476 3.52734 7.00003 3.52734C9.20531 3.52734 10.82 4.6457 11.9588 7C10.8213 9.3543 9.20667 10.4727 7.00003 10.4727Z" fill="#B4D27A"/>
<path d="M6.94531 4.59375C5.61641 4.59375 4.53906 5.67109 4.53906 7C4.53906 8.32891 5.61641 9.40625 6.94531 9.40625C8.27422 9.40625 9.35156 8.32891 9.35156 7C9.35156 5.67109 8.27422 4.59375 6.94531 4.59375ZM6.94531 8.53125C6.09903 8.53125 5.41406 7.84629 5.41406 7C5.41406 6.15371 6.09903 5.46875 6.94531 5.46875C7.7916 5.46875 8.47656 6.15371 8.47656 7C8.47656 7.84629 7.7916 8.53125 6.94531 8.53125Z" fill="#B4D27A"/>
</svg>
);
};
Expand Down
12 changes: 0 additions & 12 deletions FrontEnd/src/pages/Authorization/Login.jsx
View file
Open in desktop

This file was deleted.

8 changes: 0 additions & 8 deletions FrontEnd/src/pages/Authorization/Login.module.css
View file
Open in desktop

This file was deleted.

212 changes: 111 additions & 101 deletions FrontEnd/src/pages/Authorization/LoginPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useNavigate, Link } from 'react-router-dom';
import axios from 'axios';
import { useStopwatch } from 'react-timer-hook';
import { toast } from 'react-toastify';
import classNames from 'classnames';

import validator from 'validator';
import EyeVisible from './EyeVisible';
Expand All @@ -29,7 +30,7 @@ const LoginContent = () => {

const errorMessageTemplates = {
required: 'Обов’язкове поле',
email: 'Електронна пошта не відповідає вимогам',
email: 'Введіть адресу електронної пошти у форматі name@example.com',
unspecifiedError: 'Електронна пошта чи пароль вказані некоректно',
rateError: 'Небезпечні дії на сторінці. Сторінка заблокована на 10 хвилин',
blockedUserError: 'Профіль компанії було заблоковано внаслідок розміщення неприйнятного контенту',
Expand Down Expand Up @@ -139,112 +140,121 @@ const LoginContent = () => {
useEffect(() => {}, [disabled]);

return (
<div className={classes['login-basic']}>
<div className={classes['login-header']}>
<p>Вхід на платформу</p>
</div>
<form onSubmit={handleSubmit(onSubmit)} noValidate>
<div className={classes['login-content']}>
<div className={classes['login-content__items']}>
<div className={classes['login-content__item']}>
<label
className={`${
errors.email && getValues('email').trim().length === 0
? classes['error-dot']
: ''
}`}
htmlFor="email"
>
Електронна пошта
</label>
<div className={classes['login-content__email']}>
<input
id="email"
type="email"
autoComplete="username"
placeholder="Електронна пошта"
{...register('email', {
required: errorMessageTemplates.required,
validate: (value) =>
validator.isEmail(value) || errorMessageTemplates.email,
})}
/>
<div className={classes['login-page']}>
<div className={classes.login}>
<div className={classes['login-basic']}>
<div className={classes['login-header']}>
<p>Вхід на платформу</p>
</div>
<form onSubmit={handleSubmit(onSubmit)} className={classes['login-form']} noValidate>
<div className={classes['login-content']}>
<div className={classes['login-content__items']}>
<div className={classes['login-content__item']}>
<label
className={`${
errors.email && getValues('email').trim().length === 0
? classes['error-dot']
: ''
}`}
htmlFor="email"
>
Електронна пошта
</label>
<div className={classNames(
classes['login-content__email'],
{ [classes['login-content__email-error']]: errors.email }
)}>
<input
id="email"
type="email"
autoComplete="username"
placeholder="Введіть свою електронну пошту"
{...register('email', {
required: errorMessageTemplates.required,
validate: (value) =>
validator.isEmail(value) || errorMessageTemplates.email,
})}
/>
</div>
<span className={classes['error-message']}>
{errors.email && errors.email.message}
{errors.required && errors.required.message}
</span>
</div>
<div className={classes['login-content__item']}>
<label
className={`${
errors.password && getValues('password').trim().length === 0
? classes['error-dot']
: ''
}`}
htmlFor="password"
>
Пароль
</label>
<div className={classNames(
classes['login-content__password'],
{ [classes['login-content__password-error']]: errors.password },
{ [classes['login-content__show-password']]: showPassword }
)}>
<div className={classes['login-content__password__wrapper']}>
<input
id="password"
type={showPassword ? 'text' : 'password'}
autoComplete="current-password"
placeholder="Введіть пароль"
{...register('password', {
required: errorMessageTemplates.required,
})}
/>
<span
className={classes['password-visibility']}
onClick={togglePassword}
>
{!showPassword ? <EyeInvisible /> : <EyeVisible />}
</span>
</div>
</div>
<div className={classes['forget-password__wrapper']}>
<span className={classes['error-message']}>
{errors.password && errors.password.message}
{errors.required && errors.required.message}
{errors.unspecifiedError && errors.unspecifiedError.message}
</span>
<Link to="/reset-password" className={classes['forget-password']}>
Забули пароль?
</Link>
</div>
</div>
</div>
</div>
<span className={classes['error-message']}>
{errors.email && errors.email.message}
{errors.required && errors.required.message}
</span>
</div>
<div className={classes['login-content__item']}>
<label
className={`${
errors.password && getValues('password').trim().length === 0
? classes['error-dot']
: ''
}`}
htmlFor="password"
>
Пароль
</label>
<div className={classes['login-content__password']}>
<div className={classes['login-content__password__wrapper']}>
<input
id="password"
type={showPassword ? 'text' : 'password'}
autoComplete="current-password"
placeholder="Пароль"
{...register('password', {
required: errorMessageTemplates.required,
})}
/>
<span
className={classes['password-visibility']}
onClick={togglePassword}
<div className={classes['login-footer']}>
<div className={classes['login-footer-buttons']}>
<button
disabled={disabled}
type="submit"
className={
disabled
? classes['login-footer-buttons__signin__disabled']
: classes['login-footer-buttons__signin']
}
>
{!showPassword ? <EyeInvisible /> : <EyeVisible />}
</span>
Увійти
</button>
</div>
</div>
<span className={classes['error-message']}>
{errors.password && errors.password.message}
{errors.required && errors.required.message}
{errors.unspecifiedError && errors.unspecifiedError.message}
</span>
</div>
<Link to="/reset-password" className={classes['forget-password']}>
Забули пароль?
</Link>
</div>
</div>
<div className={classes['login-footer']}>
<div className={classes['login-footer-buttons']}>
<Link to="/">
<button
type="button"
className={classes['login-footer-buttons__main']}
>
Головна
</button>
</Link>
<button
disabled={disabled}
type="submit"
className={
disabled
? classes['login-footer-buttons__signin__disabled']
: classes['login-footer-buttons__signin']
}
>
Увійти
</button>
<ReCAPTCHA
ref={reCaptchaRef}
sitekey={process.env.REACT_APP_RECAPTCHA_V2_SITE_KEY}
size="invisible"
/>
</form>
</div>
<div className={classes['login-signup-invitation']}>
<p>Вперше на нашому сайті?</p>
<Link to="/sign-up">Зареєструйтесь</Link>
</div>
<ReCAPTCHA
ref={reCaptchaRef}
sitekey={process.env.REACT_APP_RECAPTCHA_V2_SITE_KEY}
size="invisible"
/>
</form>
</div>
</div>
);
};
Expand Down
Loading
Loading