Skip to content

Commit ad8f3d0

Browse files
AwakichAwakich
committed
fix login page design
1 parent 24bbc66 commit ad8f3d0

2 files changed

Lines changed: 176 additions & 164 deletions

File tree

‎projects/social_platform/src/app/auth/login/login.component.html‎

Lines changed: 116 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -2,130 +2,140 @@
22

33
<div class="login">
44
<div class="login__left">
5-
<form class="auth" [formGroup]="loginForm" (ngSubmit)="onSubmit()" (keyup.enter)="onSubmit()">
6-
<div class="auth__wrapper">
7-
<img class="login__logo" src="/assets/images/shared/logo.svg" alt="logo" />
8-
@if (loginForm.get("email"); as email) {
9-
<fieldset class="auth__field">
10-
<label for="email" class="field-label">почта*</label>
11-
<app-input
12-
size="big"
13-
[error]="email | controlError"
14-
id="email"
15-
type="email"
16-
formControlName="email"
17-
placeholder="example@example.com"
18-
></app-input>
19-
@if (email | controlError: "email") {
20-
<div class="text-body-10 error">
21-
{{ errorMessage.VALIDATION_EMAIL }}
22-
</div>
23-
} @if (email | controlError: "required") {
5+
<!-- Центр -->
6+
<div class="login__left-content">
7+
<form class="auth" [formGroup]="loginForm" (ngSubmit)="onSubmit()" (keyup.enter)="onSubmit()">
8+
<div class="auth__wrapper">
9+
<img class="login__logo" src="/assets/images/shared/logo.svg" alt="logo" />
10+
11+
@if (loginForm.get("email"); as email) {
12+
<fieldset class="auth__field">
13+
<label for="email" class="field-label">почта*</label>
14+
<app-input
15+
size="big"
16+
[error]="email | controlError"
17+
id="email"
18+
type="email"
19+
formControlName="email"
20+
placeholder="example@example.com"
21+
></app-input>
22+
23+
@if (email | controlError: "email") {
24+
<div class="text-body-10 error">
25+
{{ errorMessage.VALIDATION_EMAIL }}
26+
</div>
27+
} @if (email | controlError: "required") {
28+
<div class="text-body-10 error">
29+
{{ errorMessage.VALIDATION_REQUIRED }}
30+
</div>
31+
}
32+
</fieldset>
33+
} @if (loginForm.get("password"); as password) {
34+
<fieldset class="auth__field">
35+
<div class="login__password">
36+
<label class="field-label" for="password">пароль</label>
37+
<a routerLink="/auth/reset_password/send_email" class="login__forget">
38+
забыли пароль?
39+
</a>
40+
</div>
41+
42+
<app-input
43+
size="big"
44+
[error]="password | controlError"
45+
id="password"
46+
[type]="showPassword ? 'text' : 'password'"
47+
formControlName="password"
48+
placeholder="GJiwoeuhbn120="
49+
>
50+
@if (showPassword) {
51+
<i appIcon icon="eye" appSquare="18" class="icon" (click)="toggleShowPassword()"></i>
52+
} @else {
53+
<i
54+
appIcon
55+
icon="eye-off"
56+
appSquare="18"
57+
class="icon"
58+
(click)="toggleShowPassword()"
59+
></i>
60+
}
61+
</app-input>
62+
63+
@if (password | controlError: "required") {
64+
<div class="text-body-10 error">
65+
{{ errorMessage.VALIDATION_REQUIRED }}
66+
</div>
67+
}
68+
</fieldset>
69+
} @if (errorWrongAuth) {
2470
<div class="text-body-10 error">
25-
{{ errorMessage.VALIDATION_REQUIRED }}
71+
{{ errorMessage.AUTH_WRONG_AUTH }}
2672
</div>
2773
}
28-
</fieldset>
29-
} @if (loginForm.get("password"); as password) {
30-
<fieldset class="auth__field">
31-
<div class="login__password">
32-
<label class="field-label" for="password">пароль</label>
33-
<a routerLink="/auth/reset_password/send_email" class="login__forget"
34-
>забыли пароль?
35-
</a>
36-
</div>
37-
<app-input
74+
75+
<app-button
3876
size="big"
39-
[error]="password | controlError"
40-
id="password"
41-
[type]="showPassword ? 'text' : 'password'"
42-
formControlName="password"
43-
placeholder="GJiwoeuhbn120="
77+
[loader]="loginIsSubmitting"
78+
class="auth__button"
79+
customTypographyClass="auth__button-typography"
80+
type="submit"
4481
>
45-
@if(showPassword) {
46-
<i appIcon icon="eye" appSquare="18" class="icon" (click)="toggleShowPassword()"></i>
47-
} @else {
82+
войти
4883
<i
84+
class="auth__button-icon"
4985
appIcon
50-
icon="eye-off"
51-
appSquare="18"
52-
class="icon"
53-
(click)="toggleShowPassword()"
86+
icon="arrow-no-body"
87+
appWidth="12"
88+
appHeight="6"
89+
appViewBox="0 0 18 9"
5490
></i>
55-
}
56-
</app-input>
57-
@if (password | controlError: "required") {
58-
<div class="text-body-10 error">
59-
{{ errorMessage.VALIDATION_REQUIRED }}
91+
</app-button>
92+
93+
<div class="login__additional">
94+
<p class="login__reg text-body-12">
95+
нет аккаунта?
96+
<a routerLink="/auth/register">зарегистрируйтесь</a>
97+
</p>
98+
99+
<hr />
100+
101+
<p class="text-body-12 login__external">
102+
*Если ты регистрировался через форму на сайте программы кейс-чемпионата, введи данные,
103+
которые ты указывал ранее
104+
</p>
60105
</div>
61-
}
62-
</fieldset>
63-
} @if (errorWrongAuth) {
64-
<div class="text-body-10 error">
65-
{{ errorMessage.AUTH_WRONG_AUTH }}
66-
</div>
67-
}
68-
<app-button
69-
size="big"
70-
[loader]="loginIsSubmitting"
71-
class="auth__button"
72-
customTypographyClass="auth__button-typography"
73-
type="submit"
74-
>
75-
войти
76-
<i
77-
class="auth__button-icon"
78-
appIcon
79-
icon="arrow-no-body"
80-
appWidth="12"
81-
appHeight="6"
82-
appViewBox="0 0 18 9"
83-
></i>
84-
</app-button>
85-
<div class="login__additional">
86-
<p class="login__reg text-body-12">
87-
нет аккаунта? <a routerLink="/auth/register">зарегистрируйтесь</a>
88-
</p>
89-
<hr />
90-
<p class="text-body-12 login__external">
91-
*Если ты регистрировался через форму на сайте программы кейс-чемпионата, введи данные,
92-
которые ты указывал ранее
93-
</p>
94106
</div>
95-
</div>
96-
</form>
107+
</form>
108+
</div>
97109

98-
<div class="tooltip">
99-
<app-tooltip
100-
color="grey"
101-
iconSize="40"
102-
(click)="$event.stopPropagation(); toggleTooltip()"
103-
></app-tooltip>
110+
<!-- Низ -->
111+
<div class="login__left-footer">
112+
<div class="tooltip">
113+
<app-tooltip
114+
color="grey"
115+
iconSize="40"
116+
(click)="$event.stopPropagation(); toggleTooltip()"
117+
></app-tooltip>
104118

105-
@if (isHintLoginVisible()) {
106-
<div class="tooltip__wrapper" (clickOutside)="toggleTooltip()">
107-
<p class="tooltip__text text-body-10">
108-
Если у тебя есть вопросы, напиши в наш телеграм-бот поддержки
109-
<span
110-
><a href="https://t.me/procollab_bot">{{ "@procollab_bot" }}</a></span
111-
>
112-
</p>
113-
<br />
119+
@if (isHintLoginVisible()) {
120+
<div class="tooltip__wrapper" (clickOutside)="toggleTooltip()">
121+
<p class="tooltip__text text-body-10">
122+
Если у тебя есть вопросы, напиши в наш телеграм-бот поддержки
123+
<a href="https://t.me/procollab_bot">{{ "@procollab_bot" }}</a>
124+
</p>
114125

115-
<p class="tooltip__text text-body-10">
116-
Если не нашел ответ в боте, напиши в техподдержку. Обычно отвечаем в рабочее время – с
117-
понедельника по пятницу с 10:00 до 18:00 по московскому времени
118126
<br />
119-
<span
120-
><a href="https://t.me/procollab_support">{{ "@procollab_support" }}</a></span
121-
>
122-
</p>
127+
128+
<p class="tooltip__text text-body-10">
129+
Если не нашел ответ в боте, напиши в техподдержку —
130+
<a href="https://t.me/procollab_support">{{ "@procollab_support" }}</a>
131+
</p>
132+
</div>
133+
}
123134
</div>
124-
}
125135
</div>
126136
</div>
127137

128138
<div class="login__right">
129-
<img class="login__image" src="/assets/images/auth/login-img.png" />
139+
<img class="login__image" src="/assets/images/auth/login-img.png" alt="" />
130140
</div>
131141
</div>

0 commit comments

Comments
 (0)