main.html - chromiumos/platform/spigots - Git at Google

 <!-- Copyright (c) 2011 The Chromium OS Authors. All rights reserved.
   -- Use of this source code is governed by a BSD-style license that can be
   -- found in the LICENSE file. -->

 <html>
 <head>
   <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
   <script type="text/javascript" src="asn1.js"></script>
   <script type="text/javascript" src="base64.js"></script>
   <script type="text/javascript" src="base64_encode.js"></script>

   <style>
     body {
       font-family:helvetica;
       font-size: 10pt;
     }
     input[type='password'],
     input[type='text'],
     input[type='url'],
     input:not([type]) {
       -webkit-border-radius: 2px;
       border: 1px solid #aaa;
       font-size: inherit;
       padding: 3px;
     }
     /* SELECT */
     select {
       -webkit-appearance: button;
       -webkit-border-radius: 2px;
       -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
       -webkit-padding-end: 20px;
       -webkit-padding-start: 2px;
       -webkit-user-select: none;
       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sCDwEnBT3jKacAAABaSURBVCjPY2CgA4gC4jQ8OIpokxKBgJmZ+RuQ+R8dg8RB8kQb9v//f4UFCxYsZGNj+4lsEIgPEgfJk+RPdAPJNgjdQD4+vi8UGYRs4Nu3b5soNgjJQFZi1AEAhHNE/wdnPVcAAAAASUVORK5CYII="), -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
       background-position: center right;
       background-repeat: no-repeat;
       border: 1px solid #aaa;
       color: #555;
       font-size: inherit;
       margin: 0;
       overflow: hidden;
       padding-top: 2px;
       padding-bottom: 2px;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
     select:hover {
       -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sCDwEnBT3jKacAAABaSURBVCjPY2CgA4gC4jQ8OIpokxKBgJmZ+RuQ+R8dg8RB8kQb9v//f4UFCxYsZGNj+4lsEIgPEgfJk+RPdAPJNgjdQD4+vi8UGYRs4Nu3b5soNgjJQFZi1AEAhHNE/wdnPVcAAAAASUVORK5CYII="), -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
       color: #333;
     }
     select:active {
       -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sCDwEnBT3jKacAAABaSURBVCjPY2CgA4gC4jQ8OIpokxKBgJmZ+RuQ+R8dg8RB8kQb9v//f4UFCxYsZGNj+4lsEIgPEgfJk+RPdAPJNgjdQD4+vi8UGYRs4Nu3b5soNgjJQFZi1AEAhHNE/wdnPVcAAAAASUVORK5CYII="), -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
       color: #444;
     }
     /* CHECKBOX, RADIO */
     input[type=checkbox],
     input[type=radio] {
       margin-left: 0;
       margin-right: 0;
       position: relative;
       top: 1px;
     }
     #left-pane {
       -webkit-border-end: 1px solid #c6c9ce;
       background: -webkit-linear-gradient(rgba(234, 238, 243, 0.2), #eaeef3),
                   -webkit-linear-gradient(left, #eaeef3, #eaeef3 97%, #d3d7db);
       position:absolute;
       left:0;
       top:0;
       width:216px;
       bottom:0;
       overflow:auto;
     }
     .left-item {
       border-bottom: 1px solid transparent;
       border-top: 1px solid transparent;
       color: #426dc9;
       cursor: pointer;
       display: block;
       font-size: 105%;
       outline: none;
       padding: 7px 0;
       text-align: end;
       text-shadow: white 0 1px 1px;
       -webkit-padding-end: 24px;
     }
     .selected {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       text-shadow: white 0 1px 1px;
     }
     .right-pane {
       position:absolute;
       left:230;
       top:5px;
       right:5px;
       bottom:5px;
       padding-left:60px;
       overflow:auto;
       display:none;
     }
     #cert-list {
       border:1px solid black;
       overflow:auto;
       height:100px;
       width:80%;
       background: #ffffff
     }
     #load-errors {
       color: #ff0000
     }
     #load-warnings {
       color: #807000
     }
     #load-header {
       color: #008000
     }
     #save-errors {
       color: #ff0000
     }
     #save-header {
       color: #008000
     }
     #save-warnings {
       color: #807000
     }
     h1 {
       padding-top:20px;
       font-size:16pt;
       padding-left:0px;
     }
     h2 {
       margin:0;
       padding-top:10px;
       font-size:12pt;
     }
     input[type=text] {
       width: 80%;
       font-size:10pt;
     }
     input[type=password] {
       width: 80%;
       font-size:10pt;
     }
     select option {
       width: 40%
       line-height:10pt;
       font-weight: bold;
     }
     .help {
       margin:0;
       font-size:10pt;
       font-weight:normal;
     }
   </style>
   <title i18n="extName"></title>
 </head>

 <div id="left-pane">
   <div style="height:50px"></div>
   <div class="left-item selectable" id="wifi-item" i18n="wifiSettingsTab">
   </div>
   <div class="left-item selectable" id="vpn-item" i18n="vpnTab">
   </div>
   <div class="left-item selectable" id="cert-item"
        i18n="certificatesAndTrustTab"></div>
   <div class="left-item selectable" id="load-item" i18n="loadConfigurationTab">
   </div>
   <div class="left-item selectable" id="save-item" i18n="saveConfigurationTab">
   </div>
 </div>

 <div class="right-pane" id="wifi-pane">
   <!-- TODO: Support multiple WiFi/VPN settings. -->
   <h1 i18n="wifiSettingsTab"></h1>

   <h2 i18n="acronymSsid"></h2>
   <p class="help" i18n="identificationOfTheWirelessNetwork"></p>
   <input type="text" id="ssid">
   <div class="checkable">
     <input type="checkbox" id="hidden-ssid"></input>
     <span i18n="thisSsidIsNotBroadcast"></span>
   </div>
   <div class="checkable">
     <input type="checkbox" id="auto-connect"></input>
     <span i18n="automaticallyConnect"></span>
   </div>
   <h2 i18n="securityType"></h2>
   <p class="help" i18n="helpSecurityType"></p>
   <select id="security">
     <option i18n="securityNone" value="None"></option>
     <option i18n="securityWep" value="WEP"></option>
     <option i18n="securityWpa" value="WPA"></option>
     <option i18n="securityWpa2" value="WPA2"></option>
     <option i18n="securityWpa2Enterprise" value="WPA2Enterprise"></option>
   </select>
   <div id="passphrase-div" style="display:none">
     <h2 i18n="wirelessPassphrase"></h2>
     <p class="help" i18n="helpWirelessPassphrase"></p>
     <input type="password" id="passphrase">
   </div>
   <div id="8021x-div" style="display:none">
     <h2 i18n="extensibleAuthenticationProtocol"></h2>
     <p class="help" i18n="selectTheEapToPermit"></p>
     <select id="eap">
       <option i18n="acronymPeap" value="PEAP"></option>
       <option i18n="acronymEapTtls" value="EAP-TTLS"></option>
       <option i18n="acronymEapTls" value="EAP-TLS"></option>
       <option i18n="acronymLeap" value="LEAP"></option>
     </select>
     <div id="phase2-div">
       <h2 i18n="innerProtocol"></h2>
       <p class="help" i18n="helpInnerProtocol"></p>
       <select id="phase2">
         <option i18n="automatic" value="Automatic"></option>
         <option i18n="acronymEapMschapV2" value="EAP-MSCHAP-V2"></option>
         <option i18n="acronymEapMd5" value="EAP-MD5"></option>
         <option i18n="acronymEapPap" value="EAP-PAP"></option>
       </select>
     </div>
     <div id="phase2-auth">
       <div class="checkable">
         <input type="checkbox" id="specify-credentials"></input>
         <span i18n="specifyUsernameAndPassword"></span>
       </div>
       <div id="phase2-auth-cred">
         <h2 i18n="username"></h2>
         <p class="help" i18n="helpUsername"></p>
         <input type="text" id="wifi-identity">
         <h2 i18n="password"></h2>
         <p class="help" i18n="helpPassword"></p>
         <input type="password" id="wifi-password">
       </div>
     </div>
     <div id="eap-server-ca">
       <h2 i18n="serverCertificateAuthority"></h2>
       <p class="help"
          i18n="helpServerCertificateAuthority">
       </p>
       <select id="wifi-server-ca">
       </select>
     </div>
     <div id="eap-client-cert">
       <h2 i18n="clientCertificateAuthority"></h2>
       <p class="help" i18n="helpClientCertificateAuthority"></p>
       <select id="wifi-client-ca">
       </select>
       <h2 i18n="enrollmentUri"></h2>
       <p class="help" i18n="helpEnrollmentUri"></p>
       <input id="wifi-enrollment-uri" type="text"></input>
       </div>
   </div>
   <h2 i18n="proxyUrl"></h2>
   <p class="help" i18n="helpProxyUrl"></p>
   <input type="text" id="wifi-proxy-url"></input>
   <h2 i18n="uniqueIdentifier"></h2>
   <p class="help" id="helpUniqueIdentifier"></p>
   <input type="text" id="wifi-guid" disabled></input>
 </div>
 <div class="right-pane" id="vpn-pane">
   <h1 i18n="vpnSettings"></h1>
   <h2 i18n="remoteHost"></h2>
   <p class="help" i18n="helpRemoteHost"></p>
   <input type="text" id="vpn-host">
   <h2 i18n="vpnType"></h2>
   <p class="help" i18n="helpVpnType"></p>
   <select id="vpn-type">
     <option i18n="l2tpIpsecPsk" value="L2TP-IPsec-PSK"></option>
     <option i18n="l2tpIpsecCert" value="L2TP-IPsec-cert"></option>
   </select>
   <div class="checkable">
     <input type="checkbox" id="l2tp-specify-credentials"></input>
     <span i18n="specifyUsernameAndPassword"></span>
   </div>
   <div id="l2tpipsec-psk-div">
     <h2 i18n="presharedKey"></h2>
     <p class="help" i18n="helpPresharedKey"></p>
     <input type="password" id="ipsec-psk"></input>
   </div>
   <div id="l2tpipsec-cert-div">
     <h2 i18n="serverCertificateAuthority"></h2>
     <p class="help" i18n="helpServerCertificateAuthority"></p>
     <select id="ipsec-server-ca">
     </select>
     <h2 i18n="clientCertificateAuthority"></h2>
     <p class="help" i18n="helpClientCertificateAuthority"></p>
     <select id="ipsec-client-ca">
     </select>
     <h2 i18n="enrollmentUri"></h2>
     <p class="help" i18n="helpEnrollmentUri"></p>
     <input id="ipsec-enrollment-uri" type="text"></input>
   </div>
   <div id="l2tp-cred">
     <h2 i18n="username"></h2>
     <p class="help" i18n="helpUsername"></p>
     <input id="vpn-username" type="text"></input>
     <h2 i18n="password"></h2>
     <p class="help" i18n="helpPassword"></p>
     <input id="vpn-password" type="password"></input>
   </div>
   <h2 i18n="proxyUrl"></h2>
   <p class="help" i18n="helpProxyUrl"></p>
   <input type="text" id="vpn-proxy-url"></input>
   <h2 i18n="uniqueIdentifier"></h2>
   <p class="help" i18n="helpUniqueIdentifier"></p>
   <input type="text" id="vpn-guid" disabled></input>
 </div>
 <div class="right-pane" id="cert-pane">
   <h1 i18n="certificatesAndTrustTab"></h1>
   <h2 i18n="certificateList"></h2>
   <p class="help" i18n="helpCertificateList"><p>
   <div id="cert-list">
   </div>
   <div id="cert-errors" style="color:red"></div>
   <input type="file" id="cert-files" multiple />
   <br/>
   <button id="cert-clear" i18n="certificateListClear">
   </button>
 </div>
 <div class="right-pane" id="load-pane">
   <h1 i18n="loadConfigurationTab"></h1>
   <h2 i18n="loadConfigurationFromFile"></h2>
   <p class="help" i18n="helpLoadConfigurationFromFile"></p>
   <br>
   <form id="load-file-form">
     <input type="file" id="load-file" name="loadFiles" multiple />
   </form>
   <div id="load-header"></div>
   <div id="load-errors"></div>
   <br>
   <div id="load-warnings"></div>
 </div>
 <div class="right-pane" id="save-pane">
   <h1 i18n="saveConfigurationTab"></h1>
   <h2 i18n="saveConfigurationToFile"></h2>
   <br>
   <div id="save-header"></div>
   <div id="save-errors"></div>
   <br>
   <div id="save-warnings"></div>
   <br>
   <div id="save-link-div">
     <p class="help" i18n="helpSaveConfigurationToFile"></p>
     <a id="save-link" href="about:blank" i18n="saveLinkText"></a>
   </div>
 </div>
 <script type="text/javascript" src="main.js"></script>
	<!-- Copyright (c) 2011 The Chromium OS Authors. All rights reserved.
	-- Use of this source code is governed by a BSD-style license that can be
	-- found in the LICENSE file. -->

	<html>
	<head>
	<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="asn1.js"></script>
	<script type="text/javascript" src="base64.js"></script>
	<script type="text/javascript" src="base64_encode.js"></script>

	<style>
	body {
	font-family:helvetica;
	font-size: 10pt;
	}
	input[type='password'],
	input[type='text'],
	input[type='url'],
	input:not([type]) {
	-webkit-border-radius: 2px;
	border: 1px solid #aaa;
	font-size: inherit;
	padding: 3px;
	}
	/* SELECT */
	select {
	-webkit-appearance: button;
	-webkit-border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	-webkit-padding-end: 20px;
	-webkit-padding-start: 2px;
	-webkit-user-select: none;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sCDwEnBT3jKacAAABaSURBVCjPY2CgA4gC4jQ8OIpokxKBgJmZ+RuQ+R8dg8RB8kQb9v//f4UFCxYsZGNj+4lsEIgPEgfJk+RPdAPJNgjdQD4+vi8UGYRs4Nu3b5soNgjJQFZi1AEAhHNE/wdnPVcAAAAASUVORK5CYII="), -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
	background-position: center right;
	background-repeat: no-repeat;
	border: 1px solid #aaa;
	color: #555;
	font-size: inherit;
	margin: 0;
	overflow: hidden;
	padding-top: 2px;
	padding-bottom: 2px;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	select:hover {
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sCDwEnBT3jKacAAABaSURBVCjPY2CgA4gC4jQ8OIpokxKBgJmZ+RuQ+R8dg8RB8kQb9v//f4UFCxYsZGNj+4lsEIgPEgfJk+RPdAPJNgjdQD4+vi8UGYRs4Nu3b5soNgjJQFZi1AEAhHNE/wdnPVcAAAAASUVORK5CYII="), -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
	color: #333;
	}
	select:active {
	-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sCDwEnBT3jKacAAABaSURBVCjPY2CgA4gC4jQ8OIpokxKBgJmZ+RuQ+R8dg8RB8kQb9v//f4UFCxYsZGNj+4lsEIgPEgfJk+RPdAPJNgjdQD4+vi8UGYRs4Nu3b5soNgjJQFZi1AEAhHNE/wdnPVcAAAAASUVORK5CYII="), -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
	color: #444;
	}
	/* CHECKBOX, RADIO */
	input[type=checkbox],
	input[type=radio] {
	margin-left: 0;
	margin-right: 0;
	position: relative;
	top: 1px;
	}
	#left-pane {
	-webkit-border-end: 1px solid #c6c9ce;
	background: -webkit-linear-gradient(rgba(234, 238, 243, 0.2), #eaeef3),
	-webkit-linear-gradient(left, #eaeef3, #eaeef3 97%, #d3d7db);
	position:absolute;
	left:0;
	top:0;
	width:216px;
	bottom:0;
	overflow:auto;
	}
	.left-item {
	border-bottom: 1px solid transparent;
	border-top: 1px solid transparent;
	color: #426dc9;
	cursor: pointer;
	display: block;
	font-size: 105%;
	outline: none;
	padding: 7px 0;
	text-align: end;
	text-shadow: white 0 1px 1px;
	-webkit-padding-end: 24px;
	}
	.selected {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	text-shadow: white 0 1px 1px;
	}
	.right-pane {
	position:absolute;
	left:230;
	top:5px;
	right:5px;
	bottom:5px;
	padding-left:60px;
	overflow:auto;
	display:none;
	}
	#cert-list {
	border:1px solid black;
	overflow:auto;
	height:100px;
	width:80%;
	background: #ffffff
	}
	#load-errors {
	color: #ff0000
	}
	#load-warnings {
	color: #807000
	}
	#load-header {
	color: #008000
	}
	#save-errors {
	color: #ff0000
	}
	#save-header {
	color: #008000
	}
	#save-warnings {
	color: #807000
	}
	h1 {
	padding-top:20px;
	font-size:16pt;
	padding-left:0px;
	}
	h2 {
	margin:0;
	padding-top:10px;
	font-size:12pt;
	}
	input[type=text] {
	width: 80%;
	font-size:10pt;
	}
	input[type=password] {
	width: 80%;
	font-size:10pt;
	}
	select option {
	width: 40%
	line-height:10pt;
	font-weight: bold;
	}
	.help {
	margin:0;
	font-size:10pt;
	font-weight:normal;
	}
	</style>
	<title i18n="extName"></title>
	</head>

	<div id="left-pane">
	<div style="height:50px"></div>
	<div class="left-item selectable" id="wifi-item" i18n="wifiSettingsTab">
	</div>
	<div class="left-item selectable" id="vpn-item" i18n="vpnTab">
	</div>
	<div class="left-item selectable" id="cert-item"
	i18n="certificatesAndTrustTab"></div>
	<div class="left-item selectable" id="load-item" i18n="loadConfigurationTab">
	</div>
	<div class="left-item selectable" id="save-item" i18n="saveConfigurationTab">
	</div>
	</div>

	<div class="right-pane" id="wifi-pane">
	<!-- TODO: Support multiple WiFi/VPN settings. -->
	<h1 i18n="wifiSettingsTab"></h1>

	<h2 i18n="acronymSsid"></h2>
	<p class="help" i18n="identificationOfTheWirelessNetwork"></p>
	<input type="text" id="ssid">
	<div class="checkable">
	<input type="checkbox" id="hidden-ssid"></input>
	<span i18n="thisSsidIsNotBroadcast"></span>
	</div>
	<div class="checkable">
	<input type="checkbox" id="auto-connect"></input>
	<span i18n="automaticallyConnect"></span>
	</div>
	<h2 i18n="securityType"></h2>
	<p class="help" i18n="helpSecurityType"></p>
	<select id="security">
	<option i18n="securityNone" value="None"></option>
	<option i18n="securityWep" value="WEP"></option>
	<option i18n="securityWpa" value="WPA"></option>
	<option i18n="securityWpa2" value="WPA2"></option>
	<option i18n="securityWpa2Enterprise" value="WPA2Enterprise"></option>
	</select>
	<div id="passphrase-div" style="display:none">
	<h2 i18n="wirelessPassphrase"></h2>
	<p class="help" i18n="helpWirelessPassphrase"></p>
	<input type="password" id="passphrase">
	</div>
	<div id="8021x-div" style="display:none">
	<h2 i18n="extensibleAuthenticationProtocol"></h2>
	<p class="help" i18n="selectTheEapToPermit"></p>
	<select id="eap">
	<option i18n="acronymPeap" value="PEAP"></option>
	<option i18n="acronymEapTtls" value="EAP-TTLS"></option>
	<option i18n="acronymEapTls" value="EAP-TLS"></option>
	<option i18n="acronymLeap" value="LEAP"></option>
	</select>
	<div id="phase2-div">
	<h2 i18n="innerProtocol"></h2>
	<p class="help" i18n="helpInnerProtocol"></p>
	<select id="phase2">
	<option i18n="automatic" value="Automatic"></option>
	<option i18n="acronymEapMschapV2" value="EAP-MSCHAP-V2"></option>
	<option i18n="acronymEapMd5" value="EAP-MD5"></option>
	<option i18n="acronymEapPap" value="EAP-PAP"></option>
	</select>
	</div>
	<div id="phase2-auth">
	<div class="checkable">
	<input type="checkbox" id="specify-credentials"></input>
	<span i18n="specifyUsernameAndPassword"></span>
	</div>
	<div id="phase2-auth-cred">
	<h2 i18n="username"></h2>
	<p class="help" i18n="helpUsername"></p>
	<input type="text" id="wifi-identity">
	<h2 i18n="password"></h2>
	<p class="help" i18n="helpPassword"></p>
	<input type="password" id="wifi-password">
	</div>
	</div>
	<div id="eap-server-ca">
	<h2 i18n="serverCertificateAuthority"></h2>
	<p class="help"
	i18n="helpServerCertificateAuthority">
	</p>
	<select id="wifi-server-ca">
	</select>
	</div>
	<div id="eap-client-cert">
	<h2 i18n="clientCertificateAuthority"></h2>
	<p class="help" i18n="helpClientCertificateAuthority"></p>
	<select id="wifi-client-ca">
	</select>
	<h2 i18n="enrollmentUri"></h2>
	<p class="help" i18n="helpEnrollmentUri"></p>
	<input id="wifi-enrollment-uri" type="text"></input>
	</div>
	</div>
	<h2 i18n="proxyUrl"></h2>
	<p class="help" i18n="helpProxyUrl"></p>
	<input type="text" id="wifi-proxy-url"></input>
	<h2 i18n="uniqueIdentifier"></h2>
	<p class="help" id="helpUniqueIdentifier"></p>
	<input type="text" id="wifi-guid" disabled></input>
	</div>
	<div class="right-pane" id="vpn-pane">
	<h1 i18n="vpnSettings"></h1>
	<h2 i18n="remoteHost"></h2>
	<p class="help" i18n="helpRemoteHost"></p>
	<input type="text" id="vpn-host">
	<h2 i18n="vpnType"></h2>
	<p class="help" i18n="helpVpnType"></p>
	<select id="vpn-type">
	<option i18n="l2tpIpsecPsk" value="L2TP-IPsec-PSK"></option>
	<option i18n="l2tpIpsecCert" value="L2TP-IPsec-cert"></option>
	</select>
	<div class="checkable">
	<input type="checkbox" id="l2tp-specify-credentials"></input>
	<span i18n="specifyUsernameAndPassword"></span>
	</div>
	<div id="l2tpipsec-psk-div">
	<h2 i18n="presharedKey"></h2>
	<p class="help" i18n="helpPresharedKey"></p>
	<input type="password" id="ipsec-psk"></input>
	</div>
	<div id="l2tpipsec-cert-div">
	<h2 i18n="serverCertificateAuthority"></h2>
	<p class="help" i18n="helpServerCertificateAuthority"></p>
	<select id="ipsec-server-ca">
	</select>
	<h2 i18n="clientCertificateAuthority"></h2>
	<p class="help" i18n="helpClientCertificateAuthority"></p>
	<select id="ipsec-client-ca">
	</select>
	<h2 i18n="enrollmentUri"></h2>
	<p class="help" i18n="helpEnrollmentUri"></p>
	<input id="ipsec-enrollment-uri" type="text"></input>
	</div>
	<div id="l2tp-cred">
	<h2 i18n="username"></h2>
	<p class="help" i18n="helpUsername"></p>
	<input id="vpn-username" type="text"></input>
	<h2 i18n="password"></h2>
	<p class="help" i18n="helpPassword"></p>
	<input id="vpn-password" type="password"></input>
	</div>
	<h2 i18n="proxyUrl"></h2>
	<p class="help" i18n="helpProxyUrl"></p>
	<input type="text" id="vpn-proxy-url"></input>
	<h2 i18n="uniqueIdentifier"></h2>
	<p class="help" i18n="helpUniqueIdentifier"></p>
	<input type="text" id="vpn-guid" disabled></input>
	</div>
	<div class="right-pane" id="cert-pane">
	<h1 i18n="certificatesAndTrustTab"></h1>
	<h2 i18n="certificateList"></h2>
	<p class="help" i18n="helpCertificateList"><p>
	<div id="cert-list">
	</div>
	<div id="cert-errors" style="color:red"></div>
	<input type="file" id="cert-files" multiple />
	<br/>
	<button id="cert-clear" i18n="certificateListClear">
	</button>
	</div>
	<div class="right-pane" id="load-pane">
	<h1 i18n="loadConfigurationTab"></h1>
	<h2 i18n="loadConfigurationFromFile"></h2>
	<p class="help" i18n="helpLoadConfigurationFromFile"></p>
	<br>
	<form id="load-file-form">
	<input type="file" id="load-file" name="loadFiles" multiple />
	</form>
	<div id="load-header"></div>
	<div id="load-errors"></div>
	<br>
	<div id="load-warnings"></div>
	</div>
	<div class="right-pane" id="save-pane">
	<h1 i18n="saveConfigurationTab"></h1>
	<h2 i18n="saveConfigurationToFile"></h2>
	<br>
	<div id="save-header"></div>
	<div id="save-errors"></div>
	<br>
	<div id="save-warnings"></div>
	<br>
	<div id="save-link-div">
	<p class="help" i18n="helpSaveConfigurationToFile"></p>
	<a id="save-link" href="about:blank" i18n="saveLinkText"></a>
	</div>
	</div>
	<script type="text/javascript" src="main.js"></script>