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="./">
|
<base href="./">
|
||||||
|
|
||||||
<!-- Google Material Design Lite -->
|
<!-- 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>
|
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||||
|
|
||||||
|
|||||||
@ -13,7 +13,11 @@
|
|||||||
"LOGIN-SUCCESS": "Login successful"
|
"LOGIN-SUCCESS": "Login successful"
|
||||||
},
|
},
|
||||||
"BUTTON": {
|
"BUTTON": {
|
||||||
"LOGIN": "Login"
|
"LOGIN": "SIGN IN"
|
||||||
|
},
|
||||||
|
"ACTION": {
|
||||||
|
"HELP": "NEED HELP?",
|
||||||
|
"REGISTER": "REGISTER"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,5 +15,9 @@
|
|||||||
"BUTTON": {
|
"BUTTON": {
|
||||||
"LOGIN": "Accedi"
|
"LOGIN": "Accedi"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"ACTION": {
|
||||||
|
"HELP": "BISOGNO DI AIUTO?",
|
||||||
|
"REGISTER": "REGISTRATI"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,115 +1,117 @@
|
|||||||
{
|
{
|
||||||
"name": "ng2-alfresco-login",
|
"name": "ng2-alfresco-login",
|
||||||
"description": "Alfresco Angular2 Login Component",
|
"description": "Alfresco Angular2 Login Component",
|
||||||
"version": "0.1.12",
|
"version": "0.1.13",
|
||||||
"author": "Alfresco Software, Ltd.",
|
"author": "Alfresco Software, Ltd.",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"typings": "typings install",
|
"typings": "typings install",
|
||||||
"server": "http-server -c-1 -o -p 8875 .",
|
"server": "http-server -c-1 -o -p 8875 .",
|
||||||
"build": "npm run tslint && typings install && rm -rf dist && tsc && npm run copytemplates && license-check",
|
"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",
|
"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\"",
|
"watch-task": "concurrently \"npm run tsc:w\" \"npm run copytemplates:w\" \"license-check\"",
|
||||||
"tslint": "npm run tslint-src && npm run tslint-root",
|
"tslint": "npm run tslint-src && npm run tslint-root",
|
||||||
"tslint-src": "tslint -c tslint.json src/**/*.ts, src/**/*.spec.ts ",
|
"tslint-src": "tslint -c tslint.json src/**/*.ts, src/**/*.spec.ts ",
|
||||||
"tslint-root": "tslint -c tslint.json *.ts",
|
"tslint-root": "tslint -c tslint.json *.ts",
|
||||||
"copytemplates": "npm run copy-html-css && npm run copy-i18n",
|
"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-i18n:w\"",
|
"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": "cpx './src/**/*.{html,css}' dist/src",
|
||||||
"copy-html-css:w": "cpx './src/**/*.{html,css}' dist/src -w",
|
"copy-html-css:w": "cpx './src/**/*.{html,css}' dist/src -w",
|
||||||
"copy-i18n": "cpx './i18n/**/*.json' dist/i18n",
|
"copy-i18n": "cpx './i18n/**/*.json' dist/i18n",
|
||||||
"copy-i18n:w": "cpx './i18n/**/*.json' dist/i18n -w",
|
"copy-i18n:w": "cpx './i18n/**/*.json' dist/i18n -w",
|
||||||
"tsc": "tsc",
|
"copy-images": "copyfiles './src/assets/images/**/*.png' dist",
|
||||||
"tsc:w": "tsc -w",
|
"copy-images:w": "cpx './src/assets/images/**/*.png' dist/src/assets/images -w",
|
||||||
"pretest": "npm run build",
|
"tsc": "tsc",
|
||||||
"test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
|
"tsc:w": "tsc -w",
|
||||||
"test-browser": "concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
|
"pretest": "npm run build",
|
||||||
"posttest": "node_modules/.bin/remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html",
|
"test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
|
||||||
"coverage": "npm run test && http-server -c-1 -o -p 9875 ./coverage/report",
|
"test-browser": "concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
|
||||||
"prepublish": "npm run build"
|
"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",
|
"name": "Maurizio Vitale",
|
||||||
"url": "https://github.com/Alfresco/dev-platform-webcomponents.git"
|
"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": "Eugenio Romano",
|
||||||
{
|
"email": "eugenio.romano@alfresco.com"
|
||||||
"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/"
|
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
"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">
|
<div class="content-grid mdl-grid content-layout">
|
||||||
<form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">
|
<div class="login-card-wide mdl-card mdl-shadow--4dp">
|
||||||
<div class="mdl-card__title">
|
<form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">
|
||||||
<h2 class="mdl-card__title-text ">{{'LOGIN.LABEL.LOGIN' | translate }}</h2>
|
<div class="mdl-card__title">
|
||||||
</div>
|
<img class="center" [src]="__baseUrl + '/../assets/images/logo_for_light_bg_28.png'">
|
||||||
<div class="mdl-card__supporting-text">
|
</div>
|
||||||
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
|
<div class="mdl-card__supporting-text">
|
||||||
<label for="username" class="mdl-textfield__label">{{'LOGIN.LABEL.USERNAME' | translate }}</label>
|
<div class="error">
|
||||||
<input type="text" class="mdl-textfield__input" id="username" data-automation-id="username" ngControl="username" tabindex="1" />
|
<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>
|
||||||
<span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="formError.username">
|
<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>
|
||||||
<span id="username-error" data-automation-id="username-error">{{formError.username | translate }}</span>
|
</div>
|
||||||
</span>
|
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}"
|
||||||
</div>
|
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">
|
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.password)}"
|
||||||
<label for="password" class="mdl-textfield__label">{{'LOGIN.LABEL.PASSWORD' | translate }}</label>
|
class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||||
<input type="password" class="mdl-textfield__input" id="password" data-automation-id="password" ngControl="password" tabindex="2" />
|
<label for="password" class="mdl-textfield__label">{{'LOGIN.LABEL.PASSWORD' | translate }}</label>
|
||||||
<span class="mdl-tooltip mdl-tooltip--validation" for="password" *ngIf="formError.password">
|
<input type="password" class="mdl-textfield__input" id="password" data-automation-id="password" ngControl="password" tabindex="2" />
|
||||||
<span id="password-required" data-automation-id="password-required">{{formError.password | translate }}</span>
|
<span class="mdl-tooltip mdl-tooltip--validation" for="password" *ngIf="formError.password">
|
||||||
</span>
|
<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>
|
<div class="mdl-card__actions mdl-card--border mdl-card__link">
|
||||||
<div class="mdl-card__actions mdl-card--border">
|
<div class="login-action">
|
||||||
<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 class="login-action-left"> <a href="">{{'LOGIN.ACTION.HELP' | translate }}</a> </div>
|
||||||
<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 class="login-action-right"> <a href="">{{'LOGIN.ACTION.REGISTER' | translate }}</a> </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>
|
</div>
|
||||||
<div class="mdl-card__menu">
|
<div class="mdl-card__menu">
|
||||||
<div class="mdl-spinner mdl-js-spinner"></div>
|
<div class="mdl-spinner mdl-js-spinner"></div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@ -37,6 +37,9 @@ declare let __moduleName: string;
|
|||||||
|
|
||||||
})
|
})
|
||||||
export class AlfrescoLoginComponent {
|
export class AlfrescoLoginComponent {
|
||||||
|
|
||||||
|
__baseUrl = __moduleName.replace('/alfresco-login.component.js', '');
|
||||||
|
|
||||||
@Output()
|
@Output()
|
||||||
onSuccess = new EventEmitter();
|
onSuccess = new EventEmitter();
|
||||||
@Output()
|
@Output()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user