Zettai-Backup/csr_webapp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contribute and login screen added

Browse Source
This commit is contained in:
venbatechnologies@gmail.com 2019-09-03 12:29:44 +05:30
parent 9ca0ba9966
commit 6de45ac218
14 changed files with 605 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ng8-seed/src/app/app.component.ts
View File

@ -12,5 +12,6 @@ export class AppComponent {
const browserLang: string = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
console.log("app component")
}
}

2
ng8-seed/src/app/app.module.ts
View File

@ -39,6 +39,7 @@ import { ProjectDetailComponent } from './components/project-detail/project-deta
// import {MDBBootstrapModule} from 'angular-bootstrap-md'
import {SlideshowModule} from 'ng-simple-slideshow';
import { FooterComponent } from './components/footer/footer.component'
import { ContributeComponent } from './components/contribute/contribute.component';
// import { AddEventModule } from './add-event.module';
export function HttpLoaderFactory(http: HttpClient) {
@ -60,6 +61,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
AuthLayoutComponent,
// ProjectDetailComponent,
FooterComponent,
ContributeComponent
// ProjectListComponent
],
imports: [

4
ng8-seed/src/app/app.routing.ts
View File

@ -3,6 +3,7 @@ import { Routes } from '@angular/router';
import { AdminLayoutComponent } from './layouts/admin/admin-layout.component';
import { AuthLayoutComponent } from './layouts/auth/auth-layout.component';
import { ProjectDetailComponent } from './components/project-detail/project-detail.component';
import { ContributeComponent } from './components/contribute/contribute.component';
export const AppRoutes: Routes = [{
path: '',
@ -15,6 +16,9 @@ export const AppRoutes: Routes = [{
path: 'home',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
},
{path : 'contribute',
// loadChildren :()=>import('./dashboard/dashboard.module').then(m=>m.)
component:ContributeComponent}
]
}, {
path: '',

205
ng8-seed/src/app/components/contribute/contribute.component.html Normal file
View File

@ -0,0 +1,205 @@
<!--starts-->
<div fxLayout fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0">
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="1000" fxFlex.xl="40"> -->
<mat-card class="p-2" fxFlex="75%" fxFlex.xs="100" fxFlex.sm="100">
<mat-card-title><h5 class="mt-0">Contribute to school requirements</h5></mat-card-title>
<hr>
<form method="post">
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2 pt-1">
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 100%;">
<mat-select placeholder="Select District" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
{{ drink.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;">
<mat-select placeholder="Select Schools" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
{{ drink.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
<mat-select placeholder="Select Category" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
{{ drink.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<table class="shop-table table-responsive" cellspacing="0">
<thead>
<tr>
<!-- <th class="product-remove">&nbsp;</th> -->
<th class="product-thumbnail">&nbsp;</th>
<th class="product-name">Requirement</th>
<th class="product-price">Quantity Cost Per Unit</th>
<th class="product-quantity">Sponsor</th>
<th class="product-subtotal"></th>
</tr>
</thead>
<tbody>
<tr class="cart_item">
<!-- <td class="product-remove">
<a href="#" class="remove" title="Remove this item">×</a> </td> -->
<td class="product-thumbnail">
<a href="#"><img src="assets/images/nike.jpg" alt="" width="100"></a>
</td>
<td class="product-name">Student Benches required at Govt Girls School, Panruti, Villupuram Dt.</td>
<td class="product-price">
<span class=" amount">25<br><span class="price">$</span>23.00</span>
</td>
<td class="product-quantity" data-title="Quantity">
<div class="quantity buttons_added">
<input step="1" min="0" max="" value="3" title="Qty" class="text" size="4" type="number">
</div>
</td>
<td class="product-subtotal" data-title="Total">
<span class="price-amount"><span>$</span>69.00</span>
</td>
</tr>
<tr class="cart_item">
<!-- <td class="product-remove">
<a href="#" class="remove" title="Remove this item">×</a> </td> -->
<td class="product-thumbnail">
<a href="#"><img src="assets/images/nike.jpg" alt="" width="100"></a>
</td>
<td class="product-name">
<a href="#">Student Benches required at Govt Girls School, Panruti, Villupuram Dt.</a> </td>
<td class="product-price">
<span class=" amount">20<br><span class="price">$</span>23.00</span>
</td>
<td class="product-quantity" data-title="Quantity">
<div class="quantity buttons_added">
<input step="1" min="0" max="" value="3" title="Qty" class="text" size="4" type="number">
</div>
</td>
<td class="product-subtotal" data-title="Total">
<span class="price-amount"><span>$</span>69.00</span>
</td>
</tr>
<tr class="cart_item">
<!-- <td class="product-remove">
<a href="#" class="remove" title="Remove this item">×</a> </td> -->
<td class="product-thumbnail">
<a href="#"><img src="assets/images/nike.jpg" alt="" width="100"></a>
</td>
<td class="product-name">
<a href="#">Student Benches required at Govt Girls School, Panruti, Villupuram Dt.</a> </td>
<td class="product-price">
<span class=" amount">20<br><span class="price">$</span>23.00</span>
</td>
<td class="product-quantity" data-title="Quantity">
<div class="quantity buttons_added">
<input step="1" min="0" max="" value="3" title="Qty" class="text" size="4" type="number">
</div>
</td>
<td class="product-subtotal" data-title="Total">
<span class="price-amount"><span>$</span>69.00</span>
</td>
</tr>
<tr class="cart_item">
<!-- <td class="product-remove">
<a href="#" class="remove" title="Remove this item">×</a> </td> -->
<td class="product-thumbnail">
<a href="#"><img src="assets/images/nike.jpg" alt="" width="100"></a>
</td>
<td class="product-name">
<a href="#">Student Benches required at Govt Girls School, Panruti, Villupuram Dt.</a> </td>
<td class="product-price">
<span class=" amount">20<br><span class="price">$</span>23.00</span>
</td>
<td class="product-quantity" data-title="Quantity">
<div class="quantity buttons_added">
<input step="1" min="0" max="" value="3" title="Qty" class="text" size="4" type="number">
</div>
</td>
<td class="product-subtotal" data-title="Total">
<span class="price-amount"><span>$</span>69.00</span>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: right;">
<strong><span>Total</span></strong>
</td>
<td class="product-subtotal" data-title="Total">
<strong><span class="amount"><span class="currency-symbol">$</span>167.00</span></strong>
</td>
</tr>
</tbody>
</table>
<div class="pt-1" style="text-align: right;">
<button mat-raised-button color="primary" class="mr-1 mb-1">Will Contribute the above in kind</button>
<button mat-raised-button color="primary" class="mr-1 mb-1">Proceed for Payment</button>
</div>
</form>
<!-- <div class="clearfix order-total">
<div class="calculated-shipping">
<h4>Cart Totals</h4>
<table class="table-responsive" cellspacing="0">
<tr class="cart-subtotal">
<th>Subtotal</th>
<td><span class="amount"><span class="currency-symbol">$</span>167.00</span>
</td>
</tr>
<tr class="order-total">
<th>Total</th>
<td><strong><span class="amount"><span class="currency-symbol">$</span>167.00</span></strong> </td>
</tr>
</table>
<div class="order-checkout">
<button mat-raised-button color="primary" class="mr-1">Checkout</button>
</div>
</div>
</div> -->
</mat-card>
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="20" fxFlex.xl="40"> -->
<mat-card class="support_mat" fxFlex="25%" fxFlex.xs="100" fxFlex.sm="100px">
<mat-card-header>
<mat-card-title>
<h5>Or Contribute to General Development Fund</h5>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div fxLayout="column" fxLayoutAlign="start stretch">
<div fxLayout fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0">
<div class="pl-3" fxFlex="100%" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="100" fxFlex.xl="100">
<mat-form-field appearance="outline" style="width: 70%;text-align: center;">
<input matInput type="number" placeholder="Amount">
</mat-form-field>
</div>
</div>
<mat-radio-button name="group1" class="pb-1">State School Dev Fund</mat-radio-button>
<mat-radio-button name="group1">District School Dev Fund</mat-radio-button>
<mat-form-field style="width: 100%" class="pl-1">
<mat-select placeholder="Select District" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
{{ drink.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-radio-button name="group1">School Dev Fund</mat-radio-button>
<mat-form-field style="width: 100%" class="pl-1">
<mat-select placeholder="Select School" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
{{ drink.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
<textarea matInput placeholder="Remarks" value="Some Text ..."></textarea>
</mat-form-field>
<button class="mat-green" mat-raised-button>Proceed for Payment</button>
</div>
</mat-card-content>
</mat-card>
<!-- </div> -->
<!-- </div> -->
</div>
<footer class="footer">
<h5>&#9400; TN Schools, All rights reserved</h5>
</footer>

83
ng8-seed/src/app/components/contribute/contribute.component.scss Normal file
View File

@ -0,0 +1,83 @@
table.shop-table {
// border-collapse: separate;
border-spacing: 0;
border-width: 1px 0 0 1px;
// table-layout: fixed;
width: 100%;
padding: 1rem;
}
table {
width: 100%;
}
.m-t-0 {
margin-top: 0;
}
.table-responsive {
text-align: left;
}
.calculated-shipping {
width: 50%;
float: right;
padding: 1rem;
}
.update-btn {
float: right;
}
.order-checkout {
margin-top: 1rem;
}
table.shop-table th {
text-align: left;
}
table td,
table th {
border: none;
border-bottom: 1px solid #e9e9e9;
padding: 12px;
vertical-align: middle;
}
.order-total {
padding-bottom: 2rem;
}
.product-name {
font-size: 1rem;
font-weight: bold;
}
// .product-remove {
// width: 7%;
// .remove {
// font-size: 2rem;
// }
// }
.quantity.buttons_added{
input{
width: 50px;
}
}
@media(max-width:768px) {
.main-detail-product {
padding: 0.3rem !important;
}
}
@media(max-width:580px){
.product-thumbnail {
display: none;
}
.calculated-shipping{
width: 100%;
}
}

25
ng8-seed/src/app/components/contribute/contribute.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContributeComponent } from './contribute.component';
describe('ContributeComponent', () => {
let component: ContributeComponent;
let fixture: ComponentFixture<ContributeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ContributeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ContributeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

46
ng8-seed/src/app/components/contribute/contribute.component.ts Normal file
View File

@ -0,0 +1,46 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-contribute',
templateUrl: './contribute.component.html',
styleUrls: ['./contribute.component.scss']
})
export class ContributeComponent implements OnInit {
isRequired = false;
isDisabled = false;
currentDrink: string;
drinks = [{
value: 'coke-0',
viewValue: 'Coke'
}, {
value: 'sprite-1',
viewValue: 'Sprite'
}, {
value: 'water-2',
viewValue: 'Water'
}, {
value: 'pepper-3',
viewValue: 'Dr. Pepper'
}, {
value: 'coffee-4',
viewValue: 'Coffee'
}, {
value: 'tea-5',
viewValue: 'Tea'
}, {
value: 'juice-6',
viewValue: 'Orange juice'
}, {
value: 'wine-7',
viewValue: 'Wine'
}, {
value: 'milk-8',
viewValue: 'Milk'
}];
constructor() { }
ngOnInit() {
}
}

140
ng8-seed/src/app/dashboard/dashboard.component.html
View File

@ -1,8 +1,135 @@
<!-- <app-layout></app-layout> -->
<div fxLayout="row wrap">
<div fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="30" fxFlex.lg="200" fxFlex.xl="30">
<div class="container">
<slideshow class="image" [height]="height"
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="200" fxFlex.xl="100">
<div class="form-bg">
<!-- <div class="container"> -->
<div fxLayout="row wrap" fxLayoutAlign="center" class="mb-2 pt-3">
<div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
<mat-card class="mc-1" style="width: 75%;height: 160px;">
<div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
<div class="text-center m-color">
<i class="fa fa-university fa-3x"></i>
<div class="d-inline-block">
<h5>School</h5>
</div>
</div>
</div>
</mat-card>
</div>
<div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
<mat-card class="mc-2" style="width: 75%;height: 160px;">
<div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
<div class="text-center m-color">
<i class="fa fa-university fa-3x"></i>
<div class="d-inline-block">
<h5>School</h5>
</div>
</div>
</div>
</mat-card>
</div>
<div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
<mat-card class="mc-3" style="width: 75%;height: 160px;">
<div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
<div class="text-center m-color">
<i class="fa fa-university fa-3x"></i>
<div class="d-inline-block">
<h5>School</h5>
</div>
</div>
</div>
</mat-card>
</div>
<div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
<mat-card class="mc-4" style="width: 75%;height: 160px;">
<div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
<div class="text-center m-color">
<i class="fa fa-university fa-3x"></i>
<div class="d-inline-block">
<h5>School</h5>
</div>
</div>
</div>
</mat-card>
</div>
<div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
<mat-card class="mc-5" style="width: 75%;height: 160px;">
<div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
<div class="text-center m-color">
<i class="fa fa-university fa-3x"></i>
<div class="d-inline-block">
<h5>School</h5>
</div>
</div>
</div>
</mat-card>
</div>
</div>
<div fxLayout="row wrap" fxLayoutAlign="center" class="mb-2 pt-1">
<div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
<mat-card class="mc-6" style="width: 75%;height: 160px;">
<div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
<div class="text-center m-color">
<i class="fa fa-university fa-3x"></i>
<div class="d-inline-block">
<h5>School</h5>
</div>
</div>
</div>
</mat-card>
</div>
<div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
<mat-card class="mc-7" style="width: 75%;height: 160px;">
<div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
<div class="text-center m-color">
<i class="fa fa-university fa-3x"></i>
<div class="d-inline-block">
<h5>School</h5>
</div>
</div>
</div>
</mat-card>
</div>
<div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
<mat-card class="mc-8" style="width: 75%;height: 160px;">
<div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
<div class="text-center m-color">
<i class="fa fa-university fa-3x"></i>
<div class="d-inline-block">
<h5>School</h5>
</div>
</div>
</div>
</mat-card>
</div>
<div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
<mat-card class="mc-9" style="width: 75%;height: 160px;">
<div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
<div class="text-center m-color">
<i class="fa fa-university fa-3x"></i>
<div class="d-inline-block">
<h5>School</h5>
</div>
</div>
</div>
</mat-card>
</div>
<div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
<mat-card class="mc-10" style="width: 75%;height: 160px;">
<div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
<div class="text-center m-color">
<i class="fa fa-university fa-3x"></i>
<div class="d-inline-block">
<h5>School</h5>
</div>
</div>
</div>
</mat-card>
</div>
</div>
<!-- </div> -->
</div>
<!-- <slideshow class="image" [height]="height"
[autoPlay]="true"
[showArrows]="true"
arrowSize="20px"
@ -12,16 +139,15 @@ arrowSize="20px"
showDots="true"
showCaptions="true"
>
</slideshow>
</slideshow> -->
<!-- <div align="center">
<button mat-raised-button class="button-cyan">Contribute</button>
</div> -->
<div class="middle">
<!-- <div class="text">John Doe</div> -->
<!-- <div class="middle">
<button mat-stroked-button class="text">Contribute</button>
</div> -->
</div>
</div>
</div></div>
<!-- <hr/> -->
<!-- <mdb-carousel class="carousel slide carousel-fade" >
<mdb-carousel-item>

59
ng8-seed/src/app/dashboard/dashboard.component.scss
View File

@ -2,6 +2,65 @@ $red: #f5515f;
$blue: #05abe0;
$grey: #343434;
$p: 12px;
// .themeum-campaign-wrapper::after {
// content: '';
// background: #607D8B;
// position: absolute;
// top: 0;
// left: 0;
// height: 100%;
// width: 100%;
// z-index: -1;
// opacity: 0;
// transition: .4s;
// }
.mc-1{
background-color: rgba(51,211,192,0.9);
}
.mc-2{
background-color: rgba(0,190,214,0.9);
}
.mc-3{
background-color: rgba(0,165,228,0.9);
}
.mc-4{
background-color: rgba(0,136,223,0.9);
}
.mc-5{
background-color: rgba(111,99,195,0.9);
}
.mc-6{
background-color: rgba(255,198,88,0.9);
}
.mc-7{
background-color: rgba(255,148,92,0.9);
}
.mc-8{
background-color: rgba(248,102,110,0.9);
}
.mc-9{
background-color: rgba(209,68,130,0.9);
}
.mc-10{
background-color: rgba(150,55,144,0.9);
}
.m-color{
color: #fff !important;
}
.form-bg{
height: 80vh;
min-height: calc(54vh + 70px);
background-position: center center !important;
background-size: cover;
margin: 0;
padding: 0;
border: 0;
background-size: cover;
}
.form-bg::before{
height: 105% !important;
z-index: 0 !important;
}
.profile {
position: relative;
width: 100%;

4
ng8-seed/src/app/dashboard/dashboard.module.ts
View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule, MatFormField, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatTabsModule } from '@angular/material';
import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule, MatFormField, MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatTabsModule,MatSelectModule, MatRadioModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ChartsModule } from 'ng2-charts/ng2-charts';
@ -27,6 +27,8 @@ import {FooterComponent} from 'app/components/footer/footer.component'
MatListModule,
MatProgressBarModule,
MatMenuModule,
MatSelectModule,
MatRadioModule,
ChartsModule,
// NgxChartsModule,
NgxDatatableModule,

7
ng8-seed/src/app/session/login/login-component.html
View File

@ -16,10 +16,11 @@
</mat-form-field>
<button class="mat-green" mat-raised-button>SIGN IN</button>
<p class="mat-text-warn mb-0">Forgot password?</p>
<p class="mb-0">Don't have an account? <a [routerLink]="['/register']" class="mat-text-primary">Register Here</a></p>
<p class="mb-0">Don't have an account? <a [routerLink]="['../register']" class="mat-text-primary">Register Here</a></p>
</div>
<div>
<p>Sign in using</p> <a href="#" class="shared-icon mr-1 mat-blue"><i class="fa fa-facebook fa-lg mr-1"></i> Facebook</a><a href="#" class="shared-icon mat-red"><i class="fa fa-google fa-lg mr-1"></i>Google</a></div>
<!-- <div>
<p>Sign in using</p> <a href="#" class="shared-icon mr-1 mat-blue"><i class="fa fa-facebook fa-lg mr-1"></i> Facebook</a><a href="#" class="shared-icon mat-red"><i class="fa fa-google fa-lg mr-1"></i>Google</a>
</div> -->
</form>
</div>
</mat-card>

45
ng8-seed/src/app/session/register/register-component.html
View File

@ -3,30 +3,49 @@
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
<div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
<mat-card class="login-session">
<p class="mb-0" style="text-align: right;">Already Registered ? <a [routerLink]="['/login']" class="mat-text-primary">Login Here</a></p>
<div>
<h2 class="base-border">Registration Form</h2>
<p>Enter Your Login Details</p>
<h2 class="base-border">Register as a new user</h2>
<p>We would need some of your information to facilitate your contributions and keep you updated on the progress of the projects or new projects</p>
<form #form="ngForm">
<div fxLayout="column" fxLayoutAlign="start stretch">
<mat-form-field style="width: 100%">
<input matInput placeholder="Name" type="text" name="name" required>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Company Name" type="text" name="cname" required>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Country" type="text" name="ctry" required>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="E Mail" type="email" name="email" required>
</mat-form-field>
<mat-form-field style="width: 100%" class="mb-1">
<input matInput placeholder="Password" type="password" name="password" required>
<mat-form-field style="width: 100%">
<input matInput placeholder="Phone Number" type="number" name="pnum" required>
</mat-form-field>
<button class="mat-green" mat-raised-button>Submit</button>
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 25%;">
<input matInput placeholder="Phone OTP" type="number" name="pOTP" required>
</mat-form-field>
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 25%;">
<input matInput placeholder="Email OTP" type="emailOTP" name="emailOTP" required>
</mat-form-field>
<button class="mat-green" mat-raised-button>Verify</button>
</div>
</div>
<div>
<p>Sign Up Using</p> <a href="#" class="shared-icon mr-1 mat-blue"><i class="fa fa-facebook fa-lg mr-1"></i> Facebook</a><a href="#" class="shared-icon mat-red"><i class="fa fa-google fa-lg mr-1"></i>Google</a></div>
<hr>
<div fxLayout="column" fxLayoutAlign="start stretch">
<mat-form-field style="width: 100%">
<input matInput placeholder="Organisation Name" type="text" name="OrganisationName" required>
</mat-form-field>
<mat-form-field style="width: 100%;">
<textarea matInput placeholder="Register Address" name="radress" required></textarea>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Pan of the Organisation" type="panOrganisation" name="panOrganisation" required>
</mat-form-field>
<button class="mat-red" mat-raised-button>Register</button>
</div>
<!-- <div>
<p>Sign Up Using</p> <a href="#" class="shared-icon mr-1 mat-blue"><i class="fa fa-facebook fa-lg mr-1"></i> Facebook</a><a href="#" class="shared-icon mat-red"><i class="fa fa-google fa-lg mr-1"></i>Google</a>
</div> -->
</form>
</div>
</mat-card>

8
ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts
View File

@ -35,16 +35,16 @@ const HORIZONTALMENUITEMS = [
icon: 'bookmark'
},
{
state: 'home',
state: 'contribute',
name: 'Contribute',
type: 'link',
icon: 'error_outline'
},
{
state: 'dark',
name: 'DARK',
state: 'authentication',
name: 'Login',
type: 'link',
icon: 'highlight'
icon: 'lock'
},
// {
// state: 'apps',

8
ng8-seed/src/app/shared/menu-items/menu-items.ts
View File

@ -56,16 +56,16 @@ const MENUITEMS : Menu[] = [
icon: 'bookmark'
},
{
state: 'home',
state: 'contribute',
name: 'Contribute',
type: 'link',
icon: 'error_outline'
},
{
state: 'dark',
name: 'DARK',
state: 'authentication',
name: 'Login',
type: 'link',
icon: 'highlight'
icon: 'lock'
},
];