added material design

master
Max 5 years ago
parent 62d8d0a1d9
commit 08aace9e0d

@ -27,6 +27,7 @@
"src/assets"
],
"styles": [
"src/styles/greenvironment-material-theme.scss",
"src/styles.sass"
],
"scripts": []
@ -83,6 +84,7 @@
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles/greenvironment-material-theme.scss",
"src/styles.sass"
],
"scripts": [],

8350
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -11,17 +11,18 @@
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^0.13.0",
"@angular/animations": "~7.0.0",
"@angular/cdk": "^7.0.3",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "^7.0.4",
"@angular/animations": "^8.2.14",
"@angular/cdk": "8.2.3",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "^8.2.14",
"@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/router": "~8.2.14",
"apollo-angular": "^1.7.0",
"apollo-angular-link-http": "^1.6.0",
"apollo-cache-inmemory": "^1.3.2",
@ -30,15 +31,18 @@
"core-js": "^2.5.4",
"graphql": "^14.3.1",
"graphql-tag": "^2.10.0",
"hammerjs": "^2.0.8",
"js-sha512": "^0.8.0",
"ngx-socket-io": "^2.0.0",
"node-sass": "^4.13.0",
"rxjs": "~6.3.3",
"ts-md5": "^1.2.7",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular/cli": "~7.0.4",
"@angular/compiler-cli": "~7.0.0",
"@angular-devkit/build-angular": "^0.803.20",
"@angular/cli": "^8.3.20",
"@angular/compiler-cli": "^8.2.14",
"@angular/language-service": "~7.0.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
@ -46,7 +50,7 @@
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
@ -54,6 +58,6 @@
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.1"
"typescript": "~3.5.0"
}
}

@ -1,2 +1 @@
<app-scaffold id="headerbar"></app-scaffold>
<router-outlet></router-outlet>
<app-main-navigation></app-main-navigation>

@ -1,11 +1,9 @@
@import '../styles/mixins.sass'
@import '../styles/vars.sass'
/*
#content
grid-template: 7.5% 92.5% / 25% 50% 25%
display: grid
min-height: 100vh
max-height: 100vh*/
html, body
margin: 0
height: 100%
#imprint
background-color: $cSecondaryBackground
@ -21,25 +19,5 @@
min-height: 100vh
max-height: 100vh
#login
background-color: $cSecondaryBackground
grid-template: 15% 70% 15% / 15% 70% 15%
display: grid
min-height: 100vh
max-height: 100vh
#register
background-color: $cSecondaryBackground
grid-template: 15% 70% 15% / 15% 70% 15%
display: grid
min-height: 100vh
max-height: 100vh
#headerbar
height: 10vh
@include gridPosition(1, 1, 1, 4)
display: grid
grid-template: 100% /30% 10% 10% 10% 10% 10% 15% 5%
background-color: $cHeadPrimaryBackground
color: $cHeadFontColor

@ -9,6 +9,7 @@ import { SelfService } from './services/selfservice/self.service';
styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
constructor(private data: DatasharingService, private selfservice: SelfService) { }
userInfo: User
@ -37,4 +38,5 @@ export class AppComponent implements OnInit {
this.selfservice.checkIfLoggedIn();
}
}
}

@ -26,6 +26,25 @@ import { ProfileComponent } from './components/profile/profile.component';
import { ImprintComponent } from './components/imprint/imprint.component';
import { AboutComponent } from './components/about/about.component';
import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSliderModule } from '@angular/material/slider';
import { MatFormFieldModule } from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { ReactiveFormsModule} from '@angular/forms';
import {MatIconModule} from '@angular/material/icon';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatTabsModule} from '@angular/material/tabs';
import {MatCardModule} from '@angular/material/card';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatButtonModule } from '@angular/material/button';
import { MatListModule } from '@angular/material/list';
const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
@ -58,7 +77,8 @@ const appRoutes: Routes = [
PostlistComponent,
ImprintComponent,
AboutComponent,
ProfileComponent
ProfileComponent,
MainNavigationComponent
],
imports: [
BrowserModule,
@ -69,7 +89,22 @@ const appRoutes: Routes = [
HttpClientModule,
RouterModule.forRoot(
appRoutes
)
),
MatIconModule,
BrowserAnimationsModule,
MatSliderModule,
MatFormFieldModule ,
MatInputModule,
ReactiveFormsModule,
MatToolbarModule,
MatSidenavModule,
FlexLayoutModule,
MatTabsModule,
LayoutModule,
MatButtonModule,
MatListModule,
MatCardModule,
MatButtonToggleModule
],
providers: [],
bootstrap: [AppComponent]

@ -1,13 +1,33 @@
<div id="postinput">
<!--<div id="postinput">
<textarea #content id='input' placeholder="Post something ..." rows='3' wrap="soft"></textarea>
<button id="attach" type='submit'><span><i class="fa fa-paperclip fa-2x" aria-hidden="true"></i></span></button>
<button id="submit" type='submit' (click)=createPost(content)><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
</div>-->
<div id="home">
<mat-card style="text-align: center;">
<mat-card-content>
<mat-form-field id="input">
<textarea matInput #content type="text" mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
<button mat-button matSuffix mat-icon-button (click)="value=''">
<mat-icon>add</mat-icon>
</button>
<button mat-button matSuffix mat-icon-button (click)=createPost(content)>
<mat-icon>send</mat-icon>
</button>
</mat-form-field>
</mat-card-content>
</mat-card>
<div id="chooser-div" style="text-align: center; margin-top: 1em;">
<mat-button-toggle-group id="feedchooser" value="new">
<mat-button-toggle (click)="showNew()" value="new">New</mat-button-toggle>
<mat-button-toggle (click)="showMostLiked()" value="mostliked">Most Liked</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div id='completeFeed'>
<div id='feedchooser'>
<div id="complete-feed">
<!--<div id='feedchooser'>
<button id="new" (click)="showNew()">New</button>
<button id='mostliked' (click)="showMostLiked()">Most Liked</button>
</div>
</div>-->
<div id="feedlist">
<div *ngIf = "viewNew">
<feed-postlist (voteEvent)="refresh($event)" [childPostList]="parentSelectedPostList"></feed-postlist>
@ -17,3 +37,4 @@
</div>
</div>
</div>
</div>

@ -1,82 +1,23 @@
@import '../../../styles/mixins.sass'
@import '../../../styles/vars.sass'
#postinput
@include gridPosition(1, 2, 1, 2)
margin: 0.5em
display: grid
grid-template: 100% /80% 10% 10%
#input
@include gridPosition(1, 2, 1, 2)
border-radius: 0.5em
padding: 0.125em
resize: none
#attach
@include gridPosition(1, 2, 2, 3)
#submit
@include gridPosition(1, 2, 3, 4)
button
background-color: $cFeedChooserBackground
color: $cFontWhite
border: none
border-radius: 0.5em
button:hover
background-color: lighten($cFeedChooserBackground, 10%)
cursor: pointer
#completeFeed
@include gridPosition(2, 3, 1, 2)
display: grid
grid-template: 5% 95% /100%
overflow: auto
background-color: $cFontWhite
#home
width: 100%
height: 100%
#feedchooser
@include gridPosition(1, 2, 1, 2)
display: grid
grid-template: 100% /50% 50%
background-color: $cFontWhite
padding: 0
margin: 0
button
background-color: $cFeedChooserBackground
border: none
font-size: 1.5em
color: $cFontWhite
border-radius: 0.5em
button:hover
background-color: lighten($cFeedChooserBackground, 10%)
cursor: pointer
#new
@include gridPosition(1, 2, 1, 2)
#mostliked
@include gridPosition(1, 2, 2, 3)
#complete-feed
box-sizing: border-box
display: flex
width: 100%
padding: 0.5em
#feedlist
@include gridPosition(2, 3, 1, 2)
overflow: auto
width: 100%
height: 100%
.feeditemPicture
background-color: $cFeedItemBackground
min-height: 2em
margin: 0.5em
padding: 0.25em
border-radius: 0.25em
.itemhead
align-items: flex-start
#input
box-sizing: border-box
width: 100%
padding-left: 0.5em
padding-right: 0.5em
.title, .handle, .date
margin: 0.125em
.title
font-weight: bold
.handle, .date
color: $cInactiveText
.handle a
text-decoration: none
color: $cInactiveText
font-style: normal
.handle a:hover
text-decoration: underline

@ -1,4 +1,4 @@
<div class="feeditem" *ngFor = "let post of childPostList" [class.selected]="post === selectedPost">
<!--<div class="feeditem" *ngFor = "let post of childPostList" [class.selected]="post === selectedPost">
<div class="itemhead">
<div class="usertag">
<span class="title">{{post.author.name}}</span>
@ -17,4 +17,27 @@
<span id="upvotes">{{post.upvotes}}</span>
</div>
</div>
</div>
</div>-->
<mat-card class="post" *ngFor = "let post of childPostList" [class.selected]="post === selectedPost" tabindex="0">
<mat-card-header>
<!-- <div mat-card-avatar class="example-header-image"></div> -->
<mat-card-title>
{{post.author.name}}
<a mat-button class="handle" routerLink="/profile/{{post.author.id}}">@{{post.author.handle}}</a>
</mat-card-title>
<mat-card-subtitle>
<p>{{post.date}}</p>
</mat-card-subtitle>
</mat-card-header>
<!--<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">-->
<mat-card-content>
<p [innerHTML]="post.htmlContent"></p>
</mat-card-content>
<mat-card-actions>
<button mat-button><mat-icon aria-hidden="false" aria-label="Example home icon">keyboard_arrow_up</mat-icon></button>
{{post.upvotes}}
<button mat-button><mat-icon aria-hidden="false" aria-label="Example home icon">keyboard_arrow_down</mat-icon></button>
{{post.downvotes}}
</mat-card-actions>
</mat-card>

@ -1,67 +1,13 @@
@import '../../../../styles/mixins.sass'
@import '../../../../styles/vars.sass'
.feeditem
background-color: $cFeedItemBackground
min-height: 2em
//max-heigth: 5em
margin: 0.5em
padding: 0.25em
border-radius: 0.25em
.post
box-sizing: border-box
width: 100%
margin-top: 0.5em
::ng-deep .mat-card-header-text
margin: 0px
.itemhead
display: grid
grid-template: 100% /70% 30%
.usertag
@include gridPosition(1, 2, 1, 2)
.title, .handle, .date
margin: 0.125em
.title
font-weight: bold
.date
@include gridPosition(1, 2, 2, 3)
text-align: right
.handle, .date
color: $cInactiveText
.handle a
text-decoration: none
color: $cInactiveText
font-style: normal
.handle a:hover
text-decoration: underline
.itembody
display: grid
grid-template: 100% /85% 15%
.text
@include gridPosition(1, 2, 1, 2)
overflow-x: hidden
::ng-deep img
max-width: 100%
height: auto
.vote
@include gridPosition(1, 2, 2, 3)
display: grid
grid-template: 70% 30% /50% 50%
height: 3em
button
background-color: $cFeedItemBackground
border: none
button:hover
cursor: pointer
#up
@include gridPosition(1, 2, 2, 3)
color: $cFeedUpVote
#up:hover
color: darken($cFeedUpVote, 10%)
#down
@include gridPosition(1, 2, 1, 2)
color: $cFeedDownVote
#down:hover
color: darken($cFeedDownVote, 10%)
#downvotes
@include gridPosition(2, 3, 1, 2)
text-align: center
#upvotes
@include gridPosition(2, 3, 2, 3)
text-align: center

@ -1,5 +1,36 @@
<div id="content">
<div id="content" fxShow="true" fxHide.lt-md="true">
<home-chatmanager id="chatcontainer" *ngIf="loggedIn"></home-chatmanager>
<home-feed id="feedcontainer"></home-feed>
<home-social id="socialcontainer" *ngIf="loggedIn"></home-social>
</div>
<!--
<mat-tab-group headerPosition="below" position="0" id="bottom-menu" fxShow="true" fxHide.gt-sm="true">
<mat-tab label="First"> <home-chatmanager ></home-chatmanager></mat-tab>
<mat-tab label="Second"><home-feed id="feed"></home-feed></mat-tab>
<mat-tab label="Third"> <home-social ></home-social></mat-tab>
</mat-tab-group>
-->
<div class="bottom-menu" fxShow="true" fxHide.gt-sm="true">
<mat-tab-group id="tab-group" selectedIndex="1" mat-stretch-tabs headerPosition="below">
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>chat</mat-icon>
</ng-template>
<home-chatmanager class="tab-content"></home-chatmanager>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>home</mat-icon>
</ng-template>
<home-feed class="tab-content"></home-feed>
</mat-tab>
<mat-tab >
<ng-template mat-tab-label>
<mat-icon>people</mat-icon>
</ng-template>
<home-social class="tab-content"></home-social>
</mat-tab>
</mat-tab-group>
</div>

@ -6,7 +6,6 @@
display: grid
min-height: 90vh
max-height: 90vh
background-color: $cFontWhite
#chatcontainer
@include gridPosition(1, 3, 1, 2)
@ -17,7 +16,6 @@
@include gridPosition(1, 3, 2, 3)
display: grid
grid-template: 10% 90% /100%
background-color: $cFontWhite
overflow: auto
#socialcontainer
@ -26,3 +24,28 @@
grid-template: 50% 50% /100%
background-color: $cBoxBodyBackground
overflow: auto
.mat-toolbar.mat-primary
width: 100%
position: sticky
top: 0
z-index: 1
/deep/ .mat-tab-body-wrapper
height: 100%
.bottom-menu
position: fixed
width: 100%
height: calc(100% - 56px)
#tab-group
height: 100%
.tab-content
height: 50%
width: 100%

@ -1,22 +1,24 @@
<div id="login">
<div id="logincontainer">
<h1>Login</h1>
<table style="width:100%" (keyup.enter)="onClickSubmit(email.value,password.value)">
<tr>
<td>email: </td>
<td><input #email type="text" name="email"><br></td>
</tr>
<tr>
<td>password:</td>
<td> <input #password type="password" name="password"><br></td>
</tr>
</table>
<button type="loginbutton" (click)="onClickSubmit(email.value,password.value)">Login</button>
<p *ngIf="errorOccurred">{{errorMessage}}</p>
<br>
<br>
<a href="/register">You aren't part of greenvironment yet? - join us here</a>
<mat-card style="text-align: center;" >
<mat-card-title>
Login
</mat-card-title>
<mat-card-content>
<div class="example-container" (keyup.enter)="onClickSubmit(email.value,password.value)">
<mat-error *ngIf="errorOccurred">{{getErrorMessage()}}</mat-error>
<mat-form-field>
<input matInput placeholder="Enter your email" #email >
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" #password>
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
</div>
<button mat-raised-button color="primary" (click)="onClickSubmit(email.value,password.value)">Login</button>
<p>You aren't part of greenvironment yet?</p>
<a mat-stroked-button color="primary" routerLink="/register">Register</a>
</mat-card-content>
</mat-card>
</div>

@ -2,21 +2,40 @@
@import '../../../styles/vars.sass'
#login
background-color: $cSecondaryBackground
grid-template: 8% 77% 15% / 15% 70% 15%
display: grid
height: 90vh
#logincontainer
@include gridPosition(2, 2,2,2)
background-color: $cPrimaryBackground
padding: 1em
overflow: auto
input
padding: 2em
max-width: 35em
margin: 0 auto
.example-container
display: flex
flex-direction: column
.example-container > *
width: 100%
.example-right-align
text-align: right
input.example-right-align::-webkit-outer-spin-button,
input.example-right-align::-webkit-inner-spin-button
display: none
input.example-right-align
-moz-appearance: textfield
.mat-error
margin-bottom: 0.25em
.mat-raised-button
margin: 0.25em
width: 100%
.mat-button
margin: 0.25em
a
color: $cHeadPrimaryBackground
.mat-stroked-button
width: 100%

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
import { Login } from 'src/app/models/login';
import { LoginService } from 'src/app/services/login/login.service';
import {Router} from '@angular/router';
@ -11,6 +12,7 @@ import * as sha512 from 'js-sha512';
})
export class LoginComponent implements OnInit {
login: Login
hide = true;
errorOccurred: boolean = false;
errorMessage: string;
@ -18,6 +20,10 @@ export class LoginComponent implements OnInit {
this.login = {passwordHash: null, email: null};
}
public getErrorMessage(){
return this.errorMessage;
}
public loginError(error : any){
console.log(error.errors[0].message);
this.errorOccurred = true;
@ -36,6 +42,7 @@ export class LoginComponent implements OnInit {
this.loginService.login(this.login, error => this.loginError(error.json()));
}
email = new FormControl('', [Validators.required, Validators.email]);
ngOnInit() {}
}

@ -0,0 +1,37 @@
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav"
fxShow="true" fxHide.gt-sm="true"
fixedInViewport="false"
>
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item *ngFor="let link of navLinks"
href={{link.path}}>{{link.label}}</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
fxShow="true" fxHide.gt-sm="true">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Greenvironment</span>
<!--The following menu items will be hidden on both SM and XS screen sizes -->
<nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true">
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
(click)="activeLink = link"
routerLinkActive #rla="routerLinkActive"
[active]="activeLink == link">
{{link.label}}
</a>
</nav>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

@ -0,0 +1,27 @@
.sidenav-container
height: 100%
.mat-sidenav-container
height: 100%
.mat-sidenav-content
height: 100vh
.sidenav
width: 200px
.sidenav .mat-toolbar
background: inherit
.mat-toolbar.mat-primary
height: 56px
position: sticky
top: 0
z-index: 1000

@ -0,0 +1,40 @@
import { LayoutModule } from '@angular/cdk/layout';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MainNavigationComponent } from './main-navigation.component';
describe('MainNavigationComponent', () => {
let component: MainNavigationComponent;
let fixture: ComponentFixture<MainNavigationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MainNavigationComponent],
imports: [
NoopAnimationsModule,
LayoutModule,
MatButtonModule,
MatIconModule,
MatListModule,
MatSidenavModule,
MatToolbarModule,
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MainNavigationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,27 @@
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
@Component({
selector: 'app-main-navigation',
templateUrl: './main-navigation.component.html',
styleUrls: ['./main-navigation.component.sass']
})
export class MainNavigationComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
navLinks = [
{ path: '', label: 'Home' },
{ path: '/profile/1', label: 'Profile' },
{ path: '/about', label: 'About' },
{ path: '/imprint', label: 'Imprint' },
{ path: '/login', label: 'Login' },
];
}

@ -1,28 +1,33 @@
<div id="register">
<div id="registercontainer">
<h1>Register</h1>
<table style="width:100%" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
<tr>
<td>username: </td>
<td><input #username type="text" name="username" username.value=''><br></td>
</tr>
<tr>
<td>email:</td>
<td><input #email type="text" name="email"><br></td>
</tr>
<tr>
<td>password:</td>
<td> <input #password type="password" name="password"><br></td>
</tr>
<tr>
<td>repeat password:</td>
<td> <input #repeatpassword type="password" name="repeatpassword"><br></td>
</tr>
</table>
<button type="registerbutton" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button>
<p *ngIf="errorOccurred">{{errorMessage}}</p>
<br>
<br>
<a href="/login">You are already part of greenvironment? - login</a>
<mat-card style="text-align: center;" >
<mat-card-title>
Register
</mat-card-title>
<mat-card-content>
<div class="example-container" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
<mat-error *ngIf="errorOccurred">{{errorMessage}}</mat-error>
<mat-form-field>
<input matInput placeholder="Enter your email" #email >
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Enter your username" #username >
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide1 ? 'password' : 'text'" #password>
<button mat-icon-button matSuffix (click)="hide1 = !hide1" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide1">
<mat-icon>{{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Repeat your password" [type]="hide2 ? 'password' : 'text'" #repeatpassword>
<button mat-icon-button matSuffix (click)="hide2 = !hide2" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide2">
<mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
</div>
<button mat-raised-button color="primary" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button>
<p>You are already part of greenvironment?</p>
<a mat-stroked-button color="primary" routerLink="/login">Login</a>
</mat-card-content>
</mat-card>
</div>

@ -2,20 +2,36 @@
@import '../../../styles/vars.sass'
#register
background-color: $cSecondaryBackground
grid-template: 8% 77% 15% / 15% 70% 15%
display: grid
min-height: 90vh
max-height: 90vh
#registercontainer
@include gridPosition(2, 2,2,2)
grid-template: 15% 15% 15% 15% 15% 15% / 100%
background-color: $cPrimaryBackground
padding: 1em
overflow: auto
input
padding: 2em
max-width: 35em
margin: 0 auto
.example-container
display: flex
flex-direction: column
.example-container > *
width: 100%
.example-right-align
text-align: right
input.example-right-align::-webkit-outer-spin-button,
input.example-right-align::-webkit-inner-spin-button
display: none
input.example-right-align
-moz-appearance: textfield
.mat-error
margin-bottom: 0.25em
.mat-raised-button
margin: 0.25em
width: 100%
.mat-button
margin: 0.25em
a
color: $cHeadPrimaryBackground
.mat-stroked-button
width: 100%

@ -15,6 +15,8 @@ export class RegisterComponent implements OnInit {
registration: Registration
errorOccurred: boolean = false;
errorMessage: string;
hide1 = true;
hide2 = true;
constructor(private registerService: RegisterService) {
this.registration = {username: null, passwordHash: null, email: null};

@ -7,6 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://kit.fontawesome.com/84cf838715.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>

@ -1,3 +1,4 @@
import 'hammerjs';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@ -2,9 +2,8 @@
@import 'styles/vars.sass'
body
font-family: Arial, serif
font-family: Arial, sans-serif
margin: 0
padding: 0
min-height: 100vh
max-height: 100vh
height: 100%

@ -0,0 +1,27 @@
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$theme-primary: mat-palette($mat-green);
$theme-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$theme-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$my-theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($my-theme);

@ -18,9 +18,9 @@ $cFeedUpVote: #2cb149
$cFeedDownVote: #ff5f5f
//Home -- Chat, Friends, Groups
$cFontWhite: #adffc1ee
$cFontWhite: #fff//#adffc1ee //this is also the background color lol
$cBoxHeaderBackground: #259145
$cBoxBodyBackground: #3deb71
$cBoxBodyBackground: #fff//#3deb71
$cMessageOwn: #cfe4c9
$cMessageForeign: #baca5d

Loading…
Cancel
Save