third_party/ot-br-posix/repo/src/web/web-service/frontend/join.dialog.html

   1 <div role="dialog" aria-label="Eat me!" layout="column" layout-align="center center">
   2   <md-toolbar>
   3     <div class="md-toolbar-tools">
   4       <h2>Join Thread Network</h2>
   5     </div>
   6   </md-toolbar>
   7   <md-progress-linear md-mode="indeterminate" ng-show="isDisplay"></md-progress-linear>
   8   <div id="div_home" class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
   9     <form name="joinForm">
  10       <div class="demo-dialog-content md-dense" style="width: 500px; height: 310px">
  11         <h5>Are you sure you want to JOIN this Thread Network?</h5>
  12         <div layout="row">
  13           <md-input-container flex="80">
  14             <label>Master Key</label>
  15             <input required minlength="32" maxlength="32" ng-pattern="/^[0-9a-fA-F]{32}$/" name="masterKey" ng-model="thread.masterKey">
  16             <div ng-messages="joinForm.masterKey.$error">
  17               <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
  18                 Master Key must be hexadecimal digits and 32 characters long.
  19               </div>
  20             </div>
  21           </md-input-container>
  22         </div>
  23         <div layout="row">
  24           <md-input-container flex="80">
  25             <label>Prefix</label>
  26             <input required name="prefix" ng-model="thread.prefix" ng-pattern="/^(?!(::1?)(/\d*)?$)(?!([fF][eE]80:|[fF]{2}[0-9a-fA-F][0-9a-fA-F]:))(\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*)(/(1([01][0-9]|2[0-8]))|/([0-9][0-9]?))?$/">
  27             <div ng-messages="joinForm.prefix.$error">
  28               <div ng-message-exp="['required', 'pattern']">
  29                 On-Mesh Prefix must match valid IPv6 prefix pattern.
  30               </div>
  31             </div>
  32           </md-input-container>
  33         </div>
  34
  35         <md-input-container class="md-block">
  36           <md-checkbox name="defaultRoute" ng-model="thread.defaultRoute" required>
  37               Default Route
  38           </md-checkbox>
  39         </md-input-container>
  40       </div>
  41     </form>
  42   </div>
  43
  44   <div layout="row" class="demo-dialog-button">
  45     <md-button md-autofocus flex class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button show-modal" style="width: 90px; margin-right:30px; margin-bottom: 15px" ng-click="cancel()">
  46       Cancel
  47     </md-button>
  48     <!-- <span flex="40"></span> -->
  49     <md-button md-autofocus flex class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button show-modal" style="width: 90px; margin-left:30px;  margin-bottom: 15px" ng-click="join(joinForm.masterKey.$valid && joinForm.prefix.$valid)">
  50       Join
  51     </md-button>
  52   </div>
  53 </div>