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>Credential Type</label> 15 <md-select name="credentialType" ng-model="thread.credentialType" required> 16 <md-option value="networkKeyType">Network Key</md-option> 17 <md-option value="pskdType">PSKd</md-option> 18 </md-select> 19 </md-input-container> 20 </div> 21 <div layout="row"> 22 <md-input-container ng-show="thread.credentialType=='networkKeyType'" flex="80"> 23 <label>Network Key</label> 24 <input required minlength="32" maxlength="32" ng-pattern="/^[0-9a-fA-F]{32}$/" name="networkKey" ng-model="thread.networkKey"> 25 <div ng-messages="joinForm.networkKey.$error"> 26 <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']"> 27 Network Key must be hexadecimal digits and 32 characters long. 28 </div> 29 </div> 30 </md-input-container> 31 </div> 32 <div layout="row"> 33 <md-input-container ng-show="thread.credentialType=='pskdType'" flex="80"> 34 <label>PSKd</label> 35 <input required minlength="6" maxlength="32" ng-pattern="/^((?![IOQZ])[0-9A-Z]){6,32}$/" name="pskd" ng-model="thread.pskd"> 36 <div ng-messages="joinForm.pskd.$error"> 37 <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']"> 38 PSKd must be 6 to 32 characters long and must contain uppercase alphanumeric characters only (excluding I, O, Q and Z). 39 </div> 40 </div> 41 </md-input-container> 42 </div> 43 <div layout="row"> 44 <md-button ng-show="joinForm.pskd.$valid" class="mdl-button--raised" ng-click="qrcode()"> 45 Get Connect QR Code 46 </md-button> 47 </div> 48 <br> 49 <div layout="row"> 50 <md-input-container flex="80"> 51 <label>Prefix</label> 52 <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]?))?$/"> 53 <div ng-messages="joinForm.prefix.$error"> 54 <div ng-message-exp="['required', 'pattern']"> 55 On-Mesh Prefix must match valid IPv6 prefix pattern. 56 </div> 57 </div> 58 </md-input-container> 59 </div> 60 61 <md-input-container class="md-block"> 62 <md-checkbox name="defaultRoute" ng-model="thread.defaultRoute" required> 63 Default Route 64 </md-checkbox> 65 </md-input-container> 66 </div> 67 </form> 68 </div> 69 70 <div layout="row" class="demo-dialog-button"> 71 <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()"> 72 Cancel 73 </md-button> 74 <!-- <span flex="40"></span> --> 75 <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)"> 76 Join 77 </md-button> 78 </div> 79</div> 80