shadowsocks-manager/plugins/webgui/public/views/admin/userPage.html

A shadowsocks manager tool for multi user and traffic control.

<div layout="row" layout-wrap ng-show="user">
    <div flex>
        <md-card>
            <md-card-header>
                <md-card-header-text style="word-break: keep-all; white-space:nowrap; overflow: hidden; text-overflow:ellipsis;">
                    <span class="md-headline">{{user.username}}</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
                <md-list>
                    <md-divider></md-divider>
                    <md-list-item>
                        <div flex layout="row" layout-align="space-between center">
                            <div flex="30">注册时间</div>
                            <div flex="70" style="text-align: right;" ng-if="user.createTime">
                                <span style="font-size: 0.9em;">{{ user.createTime | date : 'yyyy-MM-dd HH:mm' }}</span><br><span style="font-size: 0.9em;">{{ user.createTime | timeagoshort }}</span>
                            </div>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-list-item>
                        <div flex layout="row" layout-align="space-between center">
                            <div flex="30">上次登录</div>
                            <div flex="70" style="text-align: right;" ng-if="user.lastLogin">
                                <span style="font-size: 0.9em;">{{ user.lastLogin | date : 'yyyy-MM-dd HH:mm' }}</span><br><span style="font-size: 0.9em;">{{ user.lastLogin | timeagoshort }}</span>
                            </div>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-list-item ng-if="user.ref" ng-click="toRefUser(user.ref.id)">
                        <div flex layout="row" layout-align="space-between center">
                            <div flex="30">邀请人</div>
                            <div flex="70" style="text-align: right;">{{ user.ref.email }}</div>
                        </div>
                    </md-list-item>
                    <md-divider ng-if="user.ref"></md-divider>
                    <md-list-item ng-if="id === 1">
                        <div flex layout="row" layout-align="space-between center">
                            <div flex="30">分组</div>
                            <div flex="70" style="text-align: right;">{{ groupInfo[user.group].name }}</div>
                        </div>
                    </md-list-item>
                    <md-divider ng-if="id === 1"></md-divider>
                    <md-list-item ng-click="editComment()">
                        <div flex layout="row" layout-align="space-between center">
                            <div flex="30">备注</div>
                            <div flex="70" style="text-align: right;">{{ user.comment || '（空）' }}</div>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
              </md-list>
            <div flex layout="row" ng-if="id === 1">
                <md-button class="md-primary" ng-click="sendEmail()">发送邮件</md-button>
                <md-button class="md-primary" ng-click="setUserGroup()">设置分组</md-button>
                <md-button class="md-warn" ng-click="deleteUser()">删除用户</md-button>
            </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div style="margin: 10px 10px 5px 10px; font-size: 0.8em; color: #555" ng-if="user.account.length">账号 [{{ user.account.length }}]</div>
<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="a in user.account track by $index">
        <md-card>
            <md-card-content>
                <div layout="row" layout-align="space-between center">
                    <div flex="50" ng-click="toAccountPage(a.port)" class="hover-mouse">
                        <span>{{a.port}}</span><br><span ng-show="a.lastConnect" style="font-size: 0.9em; color: #555;">{{ a.lastConnect | timeago | translateTime }}</span><span ng-show="!a.lastConnect" style="font-size: 0.9em; color: #555;">...</span>
                    </div>
                    <div flex="50" layout="row" layout-align="space-between center" ng-if="id === 1">
                        <div></div>
                        <md-button class="md-icon-button" aria-label="delete" ng-click="deleteUserAccount(a.id)">
                            <md-icon class="material-icons">close</md-icon>
                        </md-button>
                    </div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div style="margin: 10px 10px 5px 10px; font-size: 0.8em; color: #555" ng-if="user.macAccount.length">mac账号 [{{ user.macAccount.length }}]</div>
<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="a in user.macAccount track by $index">
        <md-card>
            <md-card-content>
                <div layout="row" layout-align="space-between center">
                    <div flex="50" ng-click="editMacAccount(a)">
                        <span>{{ a.mac | mac }}</span>
                    </div>
                    <div flex="50" layout="row" layout-align="space-between center">
                        <div></div>
                        <md-button class="md-icon-button" aria-label="delete" ng-click="deleteMacAccount(a.id)">
                            <md-icon class="material-icons">close</md-icon>
                        </md-button>
                    </div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div style="margin: 10px 10px 5px 10px; font-size: 0.8em; color: #555" ng-if="refUsers.length">邀请用户 [{{ refUsers.length }}]</div>
<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="user in refUsers track by $index">
        <md-card>
            <md-card-content>
                <div layout="row" layout-align="space-between center">
                    <div flex="70" style="font-size: 0.9em;" ng-click="toRefUser(user.id)">
                        <span>{{ user.email }}</span><br><span style="font-size: 0.9em;">{{ user.time | timeago }}</span>
                    </div>
                    <div flex="30" layout="row" layout-align="space-between center">
                        <div></div>
                        <md-button class="md-icon-button" aria-label="delete" ng-click="deleteRefUser(user.id)">
                            <md-icon class="material-icons">close</md-icon>
                        </md-button>
                    </div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div style="margin: 10px 10px 5px 10px; font-size: 0.8em; color: #555" ng-if="alipayOrders.length">支付宝订单 [{{ alipayOrders.length }}]</div>
<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="order in alipayOrders track by $index">
        <md-card ng-click="showOrderInfo(order)" class="hover-mouse">
            <md-card-content>
                <div layout="row" layout-align="space-between center">
                    <div flex="70" style="font-size: 0.9em;">
                        <span>{{order.orderId}}</span><br><span style="font-size: 0.9em;">{{ order.createTime | timeago }}</span>
                    </div>
                    <div flex="30" style="font-size: 0.9em; text-align: right;">
                        <span style="color: #555">{{order.amount}}</span><br><span style="color: #000">{{order.status | order}}</span>
                    </div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div style="margin: 10px 10px 5px 10px; font-size: 0.8em; color: #555" ng-if="paypalOrders.length">Paypal订单 [{{ paypalOrders.length }}]</div>
<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="order in paypalOrders track by $index">
        <md-card ng-click="showOrderInfo(order)" class="hover-mouse">
            <md-card-content>
                <div layout="row" layout-align="space-between center">
                    <div flex="70" style="font-size: 0.9em;">
                        <span>{{order.orderId}}</span><br><span style="font-size: 0.9em;">{{ order.createTime | timeago }}</span>
                    </div>
                    <div flex="30" style="font-size: 0.9em; text-align: right;">
                        <span style="color: #555">{{order.amount}}</span><br><span style="color: #000">{{order.status | order}}</span>
                    </div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div style="margin: 10px 10px 5px 10px; font-size: 0.8em; color: #555" ng-if="giftCardOrders.length">充值码订单 [{{ giftCardOrders.length }}]</div>
<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="order in giftCardOrders track by $index">
        <md-card ng-click="showOrderInfo(order)" class="hover-mouse">
            <md-card-content>
                <div layout="row" layout-align="space-between center">
                    <div flex="70" style="font-size: 0.9em;">
                        <span>{{order.orderId}}</span><br><span style="font-size: 0.9em;">{{ order.createTime | timeago }}</span>
                    </div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div style="margin: 10px 10px 5px 10px; font-size: 0.8em; color: #555" ng-if="refOrders.length">Ref订单 [{{ refOrders.length }}]</div>
<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="order in refOrders track by $index">
        <md-card ng-click="showOrderInfo(order)" class="hover-mouse">
            <md-card-content>
                <div layout="row" layout-align="space-between center">
                    <div flex="70" style="font-size: 0.9em;">
                        <span>{{order.orderId}}</span><br><span style="font-size: 0.9em;">{{ order.createTime | timeago }}</span>
                    </div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div style="margin: 10px 10px 5px 10px; font-size: 0.8em; color: #555" ng-if="refCodes.length">邀请码 [{{ refCodes.length }}]</div>
<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="code in refCodes track by $index">
        <md-card>
            <md-card-content>
                <div layout="row" layout-align="space-between center">
                    <div flex="70" style="font-size: 0.9em;">
                        <span>{{ code.code }}</span><br><span style="font-size: 0.9em; color: #666;">{{ code.count }} / {{ code.maxUser }}</span>
                    </div>
                    <div flex="30" layout="row" layout-align="space-between center">
                        <div></div>
                        <md-button class="md-icon-button" aria-label="delete" ng-click="deleteRefCode(code.code)">
                            <md-icon class="material-icons">close</md-icon>
                        </md-button>
                    </div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div style="height: 100px;"></div>