shadowsocks-manager/plugins/webgui/public/views/home/signup.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="text" required name="code" ng-model="user.code">
                        <div ng-messages="userForm.code.$error">
                            <div ng-message="required">{{ '验证码不能为空' | translate }}</div>
                        </div>
                    </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-primary" ng-disabled="sendCodeTime || !user.email" ng-click="sendCode()" aria-label="send code"><span ng-if="sendCodeTime === 0">{{ '发送验证码' | translate }}</span><span ng-if="sendCodeTime > 0">{{ '已发送' | translate }}({{sendCodeTime}})</span></md-button>
                        </div>
                    </div>
                </div>
                <div layout="row">
                    <md-input-container class="md-block" flex="65">
                        <label>{{ '密码' | translate }}</label>
                        <input type="password" required name="password" ng-model="user.password">
                        <div ng-messages="userForm.password.$error">
                            <div ng-message="required">{{ '密码不能为空' | translate }}</div>
                        </div>
                    </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-disabled="!user.email || !user.code || !user.password" ng-click="signup()">{{ '注册' | translate }}</md-button>
                        </div>
                    </div>
                </div>
                <div layout="row" ng-if="home.refInput">
                    <md-input-container class="md-block" flex="100">
                        <label>{{ '邀请码' | translate }}</label>
                        <input type="text" name="refId" ng-model="home.refInputCode">
                    </md-input-container>
                </div>
            </form>
        </div>
        <div flex="10" flex-gt-sm="30"></div>
    </div>
    <div layout="row" layout-align="center center" ng-if="home.refId && !home.refIdValid">
        <div flex="10" flex-gt-sm="30"></div>
        <div flex>
            <div layout="row" layout-align="center center">
                <div style="color: #bbb;">{{ '邀请码' | translate }} [{{ home.refId }}] {{ '无效' | translate }}</div>
            </div>
        </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="text" required name="code" ng-model="user.code">
                                      <div ng-messages="userForm.code.$error">
                                          <div ng-message="required">{{ '验证码不能为空' | translate }}</div>
                                      </div>
                                  </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-primary" ng-disabled="sendCodeTime || !user.email" ng-click="sendCode()" aria-label="send code"><span ng-if="sendCodeTime === 0">{{ '发送验证码' | translate }}</span><span ng-if="sendCodeTime > 0">{{ '已发送' | translate }}({{sendCodeTime}})</span></md-button>
                                      </div>
                                  </div>
                              </div>
                              <div layout="row">
                                  <md-input-container class="md-block" flex="65">
                                      <label>{{ '密码' | translate }}</label>
                                      <input type="password" required name="password" ng-model="user.password">
                                      <div ng-messages="userForm.password.$error">
                                          <div ng-message="required">{{ '密码不能为空' | translate }}</div>
                                      </div>
                                  </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-disabled="!user.email || !user.code || !user.password" ng-click="signup()">{{ '注册' | translate }}</md-button>
                                      </div>
                                  </div>
                              </div>
                          </form>
                        </div>
                        <div flex="10"></div>
                    </div>
                </div>
            </md-card-content>
            <div flex="5"></div>
        </md-card>
        <div flex="25"></div>
    </div>
    <div layout="row" layout-align="center center" ng-if="home.refId && !home.refIdValid">
        <div flex="25"></div>
        <md-card flex="50">
            <md-card-content layout="row" layout-align="center center">
                <div style="color: #bbb;">{{ '邀请码' | translate }} [{{ home.refId }}] {{ '无效' | translate }}</div>
            </md-card-content>
        </md-card>
        <div flex="25"></div>
    </div>
    <div layout="row" layout-align="center center" ng-if="home.refInput">
        <div flex="25"></div>
        <md-card flex="50">
            <md-card-content layout="row" layout-align="center center">
                <md-input-container class="md-block" flex="100">
                    <label>{{ '邀请码' | translate }}</label>
                    <input type="text" name="refId" ng-model="home.refInputCode">
                </md-input-container>
            </md-card-content>
        </md-card>
        <div flex="25"></div>
    </div>
</div>