shadowsocks-manager/plugins/webgui/public/views/home/login.html

A shadowsocks manager tool for multi user and traffic control.

<div layout="column" hide-gt-sm>
    <div flex="15" style="height: 40px;"></div>
    <div flex layout="row">
        <div flex="10" flex-gt-sm="30"></div>
        <div flex layout="column" layout-align="space-around stretch">
            <form name="userForm">
                <md-input-container class="md-block">
                    <label translate>邮箱</label>
                    <input type="email" required name="email" ng-model="user.email">
                    <div ng-messages="userForm.email.$error">
                        <div ng-message="required">{{ '邮箱不能为空' | translate }}</div>
                        <div ng-message="email">{{ '必须填写一个有效邮箱地址' | translate }}</div>
                    </div>
                </md-input-container>
                <div layout="row">
                    <md-input-container class="md-block" flex="65">
                        <label>{{ '密码' | translate }}</label>
                        <input type="password" required name="password" ng-model="user.password" ng-keypress="enterKey($event)">
                    </md-input-container>
                    <div flex layout="row" layout-align="space-between center">
                        <div flex="5"></div>
                        <div style="margin-bottom: 25px;">
                            <md-button class="md-raised md-primary" ng-click="login()" ng-disabled="!user.email || !user.password">{{ '登录' | translate }}</md-button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div flex="10" flex-gt-sm="30"></div>
    </div>
    <div flex layout="row" layout-align="center start">
        <div flex="10" flex-gt-sm="30"></div>
        <div layout="row" flex layout-align="space-around center">
            <md-button class="md-primary" ng-click="findPassword()">{{ '找回密码' | translate }}</md-button>
            <md-button class="md-primary" ng-click="socialLogin()" ng-disabled="!hasSocialLogin">{{ '社交账号登录' | translate }}</md-button>
            <!-- <md-button class="md-raised md-primary" ng-click="login()" ng-disabled="!user.email || !user.password">{{ '登录' | translate }}</md-button> -->
        </div>
        <div flex="10" flex-gt-sm="30"></div>
    </div>
</div>
<div layout="column" hide-xs hide-sm>
    <div flex="20" style="min-height: 120px; height: 120px;"></div>
    <div layout="row" layout-align="center center">
        <div flex="25"></div>
        <md-card flex="50" style="min-height: 40vh;">
            <div flex="5"></div>
            <md-card-content layout="row" layout-align="center center">
                <div flex="30" layout="row" layout-align="center center" layout-margin>
                    <img src="/favicon.png" style="width: 100%;">
                </div>
                <div flex>
                    <div flex layout="row">
                        <div flex="10"></div>
                        <div flex layout="column" layout-align="space-around stretch">
                            <form name="userForm">
                                <md-input-container class="md-block">
                                    <label>{{ '邮箱' | translate }}</label>
                                    <input type="email" required name="email" ng-model="user.email">
                                    <div ng-messages="userForm.email.$error">
                                        <div ng-message="required">{{ '邮箱不能为空' | translate }}</div>
                                        <div ng-message="email">{{ '必须填写一个有效邮箱地址' | translate }}</div>
                                    </div>
                                </md-input-container>
                                <div layout="row">
                                    <md-input-container class="md-block" flex="65">
                                        <label>{{ '密码' | translate }}</label>
                                        <input type="password" required name="password" ng-model="user.password" ng-keypress="enterKey($event)">
                                    </md-input-container>
                                    <div flex layout="row" layout-align="space-between center">
                                        <div flex="5"></div>
                                        <div style="margin-bottom: 25px;">
                                            <md-button class="md-raised md-primary" ng-click="login()" ng-disabled="!user.email || !user.password">{{ '登录' | translate }}</md-button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div flex="10"></div>
                    </div>
                    <div flex layout="row" layout-align="center start">
                        <div flex="10"></div>
                        <div layout="row" flex layout-align="space-around center">
                            <md-button class="md-primary" ng-click="findPassword()">{{ '找回密码' | translate }}</md-button>
                            <md-button class="md-primary" ng-click="socialLogin()" ng-disabled="!hasSocialLogin">{{ '社交账号登录' | translate }}</md-button>
                            <!-- <md-button class="md-raised md-primary" ng-click="login()" ng-disabled="!user.email || !user.password">{{ '登录' | translate }}</md-button> -->
                        </div>
                        <div flex="10"></div>
                    </div>
                </div>
            </md-card-content>
            <div flex="5"></div>
        </md-card>
        <div flex="25"></div>
    </div>
</div>