inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

External template

Browse Source 
External css
Validation rules
ref #17
This commit is contained in:
mauriziovitale84
2016-04-18 15:59:17 +01:00
parent 2e74d5fe3c
commit baa0d60e5e
5 changed files with 259 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
demo-shell-ng2/app/components/login.ts
View File

@@ -6,37 +6,24 @@ import {Authentication} from "../services/authentication";
@Component({
selector: 'login',
directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
template: `
<div class="row">
<div class="col-md-4 col-md-offset-4">
<small>Use test:test credentials to log in</small>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">
<div *ngIf="error">Check your password</div>
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" ngControl="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" ngControl="password">
</div>
<button type="submit" class="btn btn-default" [disabled]="!form.valid">Login</button>
</form>
</div>
</div>
`
templateUrl: 'app/template/login.component.html',
styleUrls: ['app/style/login.component.css'],
})
export class Login {
form: ControlGroup;
error: boolean = false;
isErrorStyle(field:ControlGroup ) {
if(field.valid){
return false;
} else {
return true;
}
}
constructor(fb: FormBuilder, public auth: Authentication, public router: Router) {
this.form = fb.group({
username: ['', Validators.required],
username: ['', Validators.compose([Validators.required, Validators.minLength(4)]);
password: ['', Validators.required]
});
}

178
demo-shell-ng2/app/js/xml2json.js Normal file
View File

@@ -0,0 +1,178 @@
/* This work is licensed under Creative Commons GNU LGPL License.
License: http://creativecommons.org/licenses/LGPL/2.1/
Version: 0.9
Author: Stefan Goessner/2006
Web: http://goessner.net/
*/
var parseXml;
if (typeof window.DOMParser != "undefined") {
parseXml = function(xmlStr) {
return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
};
} else if (typeof window.ActiveXObject != "undefined" &&
new window.ActiveXObject("Microsoft.XMLDOM")) {
parseXml = function(xmlStr) {
var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(xmlStr);
return xmlDoc;
};
} else {
throw new Error("No XML parser found");
}
function xml2json(xml, tab) {
var X = {
toObj: function(xml) {
var o = {};
if (xml.nodeType==1) { // element node ..
if (xml.attributes.length) // element with attributes ..
for (var i=0; i<xml.attributes.length; i++)
o["@"+xml.attributes[i].nodeName] = (xml.attributes[i].nodeValue||"").toString();
if (xml.firstChild) { // element has child nodes ..
var textChild=0, cdataChild=0, hasElementChild=false;
for (var n=xml.firstChild; n; n=n.nextSibling) {
if (n.nodeType==1) hasElementChild = true;
else if (n.nodeType==3 && n.nodeValue.match(/[^ \f\n\r\t\v]/)) textChild++; // non-whitespace text
else if (n.nodeType==4) cdataChild++; // cdata section node
}
if (hasElementChild) {
if (textChild < 2 && cdataChild < 2) { // structured element with evtl. a single text or/and cdata node ..
X.removeWhite(xml);
for (var n=xml.firstChild; n; n=n.nextSibling) {
if (n.nodeType == 3) // text node
o["#text"] = X.escape(n.nodeValue);
else if (n.nodeType == 4) // cdata node
o["#cdata"] = X.escape(n.nodeValue);
else if (o[n.nodeName]) { // multiple occurence of element ..
if (o[n.nodeName] instanceof Array)
o[n.nodeName][o[n.nodeName].length] = X.toObj(n);
else
o[n.nodeName] = [o[n.nodeName], X.toObj(n)];
}
else // first occurence of element..
o[n.nodeName] = X.toObj(n);
}
}
else { // mixed content
if (!xml.attributes.length)
o = X.escape(X.innerXml(xml));
else
o["#text"] = X.escape(X.innerXml(xml));
}
}
else if (textChild) { // pure text
if (!xml.attributes.length)
o = X.escape(X.innerXml(xml));
else
o["#text"] = X.escape(X.innerXml(xml));
}
else if (cdataChild) { // cdata
if (cdataChild > 1)
o = X.escape(X.innerXml(xml));
else
for (var n=xml.firstChild; n; n=n.nextSibling)
o["#cdata"] = X.escape(n.nodeValue);
}
}
if (!xml.attributes.length && !xml.firstChild) o = null;
}
else if (xml.nodeType==9) { // document.node
o = X.toObj(xml.documentElement);
}
else
alert("unhandled node type: " + xml.nodeType);
return o;
},
toJson: function(o, name, ind) {
var json = name ? ("\""+name+"\"") : "";
if (o instanceof Array) {
for (var i=0,n=o.length; i<n; i++)
o[i] = X.toJson(o[i], "", ind+"\t");
json += (name?":[":"[") + (o.length > 1 ? ("\n"+ind+"\t"+o.join(",\n"+ind+"\t")+"\n"+ind) : o.join("")) + "]";
}
else if (o == null)
json += (name&&":") + "null";
else if (typeof(o) == "object") {
var arr = [];
for (var m in o)
arr[arr.length] = X.toJson(o[m], m, ind+"\t");
json += (name?":{":"{") + (arr.length > 1 ? ("\n"+ind+"\t"+arr.join(",\n"+ind+"\t")+"\n"+ind) : arr.join("")) + "}";
}
else if (typeof(o) == "string")
json += (name&&":") + "\"" + o.toString() + "\"";
else
json += (name&&":") + o.toString();
return json;
},
innerXml: function(node) {
var s = ""
if ("innerHTML" in node)
s = node.innerHTML;
else {
var asXml = function(n) {
var s = "";
if (n.nodeType == 1) {
s += "<" + n.nodeName;
for (var i=0; i<n.attributes.length;i++)
s += " " + n.attributes[i].nodeName + "=\"" + (n.attributes[i].nodeValue||"").toString() + "\"";
if (n.firstChild) {
s += ">";
for (var c=n.firstChild; c; c=c.nextSibling)
s += asXml(c);
s += "</"+n.nodeName+">";
}
else
s += "/>";
}
else if (n.nodeType == 3)
s += n.nodeValue;
else if (n.nodeType == 4)
s += "<![CDATA[" + n.nodeValue + "]]>";
return s;
};
for (var c=node.firstChild; c; c=c.nextSibling)
s += asXml(c);
}
return s;
},
escape: function(txt) {
return txt.replace(/[\\]/g, "\\\\")
.replace(/[\"]/g, '\\"')
.replace(/[\n]/g, '\\n')
.replace(/[\r]/g, '\\r');
},
removeWhite: function(e) {
e.normalize();
for (var n = e.firstChild; n; ) {
if (n.nodeType == 3) { // text node
if (!n.nodeValue.match(/[^ \f\n\r\t\v]/)) { // pure whitespace text node
var nxt = n.nextSibling;
e.removeChild(n);
n = nxt;
}
else
n = n.nextSibling;
}
else if (n.nodeType == 1) { // element node
X.removeWhite(n);
n = n.nextSibling;
}
else // any other node
n = n.nextSibling;
}
return e;
}
};
xml = parseXml(xml);
if (xml.nodeType == 9) // document node
xml = xml.documentElement;
var json = X.toJson(X.toObj(X.removeWhite(xml)), xml.nodeName, "\t");
return "{\n" + tab + (tab ? json.replace(/\t/g, tab) : json.replace(/\t|\n/g, "")) + "\n}";
}

40
demo-shell-ng2/app/style/login.component.css Normal file
View File

@@ -0,0 +1,40 @@
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="username"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

29
demo-shell-ng2/app/template/login.component.html Normal file
View File

@@ -0,0 +1,29 @@
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)" class="form-signin">
<div [ngClass]="{'has-error': isErrorStyle(form.controls.username)}" class="form-group">
<label for="username">Username</label>
<input id="username" class="form-control " type="text" placeholder="username" ngControl="username">
<div [hidden]="form.controls.username.valid || form.controls.username.pristine" class="alert alert-danger">
<p *ngIf="form.controls.username.dirty && form.controls.username.errors && form.controls.username.errors.minlength">
Your username needs to be at least 4 characters.
</p>
<p *ngIf="form.controls.username.hasError('required')">
Username is required
</p>
</div>
</div>
<div [ngClass]="{'has-error': isErrorStyle(form.controls.password)}" class="form-group">
<label for="password">Password</label>
<input id="password" class="form-control" type="password" placeholder="password" ngControl="password">
<div [hidden]="form.controls.password.valid || form.controls.password.pristine" class="alert alert-danger">
<p *ngIf="form.controls.password.hasError('required')">
Password is required
</p>
</div>
</div>
<button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="!form.valid">Login</button>
<div *ngIf="error" class="alert alert-danger">You have entered an invalid username or password</div>
</form>
</div>
</div>

2
demo-shell-ng2/index.html
View File

@@ -26,7 +26,7 @@
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./script/xml2json.js"></script>
<script src="/app/js/xml2json.js"></script>
<!-- 2. Configure SystemJS -->
<script>