micord/ervu-lkrp-ul
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

auth form

Browse source
This commit is contained in:
m.epshtein 2024-07-15 10:57:37 +03:00
parent 257d6cbbd4
commit a539f5031b
4 changed files with 116 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

42
frontend/src/resources/css/inbox-app.css
View file

@ -288,45 +288,3 @@ body.webbpm [id="page"],
}
/*------------- end Menu tasks ----------- */
/*----------------- Login ---------------- */
.webbpm :is(.form-signin, .form-signup, .confirm) {
color: var(--color-text-primary);
width: 560px;
padding: 60px 80px;
margin: 30px auto;
border: 0;
border-radius: 15px;
box-shadow: 0px 0px 30px 2px rgb(77 72 91 / 12%);
background-color: var(--white);
}
.webbpm :is(.form-signin, .form-signup) .row.title {
position: relative;
padding: 0;
}
.webbpm .form-signin h1,
.webbpm .form-signin h2,
.webbpm .form-signup h2,
.webbpm .confirm h2 {
font-family: 'SegoeB';
font-size: 32px;
text-align: left;
margin-bottom: 20px;
}
.webbpm :is(.form-signin, .form-signup, .confirm) .logo {
position: absolute;
top: -10px;
right: 0;
width: 145px;
height: 40px;
background: none;
}
.webbpm .form-signin .row.registration > * + *,
.webbpm .form-signin .login-btn-box .password,
.webbpm .form-signin .login-btn-box .btn + .btn {
margin-left: 20px;
}
/*--------------- end Login -------------- */

57
frontend/src/resources/css/inbox-lkrp.css
View file

@ -29,10 +29,11 @@
font-style: normal;
}
body {
body.webbpm.ervu_lkrp_ul {
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: var(--bg-form);
}
.webbpm.ervu_lkrp_ul {
@ -40,10 +41,12 @@ body {
--color-text-secondary: #acacac;
--color-link: #c64e1b;
--color-link-hover: #fa773f;
--color-form: #3f434b;
--color-bg-main: #223d36;
--color-light: #868b87;
--bg-light: #fafafa;
--bg-warn: #ffdcc6;
--bg-form: #eee;
--border-light: #d2d2d2;
--h-header: 64px;
@ -52,6 +55,7 @@ body {
--size-text-title: 36px;
--size-text-subtitle: 20px;
--size-text-form: 28px;
--size-text-primary: 18px;
--size-text-secondary: 16px;
@ -178,6 +182,7 @@ body {
.webbpm.ervu_lkrp_ul .container {
padding-top: var(--h-header);
bottom: var(--h-footer);
background-color: var(--white);
.container-inside {
font-family: 'Inter';
@ -227,6 +232,56 @@ body {
}
}
/*----------------- Login ---------------- */
.webbpm.ervu_lkrp_ul :is(.form-signin, .form-signup, .confirm) {
color: var(--color-text-primary);
width: 500px;
padding: 32px;
margin: 30px auto;
border: 0;
border-radius: 8px;
background-color: var(--white);
}
.webbpm.ervu_lkrp_ul :is(.form-signin, .form-signup) .row.title {
position: relative;
padding: 0;
}
.webbpm.ervu_lkrp_ul .form-signin h1,
.webbpm.ervu_lkrp_ul .form-signin h2,
.webbpm.ervu_lkrp_ul .form-signup h2,
.webbpm.ervu_lkrp_ul .confirm h2 {
color: var(--color-form);
font-family: 'InterB';
font-size: var(--size-text-form);
text-align: left;
margin-bottom: 32px;
}
.webbpm.ervu_lkrp_ul :is(.form-signin, .form-signup, .confirm) {
.logo {
padding-left: 128px;
&::after {
}
}
input {
height: 56px;
border: 0;
border-radius: 8px;
background-color: var(--bg-light);
}
}
.webbpm.ervu_lkrp_ul .form-signin .row.registration > * + *,
.webbpm.ervu_lkrp_ul .form-signin .login-btn-box .password,
.webbpm.ervu_lkrp_ul .form-signin .login-btn-box .btn + .btn {
margin-left: 32px;
}
/*--------------- end Login -------------- */
.webbpm.ervu_lkrp_ul .loader {
font-size: 15px;
left: calc(50% - 50px);

28
frontend/src/resources/img/svg/form-logo.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 464 KiB

65
frontend/src/resources/template/app/component/login.html
View file

@ -1,51 +1,50 @@
<div class="form-signin">
<form #formComponent="ngForm">
<div class="alert alert-success" [hidden]="!confirmationSent">На ваш почтовый адрес было
отправлено письмо. Подтвердите почту, чтобы войти в систему
<div class="alert alert-success" [hidden]="!confirmationSent">На ваш почтовый адрес было отправлено письмо. Подтвердите почту, чтобы войти в систему
</div>
<div class="alert alert-danger" [hidden]="!errorMessage">{{errorMessage}}</div>
<h2>Вход</h2>
<div class="row registration">
<span>Еще нет аккаунта?</span><a href="#/registration">Зарегистрироваться</a>
<div class="row logo">
<h2>Воинский учет в организациях</h2>
</div>
<div class="row">
<label>Пользователь</label>
<div class="input-group">
<input type="text" name="username" class="form-control" placeholder="Пользователь" required autofocus
[(ngModel)]="username" maxlength="100">
</div>
<div class="input-group">
<input type="text" name="username" class="form-control" placeholder="Пользователь" required autofocus
[(ngModel)]="username" maxlength="100">
</div>
</div>
<div class="row">
<label>Пароль</label>
<div class="input-group">
<input
[type]="passwordType ? 'text' : 'password'"
name="password"
class="form-control field-password-view"
placeholder="" required
[(ngModel)]="password"
maxlength="100"
>
<div class="input-group-append">
<span class="input-group-text">
<i
(click)="togglePasswordType()"
class="fa"
[ngClass]="{
'fa-eye': passwordType,
'fa-eye-slash': !passwordType
}"
></i>
</span>
</div>
<div class="input-group">
<input
[type]="passwordType ? 'text' : 'password'"
name="password"
class="form-control field-password-view"
placeholder="" required
[(ngModel)]="password"
maxlength="100"
>
<div class="input-group-append">
<span class="input-group-text">
<i
(click)="togglePasswordType()"
class="fa"
[ngClass]="{
'fa-eye': passwordType,
'fa-eye-slash': !passwordType
}"
></i>
</span>
</div>
</div>
<div class="password"><a href="#/reset-password">Забыли пароль?</a></div>
</div>
<div class="login-btn-box">
<!--<esia-login-button></esia-login-button>-->
<button type="submit" class="btn btn-primary" (click)="formComponent.form.valid && login()">Войти</button>
<div class="password"><a href="#/reset-password">Забыли пароль?</a></div>
<button type="submit" class="btn btn-primary" (click)="formComponent.form.valid && login()">Войти</button>
</div>
</form>
</div>