mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
#151 Improve login component style
This commit is contained in:
mauriziovitale84
parent
ba6aa5800f
commit
21fae1b2e5
8
ng2-components/ng2-alfresco-login/demo/assets/material.orange-blue.min.css
vendored
Normal file
8
ng2-components/ng2-alfresco-login/demo/assets/material.orange-blue.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -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">
|
||||
|
||||
|
||||
@ -13,7 +13,11 @@
|
||||
"LOGIN-SUCCESS": "Login successful"
|
||||
},
|
||||
"BUTTON": {
|
||||
"LOGIN": "Login"
|
||||
"LOGIN": "SIGN IN"
|
||||
},
|
||||
"ACTION": {
|
||||
"HELP": "NEED HELP?",
|
||||
"REGISTER": "REGISTER"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,5 +15,9 @@
|
||||
"BUTTON": {
|
||||
"LOGIN": "Accedi"
|
||||
}
|
||||
},
|
||||
"ACTION": {
|
||||
"HELP": "BISOGNO DI AIUTO?",
|
||||
"REGISTER": "REGISTRATI"
|
||||
}
|
||||
}
|
||||
@ -1,115 +1,117 @@
|
||||
{
|
||||
"name": "ng2-alfresco-login",
|
||||
"description": "Alfresco Angular2 Login Component",
|
||||
"version": "0.1.12",
|
||||
"author": "Alfresco Software, Ltd.",
|
||||
"scripts": {
|
||||
"typings": "typings install",
|
||||
"server": "http-server -c-1 -o -p 8875 .",
|
||||
"build": "npm run tslint && typings install && rm -rf dist && tsc && npm run copytemplates && license-check",
|
||||
"build:w": "npm run tslint && typings install && rm -rf dist && npm run watch-task",
|
||||
"watch-task": "concurrently \"npm run tsc:w\" \"npm run copytemplates:w\" \"license-check\"",
|
||||
"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\"",
|
||||
"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",
|
||||
"tsc": "tsc",
|
||||
"tsc:w": "tsc -w",
|
||||
"pretest": "npm run build",
|
||||
"test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
|
||||
"test-browser": "concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
|
||||
"posttest": "node_modules/.bin/remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html",
|
||||
"coverage": "npm run test && http-server -c-1 -o -p 9875 ./coverage/report",
|
||||
"prepublish": "npm run build"
|
||||
"name": "ng2-alfresco-login",
|
||||
"description": "Alfresco Angular2 Login Component",
|
||||
"version": "0.1.13",
|
||||
"author": "Alfresco Software, Ltd.",
|
||||
"scripts": {
|
||||
"typings": "typings install",
|
||||
"server": "http-server -c-1 -o -p 8875 .",
|
||||
"build": "npm run tslint && typings install && rm -rf dist && tsc && npm run copytemplates && license-check",
|
||||
"build:w": "npm run tslint && typings install && rm -rf dist && npm run watch-task",
|
||||
"watch-task": "concurrently \"npm run tsc:w\" \"npm run copytemplates:w\" \"license-check\"",
|
||||
"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 && 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",
|
||||
"test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
|
||||
"test-browser": "concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
|
||||
"posttest": "node_modules/.bin/remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html",
|
||||
"coverage": "npm run test && http-server -c-1 -o -p 9875 ./coverage/report",
|
||||
"prepublish": "npm run build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Alfresco/dev-platform-webcomponents.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/Alfresco/dev-platform-webcomponents/issues"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Denys Vuika",
|
||||
"email": "denis.vuyka@gmail.com"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Alfresco/dev-platform-webcomponents.git"
|
||||
{
|
||||
"name": "Maurizio Vitale",
|
||||
"email": "maurizio.vitale84@gmail.com"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/Alfresco/dev-platform-webcomponents/issues"
|
||||
{
|
||||
"name": "Mario Romano",
|
||||
"email": "mario.romano83@gmail.com"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Denys Vuika",
|
||||
"email": "denis.vuyka@gmail.com"
|
||||
},
|
||||
{
|
||||
"name": "Maurizio Vitale",
|
||||
"email": "maurizio.vitale84@gmail.com"
|
||||
},
|
||||
{
|
||||
"name": "Mario Romano",
|
||||
"email": "mario.romano83@gmail.com"
|
||||
},
|
||||
{
|
||||
"name": "Eugenio Romano",
|
||||
"email": "eugenio.romano@alfresco.com"
|
||||
}
|
||||
],
|
||||
"keywords": [
|
||||
"ng2",
|
||||
"angular",
|
||||
"angular2",
|
||||
"alfresco"
|
||||
],
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-beta.15",
|
||||
"es6-module-loader": "^0.17.8",
|
||||
"es6-shim": "^0.35.0",
|
||||
"ng2-alfresco-core": "^0.1.7",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-beta.2",
|
||||
"systemjs": "0.19.26",
|
||||
"zone.js": "^0.6.12",
|
||||
"alfresco-core-rest-api": "^0.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"angular2": "2.0.0-beta.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^2.1.0",
|
||||
"coveralls": "^2.11.9",
|
||||
"cpx": "^1.3.1",
|
||||
"http-server": "0.8.5",
|
||||
"jasmine-core": "2.4.1",
|
||||
"karma": "~0.13.22",
|
||||
"karma-chrome-launcher": "~1.0.1",
|
||||
"karma-coverage": "^1.0.0",
|
||||
"karma-jasmine": "~1.0.2",
|
||||
"karma-mocha-reporter": "^2.0.3",
|
||||
"karma-jasmine-html-reporter": "^0.2.0",
|
||||
"license-check": "^1.0.4",
|
||||
"remap-istanbul": "^0.6.3",
|
||||
"traceur": "^0.0.91",
|
||||
"tslint": "^3.8.1",
|
||||
"typescript": "^1.8.10",
|
||||
"typings": "^0.7.12",
|
||||
"xo": "^0.14.0",
|
||||
"yargs": "^4.7.0"
|
||||
},
|
||||
"license-check-config": {
|
||||
"src": [
|
||||
"**/*.js",
|
||||
"**/*.ts",
|
||||
"!/**/coverage/**/*",
|
||||
"!/**/demo/**/*",
|
||||
"!/**/node_modules/**/*",
|
||||
"!/**/typings/**/*",
|
||||
"!*.js"
|
||||
],
|
||||
"path": "assets/license_header.txt",
|
||||
"blocking": false,
|
||||
"logInfo": false,
|
||||
"logError": true
|
||||
},
|
||||
"publishConfig": {
|
||||
"registry": "http://devproducts.alfresco.me:4873/"
|
||||
{
|
||||
"name": "Eugenio Romano",
|
||||
"email": "eugenio.romano@alfresco.com"
|
||||
}
|
||||
],
|
||||
"keywords": [
|
||||
"ng2",
|
||||
"angular",
|
||||
"angular2",
|
||||
"alfresco"
|
||||
],
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-beta.15",
|
||||
"es6-module-loader": "^0.17.8",
|
||||
"es6-shim": "^0.35.0",
|
||||
"ng2-alfresco-core": "^0.1.7",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-beta.2",
|
||||
"systemjs": "0.19.26",
|
||||
"zone.js": "^0.6.12",
|
||||
"alfresco-core-rest-api": "^0.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"angular2": "2.0.0-beta.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^2.1.0",
|
||||
"coveralls": "^2.11.9",
|
||||
"cpx": "^1.3.1",
|
||||
"http-server": "0.8.5",
|
||||
"jasmine-core": "2.4.1",
|
||||
"karma": "~0.13.22",
|
||||
"karma-chrome-launcher": "~1.0.1",
|
||||
"karma-coverage": "^1.0.0",
|
||||
"karma-jasmine": "~1.0.2",
|
||||
"karma-mocha-reporter": "^2.0.3",
|
||||
"karma-jasmine-html-reporter": "^0.2.0",
|
||||
"license-check": "^1.0.4",
|
||||
"remap-istanbul": "^0.6.3",
|
||||
"traceur": "^0.0.91",
|
||||
"tslint": "^3.8.1",
|
||||
"typescript": "^1.8.10",
|
||||
"typings": "^0.7.12",
|
||||
"xo": "^0.14.0",
|
||||
"yargs": "^4.7.0"
|
||||
},
|
||||
"license-check-config": {
|
||||
"src": [
|
||||
"**/*.js",
|
||||
"**/*.ts",
|
||||
"!/**/coverage/**/*",
|
||||
"!/**/demo/**/*",
|
||||
"!/**/node_modules/**/*",
|
||||
"!/**/typings/**/*",
|
||||
"!*.js"
|
||||
],
|
||||
"path": "assets/license_header.txt",
|
||||
"blocking": false,
|
||||
"logInfo": false,
|
||||
"logError": true
|
||||
},
|
||||
"publishConfig": {
|
||||
"registry": "http://devproducts.alfresco.me:4873/"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
File diff suppressed because one or more lines are too long
@ -1,32 +1,51 @@
|
||||
<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>
|
||||
</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">{{'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">
|
||||
<span id="username-error" data-automation-id="username-error">{{formError.username | translate }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<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">
|
||||
<img class="center" [src]="__baseUrl + '/../assets/images/logo_for_light_bg_28.png'">
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
<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">
|
||||
<span id="username-error" data-automation-id="username-error">{{formError.username | translate }}</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">{{'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 [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>
|
||||
<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 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>
|
||||
<div class="mdl-card__menu">
|
||||
<div class="mdl-spinner mdl-js-spinner"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,6 +37,9 @@ declare let __moduleName: string;
|
||||
|
||||
})
|
||||
export class AlfrescoLoginComponent {
|
||||
|
||||
__baseUrl = __moduleName.replace('/alfresco-login.component.js', '');
|
||||
|
||||
@Output()
|
||||
onSuccess = new EventEmitter();
|
||||
@Output()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user