mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
#17 removed login component
This commit is contained in:
mauriziovitale84
@@ -1,92 +0,0 @@
|
||||
.login-card-wide.mdl-card {
|
||||
width: 512px;
|
||||
margin: auto;
|
||||
}
|
||||
.login-card-wide > .mdl-card__menu {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ng-invalid.ng-invalid.ng-touched {
|
||||
border-color: rgb(222, 50, 38);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ng-invalid.ng-invalid.ng-touched + label {
|
||||
color: rgb(222, 50, 38);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ng-invalid.ng-invalid.ng-touched + label:after {
|
||||
background-color: rgb(222, 50, 38);
|
||||
}
|
||||
|
||||
.ng-invalid.ng-invalid.ng-touched ~ .mdl-tooltip--validation {
|
||||
background-color: rgb(222, 50, 38);
|
||||
}
|
||||
|
||||
|
||||
.ng-invalid.ng-touched:not(:focus) + label::before {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
/* Preferred icon size */
|
||||
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
/* Support for all WebKit browsers. */
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
/* Support for Firefox. */
|
||||
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Support for IE. */
|
||||
|
||||
font-feature-settings: 'liga';
|
||||
content: "warning";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.ng-valid.ng-touched:not(:focus) + label::before {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
/* Preferred icon size */
|
||||
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
/* Support for all WebKit browsers. */
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
/* Support for Firefox. */
|
||||
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Support for IE. */
|
||||
|
||||
font-feature-settings: 'liga';
|
||||
content: "done";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 20px;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
<div class="login-card-wide mdl-card mdl-shadow--4dp">
|
||||
<form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">
|
||||
<div class="mdl-card__title">
|
||||
<h2 class="mdl-card__title-text ">Login</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
|
||||
<label for="username" class="mdl-textfield__label">Username</label>
|
||||
<input type="text" class="mdl-textfield__input" id="username" ngControl="username" />
|
||||
<span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="form.controls.username.hasError('required')">
|
||||
<span>Required.</span>
|
||||
</span>
|
||||
<span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="form.controls.username.hasError('minlength')">
|
||||
<span>Your username needs to be at least 4 characters.</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.password)}" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<label for="password" class="mdl-textfield__label">Password</label>
|
||||
<input type="password" class="mdl-textfield__input" id="password" ngControl="password" />
|
||||
<span class="mdl-tooltip mdl-tooltip--validation" for="password" *ngIf="form.controls.password.hasError('required')">
|
||||
<span>Required.</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" [disabled]="!form.valid">Login</button>
|
||||
</div>
|
||||
<div class="mdl-card__menu">
|
||||
<div class="mdl-spinner mdl-js-spinner"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -1,46 +0,0 @@
|
||||
import {Component} from 'angular2/core';
|
||||
import {Router, ROUTER_DIRECTIVES} from 'angular2/router';
|
||||
import {FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators} from 'angular2/common';
|
||||
import {Authentication} from 'ng2-alfresco-login/ng2-alfresco-login';
|
||||
declare let componentHandler;
|
||||
|
||||
@Component({
|
||||
selector: 'login-component',
|
||||
moduleId: 'app/components/login/login',
|
||||
directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
|
||||
templateUrl: 'login.component.html',
|
||||
styleUrls: ['login.component.css'],
|
||||
})
|
||||
export class LoginComponent {
|
||||
form:ControlGroup;
|
||||
error:boolean = false;
|
||||
|
||||
isErrorStyle(field:ControlGroup) {
|
||||
componentHandler.upgradeAllRegistered();
|
||||
if (field.valid) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
constructor(fb:FormBuilder, public auth:Authentication, public router:Router) {
|
||||
this.form = fb.group({
|
||||
username: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
|
||||
password: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
onSubmit(value:any, event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
this.auth.login('POST', value.username, value.password)
|
||||
.subscribe(
|
||||
(token:any) => this.router.navigate(['Files']),
|
||||
() => {
|
||||
this.error = true;
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user