| yuezonghe | 824eb0c | 2024-06-27 02:32:26 -0700 | [diff] [blame^] | 1 | <div id="innerContainer">
|
| 2 | <div class="row header-row">
|
| 3 | <div class="col-xs-1">
|
| 4 | <a href="#main">
|
| 5 | <img alt="" src="pic/direct-back.png">
|
| 6 | </a>
|
| 7 | </div>
|
| 8 | <div class="col-xs-11">
|
| 9 | <div class="form-title">
|
| 10 | <h1 data-trans='quick_setting'></h1>
|
| 11 | <p data-trans='step1_exp1'></p>
|
| 12 | </div>
|
| 13 | </div>
|
| 14 | </div>
|
| 15 | <div class="row">
|
| 16 | <div class="col-xs-1 margin-top-15">
|
| 17 | </div>
|
| 18 | <div class="col-xs-11">
|
| 19 |
|
| 20 | <form id='quickSettingForm'>
|
| 21 | <div class="form-body">
|
| 22 | <div class="content">
|
| 23 | <div class="row form-group side-right form-buttons">
|
| 24 | <input id="btnBack" data-bind="visible:currentStep()>1,click:previous" data-trans="prev_step" type="button" class="btn btn-primary">
|
| 25 | <input id="btnNext" data-bind="visible:currentStep()<5,disable: adBand()=='b' && adMode() == '2' && (selectedSecurityMode() == 'SHARED' || (selectedSecurityMode() == 'OPEN' && encryptType() == 'WEP'))" data-trans="next_step" type="submit" formmethod="post" class="btn btn-primary">
|
| 26 | <input id="btnSave" data-bind="visible:currentStep()==5" data-trans="apply" type="submit" formmethod="post" class="btn btn-primary">
|
| 27 | </div>
|
| 28 | <div data-bind="visible:currentStep()==1" style="display: none" id="step1">
|
| 29 | <h3 data-trans="apn_settings" class="form-title"></h3>
|
| 30 | <div class="content">
|
| 31 | <div class="row form-group">
|
| 32 | <label data-trans="apn_settings" class="col-xs-3 side-right"></label>
|
| 33 | <div class="col-xs-6">
|
| 34 | <div class="row">
|
| 35 | <div class="col-xs-4">
|
| 36 | <input id="radAuto" name="apnMode" data-bind="checked: apnMode,disable: apnModeDisabled()" type="radio" value="auto"/>
|
| 37 | <label data-trans="apn_auto_apn" for="radAuto"></label>
|
| 38 | </div>
|
| 39 | <div class="col-xs-4">
|
| 40 | <input id="radManual" name="apnMode" data-bind="checked: apnMode,disable: apnModeDisabled()" type="radio" value="manual"/>
|
| 41 | <label data-trans="apn_manual_apn" for="radManual"></label>
|
| 42 | </div>
|
| 43 | </div>
|
| 44 | </div>
|
| 45 | </div>
|
| 46 | <div id="apnSetting" data-bind="visible:apnMode()=='manual'">
|
| 47 | <div class="row form-group">
|
| 48 | <label data-trans="apn_profile_name" for="profile_name" class="col-xs-3 side-right"></label>
|
| 49 | <div class="col-xs-6">
|
| 50 | <input id="profile_name" name="txtProfileName" data-bind="value:profileName" disabled="disabled" maxlength="30" type="text" class=" form-control"/>
|
| 51 | </div>
|
| 52 | </div>
|
| 53 | <div data-bind="visible:showIPv4" class="row form-group">
|
| 54 | <label for="txtAPN" data-bind="attr:{'data-trans':transAPN}" class="col-xs-3 side-right"></label>
|
| 55 | <div class="col-xs-6">
|
| 56 | <input id="txtAPN" name="txtAPN" data-bind="value:apn,disable: apnDisabled()" maxlength="64" type="text" class="form-control required"/>
|
| 57 | </div>
|
| 58 | </div>
|
| 59 | <div data-bind="visible:showIPv6" class="row form-group">
|
| 60 | <label for="txtIPv6APN" data-bind="attr:{'data-trans':transAPNIPv6}" class="col-xs-3 side-right"></label>
|
| 61 | <div class="col-xs-6">
|
| 62 | <input id="txtIPv6APN" name="txtIPv6APN" data-bind="value:ipv6_apn,disable: apnDisabled()" maxlength="64" type="text" class="form-control required"/>
|
| 63 | </div>
|
| 64 | </div>
|
| 65 | </div>
|
| 66 | </div>
|
| 67 | <div class="form-note">
|
| 68 | <div class="notes-title"> </div>
|
| 69 | <ul class="notes-content">
|
| 70 | <li data-trans="step2_auto_apn_explain"></li>
|
| 71 | <li data-trans="step2_profile_name_explain"></li>
|
| 72 | </ul>
|
| 73 | </div>
|
| 74 | </div>
|
| 75 | <div id="step2" data-bind="visible:currentStep()==2" style="display: none">
|
| 76 | <h3 data-trans="ppp_authentication" class="form-title"></h3>
|
| 77 | <div class="content">
|
| 78 | <div data-bind="visible:showIPv4" class="row form-group">
|
| 79 | <label data-bind="attr:{'data-trans':transAuthMode}" for="selAuthMode" class="col-xs-3 side-right"></label>
|
| 80 | <div class="col-xs-6">
|
| 81 | <select id="selAuthMode" name="selAuthMode"
|
| 82 | data-bind="options: authModes, disable: apnDisabled(), value: selectedAuthMode, optionsText: 'text', optionsValue: 'value'" class="form-control"></select>
|
| 83 | </div>
|
| 84 | </div>
|
| 85 | <div data-bind="visible:showIPv4" class="row form-group">
|
| 86 | <label data-bind="attr:{'data-trans':transUserName}" for="txtUserName" class="col-xs-3 side-right"></label>
|
| 87 | <div class="col-xs-6">
|
| 88 | <input id="txtUserName" name="txtUserName"
|
| 89 | data-bind="value:username,disable: apnDisabled()" maxlength="64" type="text" class=" form-control"/>
|
| 90 | </div>
|
| 91 | </div>
|
| 92 | <div data-bind="visible:showIPv4" class="row form-group">
|
| 93 | <label data-bind="attr:{'data-trans':transPassword}" for="txtSecretCode" class="col-xs-3 side-right"></label>
|
| 94 | <div class="col-xs-6">
|
| 95 | <input id="txtSecretCode" name="txtSecretCode"
|
| 96 | data-bind="value:password,disable: apnDisabled()" maxlength="64" type="password" class=" form-control"/>
|
| 97 | </div>
|
| 98 | </div>
|
| 99 | <div data-bind="visible:showIPv6" class="row form-group">
|
| 100 | <label data-bind="attr:{'data-trans':transAuthModeIPv6}" for="selIPv6AuthMode" class="col-xs-3 side-right"></label>
|
| 101 | <div class="col-xs-6">
|
| 102 | <select id="selIPv6AuthMode" name="selIPv6AuthMode"
|
| 103 | data-bind="options: authModes, disable: apnDisabled(), value: ipv6_selectedAuthMode, optionsText: 'text', optionsValue: 'value'" class="form-control"></select>
|
| 104 | </div>
|
| 105 | </div>
|
| 106 | <div data-bind="visible:showIPv6" class="row form-group">
|
| 107 | <label class="col-xs-3 side-right" for="txtIPv6UserName" data-bind="attr:{'data-trans':transUserNameIPv6}"></label>
|
| 108 | <div class="col-xs-6">
|
| 109 | <input id="txtIPv6UserName" name="txtIPv6UserName"
|
| 110 | data-bind="value:ipv6_username,disable: apnDisabled()" maxlength="64" type="text" class=" form-control"/>
|
| 111 | </div>
|
| 112 | </div>
|
| 113 | <div data-bind="visible:showIPv6" class="row form-group">
|
| 114 | <label data-bind="attr:{'data-trans':transPasswordIPv6}" for="txtIPv6SecretCode" class="col-xs-3 side-right"></label>
|
| 115 | <div class="col-xs-6">
|
| 116 | <input id="txtIPv6SecretCode" name="txtIPv6SecretCode" data-bind="value:ipv6_password,disable: apnDisabled()" maxlength="64"
|
| 117 | type="password" class="form-control"/>
|
| 118 | </div>
|
| 119 | </div>
|
| 120 | </div>
|
| 121 | <div class="form-note">
|
| 122 | <div class="notes-title"> </div>
|
| 123 | <ul class="notes-content">
|
| 124 | <li data-trans="step3_authentication_apn_explain1"></li>
|
| 125 | <li data-trans="step3_authentication_apn_explain2"></li>
|
| 126 | <li data-trans="step3_authentication_apn_explain3"></li>
|
| 127 | </ul>
|
| 128 | </div>
|
| 129 |
|
| 130 | </div>
|
| 131 | <div id="step3" data-bind="visible:currentStep()==3" style="display: none">
|
| 132 | <h3 class="form-title" data-trans="ssid_title"></h3>
|
| 133 | <div class="content">
|
| 134 | <div class="row form-group">
|
| 135 | <label data-trans="ssid_name" for="txtSSID" class="col-xs-3 side-right"></label>
|
| 136 | <div class="col-xs-6">
|
| 137 | <input id="txtSSID" name="txtSSID" data-bind="disable:wifiDisabled,value:ssid" maxlength="32" type="text" class="form-control required"/>
|
| 138 | </div>
|
| 139 | </div>
|
| 140 | <div class="row form-group">
|
| 141 | <label class="col-xs-3 side-right" data-trans="ssid_broadcast"></label>
|
| 142 | <div class="col-xs-6">
|
| 143 | <input id="radBroadcastEnable" data-bind="disable:wifiDisabled,checked: broadcast" name="radBroadcast"
|
| 144 | type="radio" value="0"/>
|
| 145 | <label for="radBroadcastEnable" data-trans="enable"></label>
|
| 146 | <input id="radBroadcastDisable" name="radBroadcast"
|
| 147 | data-bind="disable:wifiDisabled,checked: broadcast" type="radio" value="1"/>
|
| 148 | <label data-trans="disable" for="radBroadcastDisable"></label>
|
| 149 | </div>
|
| 150 | </div>
|
| 151 | </div>
|
| 152 | <div class="form-note">
|
| 153 | <div class="notes-title"> </div>
|
| 154 | <ul class="notes-content">
|
| 155 | <li data-trans="step4_ssid_explain"></li>
|
| 156 | <li data-trans="wifi_basic_note_network_name_input"></li>
|
| 157 | <li data-trans="step4_ssid_broadcast_explain1"></li>
|
| 158 | </ul>
|
| 159 | </div>
|
| 160 |
|
| 161 | </div>
|
| 162 | <div data-bind="visible:currentStep()==4" style="display: none" id="step4">
|
| 163 | <h3 class="form-title" data-trans="security_mode"></h3>
|
| 164 | <div class="content">
|
| 165 | <div class="row form-group">
|
| 166 | <label for="selSecurityMode" data-trans="security_mode" class="col-xs-3 side-right"></label>
|
| 167 | <div class="col-xs-6">
|
| 168 | <select id="selSecurityMode" name="selSecurityMode" data-transid='security_mode'
|
| 169 | data-bind="disable:wifiDisabled,options: securityModes, value: selectedSecurityMode, optionsText: transOption('security_mode'), optionsValue: 'value'" class="form-control"></select>
|
| 170 | </div>
|
| 171 | </div>
|
| 172 |
|
| 173 | <div data-bind='visible: selectedSecurityMode() == "OPEN" && hasWifiWep' class="row form-group">
|
| 174 | <label for='selEncryptType' data-trans='ap_station_encrypt_type' class="col-xs-3 side-right"></label>
|
| 175 | <div class="col-xs-6">
|
| 176 | <select id="selEncryptType" data-bind="value: encryptType,optionsValue: 'value'" class="form-control">
|
| 177 | <option data-trans="ap_station_encrypt_type_none" value="NONE"></option>
|
| 178 | <option data-trans="ap_station_encrypt_type_wep" value="WEP"></option>
|
| 179 | </select>
|
| 180 | </div>
|
| 181 | </div>
|
| 182 | <div data-bind='visible: (selectedSecurityMode() == "OPEN" && encryptType() == "WEP" && hasWifiWep) || (selectedSecurityMode() == "SHARED" && hasWifiWep)' class="row form-group">
|
| 183 | <label data-trans='ap_station_wep_default_key' for='selWepKeyType' class="col-xs-3 side-right"></label>
|
| 184 | <div class="col-xs-6">
|
| 185 | <select id="selWepKeyType" data-bind="value: keyID,optionsValue: 'value', event:{ change: profileChangeHandler}" class="form-control">
|
| 186 | <option data-trans="ap_station_wep_key_0" value="0"></option>
|
| 187 | <option data-trans="ap_station_wep_key_1" value="1"></option>
|
| 188 | <option data-trans="ap_station_wep_key_2" value="2"></option>
|
| 189 | <option data-trans="ap_station_wep_key_3" value="3"></option>
|
| 190 | </select>
|
| 191 | </div>
|
| 192 | </div>
|
| 193 | <div data-bind='visible: (selectedSecurityMode() == "OPEN" && encryptType() == "WEP" && hasWifiWep) || (selectedSecurityMode() == "SHARED" && hasWifiWep)' class="row form-group">
|
| 194 | <label data-trans='ap_station_wep_key' for='pwdWepKey' class="col-xs-3 side-right"></label>
|
| 195 | <div class="col-xs-6">
|
| 196 | <input id='pwdWepKey' name="pwdWepKey" type="password"
|
| 197 | data-bind="value: wepPassword,visible:!showWifiPassword()" maxlength='26' class="required form-control"/>
|
| 198 | <input id='txtWepKey' name="txtWepKey" type="text"
|
| 199 | data-bind="value: wepPassword,visible:showWifiPassword()" maxlength='26' class="required form-control"/>
|
| 200 | <div class="margin-top-10">
|
| 201 | <p data-bind="css:{'checkbox_selected': showWifiPassword()}, click: showWifiPasswordHandler"
|
| 202 | manualControl="true" class="checkbox">
|
| 203 | <input id="showWepPassword" data-bind="checked:showWifiPassword" type="checkbox"/>
|
| 204 | </p>
|
| 205 | <label data-trans="display_password" for="showWepPassword" class="floatleft margintop5 lineheight25"/>
|
| 206 | </div>
|
| 207 | <div id="lblShowWepPassword" class="clear"></div>
|
| 208 | </div>
|
| 209 | </div>
|
| 210 |
|
| 211 | <div data-bind="visible:selectedSecurityMode() == 'WPA2PSK' || selectedSecurityMode() == 'WPAPSKWPA2PSK' || selectedSecurityMode() == 'WPA3Personal' || selectedSecurityMode() == 'WPA2WPA3'" class="row form-group">
|
| 212 | <label data-trans="pass_phrase" for="txtWPAKey" class="col-xs-3 side-right"></label>
|
| 213 | <div class="col-xs-6">
|
| 214 | <input id="codeWPAKey" name="codeWPAKey" data-bind="disable:wifiDisabled,value:WPAKey,visible:!showWifiPassword()" maxlength='63' minlength='8' type="password" class="form-control required"/>
|
| 215 | <input id="txtWPAKey" name="txtWPAKey" data-bind="disable:wifiDisabled,value:WPAKey,visible:showWifiPassword()" maxlength='63' minlength='8' type="text" class="form-control required"/>
|
| 216 | <p data-bind="css:{'checkbox_selected': showWifiPassword()}, click: showWifiPasswordHandler" manualControl="true" class="checkbox floatleft margintop10 marginleft5 marginright5">
|
| 217 | <input id="showWifiPassword" data-bind="checked:showWifiPassword" type="checkbox"/>
|
| 218 | </p>
|
| 219 | <label data-trans="display_password" for="showWifiPassword" class="floatleft margintop5 lineheight25"/>
|
| 220 | <div id="lblShowWifiPassword" class="clear"></div>
|
| 221 | </div>
|
| 222 | </div>
|
| 223 | </div>
|
| 224 | <div class="form-note">
|
| 225 | <div class="notes-title"> </div>
|
| 226 | <ul class="notes-content">
|
| 227 | <li data-trans="step5_encryption_mode_info"></li>
|
| 228 | <li class="no-style">
|
| 229 | <ul>
|
| 230 | <li data-trans="step5_encryption_mode_explain1"></li>
|
| 231 | <li data-bind='visible: hasWifiWep' data-trans="wifi_basic_note_shared"></li>
|
| 232 | <li data-trans="step5_encryption_mode_explain2"></li>
|
| 233 | <li data-trans="step5_encryption_mode_explain3"></li>
|
| 234 | <li data-bind='visible: hasWifiWpa3' data-trans="wifi_basic_note_wpa3"></li>
|
| 235 | <li data-bind='visible: hasWifiWpa23' data-trans="wifi_basic_note_wpa2_wpa3"></li>
|
| 236 | </ul>
|
| 237 | </li>
|
| 238 | <li data-trans="step5_encryption_mode_explain4"></li>
|
| 239 | </ul>
|
| 240 | </div>
|
| 241 |
|
| 242 | </div>
|
| 243 | <div data-bind="visible:currentStep()==5" style="display: none" id="step5">
|
| 244 | <h3 class="form-title" data-trans="step_name_6"></h3>
|
| 245 | <div class="content">
|
| 246 | <div class="row form-group">
|
| 247 | <label data-trans="apn_settings" class="col-xs-3 side-right"></label>
|
| 248 | <label data-bind="text:apnMode_display,attr:{'data-trans':apnMode_trans}" class="col-xs-6"></label>
|
| 249 | </div>
|
| 250 | <div data-bind="visible:apnMode()=='manual'">
|
| 251 | <div class="row form-group">
|
| 252 | <label data-trans="apn_profile_name" class="col-xs-3 side-right"></label>
|
| 253 | <label data-bind="text:profileName" class="col-xs-6"></label>
|
| 254 | </div>
|
| 255 | <div class="row form-group" data-bind="visible:showIPv4">
|
| 256 | <label data-bind="attr:{'data-trans':transAPN}" class="col-xs-3 side-right"></label>
|
| 257 | <label data-bind="text: apn,attr:{title:apn}" class="col-xs-6 ellipsis"></label>
|
| 258 | </div>
|
| 259 | <div class="row form-group" data-bind="visible:showIPv4">
|
| 260 | <label data-bind="attr:{'data-trans':transAuthMode}" class="col-xs-3 side-right"></label>
|
| 261 | <label data-bind="text:selectedAuthMode_display" class="col-xs-6"></label>
|
| 262 | </div>
|
| 263 | <div class="row form-group" data-bind="visible:showIPv4">
|
| 264 | <label data-bind="attr:{'data-trans':transUserName}" class="col-xs-3 side-right"></label>
|
| 265 | <label data-bind="text:username,attr:{title:username}" class="col-xs-6 ellipsis"></label>
|
| 266 | </div>
|
| 267 | <div class="row form-group" data-bind="visible:showIPv6">
|
| 268 | <label data-bind="attr:{'data-trans':transAPNIPv6}" class="col-xs-3 side-right"></label>
|
| 269 | <label data-bind="text:ipv6_apn" class="col-xs-6"></label>
|
| 270 | </div>
|
| 271 | <div class="row form-group" data-bind="visible:showIPv6">
|
| 272 | <label data-bind="attr:{'data-trans':transAuthModeIPv6}" class="col-xs-3 side-right"></label>
|
| 273 | <label data-bind="text:ipv6_selectedAuthMode_display" class="col-xs-6"></label>
|
| 274 | </div>
|
| 275 | <div class="row form-group" data-bind="visible:showIPv6">
|
| 276 | <label data-bind="attr:{'data-trans':transUserNameIPv6}" class="col-xs-3 side-right"></label>
|
| 277 | <label data-bind="text:ipv6_username,attr:{title:ipv6_username}" class="col-xs-6 ellipsis"></label>
|
| 278 | </div>
|
| 279 | </div>
|
| 280 | <div class="row form-group">
|
| 281 | <label data-trans="ssid_name" class="col-xs-3 side-right"></label>
|
| 282 | <label data-bind="text:ssid" class="col-xs-6"></label>
|
| 283 | </div>
|
| 284 | <div class="row form-group">
|
| 285 | <label data-trans="ssid_broadcast" class="col-xs-3 side-right"></label>
|
| 286 | <label data-bind="text:broadcast_display,attr:{'data-trans':broadcast_trans}" class="col-xs-6"></label>
|
| 287 | </div>
|
| 288 | <div class="row form-group">
|
| 289 | <label data-trans="security_mode" class="col-xs-3 side-right"></label>
|
| 290 | <label data-bind="text:selectedSecurityMode_display,attr:{'data-trans':selectedSecurityMode_trans}" class="col-xs-6"></label>
|
| 291 | </div>
|
| 292 | <div class="form-note">
|
| 293 | <div class="notes-title"> </div>
|
| 294 | <ul class="notes-content">
|
| 295 | <li data-trans="step6_apply_explain"></li>
|
| 296 | </ul>
|
| 297 | </div>
|
| 298 | </div>
|
| 299 | </div>
|
| 300 |
|
| 301 | </div>
|
| 302 | </div>
|
| 303 | </form>
|
| 304 |
|
| 305 | </div>
|
| 306 | </div>
|
| 307 | </div>
|