<!doctype> <html> <!-- {{{ head --> <head> <link rel="icon" href="favicon.ico" /> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title ng-controller="NavCtrl">{{ name }}</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-responsive.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/download.css"> <link rel="stylesheet" href="css/modals.css"> <style> /* temporary hack for angularui modal implementation */ .control-group input { height: 30px; } </style> <!-- external javascript dependencies --> <script src="js/libs/jquery-2.1.0.js"></script> <script src="js/libs/lodash.js"></script> <script src="js/libs/angular.js"></script> <script src="js/libs/angularui-bootstrap.js"></script> <script src="js/libs/jquery.flot.js"></script> <script src="js/libs/jquery.flot.time.js"></script> <!-- We do manual resize currently <script src="js/libs/jquery.flot.resize.js"></script> --> <!-- webui core --> <script src="js/init.js"></script> <script src="js/directives/chunkbar.js"></script> <script src="js/directives/dgraph.js"></script> <script src="js/directives/fselect.js"></script> <script src="js/filters/bytes.js"></script> <script src="js/services/constants.js"></script> <script src="js/services/deps.js"></script> <script src="js/services/base64.js"></script> <script src="js/services/utils.js"></script> <script src="js/services/modals.js"></script> <script src="js/services/alerts.js"></script> <script src="js/services/settings/settings.js"></script> <script src="js/services/settings/filters.js"></script> <script src="js/services/rpc/jsoncall.js"></script> <script src="js/services/rpc/sockcall.js"></script> <script src="js/services/rpc/syscall.js"></script> <script src="js/services/rpc/rpc.js"></script> <script src="js/services/rpc/helpers.js"></script> <script src="js/ctrls/main.js"></script> <script src="js/ctrls/modal.js"></script> <script src="js/ctrls/nav.js"></script> <script src="js/ctrls/alert.js"></script> <script src="js/ctrls/props.js"></script> </head> <!-- }}} --> <body ng-controller="MainCtrl"> <!-- {{{ header --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <!-- using a span for collapse rather than a to fix the angular majic on anchors --> <span class="btn btn-navbar" ng-click="collapsed = !collapsed"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </span> <a class="brand"><span class="icon-circle-arrow-down"></span> {{ name }}</a> <form class="navbar-form pull-right control-group"> <input class="span3 input-large" type="text" placeholder="Search" ng-model="downloadFilter" autocomplete="off" ng-change="onDownloadFilter()"></input> </form> <div class="nav-collapse" collapse="collapsed" ng-controller="NavCtrl"> <!-- {{{ Nav menu --> <ul class="nav"> <li class="dropdown"> <a class="dropdown-toggle" href="#"> Add <b class="caret"></b> </a> <ul class="dropdown-menu"> <li> <a href="#" ng-click="addUris()"> <i class="icon-download"> </i> By URIs </a> </li> <li ng-show="isFeatureEnabled('BitTorrent')"> <a href="#" ng-click="addTorrents()"> <i class="icon-file"> </i> By Torrents </a> </li> <li ng-show="isFeatureEnabled('Metalink')"> <a href="#" ng-click="addMetalinks()"> <i class="icon-file"> </i> By Metalinks </a> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#"> Manage <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#" ng-click="forcePauseAll()"><i class="icon-pause"> </i> Pause All</a> </li> <li> <a href="#" ng-click="unpauseAll()"><i class="icon-play"> </i> Resume Paused</a> </li> <li> <a href="#" ng-click="purgeDownloadResult()"><i class="icon-remove"> </i> Purge Completed</a> </li> <!-- not adding remove all as requires many rpc syscalls to finish <li> <a href="#" ng-click="removeAll()"><i class="icon-fire"> </i> Remove All</a> </li> --> </ul> </li> </ul> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle">Settings <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a ng-click="changeCSettings()" href="#"><i class="icon-wrench"> </i> Connection Settings</a> </li> <li> <a ng-click="changeGSettings()" href="#"><i class="icon-wrench"> </i> Global Settings</a> </li> <li> <a ng-click="showServerInfo()" href="#"><i class="icon-info-sign"> </i> Server info</a> </li> <li> <a ng-click="showAbout()" href="#"><i class="icon-question-sign"> </i> About and contribute</a> </li> </ul> </li> </ul> <ul class="nav pull-right" ng-show="false"> <li class="dropdown"> <a class="dropdown-toggle" href="#">Miscellaneous <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#"><i class="icon-list-alt"> </i> Global Statistics</a> </li> <li> <a href="#"><i class="icon-info-sign"> </i> About</a> </li> </ul> </li> </ul> <!-- }}} --> </div><!--/.nav-collapse --> </div> </div> </div> <!-- }}} --> <!-- {{{ body --> <div role="main" class="container-fluid"> <!-- {{{ alerts --> <div ng-controller="AlertCtrl" class="row alerts"> <div class="alert alert-{{alert.type}}" ng-repeat="alert in pendingAlerts"> <span ng-bind-html="alert.msg"></span> <button type="button" class="close" ng-click="removeAlert($index)">x</button> </div> </div> <!-- }}} --> <div class="row-fluid"> <div class="span3"> <!-- {{{ nav side bar --> <div class="well sidebar-nav"> <!-- {{{ download filters --> <ul id="filters" class="clearfix nav nav-list"> <li class="nav-header">Download Filters</li> <li> <label for="filter-speed"> <input type="checkbox" ng-model="filterSpeed" ng-change="persistFilters()" id="filter-speed"> Running </label> </li> <li class="active"> <label for="filter-active"> <input type="checkbox" ng-model="filterActive" ng-change="persistFilters()" id="filter-active"> Active </label> </li> <li> <label for="filter-waiting"> <input type="checkbox" ng-model="filterWaiting" ng-change="persistFilters()" id="filter-waiting"> Waiting </label> </li> <li> <label for="filter-complete"> <input type="checkbox" ng-model="filterComplete" ng-change="persistFilters()" id="filter-complete"> Complete </label> </li> <li> <label for="filter-error"> <input type="checkbox" ng-model="filterError" ng-change="persistFilters()" id="filter-error"> Error </label> </li> <li> <label for="filter-paused"> <input type="checkbox" ng-model="filterPaused" ng-change="persistFilters()" id="filter-paused"> Paused </label> </li> <li> <label for="filter-removed"> <input type="checkbox" ng-model="filterRemoved" ng-change="persistFilters()" id="filter-removed"> Removed </label> </li> <li> <label><input type="checkbox" ng-model="hideLinkedMetadata" id="hide-linked-metadata"> Hide linked meta-data</label> <p> Displaying <strong>{{totalDownloads}}</strong> of <em>{{totalAria2Downloads()}}</em> downloads </p> <p> <button ng-click="toggleStateFilters()" class="btn btn-default btn-mini">Toggle</button> <button ng-click="resetFilters()" class="btn btn-default btn-mini">Reset filters</button> </p> </li> </ul> <!-- }}} --> <br> <!-- {{{ starred properties --> <ul class="clearfix nav nav-list" ng-controller="StarredPropsCtrl" ng-show="properties.length"> <li class="nav-header">Quick Access Settings</li> <li ng-repeat="prop in properties"> <label title="{{prop.desc}}"> <div>{{prop.name}}</div> <div class="control-group"> <select style="width: 100%;" ng-show="prop.options.length" ng-options="opt for opt in prop.options" ng-model="prop.val"></select> <input style="width: 100%;" ng-show="!prop.options.length" type="text" class="input-large" ng-model="prop.val"/> </div> </label> </li> <li> <button ng-disabled="!enabled()" ng-click="save()" class="btn btn-small">Save settings</button> </li> </ul> <!-- }}} --> <br> <!-- {{{ global statistics --> <ul class="nav nav-list"> <li class="nav-header">Global Statistics</li> <li> <div dspeed="gstats.downloadSpeed" uspeed="gstats.uploadSpeed" dgraph ng-show="totalAria2Downloads()" nolabel="true" draw="true"> </div> </li> </ul> <!-- }}} --> </div> <!-- }}} --> </div> <div class="span9"> <!-- {{{ downloads --> <!-- Bug?? <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">--> <div ng-show="!totalAria2Downloads()" class="hero-unit"> Currently no download in line to display, use the '<strong>Add</strong>' download button to start downloading files! </div> <!-- {{{ download template --> <table ng-repeat="download in getDownloads()" class="row download" data-gid="{{download.gid}}"> <tbody> <tr> <td class="download-name download-item" ng-click="download.collapsed = !download.collapsed"> <i class="icon-magnet" style="color: red;" ng-show="download.metadata"></i> {{download.name}} </td> <td class="download-controls download-item" rowspan="2"> <!-- {{{ download control buttons --> <div class="btn-group"> <button ng-show="hasStatus(download, ['active', 'waiting'])" class="btn" ng-click="pause(download)"> <i class="icon-pause"></i> </button> <button ng-show="hasStatus(download, 'paused')" class="btn" ng-click="resume(download)"> <i class="icon-play"></i> </button> <button ng-show="canRestart(download)" class="btn" ng-click="restart(download)"> <i class="icon-repeat"></i> </button> <button class="btn hidden-phone" ng-click="remove(download)"> <i class="icon-stop"></i> </button> <button class="btn hidden-phone" ng-show="['waiting', 'active'].indexOf( getType(download) )!= -1" ng-click="showSettings(download)"> <i class="icon-cog"></i> </button> <button class="btn dropdown-toggle"> <i class="caret"></i> </button> <ul class="dropdown-menu"> <li class="visible-phone"> <a ng-click="showSettings(download)" ng-show="['waiting', 'active'].indexOf( getType(download) )!= -1" href="#"><i class="icon-cog"> </i> Settings</a> </li> <li ng-show="download.bittorrent && false"> <a href="#"><i class="icon-list-alt"> </i> Peers</a> </li> <li> <a ng-click="download.collapsed = !download.collapsed" href="#"><i class="icon-info-sign"> </i> More Info</a> </li> <li class="visible-phone"> <a ng-click="remove(download)" href="#"><i class="icon-remove"> </i> Remove</a> </li> </ul> </div> <!-- }}} --> </td> </tr> <tr> <td class="download-overview download-item" ng-click="download.collapsed = !download.collapsed" ng-switch="download.status"> <!-- {{{ statistics --> <ul class="stats pull-left" ng-switch-when="active"> <!-- {{{ active download statistics --> <li class="label label-active hidden-phone hidden-tablet"> <span title="Download status"><i class="icon-play"> </i> {{download.status}}</span> </li> <li class="label" ng-class="{'label-active': download.downloadSpeed > 2048, 'label-warning': download.downloadSpeed <= 2048}"> <span title="Download Speed"><i class="icon-download"> </i> {{download.downloadSpeed | bspeed}}</span> </li> <li ng-show="download.bittorrent" class="label hidden-phone" ng-class="{'label-info': download.uploadSpeed > 2048}"> <span title="Upload Speed"><i class="icon-upload"> </i> {{download.uploadSpeed | bspeed}}</span> </li> <li class="label label-active"> <span title="Estimated time"><i class="icon-time"> </i> {{getEta(download) | time}}</span> </li> <li class="label label-active hidden-phone"> <span title="Download Size"><i class="icon-cloud-download"> </i> {{download.fmtTotalLength}}</span> </li> <li class="label label-active hidden-phone"> <span title="Downloaded"><i class="icon-download-alt"> </i> {{download.fmtCompletedLength}}</span> </li> <li class="label label-active hidden-phone hidden-tablet"> <span title="Progress"><i class="icon-chevron-right"> </i> {{getProgress(download)}}%</span> </li> <!-- }}} --> </ul> <ul class="stats pull-left" ng-switch-when="paused"> <!-- {{{ paused download statistics --> <li class="label label-info"> <span title="Download Status"><i class="icon-pause"> </i> {{download.status}}</span> </li> <li class="label label-info"> <span title="Download Size"><i class="icon-cloud-download"> </i> {{download.fmtTotalLength}}</span> </li> <li class="label label-info hidden-phone"> <span title="Downloaded"><i class="icon-download-alt"> </i> {{download.fmtCompletedLength}}</span> </li> <li class="label label-info hidden-phone"> <span title="Download Path"><i class="icon-folder-open"> </i> {{download.dir}}</span> </li> <!-- }}} --> </ul> <ul class="stats pull-left" ng-switch-when="waiting"> <!-- {{{ paused download statistics --> <li class="label"> <span title="Download Status"><i class="icon-caret-right"> </i> {{download.status}}</span> </li> <li class="label"> <span title="Download Size"><i class="icon-cloud-download"> </i> {{download.fmtTotalLength}}</span> </li> <li class="label hidden-phone"> <span title="Downloaded"><i class="icon-download-alt"> </i> {{download.fmtCompletedLength}}</span> </li> <li class="label hidden-phone"> <span title="Download Path"><i class="icon-folder-open"> </i> {{download.dir}}</span> </li> <!-- }}} --> </ul> <ul class="stats pull-left" ng-switch-when="complete"> <!-- {{{ complete download statistics --> <li class="label label-success"> <span title="Download Status"><i class="icon-check"> </i> {{download.status}}</span> </li> <li class="label label-success"> <span title="Download Size"><i class="icon-cloud-download"> </i> {{download.fmtTotalLength}}</span> </li> <li class="label label-success hidden-phone"> <span title="Download Path"><i class="icon-folder-open"> </i> {{download.dir}}</span> </li> <!-- }}} --> </ul> <ul class="stats pull-left" ng-switch-when="removed"> <!-- {{{ removed download statistics --> <li class="label label-warning"> <span title="Download Status"><i class="icon-remove"> </i> {{download.status}}</span> </li> <li class="label label-warning"> <span title="Download Size"><i class="icon-cloud-download"> </i> {{download.fmtTotalLength}}</span> </li> <li class="label label-warning hidden-phone"> <span title="Download Path"><i class="icon-folder-open"> </i> {{download.dir}}</span> </li> <!-- }}} --> </ul> <ul class="stats pull-left" ng-switch-when="error"> <!-- {{{ error download statistics --> <li class="label label-important"> <span title="Download Status"><i class="icon-remove-sign"> </i> {{download.status}}</span> </li> <li class="label label-important"> <span title="Download Size"><i class="icon-cloud-download"> </i> {{download.fmtTotalLength}}</span> </li> <li class="label label-important hidden-phone"> <span title="Download Path"><i class="icon-folder-open"> </i> {{download.dir}}</span> </li> <!-- }}} --> </ul> <!-- }}} --> </td> </tr> <tr> <td class="download-progress download-item" colspan="2" ng-click="download.collapsed = !download.collapsed"> <div class="progress progress-striped" ng-class="getProgressClass(download)"> <div class="bar" style="width: {{getProgress(download)}}%;"></div> </div> </td> </tr> <tr> <td colspan="2" ng-click="download.collapsed = !download.collapsed" ng-switch="download.collapsed"> <div collapse="download.collapsed"> <div class="download-item" ng-show="download.numPieces > 1"> <canvas bitfield="download.bitfield" draw="!download.collapsed" pieces="download.numPieces" class="progress chunk-canvas" width="1400" chunkbar></canvas> </div> <ul class="stats download-item"> <li class="label" title="Estimated Time"><i class="icon-time"> </i> <span class="download-eta">{{getEta(download) | time}}</span></li> <li class="label" title="Download Size"><i class="icon-cloud-download"> </i> <span class="download-totalLength">{{download.fmtTotalLength}}</span></li> <li class="label" title="Downloaded"><i class="icon-download-alt"> </i> <span class="download-completedLength">{{download.fmtCompletedLength}}</span></li> <li class="label" title="Download Speed"><i class="icon-download"> </i> <span class="download-downloadSpeed">{{download.fmtDownloadSpeed}}</span></li> <li class="label" title="Upload Speed" ng-show="download.bittorrent"><i class="icon-upload"> </i> <span class="download-uploadSpeed">{{download.fmtUploadSpeed}}</span></li> <li class="label" title="Uploaded" ng-show="download.bittorrent"><i class="icon-upload-alt"> </i> <span class="download-uploadLength">{{download.fmtUploadLength}}</span></li> <li class="label" title="Connections"><i class="icon-link"> </i> <span class="download-connections">{{download.connections}}</span></li> <li class="label" title="Download GID"><i class="icon-reorder"> </i> <span class="download-gid">{{download.gid}}</span></li> <li class="label" title="Number of Pieces"># of <i class="icon-puzzle-piece"> </i> <span class="download-numPieces">{{download.numPieces}}</span></li> <li class="label" title="Piece Length"><i class="icon-puzzle-piece"></i> Length <span class="download-pieceLength">{{download.fmtPieceLength}}</span></li> <li class="label" title="Download Path"><i class="icon-folder-open"> </i> <span class="download-dir">{{download.dir}}</span></li> </ul> <ul class="download-files hidden-phone download-item"> <li class="label" ng-repeat="file in download.files">{{file.relpath}} ({{file.fmtLength}})</li> </ul> <div ng-show="hasStatus(download, 'active')" class="download-item hidden-phone"> <div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph draw="!download.collapsed"></div> </div> </div> </td> </tr> </tbody> </table> <!-- }}} --> <!-- }}} --> </div> <!-- {{{ download pagination --> <div class="pagination pagination-right" ng-show="totalDownloads > pageSize"> <pagination total-items="totalDownloads" items-per-page="pageSize" max-size="6" page="currentPage" boundary-links="true" previous-text="‹" next-text="›" first-text="«" last-text="»" > </pagination> </div> <!-- }}} --> </div> </div> <!-- }}} --> <!-- {{{ modals --> <div ng-controller="ModalCtrl"> <!--{{{ add uri modal --> <script type="text/ng-template" id="getUris.html"> <div class="modal-header"> <button class="close" ng-click="$dismiss()">x</button> <h3>Add Downloads By URIs</h3> </div> <form class="modal-body"> <fieldset> <legend>Download URIs</legend> <p class="help-block"> - You can add multiple downloads (files) at the same time by putting uris for each file on a separate line. <br> - You can also add multiple uris (mirrors) for the *same* file. To do this separate the uris by a space. <br> - A URI can be HTTP(S)/FTP/BitTorrent Magnet URI. - Aria2 will use multiple uris (or mirrors) to boost the download speed for that file (download). <br> E.g. To add 2 files (downloads) f1.jpg and f2.mp4 with 2 uris (mirrors) each, add uris as following: <br> <!-- pre tags print tabs, so do not indent them! --> <pre> http://ex1.com/f1.jpg http://ex2.com/f1.jpg http://ex1.com/f2.mp4 http://ex2.com/f2.mp4 </pre> </p> <textarea rows="6" style="width: 100%" ng-model="getUris.uris"></textarea> <div class="control-group"> <div ng-repeat="(name, set) in getUris.settings"> <label class="control-label">{{name}}</label> <div class="controls"> <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val"> </select> <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/> </div> <br><br> </div> </div> </fieldset> <button class="btn" ng-click="getUris.advance_opts()">Add Download Specific Options</button> </form> <div class="modal-footer"> <button class="btn" ng-click="$dismiss()">Cancel</button> <button class="btn btn-primary" ng-click="$close()">Start</button> </div> </script> <!-- }}} --> <!-- {{{ add torrent modal --> <script type="text/ng-template" id="getTorrents.html"> <div class="modal-header"> <button class="close" ng-click="$dismiss()">x</button> <h3>Add Downloads By Torrents</h3> </div> <form class="modal-body"> <fieldset> <legend>Select Torrents</legend> <p class="help-block"> - Select the torrent from the local filesystem to start the download. <br> - You can select multiple torrents to start multiple downloads <br> - To add a magnet torrent url, use the add url option and add it there. </p> <input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/> <div class="control-group"> <div ng-repeat="(name, set) in getTorrents.settings"> <label class="control-label">{{name}}</label> <div class="controls"> <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val"> </select> <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/> </div> <br><br> </div> </div> </fieldset> <button class="btn" ng-click="getTorrents.advance_opts()">Add Download Specific Options</button> </form> <div class="modal-footer"> <button class="btn" ng-click="$dismiss()">Cancel</button> <button class="btn btn-primary" ng-click="$close()">Start</button> </div> </script> <!-- }}} --> <!-- {{{ add metalink modal --> <script type="text/ng-template" id="getMetalinks.html"> <div class="modal-header"> <button class="close" ng-click="$dismiss()">x</button> <h3>Add Downloads By Metalinks</h3> </div> <form class="modal-body"> <fieldset> <legend>Select Metalinks</legend> <p class="help-block"> - Select the metalink from the local filesystem to start the download. <br> - You can select multiple metalinks to start multiple downloads </p> <input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/> <div class="control-group"> <div ng-repeat="(name, set) in getMetalinks.settings"> <label class="control-label">{{name}}</label> <div class="controls"> <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val"> </select> <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/> </div> <br><br> </div> </div> </fieldset> <button class="btn" ng-click="getMetalinks.advance_opts()">Add Download Specific Options</button> </form> <div class="modal-footer"> <button class="btn" ng-click="$dismiss()">Cancel</button> <button class="btn btn-primary" ng-click="$close()">Start</button> </div> </script> <!-- }}} --> <!-- {{{ settings modal --> <script type="text/ng-template" id="settings.html"> <div class="modal-header"> <button class="close" ng-click="$dismiss()">x</button> <h3>{{settings.title}}</h3> </div> <form class="form-horizontal modal-body"> <fieldset> <div class="control-group"> <div ng-repeat="(name, set) in settings.settings"> <label class="control-label">{{name}}</label> <div class="controls"> <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val"> </select> <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/> <label class="checkbox" ng-show="set.starred != undefined"> <input type="checkbox" ng-model="set.starred"/> Quick Access (shown on the main page) </label> <p class="help-block">{{set.desc}}</p> </div> <br><br> </div> </div> </fieldset> </form> <div class="modal-footer"> <button class="btn" ng-click="$dismiss()">Cancel</button> <button class="btn btn-primary" ng-click="$close()">{{settings.actionText}}</button> </div> </script> <!-- }}} --> <!--{{{ connection modal --> <script type="text/ng-template" id="connection.html"> <div class="modal-header"> <button class="close" ng-click="$dismiss()">x</button> <h3>Connection Settings</h3> </div> <div class="modal-body"> <form class="form-horizontal"> <fieldset> <legend>Aria2 RPC host and port</legend> <div class="control-group"> <label class="control-label">Enter the host:</label> <div class="controls"> <div class="input-prepend"> <span class="add-on">http(s)://</span> <input type="text" class="input-xlarge" ng-model="connection.conf.host"/> </div> <p class="help-block"> Enter the ip or dns name of the server on which the rpc for aria2 is running (default = localhost) </p> </div> <label class="control-label">Enter the port:</label> <div class="controls"> <input type="text" class="input-xlarge" ng-model="connection.conf.port"/> <p class="help-block"> Enter the port of the server on which the rpc for aria2 is running (default = 6800) </p> </div> <label class="control-label">SSL/TLS encryption:</label> <div class="controls"> <label> <input type="checkbox" ng-model="connection.conf.encrypt"/> Enable SSL/TLS encryption. </label> </div> <label class="control-label">Enter the secret token (optional):</label> <div class="controls"> <label> <input type="text" class="input-xlarge" ng-model="connection.conf.auth.token"/> <p class="help-block"> Enter the aria2 RPC secret token (leave empty if authentication is not enabled)> </p> </label> </div> <label class="control-label">Enter the username (optional):</label> <div class="controls"> <input type="text" class="input-xlarge" ng-model="connection.conf.auth.user"/> <p class="help-block"> Enter the aria2 RPC username (empty if authentication not enabled) </p> </div> <label class="control-label">Enter the password (optional):</label> <div class="controls"> <input type="password" class="input-xlarge" ng-model="connection.conf.auth.pass"/> <p class="help-block"> Enter the aria2 RPC password (empty if authentication not enabled) </p> </div> </div> </fieldset> </form> </div> <div class="modal-footer"> <button href="#" class="btn" ng-click="$dismiss()">Cancel</button> <button href="#" class="btn btn-primary" ng-click="$close()"> Save Connection configuration </button> </div> </script> <!-- }}} --> <!-- {{{ server info modal --> <script type="text/ng-template" id="server_info.html"> <div class="modal-header"> <button class="close" ng-click="$dismiss()">x</button> <h3>Aria2 server info</h3> </div> <div class="modal-body"> <b>Aria2 Version {{miscellaneous.version}}</b> <br><br> <b>Features Enabled</b> <ul> <li ng-repeat="feature in miscellaneous.enabledFeatures"> <span>{{feature}}</span> </li> </ul> </div> <div class="modal-footer"> <button class="btn" ng-click="$dismiss()">Close</button> </div> </script> <!-- }}} --> <!-- {{{ about modal --> <script type="text/ng-template" id="about.html"> <div class="modal-header"> <button class="close" ng-click="$dismiss()">x</button> <h3>About and contribute</h3> </div> <div class="modal-body"> <p> To download the latest version of the project,<br /> add issues or to contribute back head on to:<br /> <a href="https://github.com/ziahamza/webui-aria2">http://github.com/ziahamza/webui-aria2</a> <br /><br /> Or you can open the latest version in browser through:<br /> <a href="http://ziahamza.github.io/webui-aria2">http://ziahamza.github.io/webui-aria2</a> </p> </div> <div class="modal-footer"> <button class="btn" ng-click="$dismiss()">Close</button> </div> </script> <!-- }}} --> </div> <!-- }}} --> <!-- Bottom Padding --> <br /><br /><br /><br /><br /> </body> </html>