shadowsocks-manager
Version:
A shadowsocks manager tool for multi user and traffic control.
140 lines (139 loc) • 8.43 kB
HTML
<div>
<md-card>
<md-card-content ng-hide="accountData">
<div flex layout="row" layout-align="center center">
<md-progress-circular md-mode="indeterminate" class="md-accent"></md-progress-circular>
</div>
</md-card-content>
<md-card-content ng-show="accountData">
<md-divider></md-divider>
<md-list>
<md-list-item>
<div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
<div flex="75" translate>新用户自动分配账号</div>
<div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.accountForNewUser.isEnable" aria-label="accountForNewUser"></md-switch></div>
</div>
</md-list-item>
</md-list>
<md-divider></md-divider>
<md-list ng-show="accountData.accountForNewUser.isEnable" layout="row">
<div flex-xs="5" flex-sm="10" flex-gt-sm="20"></div>
<div flex>
<form name="newAccountForm">
<md-input-container class="md-block" style="height: 54px;">
<label>类型</label>
<md-select ng-model="accountData.accountForNewUser.type">
<md-option ng-value="2">周</md-option>
<md-option ng-value="3">月</md-option>
<md-option ng-value="4">天</md-option>
<md-option ng-value="5">小时</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block">
<label>流量(MB)</label>
<input type="number" required name="flow" ng-model="accountData.accountForNewUser.flow">
</md-input-container>
<md-input-container class="md-block">
<label>周期</label>
<input type="number" required name="limit" ng-model="accountData.accountForNewUser.limit">
</md-input-container>
</form>
</div>
<div flex-xs="5" flex-sm="10" flex-gt-sm="20"></div>
</md-list>
<md-divider></md-divider>
<md-list ng-show="accountData.accountForNewUser.isEnable">
<md-list-item>
<div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
<div flex="75" translate>合并多服务器流量统计</div>
<div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.accountForNewUser.multiServerFlow" aria-label="multiServer"></md-switch></div>
</div>
</md-list-item>
</md-list>
<md-divider ng-show="accountData.accountForNewUser.isEnable"></md-divider>
<md-list ng-show="accountData.accountForNewUser.isEnable">
<md-list-item>
<div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
<div flex="75" translate>到期自动删除</div>
<div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.accountForNewUser.autoRemove" aria-label="autoremove"></md-switch></div>
</div>
</md-list-item>
</md-list>
<md-divider ng-show="accountData.accountForNewUser.isEnable"></md-divider>
<md-list ng-show="accountData.accountForNewUser.isEnable">
<md-list-item>
<div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
<div flex="75" translate>自定义新用户可用服务器</div>
<div flex layout="row" layout-align="end center"><md-switch ng-model="setServerForNewUser" aria-label="serverForNewUser"></md-switch></div>
</div>
</md-list-item>
<md-list-item ng-show="setServerForNewUser">
<div layout="column" layout-wrap flex>
<div layout="column" layout-wrap flex ng-repeat="server in servers">
<div flex="100">
<md-checkbox ng-model="accountServerObj[server.id]">
<div layout="row" layout-align="space-between center">
<span flex>{{ server.name }}</span>
<span flex style="color: #777">{{ server.host }}</span>
</div>
</md-checkbox>
</div>
</div>
</div>
</md-list-item>
</md-list>
<md-divider ng-show="accountData.accountForNewUser.isEnable"></md-divider>
<md-list>
<md-list-item>
<div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
<div flex="75" translate>随机分配端口号</div>
<div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.port.random" aria-label="isRandomPort"></md-switch></div>
</div>
</md-list-item>
</md-list>
<md-divider ></md-divider>
<md-list>
<md-list-item>
<div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
<div flex="100" translate>新端口号分配范围</div>
</div>
</md-list-item>
<md-list-item layout="row">
<div flex-xs="5" flex-sm="10" flex-gt-sm="20"></div>
<div flex>
<form name="portForm" layout="column" layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm="50">
<label>起始端口</label>
<input type="number" required name="startPort" ng-model="accountData.port.start">
</md-input-container>
<md-input-container class="md-block" flex-gt-sm="50">
<label>结束端口</label>
<input type="number" required name="endPort" ng-model="accountData.port.end">
</md-input-container>
</form>
</div>
<div flex-xs="5" flex-sm="10" flex-gt-sm="20"></div>
</md-list-item>
</md-list>
<md-divider></md-divider>
<md-list>
<md-list-item>
<div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
<div flex="75" translate>开放注册</div>
<div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.signUp.isEnable" aria-label="signUp"></md-switch></div>
</div>
</md-list-item>
</md-list>
<md-divider></md-divider>
<md-list>
<md-list-item>
<div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
<div flex="75" translate>开启订阅功能</div>
<div flex layout="row" layout-align="end center"><md-switch ng-model="accountData.subscribe" aria-label="subscribe"></md-switch></div>
</div>
</md-list-item>
</md-list>
<md-divider></md-divider>
</md-card-content>
</md-card>
</div>