node-swallowjs
Version:
epp portal
1,428 lines (1,411 loc) • 101 kB
JSX
var FormMixin = {
linkState(attr) {
var dots = attr.name.split('.'),
state = this.state,
name = dots[0];
for(let i=1; i<dots.length; i++) {
let r = /^(.+)\[(\d+)\]$/.exec(name);
if(r) {
name = r[1];
if(state[name]===undefined) state[name] = [];
state = state[name];
name = Number(r[2]);
}
if(state[name]===undefined) state[name] = {};
state = state[name];
name = dots[i];
}
var getter = function() {
return state[name];
};
var setter = function(value) {
state[name] = value;
this.forceUpdate();
}.bind(this);
switch(attr.type) {
case 'checkbox':
case 'radio':
attr.checked = getter()===attr.value;
break;
case 'file':
break;
default:
attr.value = getter();
}
attr.onChange = function(e) {
var that = e.target;
switch(that.type) {
case 'checkbox':
setter(that.checked ? that.value : undefined);
break;
case 'radio':
that.checked && setter(that.value);
break;
case 'file':
var file = that.files[0];
var reader = new FileReader();
switch(that.name){
case 'encodedSignedMark':
reader.onloadend = function(e) {
setter(e.target.result);
};
reader.readAsText(file);
break;
default:
var size = file && file.size/1024;
var types = ["image/png","image/jpeg","image/bmp"];
if(size < 5 || size > 5120 || types.indexOf(file.type)<0){
that.nextElementSibling.innerHTML = "上传的文件,大小或者类型不符合要求";
return;
}
that.nextElementSibling.innerHTML = "";
reader.onloadend = function(e) {
setter(e.target.result.split(',')[1]);
};
reader.readAsDataURL(file);
break;
}
break;
default:
setter(that.value);
}
};
return attr;
},
onSetState(attr) {
return e => this.setState(attr);
}
};
var SelectYears = React.createClass({
render() {
return (
<select {...this.props}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
)
}
});
var LaunchPhase = React.createClass({
render() {
return (
<select {...this.props}>
<option value="sunrise">sunrise</option>
<option value="landrush">landrush</option>
<option value="claims">claims</option>
<option value="open">open</option>
<option value="custom">custom</option>
</select>
)
}
});
var SelectType = React.createClass({
render() {
return (
<select {...this.props}>
<option value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="DNAME">DNAME</option>
<option value="MX">MX</option>
<option value="NS">NS</option>
<option value="SPF">SPF</option>
<option value="TXT">TXT</option>
<option value="PTR">PTR</option>
<option value="URL">URL</option>
</select>
)
}
});
var SelectStatus = React.createClass({
render() {
return (
<select {...this.props}>
<option value="-1"></option>
<option value="0">未通过</option>
<option value="1">通过</option>
</select>
)
}
});
var SelectOrgIdType = React.createClass({
render() {
return (
<select {...this.props}>
<option value="1">工商营业执照</option>
<option value="2">组织机构代码证</option>
<option value="4">统一社会信用代码证书</option>
<option value="8">部队代号</option>
<option value="9">军队单位对外有偿服务系可证</option>
<option value="10">事业单位法人证书</option>
<option value="11">外国企业常驻代表机构登记证</option>
<option value="14">社会团体法人登记证书</option>
<option value="15">宗教活动场所登记证</option>
<option value="16">民办非企业单位登记证书</option>
<option value="17">基金会法人登记证书</option>
<option value="18">律师事务所执业许可证</option>
<option value="19">外国在华文化中心登记证</option>
<option value="20">外国政府旅游部门常驻代表机构批准登记证</option>
<option value="21">司法鉴定许可证</option>
<option value="22">境外机构证件</option>
<option value="23">社会服务机构登记证书</option>
<option value="24">民办学校办学许可证</option>
<option value="25">医疗机构执业许可证</option>
<option value="26">公证机构执业证</option>
<option value="27">北京市外国驻华使馆人员子女学校办学许可证</option>
<option value="30">其他(只允许填统一社会信用代码)</option>
</select>
)
}
});
var DsData = React.createClass({
render() {
return (
<div>
keyTag:
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.keyTag',
size: '5',
maxLength: '5'
})}/>
alg:
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.alg',
size: '3',
maxLength: '3'
})}/>
digestType:
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.digestType',
size: '3',
maxLength: '3'
})}/>
<br/>
digest:
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.digest',
size: '45',
maxLength: '256'
})}/>
</div>
)
}
});
var PostalInfo = React.createClass({
render() {
return (
<table border="0">
<tbody>
<tr>
<td>联系人姓名：</td>
<td>
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.name',
size: '40',
maxLength: '64',
readOnly: this.props.readOnly
})}/>
<label>中英文均可，如中文填写不少于<strong className="red">2</strong>个汉字</label>
</td>
</tr>
<tr>
<td>所在组织：</td>
<td>
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.org',
size: '40',
maxLength: '64',
readOnly: this.props.readOnly
})}/>
<label>中英文均可，如中文填写不少于<strong className="red">2</strong>个汉字</label>
</td>
</tr>
<tr>
<td>所在街道：</td>
<td>
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.street1',
size: '40',
maxLength: '64'
})}/>
<label>中英文均可，需填写完整地址，不能只写某市、区之类，如中文填写，不得少于<strong className="red">8</strong>个汉字</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.street2',
size: '40',
maxLength: '64'
})}/>
</td>
</tr>
<tr>
<td></td>
<td>
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.street3',
size: '40',
maxLength: '64'
})}/>
</td>
</tr>
<tr>
<td>所在城市：</td>
<td>
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.city',
size: '40',
maxLength: '64'
})}/>
<label>中英文均可，如中文填写不少于<strong className="red">2</strong>个汉字</label>
</td>
</tr>
<tr>
<td>所在省份：</td>
<td>
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.sp',
size: '40',
maxLength: '64'
})}/>
<label>中英文均可，如中文填写不少于<strong className="red">2</strong>个汉字</label>
</td>
</tr>
<tr>
<td>邮政编码：</td>
<td>
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.pc',
size: '10',
maxLength: '10'
})}/>
<label>国内邮编均为<strong className="red">6</strong>位数字</label>
</td>
</tr>
<tr>
<td>国家代码：</td>
<td>
<input {...this.props.linkState({
type: 'text',
name: this.props.name+'.cc',
readOnly: true,
size: '2',
maxLength: '2'
})}/>
<label>两个英文字符，中国为CN</label>
</td>
</tr>
</tbody>
</table>
)
}
});
var OpResult = React.createClass({
render() {
switch(typeof(this.props.content)) {
case 'object':
return (
<table>
<tbody>
{forJSON(this.props.content, (key, value) => (
<tr key={key}>
<td>{key}</td>
<td>{JSON.stringify(value)}</td>
</tr>
))}
</tbody>
</table>
)
default:
return (
<pre style={{display: this.props.content ? "block" : "none"}}>{this.props.content}</pre>
)
}
}
});
var List = React.createClass({
mixins: [FormMixin],
shouldUpdate: false,
getInitialState() {
return {
rows: [],
page: 1,
pages: 0,
name: '',
contactId: '',
email: '',
emailOk: '-1',
uniIdOk: '-1'
}
},
getParam(){
var ret = {};
switch(this.props.obj) {
case 'domain':
if(TRIM(this.state.name)) ret.name = TRIM(this.state.name);
ret.days = this.state.days;
break;
case 'contact':
if(TRIM(this.state.contactId)) ret.contactId = TRIM(this.state.contactId);
if(TRIM(this.state.email)) ret.email = TRIM(this.state.email);
if(this.state.emailOk != '-1') ret.emailOk = this.state.emailOk;
if(this.state.uniIdOk != '-1') ret.uniIdOk = this.state.uniIdOk;
break;
}
return ret;
},
load(page) {
api.list(this.props.obj, page, this.getParam(), function(code, data) {
switch(code) {
case '1000':
var ret = this.getParam();
for(var i in ret){
data[i] = ret[i];
}
this.shouldUpdate = true;
this.replaceState(data, function() {
this.shouldUpdate = false;
});
break;
default:
logout();
}
}.bind(this));
},
shouldComponentUpdate(nextProps, nextState) {
if(this.shouldUpdate) return true;
this.load(nextState.page || this.state.page);
return false;
},
onPrev() {
this.load(this.state.page-1);
},
onNext() {
this.load(this.state.page+1);
},
onSkip() {
this.load(this.refs.page.value.trim());
},
onAuth(link, value) {
if(value === null){
return '认证中...';
}else if(value){
return '通过';
}else{
return link;
}
},
render() {
var searchBox;
switch(this.props.obj){
case 'domain':
searchBox = (<ul>
<li><label for="name">域名：</label><input id="name" {...this.linkState({type:"text",name:"name"})} /></li>
<li><label for="days" className="lbl-ck"><input id="days" {...this.linkState({type:"checkbox",name: 'days',value: '30'})}/>30天内到期</label></li>
<li><input type="button" className="onRequest" onClick={ this.load.bind(this,1)} value="查 询"/></li>
</ul>
);break;
case 'contact':
searchBox = (<ul>
<li><label for="contactId">ID：</label><input id="contactId" {...this.linkState({type:"text",name:"contactId"})} /></li>
<li><label for="email">邮箱：</label><input id="email" {...this.linkState({type:"text",name:"email"})}/></li>
<li><label for="emailOk">邮箱状态：</label><SelectStatus id="emailOk" {...this.linkState({name: 'emailOk'})}/></li>
<li><label for="uniIdOk">联系人状态：</label><SelectStatus id="uniIdOk" {...this.linkState({name: 'uniIdOk'})}/></li>
<li><input type="button" className="onRequest" onClick={ this.load.bind(this,1)} value="查 询"/></li>
</ul>
);break;
default: searchBox = ""; break;
}
return (
<div>
{this.props.children}
<div style={{display: searchBox? 'block':'none'}} className="search-box">{ searchBox }</div>
<table className="datatable" width="100%">
<tbody>
<tr className="th">
{forJSON(this.props.head, (key, value) => <th key={key}>{value}</th>)}
</tr>
{this.state.rows.map(row =>
<tr key={row.id}>
{forJSON(this.props.head, key => {
switch(key) {
case 'op':
return (
<td key={key}>{
JOIN(forJSON(
{
onUpdate: '修改',
onCancel: '取消',
onApprove: '批准',
onReject: '拒绝',
onRestore: (row.rgp==='pendingRestore') ? '提交报告' : '申请赎回',
onResolve: '解析'
},
(e, v) => this.props[e]
? <a key={e} onClick={this.props[e].bind(this, row.id, row.rgp)}>{v}</a>
: undefined
), <b> | </b>)
}</td>
);
break;
case 'emailOk':
return (
<td key={key}>{
this.onAuth(<a className="link" onClick={this.props['onEmailAuth'].bind(this, row.email)}>未通过</a>, row[key])
}</td>
);
break;
case 'uniIdOk':
return (
<td key={key}>{
this.onAuth(<a className="link" onClick={this.props['onContactAuth'].bind(this, row.id, row.name, row.org)}>未通过</a>, row[key])
}</td>
);
break;
default:
return (<td key={key}>{row[key]}</td>);
break;
}
})}
</tr>
)}
</tbody>
</table>
<table className="pagetable" width="100%">
<tbody>
<tr>
<td style={{display: this.state.pages>0 ? "block" : "none"}}>
页号：({this.state.page}/{this.state.pages})
<a style={{visibility: this.state.page>1 ? "visible" : "hidden"}}
onClick={this.onPrev}>上一页</a>
<a style={{visibility: this.state.page<this.state.pages ? "visible" : "hidden"}}
onClick={this.onNext}>下一页</a>
转到：
<input ref="page" type="text" size="4" name="page"/>
<input type="button" value="Go" className="btn-goto" onClick={this.onSkip}/>
</td>
<td>{
forJSON(
{
onCreate: '创建',
onRequest: '申请转入'
},
(e, v) => this.props[e]
? <a key={e} onClick={this.props[e]} className={e}>{v}</a>
: undefined
)
}</td>
</tr>
</tbody>
</table>
</div>
)
}
});
var ChangePasswd = React.createClass({
mixins: [FormMixin],
shouldUpdate: false,
getInitialState() {
return {}
},
shouldComponentUpdate(nextProps, nextState) {
if(this.shouldUpdate) return true;
api.show('password', function(code, data) {
this.shouldUpdate = true;
this.replaceState({password: data}, function() {
this.shouldUpdate = false;
});
}.bind(this));
return false;
},
handleSubmit(e) {
api.update('password', TRIM(this.state.password), function(code) {
switch(code) {
case '1000':
this.state.message = "修改口令成功";
break;
case '2501':
logout();
return;
default:
this.state.message = "修改口令失败";
}
this.forceUpdate();
}.bind(this));
},
render() {
return (
<div>
<table align="center" border="0">
<tbody>
<tr>
<td align="center" colSpan="2">{this.props.children}</td>
</tr>
<tr>
<td>口令：</td>
<td>
<input {...this.linkState({
name: 'password',
type: 'text',
size: 16,
maxLength: 16
})}/>
</td>
</tr>
<tr>
<td height="16" colSpan="2"></td>
</tr>
<tr>
<td align="center" colSpan="2">
<input type="button" value="提交" onClick={this.handleSubmit}/>
</td>
</tr>
</tbody>
</table>
<OpResult content={this.state.message} />
</div>
)
}
});
var Check = React.createClass({
mixins: [FormMixin],
getInitialState() {
return {
name: '',
phase: 'open',
type: 'avail',
value: ''
}
},
getName() {
return this.props.obj==='launch'
? {
name: SPLIT(this.state.name),
phase: this.state.phase,
type: this.state.type
}
: SPLIT(this.state.name);
},
handleSubmit(e) {
api.check(this.props.obj==='launch' ? 'domain' : this.props.obj, this.getName(), function(code, data) {
switch(code) {
case '2501':
logout();
break;
default:
this.setState({value: data});
}
}.bind(this));
},
render() {
switch(this.props.obj) {
case 'domain':
case 'host':
case 'contact':
return (
<div>
<table align="center" border="0">
<tbody>
<tr>
<td align="center">{this.props.children}</td>
</tr>
<tr>
<td align="center">
<textarea {...this.linkState({
name: 'name',
rows: '4',
cols: '40',
onFocus: this.onSetState({name:'', value:''})
})}/>
</td>
</tr>
<tr>
<td height="16"></td>
</tr>
<tr>
<td align="center">
<input type="button" value="提交" onClick={this.handleSubmit}/>
</td>
</tr>
</tbody>
</table>
<OpResult content={this.state.value} />
</div>
);
case 'launch':
return (
<div>
<table align="center" border="0">
<tbody>
<tr>
<td colSpan="2" align="center">{this.props.children}</td>
</tr>
<tr>
<td>
<textarea {...this.linkState({
name: 'name',
rows: '4',
cols: '40',
onFocus: this.onSetState({name:'', value:''})
})}/>
</td>
<td>
<LaunchPhase {...this.linkState({name: 'phase'})}/><br/>
<input {...this.linkState({
name: 'type',
type: 'radio',
value: 'claims'
})}/>claims<br/>
<input {...this.linkState({
name: 'type',
type: 'radio',
value: 'avail'
})}/>avail<br/>
</td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr>
<td colSpan="2" align="center">
<input type="button" value="提交" onClick={this.handleSubmit}/>
</td>
</tr>
</tbody>
</table>
<OpResult content={this.state.value} />
</div>
);
}
}
});
var Info = React.createClass({
mixins: [FormMixin],
getInitialState() {
return {
name: '',
phase: 'open',
applicationID: '',
value: ''
}
},
getName() {
return this.props.obj==='launch'
? {
name: TRIM(this.state.name),
phase: this.state.phase,
applicationID: TRIM(this.state.applicationID)
}
: TRIM(this.state.name);
},
handleSubmit(e) {
api.info(this.props.obj==='launch' ? 'domain' : this.props.obj, this.getName(), function(code, data) {
switch(code) {
case '2501':
logout();
break;
default:
this.setState({value: data});
}
}.bind(this));
},
render() {
switch(this.props.obj) {
case 'domain':
case 'host':
case 'contact':
return (
<div>
<table align="center" border="0" className="formtable">
<tbody>
<tr>
<td align="center">{this.props.children}</td>
</tr>
<tr>
<td>
<input {...this.linkState({
name: 'name',
type: 'text',
size: '40',
onFocus: this.onSetState({name:'', value:''})
})}/>
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="提交" onClick={this.handleSubmit}/>
</td>
</tr>
</tbody>
</table>
<OpResult content={this.state.value} />
</div>
);
case 'launch':
return (
<div>
<table className="formtable" border="0" align="center">
<tbody>
<tr>
<td align="center" colSpan="2">{this.props.children}</td>
</tr>
<tr>
<td>域名:</td>
<td>
<input {...this.linkState({
name: 'name',
type: 'text',
size: '40',
onFocus: this.onSetState({name:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>phase:</td>
<td><LaunchPhase {...this.linkState({name: 'phase'})}/></td>
</tr>
<tr>
<td>applicationID:</td>
<td>
<input {...this.linkState({
name: 'applicationID',
type: 'text',
size: '21',
onFocus: this.onSetState({applicationID:'', value:''})
})}/>
</td>
</tr>
<tr>
<td align="center" colSpan="2">
<input type="button" value="提交" onClick={this.handleSubmit}/>
</td>
</tr>
</tbody>
</table>
<OpResult content={this.state.value} />
</div>
);
}
}
});
var Delete = React.createClass({
mixins: [FormMixin],
getInitialState() {
return {
name: '',
phase: 'open',
applicationID: '',
value: ''
}
},
getName() {
return this.props.obj==='launch'
? {
name: TRIM(this.state.name),
phase: this.state.phase,
applicationID: TRIM(this.state.applicationID)
}
: TRIM(this.state.name);
},
handleSubmit(e) {
api.delete(this.props.obj==='launch' ? 'domain' : this.props.obj, this.getName(), function(code, data) {
switch(code) {
case '2501':
logout();
break;
default:
this.setState({value: data});
}
}.bind(this));
},
render() {
switch(this.props.obj) {
case 'domain':
case 'host':
case 'contact':
return (
<div>
<table align="center" border="0" className="formtable">
<tbody>
<tr>
<td align="center">{this.props.children}</td>
</tr>
<tr>
<td>
<input {...this.linkState({
name: 'name',
type: 'text',
size: '40',
onFocus: this.onSetState({name:'', value:''})
})}/>
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="提交" onClick={this.handleSubmit}/>
</td>
</tr>
</tbody>
</table>
<OpResult content={this.state.value} />
</div>
);
case 'launch':
return (
<div>
<table className="formtable" border="0" align="center">
<tbody>
<tr>
<td align="center" colSpan="2">{this.props.children}</td>
</tr>
<tr>
<td>域名:</td>
<td>
<input {...this.linkState({
name: 'name',
type: 'text',
size: '40',
onFocus: this.onSetState({name:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>phase:</td>
<td><LaunchPhase {...this.linkState({name: 'phase'})}/></td>
</tr>
<tr>
<td>applicationID:</td>
<td>
<input {...this.linkState({
name: 'applicationID',
type: 'text',
size: '21',
onFocus: this.onSetState({applicationID:'', value:''})
})}/>
</td>
</tr>
<tr>
<td align="center" colSpan="2">
<input type="button" value="提交" onClick={this.handleSubmit}/>
</td>
</tr>
</tbody>
</table>
<OpResult content={this.state.value} />
</div>
);
}
}
});
var initData = {
name: '',
has_loc: 'none',
voice: '86.53186920439',
fax: '86.53186920439',
email: '88997766554@qq.com',
int: {
'name': '张三丰',
'org': '趵突泉旅游文化有限公司',
'street1': '历下区趵突泉南路1号',
'street2': '',
'street3': '',
'city': '济南市',
'sp': '山东省',
'pc': '250000',
'cc': 'CN'
},
value: ''
};
var Create = React.createClass({
mixins: [FormMixin],
getInitialState() {
switch(this.props.obj) {
case 'domain':
return {name:'', y:'1', value:''};
case 'host':
return {name:'', value:''};
case 'contact':
return initData;
case 'launch':
return {name:'', y:'1', phase:'open', value:''};
}
},
getPostal(info) {
return {
name: info.name,
org: info.org,
addr: {
street: [info.street1, info.street2, info.street3],
city: info.city,
sp: info.sp,
pc: info.pc,
cc: info.cc
}
}
},
getParam() {
switch(this.props.obj) {
case 'domain':
return {
name: TRIM(this.state.name),
y: this.state.y,
ns: SPLIT(this.state.ns),
registrant: TRIM(this.state.registrant),
admin: TRIM(this.state.admin),
tech: TRIM(this.state.tech),
billing: TRIM(this.state.billing),
pw: randomPWD(8),
dsData: this.state.dsData
};
case 'host':
return {
name: TRIM(this.state.name),
ip: SPLIT(this.state.ip)
};
case 'contact':
var r = {
name: TRIM(this.state.name),
int: this.getPostal(this.state.int),
loc: this.state.has_loc!=='none'
? this.getPostal(this.state.loc)
: undefined
};
if(TRIM(this.state.voice)){
if(/^86\.[0-9]{1,14}/.test(TRIM(this.state.voice))){
r.voice = '+'+TRIM(this.state.voice)+TRIM(this.state.xv);
}else if(!/^86\.$/.test(TRIM(this.state.voice))){
r.voice = '+86.'+TRIM(this.state.voice)+TRIM(this.state.xv);
}else{
r.voice = '+86.01012345678';
}
}else{
r.voice = '+86.01012345678';
}
if(TRIM(this.state.fax)){
if(/^86\.[0-9]{1,14}/.test(TRIM(this.state.fax))){
r.fax = '+'+TRIM(this.state.fax) + TRIM(this.state.xf);
}else if(!/^86\.$/.test(TRIM(this.state.fax))){
r.fax ='+86.'+TRIM(this.state.fax) + TRIM(this.state.xf);
}else{
r.fax = '+86.01012345678';
}
}else {
r.fax = '+86.01012345678';
}
r.email = TRIM(this.state.email);
r.pw = randomPWD(8);
return r;
case 'launch':
return {
name: TRIM(this.state.name),
y: this.state.y,
ns: SPLIT(this.state.ns),
registrant: TRIM(this.state.registrant),
admin: TRIM(this.state.admin),
tech: TRIM(this.state.tech),
billing: TRIM(this.state.billing),
pw: randomPWD(8),
dsData: this.state.dsData,
phase: this.state.phase,
encodedSignedMark: this.state.encodedSignedMark
};
}
},
handleSubmit(e) {
api.create(this.props.obj==='launch' ? 'domain' : this.props.obj, this.getParam(), function(code, data) {
switch(code) {
case '1000':
this.props.onFinish();
break;
case '2501':
logout();
break;
default:
this.setState({value: data});
}
}.bind(this));
},
render() {
switch(this.props.obj) {
case 'domain':
return (
<div>
<table border="0" align="center">
<tbody>
<tr align="center">
<td colSpan="2">{this.props.children}</td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr>
<td>域名：</td>
<td>
<input {...this.linkState({
name: 'name',
type: 'text',
size: '40',
maxLength: '255',
onFocus: this.onSetState({name:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>交费：</td>
<td><SelectYears {...this.linkState({name: 'y'})}/>年</td>
</tr>
<tr>
<td>NS主机：</td>
<td>
<textarea {...this.linkState({
name: 'ns',
rows: '6',
cols: '40',
onFocus: this.onSetState({ns:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>登记人：</td>
<td>
<input {...this.linkState({
name: 'registrant',
type: 'text',
size: '16',
maxLength: '16',
onFocus: this.onSetState({registrant:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>管理联系人：</td>
<td>
<input {...this.linkState({
name: 'admin',
type: 'text',
size: '16',
maxLength: '16',
onFocus: this.onSetState({admin:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>交费联系人：</td>
<td>
<input {...this.linkState({
name: 'billing',
type: 'text',
size: '16',
maxLength: '16',
onFocus: this.onSetState({billing:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>技术联系人：</td>
<td>
<input {...this.linkState({
name: 'tech',
type: 'text',
size: '16',
maxLength: '16',
onFocus: this.onSetState({tech:'', value:''})
})}/>
</td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr>
<td>secDNS：</td>
<td><DsData name="dsData" linkState={this.linkState}/></td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr align="center">
<td colSpan="2">
<input type="button" value="提交" onClick={this.handleSubmit}/>
</td>
</tr>
</tbody>
</table>
<OpResult content={this.state.value} />
</div>
);
case 'host':
return (
<div>
<table>
<tbody>
<tr>
<td colSpan="2">{this.props.children}</td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr>
<td>主机名：</td>
<td>
<input {...this.linkState({
name: 'name',
type: 'text',
size: '40',
maxLength: '255',
onFocus: this.onSetState({name:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>IP地址：</td>
<td>
<textarea {...this.linkState({
name: 'ip',
rows: '6',
cols: '40',
onFocus: this.onSetState({ip:'', value:''})
})}/>
</td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr align="center">
<td colSpan="2"><input type="button" value="提交" onClick={this.handleSubmit} /></td>
</tr>
</tbody>
</table>
<OpResult content={this.state.value} />
</div>
);
case 'contact':
return (
<div>
<table border="0" align="center">
<tbody>
<tr align="center">
<td colSpan="2"><b>填写联系人信息</b></td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr>
<td style={{"vertical-align": 'top'}}>联系人ID：</td>
<td>
<input style={{width: '286px'}} {...this.linkState({
name: 'name',
type: 'text',
size: '16',
maxLength: '16',
onFocus: this.onSetState({name:'', value:''})
})}/>
<label style={{display: 'block', "padding-top":'0.3em'}}>注册人是个人，请填写身份证号码，并去除出生年份的前两位，共计16位，此号码系统将自动引用为实名审核时的身份证号码且不能修改，请认真填写 示例：如果您的身份证号码是：110110196401021234，联系人ID请填写：1101106401021234</label>
<label style={{display: 'block', "padding-bottom": '0.3em'}}>注册人非个人，仍按原有规则填写，即：由英文字母、数字和“-”组成的字符串，长度<em className="red">4－16</em>，不能重复，必须是唯一的</label>
</td>
</tr>
<tr>
<td colSpan="2"><PostalInfo name="int" linkState={this.linkState} readOnly={false}/></td>
</tr>
<tr>
<td colSpan="2">
<input {...this.linkState({
name: 'has_loc',
type: 'radio',
value: 'none'
})}/>没有本地语言联系方式
<input {...this.linkState({
name: 'has_loc',
type: 'radio',
value: 'table-row'
})}/>有本地语言联系方式
</td>
</tr>
<tr style={{display: this.state.has_loc}}>
<td colSpan="2"><PostalInfo name="loc" linkState={this.linkState} readOnly={false}/></td>
</tr>
<tr>
<td>电话：</td>
<td>
<input {...this.linkState({
name: 'voice',
type: 'text',
size: '17',
maxLength: '17',
onFocus: this.onSetState({voice:'86.', value:''})
})}/>
转
<input {...this.linkState({
name: 'xv',
type: 'text',
size: '5',
maxLength: '5',
onFocus: this.onSetState({xv:'', value:''})
})}/>
<label>格式为国别(<strong className="red">86</strong>).区号(<strong className="red">531</strong>)座机号，如：86.53186920439或国别.手机号,如：86.13425668204，电话号码不得是1111111，1234567,00000等无意义的号码</label>
</td>
</tr>
<tr>
<td>传真：</td>
<td>
<input {...this.linkState({
name: 'fax',
type: 'text',
size: '17',
maxLength: '17',
onFocus: this.onSetState({fax:'86.', value:''})
})}/>
转
<input {...this.linkState({
name: 'xf',
type: 'text',
size: '5',
maxLength: '5',
onFocus: this.onSetState({xf:'', value:''})
})}/>
<label>格式为国别(<strong className="red">86</strong>).区号(<strong className="red">531</strong>)座机号，如：86.53186920439或国别.手机号,如：86.13425668204，电话号码不得是1111111，1234567,00000等无意义的号码</label>
</td>
</tr>
<tr>
<td>电子邮件：</td>
<td>
<input {...this.linkState({
name: 'email',
type: 'text',
size: '40',
maxLength: '255'
})}/>
<label>必须真实有效，用于接收有关所注册域名的重要通知，<strong className="red">不可用中文邮箱</strong></label>
</td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr align="center">
<td colSpan="2"><input type="button" value="提交" onClick={this.handleSubmit} /></td>
</tr>
</tbody>
</table>
<OpResult content={this.state.value} />
</div>
);
case 'launch':
return (
<div>
<table border="0" align="center">
<tbody>
<tr align="center">
<td colSpan="2">{this.props.children}</td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr>
<td>域名：</td>
<td>
<input {...this.linkState({
name: 'name',
type: 'text',
size: '40',
maxLength: '255',
onFocus: this.onSetState({name:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>phase:</td>
<td><LaunchPhase {...this.linkState({name: 'phase'})}/></td>
</tr>
<tr>
<td>交费：</td>
<td><SelectYears {...this.linkState({name: 'y'})}/>年</td>
</tr>
<tr>
<td>NS主机：</td>
<td>
<textarea {...this.linkState({
name: 'ns',
rows: '6',
cols: '40',
onFocus: this.onSetState({ns:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>登记人：</td>
<td>
<input {...this.linkState({
name: 'registrant',
type: 'text',
size: '16',
maxLength: '16',
onFocus: this.onSetState({registrant:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>管理联系人：</td>
<td>
<input {...this.linkState({
name: 'admin',
type: 'text',
size: '16',
maxLength: '16',
onFocus: this.onSetState({admin:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>交费联系人：</td>
<td>
<input {...this.linkState({
name: 'billing',
type: 'text',
size: '16',
maxLength: '16',
onFocus: this.onSetState({billing:'', value:''})
})}/>
</td>
</tr>
<tr>
<td>技术联系人：</td>
<td>
<input {...this.linkState({
name: 'tech',
type: 'text',
size: '16',
maxLength: '16',
onFocus: this.onSetState({tech:'', value:''})
})}/>
</td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr>
<td>secDNS：</td>
<td><DsData name="dsData" linkState={this.linkState}/></td>
</tr>
<tr>
<td