From aeda01e02f2341dd71ab5c2d2854129ad5e8acf8 Mon Sep 17 00:00:00 2001
From: Yehor Potebenko <hitechnic.uu68@gmail.com>
Date: Sun, 16 Apr 2023 13:52:38 +0200
Subject: [PATCH] test: check if markup works right
---
src/js/modules/login/_UI.mjs | 2 +-
src/js/modules/login/_validation.mjs | 72 ++++++++++++++++++++++++++++
src/pages/login/index.html | 36 +++++++++-----
src/pages/login/script.mjs | 8 ++++
src/pages/login/style.scss | 33 +++++++++----
5 files changed, 129 insertions(+), 22 deletions(-)
create mode 100644 src/js/modules/login/_validation.mjs
diff --git a/src/js/modules/login/_UI.mjs b/src/js/modules/login/_UI.mjs
index 8871ae2..72a20c4 100644
--- a/src/js/modules/login/_UI.mjs
+++ b/src/js/modules/login/_UI.mjs
@@ -3,7 +3,7 @@ const REGISTER_TEXT_CONTENT = 'Register';
const renderMailFormItem = () => `
<div class="form__item">
<label for="#" class="form__label"> E-Mail: </label>
- <input type="email" class="form__input" />
+ <input type="email" class="form__input email-input" required />
<div class="error"></div>
</div>
`;
diff --git a/src/js/modules/login/_validation.mjs b/src/js/modules/login/_validation.mjs
new file mode 100644
index 0000000..62a3448
--- /dev/null
+++ b/src/js/modules/login/_validation.mjs
@@ -0,0 +1,72 @@
+// ? Username must have at least one capital letter (it must be a first letter),
+// ? minimum 4 symbols, maximum 10 symbols, only letters and digits
+function validateUsername(username) {
+ const regExpUsername = /^[A-Z][A-Za-z0-9]{3,9}$/;
+ return regExpUsername.test(String(username));
+}
+
+function validateEmail(email) {
+ const regExpEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+ return regExpEmail.test(String(email));
+}
+
+// ? Checks that password has capital letter at the first position, after the first capital letter
+// ? at least 1 any letter or digit should follow, then the special must follow and then
+// ? at least one letter or digit. Minimum length is 4 symbols, max length is 8 symbols
+function validatePassword(password) {
+ const regExpPassword =
+ /^[A-Z][a-zA-Z0-9]{1,}[!@#$%^&*()_+|~=`{}[\]:";'<>?,./]{1}[a-zA-Z0-9]{1,}$/;
+ return regExpPassword.test(String(password));
+}
+
+export default function validateFields(
+ userNameElement = document.querySelector('.username-input'),
+ userEmailElement = document.querySelector('.email-input'),
+ userPasswordElement = document.querySelector('.password-input'),
+ required = document.querySelectorAll('[required]')
+) {
+ const userNameValue = userNameElement.value;
+ let userEmailValue = null;
+ const userPasswordValue = userPasswordElement.value;
+
+ const isEmptyField = [...required].some((field) => field.value === '');
+
+ if (isEmptyField) {
+ console.log('Fill in all empty fields! Validation Error!');
+ return;
+ }
+
+ if (!userNameElement.classList.contains('_error-validate')) {
+ if (!validateUsername(userNameValue)) {
+ console.log('Please enter a valid username!');
+ return;
+ }
+ }
+
+ if (userEmailElement) {
+ userEmailValue = userEmailElement.value;
+
+ if (!userNameElement.classList.contains('_error-validate')) {
+ if (!validateEmail(userEmailValue)) {
+ console.log('Please enter a valid e-mail!');
+ return;
+ }
+ }
+ }
+
+ if (!userPasswordElement.classList.contains('_error-validate')) {
+ if (!validatePassword(userPasswordValue)) {
+ console.log('Please enter a valid password!');
+ return;
+ }
+ }
+
+ if (
+ !isEmptyField &&
+ validateUsername(userNameValue) &&
+ validateEmail(userEmailValue) &&
+ validatePassword(userPasswordValue)
+ ) {
+ console.log('Everything is fine! Form will be submitted!');
+ }
+}
diff --git a/src/pages/login/index.html b/src/pages/login/index.html
index 72f7b49..1b98418 100644
--- a/src/pages/login/index.html
+++ b/src/pages/login/index.html
@@ -57,23 +57,37 @@
<!-- Logo column end -->
<!-- Form column start -->
<div class="login__form-col">
- <form action="#" class="login__form">
+ <form action="#" class="login__form" novalidate>
<div class="form__title">Login</div>
<div class="form__subtitle">Welcome back.</div>
- <div class="form__item">
- <label for="#" class="form__label"> Username: </label>
- <input type="text" class="form__input" />
- <div class="error"></div>
- </div>
+ <div class="form__items">
+ <div class="form__item">
+ <label for="#" class="form__label"> Username: </label>
+ <input
+ type="text"
+ class="form__input username-input"
+ minlength="4"
+ maxlength="10"
+ required
+ />
+ <div class="error"></div>
+ </div>
- <div class="form__item">
- <label for="#" class="form__label"> Password: </label>
- <input type="password" class="form__input" />
- <div class="error"></div>
+ <div class="form__item">
+ <label for="#" class="form__label"> Password: </label>
+ <input
+ type="password"
+ class="form__input password-input"
+ minlength="4"
+ maxlength="8"
+ required
+ />
+ <div class="error"></div>
+ </div>
</div>
- <button class="form__btn">Login</button>
+ <button type="submit" class="form__btn">Login</button>
<div class="login__account">
Don’t have an account?
diff --git a/src/pages/login/script.mjs b/src/pages/login/script.mjs
index a07dc74..1d4ff56 100644
--- a/src/pages/login/script.mjs
+++ b/src/pages/login/script.mjs
@@ -1,6 +1,9 @@
import './index.html';
import './style.scss';
import Router from '../../js/modules/login/Router.mjs';
+import validateFields from '../../js/modules/login/_validation.mjs';
+
+const enterForm = document.querySelector('.login__form');
const loginSwitcher = document.querySelector('.login__account-join');
@@ -11,3 +14,8 @@ window.addEventListener('load', () => {
loginSwitcher.addEventListener('click', (e) => {
Router.handlePageState(e);
});
+
+enterForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ validateFields();
+});
diff --git a/src/pages/login/style.scss b/src/pages/login/style.scss
index 6f10e84..e8c5bbc 100644
--- a/src/pages/login/style.scss
+++ b/src/pages/login/style.scss
@@ -37,7 +37,6 @@
&__form-col {
flex: 0 1 50%;
-
display: flex;
flex-direction: column;
align-items: center;
@@ -48,7 +47,6 @@
display: flex;
flex-direction: column;
min-width: 516px;
- height: 600px;
border-width: 3px;
border-radius: 20px;
padding: 30px 41px;
@@ -111,16 +109,22 @@
position: relative;
}
&__pic {
- width: 350px;
- height: 350px;
+ // width: 350px;
+ // height: 350px;
+ width: 100%;
+ height: 75%;
}
&__anim {
position: absolute;
- width: 600px;
- height: 800px;
- top: -250px;
- left: -120px;
+ // width: 600px;
+ // height: 800px;
+ // top: -250px;
+ // left: -120px;
+ width: 152%;
+ height: 87vh;
+ top: -26%;
+ left: -25%;
background: $easter-purple;
border-radius: 30% 70% 70% 30% / 30% 52% 48% 70%;
animation: anim 27s infinite;
@@ -144,11 +148,20 @@
margin-bottom: 40px;
}
+ &__items {
+ > * {
+ &:not(:last-child) {
+ margin-bottom: 15px;
+ }
+ }
+
+ margin-bottom: 50px;
+ }
+
&__item {
display: flex;
flex-direction: column;
text-align: left;
- margin-bottom: 26px;
}
&__label {
@@ -177,7 +190,7 @@
border-radius: 10px;
background: #f9f2ff;
color: $pinkish-purple;
- margin-bottom: 58px;
+ margin-bottom: 25px;
transition: 0.5s;
&:hover {
--
GitLab