xref: /aosp_15_r20/external/ot-br-posix/src/web/web-service/frontend/join.dialog.html (revision 4a64e381480ef79f0532b2421e44e6ee336b8e0d)

<div role="dialog" aria-label="Eat me!" layout="column" layout-align="center center">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>Join Thread Network</h2>
    </div>
  </md-toolbar>
  <md-progress-linear md-mode="indeterminate" ng-show="isDisplay"></md-progress-linear>
  <div id="div_home" class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
    <form name="joinForm">
      <div class="demo-dialog-content md-dense" style="width: 500px; height: 310px">
        <h5>Are you sure you want to JOIN this Thread Network?</h5>
        <div layout="row">
          <md-input-container flex="80">
            <label>Credential Type</label>
            <md-select name="credentialType" ng-model="thread.credentialType" required>
              <md-option value="networkKeyType">Network Key</md-option>
              <md-option value="pskdType">PSKd</md-option>
            </md-select>
          </md-input-container>
        </div>
        <div layout="row">
          <md-input-container ng-show="thread.credentialType=='networkKeyType'" flex="80">
            <label>Network Key</label>
            <input required minlength="32" maxlength="32" ng-pattern="/^[0-9a-fA-F]{32}$/" name="networkKey" ng-model="thread.networkKey">
            <div ng-messages="joinForm.networkKey.$error">
              <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                Network Key must be hexadecimal digits and 32 characters long.
              </div>
            </div>
         </md-input-container>
        </div>
        <div layout="row">
          <md-input-container ng-show="thread.credentialType=='pskdType'" flex="80">
          <label>PSKd</label>
          <input required minlength="6" maxlength="32" ng-pattern="/^((?![IOQZ])[0-9A-Z]){6,32}$/" name="pskd" ng-model="thread.pskd">
            <div ng-messages="joinForm.pskd.$error">
              <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                PSKd must be 6 to 32 characters long and must contain uppercase alphanumeric characters only (excluding I, O, Q and Z).
              </div>
            </div>
          </md-input-container>
        </div>
         <div layout="row">
          <md-button ng-show="joinForm.pskd.$valid" class="mdl-button--raised" ng-click="qrcode()">
           Get Connect QR Code
          </md-button>
         </div>
         <br>
        <div layout="row">
          <md-input-container flex="80">
            <label>Prefix</label>
            <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]?))?$/">
            <div ng-messages="joinForm.prefix.$error">
              <div ng-message-exp="['required', 'pattern']">
                On-Mesh Prefix must match valid IPv6 prefix pattern.
              </div>
            </div>
          </md-input-container>
        </div>

        <md-input-container class="md-block">
          <md-checkbox name="defaultRoute" ng-model="thread.defaultRoute" required>
              Default Route
          </md-checkbox>
        </md-input-container>
      </div>
    </form>
  </div>

  <div layout="row" class="demo-dialog-button">
    <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()">
      Cancel
    </md-button>
    <!-- <span flex="40"></span> -->
    <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.networkKey.$valid && joinForm.prefix.$valid)">
      Join
    </md-button>
  </div>
</div>