pip-webui/pip-webui-settings/src/user_settings/user_settings_basic_info.html

HTML5 UI for LOB applications

<form name="form" class="w-stretch" novalidate>
    <md-progress-linear class="pip-progress-top"
                        ng-show="transaction.busy()"
                        md-mode="indeterminate"></md-progress-linear>
    <div class="layout-row bm12">
        <div class="md-tile-left">
            <pip-avatar-edit pip-party-id="$party.id"
                             pip-created="onPictureCreated($event)"
                             pip-changed="onPictureChanged($control, $event)">
            </pip-avatar-edit>
        </div>
        <div class="md-tile-content tp0 layout-align-center">
            <h3 class="tm16 bm8 text-one-line">{{ nameCopy }}</h3>

            <p class="text-primary text-overflow m0">
                {{::'SETTINGS_BASIC_INFO_FROM' | translate}}
                {{$user.signup | formatLongDate }}
            </p>
        </div>
    </div>

    <md-input-container class="md-block">
        <label>{{::'SETTINGS_BASIC_INFO_FULL_NAME' | translate}}</label>
        <input name="fullName" step="any" type="text" tabindex="0" required
               ng-model="$party.name"
               ng-disabled="transaction.busy()"
               ng-change="onChangeBasicInfo()"/>

        <div class="hint"
             ng-if="errorsWithHint(form, form.fullName).hint">
            {{::'ERROR_FULLNAME_INVALID' | translate}}
        </div>
    </md-input-container>

    <md-input-container class="md-block bm0">
        <label>{{::'SETTINGS_BASIC_INFO_PRIMARY_EMAIL' | translate}}</label>
        <input name="email" type="email" required
               ng-model="$party.email"
               ng-change="onChangeBasicInfo()"
               pip-email-unique="{{$party.email}}"/>

        <div class="hint"
             ng-if="errorsWithHint(form, form.email).hint && !$user.email_ver">
            {{::'SETTINGS_BASIC_INFO_VERIFY_HINT' | translate}}
        </div>
        <div ng-messages="errorsWithHint(form.email)" ng-hide=" $party.type =='team'">
            <div ng-message="email">{{::'ERROR_EMAIL_INVALID' | translate}}</div>
            <div ng-message="emailUnique">{{::'ERROR_EMAIL_INVALID' | translate}}</div>
        </div>
    </md-input-container>

    <md-button class="md-raised bm16 tm8 rm8"
               ng-click="onVerifyEmail($event)"
               ng-hide="$user.email_ver || $party.type =='team'">
        {{::'SETTINGS_BASIC_INFO_VERIFY_CODE' | translate}}
    </md-button>

    <md-button ng-click="onChangePassword($event)" class="md-raised bm16 tm8" ng-hide="$party.type =='team'">
        {{::'SETTINGS_BASIC_INFO_CHANGE_PASSWORD' | translate}}
    </md-button>

    <md-input-container class="md-block flex">
        <label>{{::'SETTINGS_BASIC_INFO_WORDS_ABOUT_ME' | translate }}</label>
        <textarea ng-model="$party.about" columns="1"
                  ng-change="onChangeBasicInfo()"></textarea>
    </md-input-container>

    <md-input-container class="md-block" ng-hide="$party.type =='team'">
        <label>{{::'GENDER' | translate}}</label>
        <md-select ng-model="$party.gender" ng-change="onChangeBasicInfo()"
                   placeholder="{{'GENDER' | translate}}">
            <md-option ng-value="gender.id" ng-repeat="gender in genders">{{gender.name}}</md-option>
        </md-select>
    </md-input-container>

    <div ng-hide="$party.type =='team'">
        <p class="text-caption text-grey tm0 bm0">{{::'SETTINGS_BASIC_INFO_BIRTHDAY' | translate}}</p>
        <pip-date ng-model="$party.birthday"
                  ng-change="onChangeBasicInfo()"
                  pip-time-mode="past
                  time-mode="past"></pip-date>
    </div>

    <md-input-container class="md-block"
                        ng-hide="$party.type =='team'">
        <label>{{::'LANGUAGE' | translate}}</label>
        <md-select placeholder="{{'LANGUAGE' | translate}}"
                   ng-model="$user.language"
                   ng-change="onChangeUser()">
            <md-option ng-value="language.id"
                       ng-repeat="language in languages">
                {{language.name}}
            </md-option>
        </md-select>
    </md-input-container>

    <md-input-container class="md-block"
                        ng-if="$party.type !='team'">
        <label>{{::'THEME' | translate}}</label>
        <md-select class="w-stretch theme-text-primary"
                   ng-model="$user.theme"
                   ng-change="onChangeUser()"
                   ng-disabled="transaction.busy()">
            <md-option ng-value="theme"
                       ng-repeat="theme in themes"
                       ng-selected="$theme == theme ? true : false">
                {{ theme | translate }}
            </md-option>
        </md-select>
    </md-input-container>
    <pip-location-edit class="map-edit bm24-flex"
                       ng-hide="$party.type =='team'"
                       pip-changed="onChangeBasicInfo()"
                       pip-location-name="$party.loc_name"
                       pip-location-pos="loc_pos">
    </pip-location-edit>
</form>