Skip to content

Ajit Thakor / bo-livebillionbet-ui

Go to a project
Commit 55479469 by Ajit Thakor
Options

added profile and signin component

1 parent 74df340d
Inline Side-by-side
Showing with 204 additions and 206 deletions
src/app/app.module.ts
import { AgmCoreModule } from '@agm/core';
import { BidiModule } from '@angular/cdk/bidi';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule } from '@angular/forms';
import { MatButtonModule, MatCardModule, MatCheckboxModule, MatIconModule, MatListModule, MatMenuModule, MatProgressBarModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatTabsModule, MatToolbarModule, MatDialogModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
import { AgmCoreModule } from '@agm/core';
import {
MatSidenavModule,
MatCardModule,
MatMenuModule,
MatCheckboxModule,
MatIconModule,
MatButtonModule,
MatToolbarModule,
MatTabsModule,
MatListModule,
MatSlideToggleModule,
MatSelectModule,
MatProgressBarModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import {BidiModule} from '@angular/cdk/bidi';
import {
MenuComponent,
HeaderComponent,
SidebarComponent,
AdminLayoutComponent,
AuthLayoutComponent,
AccordionAnchorDirective,
AccordionLinkDirective,
AccordionDirective} from './core';
import { AppRoutes } from './app.routing';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { PerfectScrollbarConfigInterface, PerfectScrollbarModule, PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { AppComponent } from './app.component';
import { AppRoutes } from './app.routing';
import { AccordionAnchorDirective, AccordionDirective, AccordionLinkDirective, AdminLayoutComponent, AuthLayoutComponent, HeaderComponent, MenuComponent, SidebarComponent } from './core';
import { BreadcrumbComponent } from './core/breadcrumb/breadcrumb.component';
import { RoutePartsService } from './services/route-parts/route-parts.service';
import { ProfileComponent } from './components/profile/profile.component';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
......@@ -70,6 +42,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
AccordionLinkDirective,
AccordionDirective,
BreadcrumbComponent,
ProfileComponent
],
imports: [
BrowserModule,
......@@ -99,8 +72,12 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
MatProgressBarModule,
FlexLayoutModule,
BidiModule,
AgmCoreModule.forRoot({apiKey: 'AIzaSyB3HQ_Gk_XRt6KitPdiHQNGpVn0NDwQGMI'}),
PerfectScrollbarModule
MatDialogModule,
AgmCoreModule.forRoot({ apiKey: 'AIzaSyB3HQ_Gk_XRt6KitPdiHQNGpVn0NDwQGMI' }),
PerfectScrollbarModule,
],
entryComponents: [
ProfileComponent
],
providers: [
{
......
src/app/components/affiliates/add-affiliate-dialog/add-affiliate-dialog.component.html
......@@ -6,41 +6,31 @@
<div class="pb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="First name" [formControl]="form.controls['fname']" required>
<mat-error
*ngIf="form.controls['fname'].hasError('required') && form.controls['fname'].touched">
You
must include a first name.</mat-error>
<mat-error *ngIf="form.controls['fname'].hasError('required') && form.controls['fname'].touched">
You must include a first name.</mat-error>
<mat-error class="mat-text-warn"
*ngIf="form.controls['fname'].hasError('minlength') && form.controls['fname'].touched">
Your
first name must be at least 5 characters long.</mat-error>
Your first name must be at least 5 characters long.</mat-error>
<mat-error class="mat-text-warn"
*ngIf="form.controls['fname'].hasError('maxlength') && form.controls['fname'].touched">
Your
first name cannot exceed 10 characters.</mat-error>
Your first name cannot exceed 10 characters.</mat-error>
</mat-form-field>
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Last name" [formControl]="form.controls['lname']" required>
<mat-error
*ngIf="form.controls['lname'].hasError('required') && form.controls['lname'].touched"
<mat-error *ngIf="form.controls['lname'].hasError('required') && form.controls['lname'].touched"
class="mat-text-warn">You must include a last name.</mat-error>
<mat-error
*ngIf="form.controls['lname'].hasError('minlength') && form.controls['lname'].touched"
<mat-error *ngIf="form.controls['lname'].hasError('minlength') && form.controls['lname'].touched"
class="mat-text-warn">Your last name must be at least 5 characters long.</mat-error>
<mat-error
*ngIf="form.controls['lname'].hasError('maxlength') && form.controls['lname'].touched"
<mat-error *ngIf="form.controls['lname'].hasError('maxlength') && form.controls['lname'].touched"
class="mat-text-warn">Your last name cannot exceed 10 characters.</mat-error>
</mat-form-field>
<mat-form-field style="width: 30%">
<input matInput placeholder="User name" [formControl]="form.controls['uname']" required>
<mat-error
*ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched"
<mat-error *ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched"
class="mat-text-warn">You must include a user name.</mat-error>
<mat-error
*ngIf="form.controls['uname'].hasError('minlength') && form.controls['uname'].touched"
<mat-error *ngIf="form.controls['uname'].hasError('minlength') && form.controls['uname'].touched"
class="mat-text-warn">Your user name must be at least 5 characters long.</mat-error>
<mat-error
*ngIf="form.controls['uname'].hasError('maxlength') && form.controls['uname'].touched"
<mat-error *ngIf="form.controls['uname'].hasError('maxlength') && form.controls['uname'].touched"
class="mat-text-warn">Your user name cannot exceed 10 characters.</mat-error>
</mat-form-field>
</div>
......@@ -48,20 +38,15 @@
<div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field style="width: 30%">
<input matInput placeholder="Password" [formControl]="form.controls['password']" type="password"
required>
<mat-error
*ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched"
<input matInput placeholder="Password" [formControl]="form.controls['password']" type="password" required>
<mat-error *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched"
class="mat-text-warn ">You must include password.</mat-error>
</mat-form-field>
<mat-form-field style="width: 30%">
<input matInput placeholder="Email address" [formControl]="form.controls['email']" type="email"
required>
<mat-error
*ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched"
<input matInput placeholder="Email address" [formControl]="form.controls['email']" type="email" required>
<mat-error *ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched"
class="mat-text-warn">You must include an email address.</mat-error>
<mat-error
*ngIf="form.controls['email'].errors?.email && form.controls['email'].touched"
<mat-error *ngIf="form.controls['email'].errors?.email && form.controls['email'].touched"
class="mat-text-warn">You
must include a valid email address.</mat-error>
</mat-form-field>
......@@ -88,8 +73,8 @@
</mat-card-content>
<div>
<mat-card-actions>
<button mat-raised-button matTooltip="Submit" color="primary" type="submit" [disabled]="!form.valid">Submit</button>
<button mat-raised-button matTooltip="Close"color="accent" (click)="dialogRef.close(false)">Close</button>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Submit</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</div>
</form>
......
src/app/components/affiliates/edit-dialog/edit-dialog.component.html
......@@ -49,8 +49,8 @@
</div>
<hr>
<mat-card-actions>
<button mat-raised-button matTooltip="Update" color="primary">Update</button>
<button mat-raised-button matTooltip="Close" color="accent"
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button color="accent"
(click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form>
......@@ -71,8 +71,8 @@
</mat-form-field>
<hr>
<mat-card-actions>
<button mat-raised-button matTooltip="Update" color="primary">Update</button>
<button mat-raised-button matTooltip="Close" color="accent"
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button color="accent"
(click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</div>
......@@ -190,8 +190,8 @@
</div>
<hr>
<mat-card-actions>
<button mat-raised-button matTooltip="Save" color="primary">Save</button>
<button mat-raised-button matTooltip="Close" color="accent"
<button mat-raised-button color="primary">Save</button>
<button mat-raised-button color="accent"
(click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form>
......
src/app/components/affiliates/view-affiliates/view-affiliate.component.html
......@@ -27,15 +27,15 @@
<mat-option value="end">Disable</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button matTooltip="Search" color="primary">Search</button>
<button mat-button matTooltip="Clean">Clean</button>
<button mat-raised-button color="primary">Search</button>
<button mat-button>Clean</button>
</mat-expansion-panel>
<br>
<div fxLayout="row" fxLayoutWrap="wrap">
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div fxFlex.gt-xs="50" fxFlex="100" class="text-sm-right text-xs-left">
<span fxFlex></span>
<button mat-raised-button color="primary" matTooltip="Add Affiliate" class="mr-1" (click)="addAffiliateDialog()">Add Affiliate </button>
<button mat-raised-button color="primary" class="mr-1" (click)="addAffiliateDialog()">Add Affiliate </button>
</div>
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
......
src/app/components/dialog/dialog-routing.module.ts deleted 100644 → 0
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DialogRoutingModule { }
src/app/components/dialog/dialog.module.ts deleted 100644 → 0
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DialogRoutingModule } from './dialog-routing.module';
import { ManualBalanceAdjustmentComponent } from './manual-balance-adjustment/manual-balance-adjustment.component';
@NgModule({
imports: [
CommonModule,
DialogRoutingModule
],
declarations: [ManualBalanceAdjustmentComponent]
})
export class DialogModule { }
src/app/components/dialog/manual-balance-adjustment/manual-balance-adjustment.component.ts deleted 100644 → 0
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-manual-balance-adjustment',
templateUrl: './manual-balance-adjustment.component.html',
styleUrls: ['./manual-balance-adjustment.component.scss']
})
export class ManualBalanceAdjustmentComponent implements OnInit {
ngOnInit() {
}
private _dimesionToggle = false;
constructor(
public dialogRef: MatDialogRef<ManualBalanceAdjustmentComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle;
if (this._dimesionToggle) {
this.dialogRef
.updateSize('500px', '500px')
.updatePosition({ top: '25px', left: '25px' });
} else {
this.dialogRef
.updateSize()
.updatePosition();
}
}
}
src/app/components/operators/add-operator-dialog/add-operator-dialog.component.html
......@@ -68,8 +68,8 @@
</mat-card-content>
<hr>
<mat-card-actions>
<button mat-raised-button matTooltip="Submit" color="primary" type="submit" [disabled]="!form.valid">Submit</button>
<button mat-raised-button matTooltip="Close" color="accent" (click)="dialogRef.close(false)">Close</button>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Submit</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form>
</mat-card>
\ No newline at end of file
src/app/components/operators/view-operators/view-operator.component.html
......@@ -28,8 +28,8 @@
</mat-select>
</mat-form-field>
<button mat-raised-button matTooltip="Search" color="primary">Search</button>
<button mat-button matTooltip="Clean" >Clean</button>
<button mat-raised-button color="primary">Search</button>
<button mat-button>Clean</button>
</mat-expansion-panel>
<br>
......@@ -39,7 +39,8 @@
<div fxFlex.gt-xs="50" fxFlex="100" class="text-sm-right text-xs-left">
<span fxFlex></span>
<button mat-raised-button matTooltip="Add Operator" color="primary" class="mr-1" (click)="addOperatorDialog()">Add Operator </button>
<button mat-raised-button color="primary" class="mr-1" (click)="addOperatorDialog()">Add
Operator </button>
</div>
<div class="mat-box-shadow">
......@@ -92,8 +93,7 @@
<ngx-datatable-column name="Action">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button id="modifyButton" matTooltip="Update" class="mibutton24" mat-icon-button mat-button-sm
(click)="openEditDialog()" [attr.aria-label]="edit"
color="primary">
(click)="openEditDialog()" [attr.aria-label]="edit" color="primary">
<mat-icon class="mi16">edit</mat-icon>
</button>
<button id="lockedButton" matTooltip="Delete" class="mibutton24" mat-icon-button mat-button-sm
......
src/app/components/payments/deposits/deposits.component.html
......@@ -57,8 +57,8 @@
</mat-select>
</mat-form-field>
<button mat-raised-button matTooltip="Search" color="primary">Search</button>
<button mat-button matTooltip="Clean">Clean</button>
<button mat-raised-button color="primary">Search</button>
<button mat-button>Clean</button>
</mat-expansion-panel>
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
......
src/app/components/payments/withdrawals/withdrawals.component.html
......@@ -36,8 +36,8 @@
</mat-select>
</mat-form-field>
<button mat-raised-button matTooltip="Search" color="primary">Search</button>
<button mat-button matTooltip="Clean" >Clean</button>
<button mat-raised-button color="primary">Search</button>
<button mat-button>Clean</button>
</mat-expansion-panel>
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
......
src/app/components/players/balance-adjustment-dialog/balance-adjustment-dialog.component.html
......@@ -110,8 +110,8 @@
</div>
<hr>
<mat-card-actions>
<button mat-raised-button matTooltip="Save" color="primary">Save</button>
<button mat-raised-button matTooltip="Close" color="accent" (click)="dialogRef.close(false)">Close</button>
<button mat-raised-button color="primary">Save</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form>
</mat-card-content>
......
src/app/components/players/edit-dialog/edit-dialog.component.html
......@@ -51,9 +51,8 @@
</div>
<hr>
<mat-card-actions>
<button mat-raised-button matTooltip="Update" color="primary">Update</button>
<button mat-raised-button matTooltip="Close" color="accent"
(click)="dialogRef.close(false)">Close</button>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form>
</mat-card-content>
......@@ -73,9 +72,8 @@
</mat-form-field>
<hr>
<mat-card-actions>
<button mat-raised-button matTooltip="Update" color="primary">Update</button>
<button mat-raised-button matTooltip="Close" color="accent"
(click)="dialogRef.close(false)">Close</button>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</div>
</div>
......@@ -92,8 +90,8 @@
<br>
<div fxFlex.gt-xs="50" fxFlex="100" class="text-sm-right text-xs-left">
<span fxFlex></span>
<button mat-raised-button [attr.align]="actionsAlignment" matTooltip="Balance Adjustment"
color="primary" class="mr-1" (click)="openBalanceAdjustmentDialog()">Balance
<button mat-raised-button [attr.align]="actionsAlignment" color="primary" class="mr-1"
(click)="openBalanceAdjustmentDialog()">Balance
Adjustment </button>
</div>
......
src/app/components/profile/profile.component.html 0 → 100644
<mat-card>
<mat-toolbar color="primary">Operator profile</mat-toolbar>
<form>
<mat-card-content>
</mat-card-content>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</form>
</mat-card>
src/app/components/profile/profile.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProfileComponent } from './profile.component';
describe('ProfileComponent', () => {
let component: ProfileComponent;
let fixture: ComponentFixture<ProfileComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProfileComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/components/profile/profile.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/components/search/operation-log/operation-log.component.html
......@@ -27,7 +27,7 @@
<mat-form-field>
<input matInput placeholder="Remark">
</mat-form-field>
<button mat-raised-button matTooltip="Search" color="primary">Search</button>
<button mat-raised-button color="primary">Search</button>
</mat-expansion-panel>
<div class="mat-box-shadow">
......
src/app/components/search/transfer-history/transfer-history.component.html
......@@ -27,7 +27,7 @@
<mat-form-field>
<input matInput placeholder="Remark">
</mat-form-field>
<button mat-raised-button matTooltip="Search" color="primary">Search</button>
<button mat-raised-button color="primary">Search</button>
</mat-expansion-panel>
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
......
src/app/components/session/forgot/forgot.component.html
......@@ -6,21 +6,27 @@
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="text-xs-center pb-1">
<img src="assets/images/logo-dark.svg" alt=""/>
<p class="mat-text-muted">Enter your email and we'll send you instructions on how to reset your password.</p>
<p class="mat-text-muted">Enter your username and email and we'll send you mail to reset your password.
</p>
</div>
<div fxLayout="column" fxLayoutAlign="space-around">
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Email address" type="email" [formControl]="form.controls['email']">
<input matInput placeholder="Username" [formControl]="form.controls['uname']">
<mat-error *ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched"
class="mat-text-warn">You must include a user name.</mat-error>
</mat-form-field>
<small *ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched" class="mat-text-warn">You must include an email address.</small>
<small *ngIf="form.controls['email'].errors?.email && form.controls['email'].touched" class="mat-text-warn">You must include a valid email address.</small>
</div>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Login</button>
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Email address" type="email" [formControl]="form.controls['email']">
<mat-error *ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched"
class="mat-text-warn">You must include an email address.</mat-error>
<mat-error *ngIf="form.controls['email'].errors?.email && form.controls['email'].touched"
class="mat-text-warn">You must include a valid email address.</mat-error>
</mat-form-field>
</div>
<div class="pt-1 pb-1 text-xs-center">
<a [routerLink]="['/session/signin']">Access your account</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a [routerLink]="['/session/signup']">Sign up for a new account</a>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">send</button>
</div>
</form>
</mat-card-content>
......
src/app/components/session/forgot/forgot.component.ts
......@@ -11,16 +11,17 @@ import { CustomValidators } from 'ng2-validation';
export class ForgotComponent implements OnInit {
public form: FormGroup;
constructor(private fb: FormBuilder, private router: Router) {}
constructor(private fb: FormBuilder, private router: Router) { }
ngOnInit() {
this.form = this.fb.group ( {
email: [ null, Validators.compose( [ Validators.required, CustomValidators.email ] ) ]
} );
this.form = this.fb.group({
uname: [null, Validators.compose([Validators.required])],
email: [null, Validators.compose([Validators.required, CustomValidators.email])]
});
}
onSubmit() {
this.router.navigate ( ['/session/signin'] );
this.router.navigate(['/session/signin']);
}
}
src/app/components/session/signin/signin.component.html
......@@ -5,30 +5,27 @@
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="text-xs-center pb-1">
<img src="assets/images/logo-dark.svg" alt=""/>
<p class="mat-text-muted">Sign in with your app id to continue.</p>
<img src="assets/images/logo-dark.svg" alt="" />
</div>
<div fxLayout="column" fxLayoutAlign="space-around">
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Username" [formControl]="form.controls['uname']">
<mat-error *ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched"
class="mat-text-warn">Username is required.</mat-error>
</mat-form-field>
<small *ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched" class="mat-text-warn">Username is required.</small>
</div>
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput type="password" placeholder="Password" [formControl]="form.controls['password']">
<mat-error *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched"
class="mat-text-warn">Password is required.</mat-error>
</mat-form-field>
<small *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched" class="mat-text-warn">Password is required.</small>
</div>
<div class="pb-1">
<mat-checkbox>Stay logged in</mat-checkbox>
</div>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Login</button>
</div>
<div class="pt-1 pb-1 text-xs-center">
<a [routerLink]="['/session/forgot']">Forgot password?</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a [routerLink]="['/session/signup']">Sign up for a new account.</a>
</div>
</form>
</mat-card-content>
......
src/app/core/header/header.component.html
......@@ -11,11 +11,11 @@
<mat-icon>person</mat-icon>
</button>
<mat-menu #user="matMenu" x-position="before">
<button mat-menu-item>
<button mat-menu-item (click)="openProfileDialog()">
<mat-icon>account_box</mat-icon>
Profile
</button>
<button mat-menu-item>
<button mat-menu-item (click)="logout()">
<mat-icon>exit_to_app</mat-icon>
Sign Out
</button>
......
src/app/core/header/header.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
import { Component, EventEmitter, Inject, Output } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';
import { DOCUMENT } from '@angular/platform-browser';
import { Router } from '@angular/router';
import * as screenfull from 'screenfull';
import { ProfileComponent } from '../../components/profile/profile.component';
const defaultDialogConfig = new MatDialogConfig();
@Component({
selector: 'app-header',
......@@ -11,7 +17,49 @@ export class HeaderComponent {
@Output() toggleSidenav = new EventEmitter<void>();
@Output() toggleNotificationSidenav = new EventEmitter<void>();
constructor() {
dialogRef: MatDialogRef<any> | null;
lastAfterClosedResult: string;
lastBeforeCloseResult: string;
actionsAlignment: string;
config = {
disableClose: true,
panelClass: 'custom-overlay-pane-class',
hasBackdrop: true,
backdropClass: '',
width: '700px',
height: '',
minWidth: '',
minHeight: '',
maxWidth: defaultDialogConfig.maxWidth,
maxHeight: '',
position: {
top: '',
bottom: '',
left: '',
right: ''
},
};
constructor(private router: Router, public dialog: MatDialog, @Inject(DOCUMENT) doc: any) {
dialog.afterOpen.subscribe(() => {
if (!doc.body.classList.contains('no-scroll')) {
doc.body.classList.add('no-scroll');
}
});
dialog.afterAllClosed.subscribe(() => {
doc.body.classList.remove('no-scroll');
});
}
openProfileDialog() {
this.dialogRef = this.dialog.open(ProfileComponent, this.config);
this.dialogRef.beforeClose().subscribe((result: string) => {
this.lastBeforeCloseResult = result;
});
this.dialogRef.afterClosed().subscribe((result: string) => {
this.lastAfterClosedResult = result;
this.dialogRef = null;
});
}
fullScreenToggle(): void {
......@@ -19,4 +67,7 @@ export class HeaderComponent {
screenfull.toggle();
}
}
logout() {
this.router.navigate(['/session/signin']);
}
}
src/assets/images/logo-dark.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg width="101px" height="18px" viewBox="0 0 101 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="logo-dark" transform="translate(-1.000000, -6.000000)">
<path d="M6.4,23 L1.35,23 L1.35,6.325 L10.25,6.325 C14.15,6.325 16.25,8.925 16.25,12.05 C16.25,15.15 14.15,17.75 10.25,17.75 L6.4,17.75 L6.4,23 Z M9.6,13.35 C10.45,13.35 11.125,12.925 11.125,12.05 C11.125,11.15 10.45,10.725 9.6,10.725 L6.4,10.725 L6.4,13.35 L9.6,13.35 Z M32.825,23 L27.075,23 L24.775,17.75 L22.95,17.75 L22.95,23 L17.9,23 L17.9,6.325 L26.8,6.325 C30.7,6.325 32.8,8.925 32.8,12.05 C32.8,14.925 31.125,16.45 29.8,17.1 L32.825,23 Z M26.025,13.35 C26.875,13.35 27.675,12.95 27.675,12.025 C27.675,11.125 26.875,10.725 26.025,10.725 L22.95,10.725 L22.95,13.35 L26.025,13.35 Z M39.9,23 L39.9,6.325 L34.85,6.325 L34.85,23 L39.9,23 Z M62.4,23 L62.4,6.325 L55.425,6.325 L52.5,14.325 L49.575,6.325 L42.6,6.325 L42.6,23 L47.65,23 L47.65,12.975 L51.375,23 L53.625,23 L57.35,12.975 L57.35,23 L62.4,23 Z M77.75,23 L77.75,18.6 L70.15,18.6 L70.15,16.775 L77.575,16.775 L77.575,12.375 L70.15,12.375 L70.15,10.725 L77.75,10.725 L77.75,6.325 L65.1,6.325 L65.1,23 L77.75,23 Z M94.925,23 L89.175,23 L86.875,17.75 L85.05,17.75 L85.05,23 L80,23 L80,6.325 L88.9,6.325 C92.8,6.325 94.9,8.925 94.9,12.05 C94.9,14.925 93.225,16.45 91.9,17.1 L94.925,23 Z M88.125,13.35 C88.975,13.35 89.775,12.95 89.775,12.025 C89.775,11.125 88.975,10.725 88.125,10.725 L85.05,10.725 L85.05,13.35 L88.125,13.35 Z" id="PRIMER" fill="#000000"></path>
<path d="M99.125,23.3 C100.575,23.3 101.8,22.075 101.8,20.625 C101.8,19.175 100.575,17.95 99.125,17.95 C97.675,17.95 96.45,19.175 96.45,20.625 C96.45,22.075 97.675,23.3 99.125,23.3 Z" id="." fill="#063EF0"></path>
</g>
</g>
</svg>
\ No newline at end of file
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101 18"><defs><style>.cls-1{fill:#f7941d;}</style></defs><title>Artboard 1</title><path d="M12.79,15.56,15.92,2.44h3.31l3,13.12H19.58l-.65-3.32H16.06l-.65,3.32Zm3.66-5.25h2.09l-.66-3.72c-.12-.62-.18-1.21-.25-1.82,0-.3-.05-.6-.08-.88h0c0,.28-.07.58-.09.88-.07.61-.12,1.2-.24,1.82Z"/><path d="M31.31,10.89c0,.24,0,.51,0,.75-.12,2.4-.93,4.23-3.66,4.23-4,0-4.28-2.55-4.28-6V8c.1-3.34.37-5.82,4.28-5.82a3.28,3.28,0,0,1,3.59,3.39,5.54,5.54,0,0,1,0,1H28.83c-.11-.84,0-2.42-1.23-2.42-1.92,0-1.76,2.29-1.76,3.31v3.64c0,1.08.08,2.85,1.76,2.85,1.35,0,1.19-2.17,1.25-3Z"/><path d="M33.27,15.56V2.44h2.45V8.27h0a25.44,25.44,0,0,1,1.53-3.15l1.44-2.68h2.76L38.26,8.07l3.39,7.49H38.89l-2.31-5.18-.86,1.42v3.76Z"/><path d="M58.14,15.56V2.44h7V4.36h-4.5V7.69h4.22V9.61H60.59v6Z"/><path d="M66.89,15.56V2.44h6.94V4.36H69.34V7.69h4.21V9.61H69.34v6Z"/><path d="M75.56,15.56V2.44H78V15.56Z"/><path d="M88.18,10.89c0,.24,0,.51-.06.75-.12,2.4-.92,4.23-3.65,4.23-4,0-4.29-2.55-4.29-6V8c.11-3.34.37-5.82,4.29-5.82a3.27,3.27,0,0,1,3.58,3.39,6.63,6.63,0,0,1,.06,1H85.69c-.1-.84,0-2.42-1.22-2.42-1.93,0-1.77,2.29-1.77,3.31v3.64c0,1.08.09,2.85,1.77,2.85,1.35,0,1.19-2.17,1.24-3Z"/><path d="M90.06,15.56V2.44H97V4.36H92.51V7.67h4.1V9.59h-4.1v4.05H97v1.92Z"/><path class="cls-1" d="M10.78,3.4A3.21,3.21,0,0,0,8,2.44H4V15.56l2.45-3V9.67h.94a2.35,2.35,0,0,1,1.25.26L9.85,8.51a2.54,2.54,0,0,0,1.57-2.75A3.52,3.52,0,0,0,10.78,3.4ZM8.7,7.29c-.38.49-1.16.45-1.75.45H6.49V4.37H7.63C8.75,4.4,9,4.89,9,5.87A2.51,2.51,0,0,1,8.7,7.29Z"/><path class="cls-1" d="M54.61,3.11,53.2,5.8c-.17-.88-.59-1.7-1.67-1.7-1.92,0-1.76,2.29-1.76,3.31v3.64a6,6,0,0,0,.08,1.16h0l-1.41,2.69a1.21,1.21,0,0,1-.16-.16c-.94-1.07-1-2.83-1-4.92V8c.11-3.34.38-5.83,4.29-5.83A4.11,4.11,0,0,1,54.61,3.11Z"/><path d="M11.76,11.59a6.26,6.26,0,0,1-.18,1.61,3,3,0,0,1-3.21,2.36H4l2.45-3v1H7a3.59,3.59,0,0,0,1.47-.14c.66-.29.75-1.15.75-1.81,0-.88-.1-1.43-.54-1.74h0L9.85,8.51v0C11.24,8.73,11.76,9.89,11.76,11.59Z"/><path d="M55.82,8V9.83c0,3.49-.26,6.05-4.29,6.05a4.27,4.27,0,0,1-3.09-1l1.41-2.69a2.15,2.15,0,0,0,.12.5,1.53,1.53,0,0,0,1.56,1.18c1.75,0,1.77-1.8,1.77-3.07V7.48a9.37,9.37,0,0,0-.1-1.67h0l1.41-2.69C55.63,4.14,55.75,5.88,55.82,8Z"/></svg>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!