inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

#151 Improve login component style

Browse Source
This commit is contained in:
mauriziovitale84 2016-06-07 17:11:13 +01:00
parent ba6aa5800f
commit 21fae1b2e5
9 changed files with 235 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ng2-components/ng2-alfresco-login/demo/assets/material.orange-blue.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
ng2-components/ng2-alfresco-login/demo/index.html
View File

@ -6,7 +6,7 @@
<base href="./">
<!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
<link rel="stylesheet" href="/assets/material.orange-blue.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

6
ng2-components/ng2-alfresco-login/i18n/en.json
View File

@ -13,7 +13,11 @@
"LOGIN-SUCCESS": "Login successful"
},
"BUTTON": {
"LOGIN": "Login"
"LOGIN": "SIGN IN"
},
"ACTION": {
"HELP": "NEED HELP?",
"REGISTER": "REGISTER"
}
}
}

4
ng2-components/ng2-alfresco-login/i18n/it.json
View File

@ -15,5 +15,9 @@
"BUTTON": {
"LOGIN": "Accedi"
}
},
"ACTION": {
"HELP": "BISOGNO DI AIUTO?",
"REGISTER": "REGISTRATI"
}
}

8
ng2-components/ng2-alfresco-login/package.json
View File

@ -1,7 +1,7 @@
{
"name": "ng2-alfresco-login",
"description": "Alfresco Angular2 Login Component",
"version": "0.1.12",
"version": "0.1.13",
"author": "Alfresco Software, Ltd.",
"scripts": {
"typings": "typings install",
@ -12,12 +12,14 @@
"tslint": "npm run tslint-src && npm run tslint-root",
"tslint-src": "tslint -c tslint.json src/**/*.ts, src/**/*.spec.ts ",
"tslint-root": "tslint -c tslint.json *.ts",
"copytemplates": "npm run copy-html-css && npm run copy-i18n",
"copytemplates:w": "concurrently \"npm run copy-html-css:w\" \"npm run copy-i18n:w\"",
"copytemplates": "npm run copy-html-css && npm run copy-i18n && npm run copy-images",
"copytemplates:w": "concurrently \"npm run copy-html-css:w\" \"npm run copy-images:w\" \"npm run copy-i18n:w\"",
"copy-html-css": "cpx './src/**/*.{html,css}' dist/src",
"copy-html-css:w": "cpx './src/**/*.{html,css}' dist/src -w",
"copy-i18n": "cpx './i18n/**/*.json' dist/i18n",
"copy-i18n:w": "cpx './i18n/**/*.json' dist/i18n -w",
"copy-images": "copyfiles './src/assets/images/**/*.png' dist",
"copy-images:w": "cpx './src/assets/images/**/*.png' dist/src/assets/images -w",
"tsc": "tsc",
"tsc:w": "tsc -w",
"pretest": "npm run build",

BIN
ng2-components/ng2-alfresco-login/src/assets/images/logo_for_light_bg_28.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

57
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
View File

File diff suppressed because one or more lines are too long

35
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
View File

@ -1,10 +1,16 @@
<div class="login-card-wide mdl-card mdl-shadow--4dp">
<div class="content-grid mdl-grid content-layout">
<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.LABEL.LOGIN' | translate }}</h2>
<img class="center" [src]="__baseUrl + '/../assets/images/logo_for_light_bg_28.png'">
</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 ">
<div class="error">
<div *ngIf="error" id="login-error" data-automation-id="login-error" class="mdl-card__supporting-text" style="color: red;">{{'LOGIN.MESSAGES.LOGIN-ERROR' | translate }}</div>
<div *ngIf="success" id="login-success" data-automation-id="login-success" class="mdl-card__supporting-text" style="color: blue;">{{'LOGIN.MESSAGES.LOGIN-SUCCESS' | translate }}</div>
</div>
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}"
class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
<label for="username" class="mdl-textfield__label">{{'LOGIN.LABEL.USERNAME' | translate }}</label>
<input type="text" class="mdl-textfield__input" id="username" data-automation-id="username" ngControl="username" tabindex="1" />
<span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="formError.username">
@ -12,21 +18,34 @@
</span>
</div>
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.password)}" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.password)}"
class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label for="password" class="mdl-textfield__label">{{'LOGIN.LABEL.PASSWORD' | translate }}</label>
<input type="password" class="mdl-textfield__input" id="password" data-automation-id="password" ngControl="password" tabindex="2" />
<span class="mdl-tooltip mdl-tooltip--validation" for="password" *ngIf="formError.password">
<span id="password-required" data-automation-id="password-required">{{formError.password | translate }}</span>
</span>
</div>
<br><br>
<button type="submit" class="center mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
data-automation-id="login-button" [disabled]="!form.valid">{{'LOGIN.BUTTON.LOGIN' | translate }}</button>
<br>
<div class="center">
<label class="center mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="remember">
<input type="checkbox" id="remember" class="center mdl-checkbox__input">
<span class="mdl-checkbox__label">Remember</span>
</label>
</div>
</div>
<div class="mdl-card__actions mdl-card--border mdl-card__link">
<div class="login-action">
<div class="login-action-left"> <a href="">{{'LOGIN.ACTION.HELP' | translate }}</a> </div>
<div class="login-action-right"> <a href="">{{'LOGIN.ACTION.REGISTER' | translate }}</a> </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" data-automation-id="login-button" [disabled]="!form.valid">{{'LOGIN.BUTTON.LOGIN' | translate }}</button>
<div *ngIf="error" id="login-error" data-automation-id="login-error" class="mdl-card__supporting-text" style="color: red;">{{'LOGIN.MESSAGES.LOGIN-ERROR' | translate }}</div>
<div *ngIf="success" id="login-success" data-automation-id="login-success" class="mdl-card__supporting-text" style="color: blue;">{{'LOGIN.MESSAGES.LOGIN-SUCCESS' | translate }}</div>
</div>
<div class="mdl-card__menu">
<div class="mdl-spinner mdl-js-spinner"></div>
</div>
</form>
</div>
</div>

3
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
View File

@ -37,6 +37,9 @@ declare let __moduleName: string;
})
export class AlfrescoLoginComponent {
__baseUrl = __moduleName.replace('/alfresco-login.component.js', '');
@Output()
onSuccess = new EventEmitter();
@Output()