Skip to content

Commit 03b21fb

Browse files
AwakichAwakich
committed
fix design of textarea, input, select & add error visuality
1 parent eedb63a commit 03b21fb

46 files changed

Lines changed: 405 additions & 218 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,19 @@ <h1 class="auth__title">Вход</h1>
88
<fieldset class="auth__field">
99
<label for="email" class="field-label">Электронная почта</label>
1010
<app-input
11+
size="big"
1112
[error]="email | controlError"
1213
id="email"
1314
type="email"
1415
formControlName="email"
1516
placeholder="Введите почту"
1617
></app-input>
1718
@if (email | controlError: "email") {
18-
<div class="text-body-14 error">
19+
<div class="text-body-10 error">
1920
{{ errorMessage.VALIDATION_EMAIL }}
2021
</div>
2122
} @if (email | controlError: "required") {
22-
<div class="text-body-14 error">
23+
<div class="text-body-10 error">
2324
{{ errorMessage.VALIDATION_REQUIRED }}
2425
</div>
2526
}
@@ -31,6 +32,7 @@ <h1 class="auth__title">Вход</h1>
3132
<a routerLink="/auth/reset_password/send_email" class="login__forget"> Забыли пароль? </a>
3233
</div>
3334
<app-input
35+
size="big"
3436
[error]="password | controlError"
3537
id="password"
3638
[type]="showPassword ? 'text' : 'password'"
@@ -62,13 +64,13 @@ <h1 class="auth__title">Вход</h1>
6264
}
6365
</app-input>
6466
@if (password | controlError: "required") {
65-
<div class="text-body-14 error">
67+
<div class="text-body-10 error">
6668
{{ errorMessage.VALIDATION_REQUIRED }}
6769
</div>
6870
}
6971
</fieldset>
7072
} @if (errorWrongAuth) {
71-
<div class="text-body-14 error">
73+
<div class="text-body-10 error">
7274
{{ errorMessage.AUTH_WRONG_AUTH }}
7375
</div>
7476
}

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

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ <h3 class="auth__title auth__title--register">
3232
<fieldset class="auth__field">
3333
<label for="email" class="field-label">Почта</label>
3434
<app-input
35+
size="big"
3536
[error]="(email | controlError) && credsSubmitInitiated"
3637
id="email"
3738
type="email"
@@ -41,11 +42,11 @@ <h3 class="auth__title auth__title--register">
4142
@if (credsSubmitInitiated) {
4243
<ng-container>
4344
@if (email | controlError: "required") {
44-
<div class="text-body-14 error">
45+
<div class="text-body-10 error">
4546
{{ errorMessage.VALIDATION_REQUIRED }}
4647
</div>
4748
} @if (email | controlError: "email") {
48-
<div class="text-body-14 error">
49+
<div class="text-body-10 error">
4950
{{ errorMessage.VALIDATION_EMAIL }}
5051
</div>
5152
}
@@ -56,6 +57,7 @@ <h3 class="auth__title auth__title--register">
5657
<fieldset class="auth__field">
5758
<label for="passowrd" class="field-label">Пароль</label>
5859
<app-input
60+
size="big"
5961
[error]="(password | controlError) && credsSubmitInitiated"
6062
id="passowrd"
6163
[type]="showPassword ? 'text' : 'password'"
@@ -87,6 +89,7 @@ <h3 class="auth__title auth__title--register">
8789
}
8890
</app-input>
8991
<app-input
92+
size="big"
9093
class="register__repeated-password"
9194
[error]="(password | controlError) && credsSubmitInitiated"
9295
id="repeatedPassword"
@@ -121,40 +124,40 @@ <h3 class="auth__title auth__title--register">
121124
@if (credsSubmitInitiated) {
122125
<ng-container>
123126
@if (password | controlError: "required") {
124-
<div class="text-body-14 error">
127+
<div class="text-body-10 error">
125128
{{ errorMessage.VALIDATION_REQUIRED }}
126129
</div>
127130
} @if (password | controlError: "passwordTooShort") {
128-
<div class="text-body-14 error">
131+
<div class="text-body-10 error">
129132
@if (password.errors) { Пароль должен содержать минимум
130133
{{ password.errors["passwordTooShort"]["requiredLength"] }} символов }
131134
</div>
132135
} @if (password | controlError: "passwordNoUppercase") {
133-
<div class="text-body-14 error">
136+
<div class="text-body-10 error">
134137
Пароль должен содержать минимум одну заглавную букву (A-Z)
135138
</div>
136139
} @if (password | controlError: "passwordNoLowercase") {
137-
<div class="text-body-14 error">
140+
<div class="text-body-10 error">
138141
Пароль должен содержать минимум одну строчную букву (a-z)
139142
</div>
140143
} @if (password | controlError: "passwordNoNumber") {
141-
<div class="text-body-14 error">Пароль должен содержать минимум одну цифру (0-9)</div>
144+
<div class="text-body-10 error">Пароль должен содержать минимум одну цифру (0-9)</div>
142145
} @if (password | controlError: "passwordNoSpecialChar") {
143-
<div class="text-body-14 error">
146+
<div class="text-body-10 error">
144147
Пароль должен содержать минимум один специальный символ
145148
</div>
146149
} @if (password | controlError: "passwordHasSpaces") {
147-
<div class="text-body-14 error">Пароль не должен содержать пробелы</div>
150+
<div class="text-body-10 error">Пароль не должен содержать пробелы</div>
148151
} @if (password | controlError: "passwordHasSequence") {
149-
<div class="text-body-14 error">
152+
<div class="text-body-10 error">
150153
Пароль не должен содержать последовательности символов (123456, abcdef и т.д.)
151154
</div>
152155
} @if (password | controlError: "passwordHasRepeating") {
153-
<div class="text-body-14 error">
156+
<div class="text-body-10 error">
154157
Пароль не должен содержать более 2 одинаковых символов подряд
155158
</div>
156159
} @if (password | controlError: "unMatch") {
157-
<div class="text-body-14 error">
160+
<div class="text-body-10 error">
158161
{{ errorMessage.VALIDATION_PASSWORD_UNMATCH }}
159162
</div>
160163
}
@@ -170,6 +173,7 @@ <h3 class="auth__title auth__title--register">
170173
<fieldset class="auth__field">
171174
<label for="name" class="field-label">Имя</label>
172175
<app-input
176+
size="big"
173177
[error]="(name | controlError) && infoSubmitInitiated"
174178
id="name"
175179
type="text"
@@ -179,11 +183,11 @@ <h3 class="auth__title auth__title--register">
179183
@if (infoSubmitInitiated) {
180184
<ng-container>
181185
@if (name | controlError: "required") {
182-
<div class="text-body-14 error">
186+
<div class="text-body-10 error">
183187
{{ errorMessage.VALIDATION_REQUIRED }}
184188
</div>
185189
} @if (name | controlError: "invalidLanguage") {
186-
<div class="text-body-14 error">
190+
<div class="text-body-10 error">
187191
{{ errorMessage.VALIDATION_LANGUAGE }}
188192
</div>
189193
}
@@ -194,6 +198,7 @@ <h3 class="auth__title auth__title--register">
194198
<fieldset class="auth__field">
195199
<label for="surname" class="field-label">Фамилия</label>
196200
<app-input
201+
size="big"
197202
[error]="(surname | controlError) && infoSubmitInitiated"
198203
id="surname"
199204
type="text"
@@ -203,11 +208,11 @@ <h3 class="auth__title auth__title--register">
203208
@if (infoSubmitInitiated) {
204209
<ng-container>
205210
@if (surname | controlError: "required") {
206-
<div class="text-body-14 error">
211+
<div class="text-body-10 error">
207212
{{ errorMessage.VALIDATION_REQUIRED }}
208213
</div>
209214
} @if (surname | controlError: "invalidLanguage") {
210-
<div class="text-body-14 error">
215+
<div class="text-body-10 error">
211216
{{ errorMessage.VALIDATION_LANGUAGE }}
212217
</div>
213218
}
@@ -220,6 +225,7 @@ <h3 class="auth__title auth__title--register">
220225
<fieldset class="auth__field">
221226
<label for="birthday" class="field-label">Дата рождения</label>
222227
<app-input
228+
size="big"
223229
id="birthday"
224230
[error]="(birthday | controlError) && infoSubmitInitiated"
225231
type="text"
@@ -230,23 +236,23 @@ <h3 class="auth__title auth__title--register">
230236
@if (infoSubmitInitiated) {
231237
<ng-container>
232238
@if (birthday | controlError: "required") {
233-
<div class="text-body-14 error">
239+
<div class="text-body-10 error">
234240
{{ errorMessage.VALIDATION_REQUIRED }}
235241
</div>
236242
} @if (birthday | controlError: "tooYoung") {
237-
<div class="text-body-14 error">
243+
<div class="text-body-10 error">
238244
@if (birthday.errors) {
239245
{{ errorMessage.MINIMAL_AGE }}
240246
{{ birthday.errors["tooYoung"]["requiredAge"] }} лет }
241247
</div>
242248
} @if (birthday | controlError: "tooOld") {
243-
<div class="text-body-14 error">
249+
<div class="text-body-10 error">
244250
@if (birthday.errors) {
245251
{{ errorMessage.MAXIMAL_AGE }}
246252
{{ birthday.errors["tooOld"]["requiredAge"] }} лет }
247253
</div>
248254
} @if (birthday | controlError: "invalidDateFormat") {
249-
<div class="text-body-14 error">
255+
<div class="text-body-10 error">
250256
{{ errorMessage.INVALID_DATE }}
251257
</div>
252258
}
@@ -256,7 +262,7 @@ <h3 class="auth__title auth__title--register">
256262
}
257263
</ng-container>
258264
} @if (serverErrors) {
259-
<div class="text-body-14 error">
265+
<div class="text-body-10 error">
260266
@for (e of serverErrors; track $index) {
261267
<p>{{ e }}</p>
262268
}
@@ -293,7 +299,13 @@ <h3 class="auth__title auth__title--register">
293299
Далее
294300
</app-button>
295301
} @else if (step === "info") {
296-
<app-button size="medium" [loader]="registerIsSubmitting" type="submit" class="auth__button">
302+
<app-button
303+
size="big"
304+
[loader]="registerIsSubmitting"
305+
type="submit"
306+
customTypographyClass="text-body-12"
307+
class="auth__button"
308+
>
297309
Создать аккаунт
298310
</app-button>
299311
}

‎projects/social_platform/src/app/auth/reset-password/reset-password.component.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,36 @@
33
<form class="auth" [formGroup]="resetForm" (ngSubmit)="onSubmit()">
44
<div class="auth__wrapper">
55
<h1 class="auth__title">Забыли пароль?</h1>
6-
<p class="reset__text text-body-14">Чтобы сбросить пароль, введите свой электронный адрес.</p>
6+
<p class="reset__text text-body-12">Чтобы сбросить пароль, введите свой электронный адрес.</p>
77
@if (resetForm.get("email"); as email) {
88
<fieldset class="auth__field">
99
<app-input
10+
size="big"
1011
[error]="email | controlError"
1112
id="email"
1213
type="email"
1314
formControlName="email"
1415
placeholder="Введите почту"
1516
></app-input>
1617
@if (email | controlError: "email") {
17-
<div class="text-body-14 error">
18+
<div class="text-body-10 error">
1819
{{ errorMessage.VALIDATION_EMAIL }}
1920
</div>
2021
} @if (email | controlError: "required") {
21-
<div class="text-body-14 error">
22+
<div class="text-body-10 error">
2223
{{ errorMessage.VALIDATION_REQUIRED }}
2324
</div>
2425
} @if (errorServer) {
25-
<div class="text-body-14 error">Аккаунт с таким email не зарегистрирован</div>
26+
<div class="text-body-10 error">Аккаунт с таким email не зарегистрирован</div>
2627
}
2728
</fieldset>
2829
}
2930
<app-button
30-
size="medium"
31+
size="big"
3132
[loader]="isSubmitting"
3233
type="submit"
3334
class="auth__button"
34-
customTypographyClass="auth__button-typography"
35+
customTypographyClass="text-body-12"
3536
>
3637
Отправить
3738
</app-button>

0 commit comments

Comments
 (0)