Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cms login styling

master
Boris Voropaev 2023-12-21 16:52:20 +03:00
parent c7c3bd8f0b
commit f9f879e424
9 changed files with 175 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/_modules/auth/auth-modal/auth-modal.component.html
View File

@ -1,12 +1,11 @@
<modal (close)="close()">
<div [ngSwitch]="url"header>
<cms-modal (close)="close()">
<div [ngSwitch]="url" header>
<h3 *ngSwitchCase="'login'">Вход в систему</h3>
<h3 *ngSwitchCase="'signup'">Регистрация</h3>
<h3 *ngSwitchCase="'password/forget'">Восстановление пароля</h3>
<h3 *ngSwitchCase="'password/reset'">Сброс пароля</h3>
</div>
<div class="authentication">
<div class="authentication">
<div class="form">
<div class="center" [ngSwitch]="url">
<auth-form-login *ngSwitchCase="'login'"></auth-form-login>
@ -17,5 +16,5 @@
</div>
</div>
</div>
</modal>
</cms-modal>

4
src/app/_modules/auth/forms/login/auth-form-login.component.html
View File

@ -15,10 +15,10 @@
</div>
<div class="forget">
<a (click)="forget()">Забыли пароль?</a>
<a (click)="signup()">Регистрация</a>
</div>
</div>
<div class="bottom">
<button [disabled]="loading" type="submit" class="btn">Войти</button>
<button [disabled]="loading" (click)="signup()" class="prime outline">Регистрация</button>
<button [disabled]="loading" type="submit" class="prime">Войти</button>
</div>
</form>

2
src/app/_modules/auth/forms/signup/auth-form-signup.component.html
View File

@ -42,7 +42,7 @@
<div *ngIf="error" class="error">{{error}}</div>
</div>
<div class="bottom">
<button type="button" class="btn secondary" routerLink="/login">Авторизоваться</button>
<button type="button" class="btn secondary" (click)="login()">Авторизоваться</button>
<button type="submit" [disabled]="loading" class="btn">Зарегистрироваться</button>
</div>
</form>

7
src/app/_modules/auth/forms/signup/auth-form-signup.component.ts
View File

@ -79,4 +79,11 @@ export class AuthFormSignupComponent implements OnInit {
let trans = {'The given data was invalid.': 'Проверьте правильность заполнения формы'};
this.error = trans[error.message] || error.message;
}
login(){
this.router.navigate(
[ {outlets: {auth: 'login'}}],
{skipLocationChange: true}
).then();
}
}

15
src/app/_modules/widjet/cms-modal/cms-modal.component.html Normal file
View File

@ -0,0 +1,15 @@
<div class="cms-modal-overlay" (click)="cls()">
</div>
<div class="cms-modal-bar">
<div class="cms-modal-header">
<ng-content select="[header]"></ng-content>
<ico (click)="cls()"></ico>
</div>
<div class="cms-modal-body">
<ng-content></ng-content>
</div>
<div class="cms-modal-footer">
<ng-content select="[footer]"></ng-content>
</div>
</div>

114
src/app/_modules/widjet/cms-modal/cms-modal.component.scss Normal file
View File

@ -0,0 +1,114 @@
:host{
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
font-family: PT Sans;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
.cms-modal-overlay{
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
background-color: rgba(62, 61, 64, 0.7);
z-index: 1000;
}
.cms-modal-bar{
position: fixed;
max-height: 100vh;
width: 448px;
background-color: var(--white);
border: 1px solid var(--second-dis);
display: flex;
flex-direction: column;
border-radius: 4px;
padding: 24px 24px 0;
z-index: 1000;
overflow: hidden;
gap: 24px;
.cms-modal-header{
display: flex;
justify-content: space-between;
align-items: center;
h4{
font-family: PT Sans;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 28px;
margin: 0;
}
ico{
cursor: pointer;
}
}
.cms-modal-body{
overflow-y: auto;
}
.cms-modal-footer{
display: flex;
justify-content: flex-end;
gap: 20px;
}
}
::ng-deep{
button{
border-radius: 4px;
padding: 8px 20px;
font-family: PT Sans;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.56px;
text-transform: uppercase;
border: 1px solid;
&.prime{
background-color: var(--prime);
color: var(--white);
border-color: var(--prime);
&:hover{
background-color: var(--prime-act);
border-color: var(--prime-act);
}
}
&.outline{
background-color: var(--white);
color: var(--prime);
&:hover{
background-color: var(--white);
color: var(--prime-act);
border-color: var(--prime-act);
}
}
}
input{
width: 100%;
height: 40px;
padding: 8px 16px;
border-radius: 4px;
border: solid 1px var(--second-dis);
font-family: PT Sans;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
input:autofill{
background-color: var(--prime-dis);
border-color: var(--prime);
background-image: none !important;
}
}
}

24
src/app/_modules/widjet/cms-modal/cms-modal.component.ts Normal file
View File

@ -0,0 +1,24 @@
import { Component, Output, EventEmitter } from '@angular/core';
import {WindowScrollingService} from "@app/_services/window-scrolling.service";
@Component({
selector: 'cms-modal',
templateUrl: './cms-modal.component.html',
styleUrls: ['./cms-modal.component.scss']
})
export class CmsModalComponent {
@Output() close = new EventEmitter<string>();
constructor( private windowScrollingService: WindowScrollingService ){}
ngOnInit(){
this.windowScrollingService.disable();
}
ngOnDestroy(){
this.windowScrollingService.enable();
}
cls(){
this.close.emit('close')
}
}

7
src/app/_modules/widjet/widjet.module.ts
View File

@ -13,6 +13,7 @@ import { ModalComponent } from './modal/modal.component';
import {SwiperModule} from "swiper/angular";
import { SwiperGalleryComponent } from './swiper-gallery/swiper-gallery.component';
import {FullscreenGalleryComponent} from "@app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component";
import { CmsModalComponent } from './cms-modal/cms-modal.component';
@NgModule({
@ -32,7 +33,8 @@ import {FullscreenGalleryComponent} from "@app/_modules/widjet/swiper-gallery/fu
FileIcoComponent,
ModalComponent,
SwiperGalleryComponent,
FullscreenGalleryComponent
FullscreenGalleryComponent,
CmsModalComponent
],
exports: [
IcoComponent,
@ -44,7 +46,8 @@ import {FullscreenGalleryComponent} from "@app/_modules/widjet/swiper-gallery/fu
FileIcoComponent,
ModalComponent,
SwiperGalleryComponent,
FullscreenGalleryComponent
FullscreenGalleryComponent,
CmsModalComponent
]
})
export class WidjetModule {

5
src/vniigaz-v2/css/_forms.scss
View File

@ -457,6 +457,8 @@ auth-page{
}
auth-page, auth-modal{
h2 {
margin: 0 0 24px;
font-size: 24px;
@ -507,7 +509,7 @@ auth-page, auth-modal{
flex-direction: row;
align-items: center;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 18px;
.remember {
display: flex;
@ -525,7 +527,6 @@ auth-page, auth-modal{
cursor: pointer;
display: flex;
justify-content: space-between;
flex-basis: 100%;
}
}