add: authorization (+ main) #5
Conversation
main and auth changes
server.js
Outdated
| }); | ||
|
|
||
| app.post('/api/register', (req, res) => { | ||
| res.send(JSON.stringify({success: 'good'})); |
There was a problem hiding this comment.
осталось success: 1, сомневаюсь что вам бекенд будет на каждый успешный запрос в теле ответа присылать success: number
server.js
Outdated
| res.send(JSON.stringify({success: 'good'})); | ||
| }) | ||
|
|
||
| const cards = [ |
There was a problem hiding this comment.
давайте сервер уберем в папку /server и в ней сделаем отдельный файл где будут лежать моковые данные
There was a problem hiding this comment.
моки в отдельный файл не убрали, файл сервера server.js можно в index.js
src/components/auth/auth.css
Outdated
| top:50%; | ||
| left:50%; | ||
| margin-top: -255px; | ||
| margin-left: -500px; |
There was a problem hiding this comment.
в 90% случаев если прибегаем к отрицательному марджину то что-то не так с версткой. тут как раз такой случай)
смотрите во первых у вас есть некий <div class="auth_wrapper" hidden></div> который непонятно зачем на странице
div.features div.auth хорошо бы как раз во враппер какой-нибудь засунуть и чтобы этому врапперу задать ширину высоту и соотношение в котором будут делиться div.features div.auth (это чтобы каждому из них не задавать width height)
еще заметил что .features .auth fixed хотя не должны бы, все это вынести в обертку
There was a problem hiding this comment.
еще вот у вас есть <div class="login_form active"> будто бы его можно использовать в качестве враппера а то тоже просто так висит пустой
src/components/auth/auth.css
Outdated
| font-family: 'logo'; | ||
| font-size:36px; | ||
| margin-left: 43px; | ||
| margin-top: 57px; |
There was a problem hiding this comment.
давай
- не марджин а паддинг потому что это скорее внутренний отступ
- паддинг на весь контейнер
src/components/auth/auth.css
Outdated
| font-size: 16px; | ||
| align-items: center; | ||
| margin-top: 40px; | ||
| margin-left: 43px; |
There was a problem hiding this comment.
аналогично, марджины уйдут тк будет паддинг на контейнере + для отступов между элементами используй gap
src/components/auth/auth.css
Outdated
| } | ||
|
|
||
| .authorization { | ||
| font-family: bold; |
There was a problem hiding this comment.
font-family у вас у всех шрифтов кроме лого это Inter
в объявлении
@font-face {
src: url(../fonts/Inter-Medium.otf);
}
указываем font-family: 'Inter'; font-weight и font-style, затем в местах где надо пожирнее или стилизовано оперируем font-weight и font-style
There was a problem hiding this comment.
зря убрали
@font-face {
font-family: medium;
src: url(../fonts/Inter-Medium.otf);
}
@font-face {
font-family: bold;
src: url(../fonts/Inter-Bold.otf);
}
смотрите идея в чем: мы в font-face задаем некие параметры по типу font-family font-weight и font-style и для этих параметров соответствующий файл шрифтов откуда их брать
глобально у нас на body будет навешен font-family: Inter, some other fonts, etc. шрифт наследуется поэтому у всех элементов font-family будет такой, только если мы не переопределим его (как например для логотипа). а на конкретных элементах где нам допустим нужен жирный вариант шрифта нам будет достаточно написать font-weight 700, и применится шрифт из нужного файла ../fonts/Inter-Bold.otf потому что в @font-face будет указано что для font-weight 700 такой-то файл нужен
There was a problem hiding this comment.
То есть, мы пишем:
@font-face {
font-family: bold;
font-weight: 700;
src: url(../fonts/Inter-Bold.otf);
}
и при вызове font-weight: 700; он нам возвращает наш шрифт InterBold из файла а не ужирнённую версию InterRegular, так?
src/components/auth/auth.css
Outdated
| font-size: 16px; | ||
| color: #FF0000; | ||
| margin-left: 71px; | ||
| margin-top: 15px; |
There was a problem hiding this comment.
аналогично все margin-left -> padding у контейнера, margin-top -> gap
| background: url(../../static/images/eye_closed.svg); | ||
| } | ||
|
|
||
| .authorization_enter { |
src/components/auth/auth.css
Outdated
|
|
||
| .expand { | ||
| height: 570px; | ||
| margin-top: -285px; |
There was a problem hiding this comment.
опять же отрицательный марджин должен уйти
лучше всего сделать чтобы расширение происходило при изменении контента (при этом задать макс высоту после которой появится скролл). сама модалка оцентрована отосительно страницы
src/pages/main/main.js
Outdated
| 'Content-type': 'application/json', | ||
| } | ||
| }); | ||
| const cards = await response.json(); |
There was a problem hiding this comment.
а если запрос на карточки упадет? или он будет идти 10 сек? у тебя хедера не будет в обоих случаях
- можно если будет время заглушку поставить на шаблон, при загрузке лоадер а при ошибке сообщение об ошибке
| const GET = 'GET'; | ||
| const POST = 'POST'; | ||
|
|
||
| export class Ajax { |
There was a problem hiding this comment.
Ajax можно было в модулях оставить, вполне себе модуль
| return await this.#handleResponse(response); | ||
| } catch (error) { | ||
| console.error('POST error:', error); | ||
| alert(error); |
There was a problem hiding this comment.
alert лучше убрать, хочется видеть ошибки на шаблоне а не нечитаемые ошибки
| return re.test(email); | ||
| } | ||
|
|
||
| export function validatePassword(password) { |
There was a problem hiding this comment.
если будете успевать я бы добавил валидаций различных на пароль например
- на наличие цифр
- на символы
плюс щас нет проверки на фронте что повтор пароля совпадает с паролем (это уже не если будет время а обязательно)
src/components/auth/auth.js
Outdated
| const template = Handlebars.templates['auth.hbs']; | ||
| return template({title, info, inputs, buttontitle, pretext, anchortext}); | ||
| const templateData = {title: data.title, info: data.info, inputs: data.inputs, buttontitle: data.buttontitle, pretext: data.pretext, anchortext: data.anchortext}; |
There was a problem hiding this comment.
поля вроде те же самые, можно без templateData обойтись
added /login /signup, improved authorization
ПР "авторизация и регистрация" (+ merge с главной страницей)