identity-settings-component.html

<form class="form-horizontal" role="form">
  <fieldset>
    <br-form-static ng-show="$ctrl.identity.id"
      br-options="{name: 'id', label: 'ID'}">
      <br-form-static-content>{{$ctrl.identity.id}}</br-form-static-content>
      <br-form-static-help>The unique identifier for this identity.</br-form-static-help>
    </br-form-static>

    <br-input br-model="$ctrl.identityChanges.label"
      br-options="{icon: 'tag', name: 'label', label: 'Label'}">
      <br-input-help>Enter the public label for this identity.</br-input-help>
    </br-input>

    <div class="form-group" ng-show="$ctrl.publicMode == 'some'">
      <div class="col-sm-offset-3 col-sm-8">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="publicLabel" ng-model="$ctrl.public.label">
              Allow <strong>public</strong> access to identity label.
          </label>
        </div>
      </div>
    </div>

    <!-- FIXME: change br-input to type 'url' -->
    <br-input br-model="$ctrl.identityChanges.url"
      br-options="{icon: 'globe', type: 'text', name: 'url', label: 'Website'}">
      <br-input-help>Optionally enter a website URL for this identity.</br-input-help>
    </br-input>

    <div class="form-group" ng-show="$ctrl.publicMode == 'some'">
      <div class="col-sm-offset-3 col-sm-8">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="publicWebsite" ng-model="$ctrl.public.url">
              Allow <strong>public</strong> access to identity website.
          </label>
        </div>
      </div>
    </div>

    <br-input br-model="$ctrl.identityChanges.email"
      br-options="{icon: 'envelope', type: 'email', name: 'email', label: 'Email', disabled: true}">
      <!-- Enter an email for this identity. -->
      <br-input-help>Identity email can not be changed on this page.</br-input-help>
    </br-input>

    <div class="form-group" ng-show="$ctrl.publicMode == 'some'">
      <div class="col-sm-offset-3 col-sm-8">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="publicEmail" ng-model="$ctrl.public.email">
              Allow <strong>public</strong> access to identity email.
          </label>
        </div>
      </div>
    </div>

    <br-radio-group br-model="$ctrl.identityChanges.sysImageType"
      br-group="[{label: 'Gravatar', value: 'gravatar'}, {label: 'URL', value: 'url'}]"
      br-options="{inline: true, name: 'sysImageType', label: 'Image Type'}">
      Please select an image type.
    </br-radio-group>

    <br-radio-group ng-show="$ctrl.identityChanges.sysImageType == 'gravatar'"
      br-model="$ctrl.identityChanges.sysGravatarType"
      br-group="[
        {label: 'Gravatar', value: 'gravatar'},
        {label: 'Mystery Man', value: 'mm'},
        {label: 'Identicon', value: 'identicon'},
        {label: 'MonsterID', value: 'monsterid'},
        {label: 'Wavatar', value: 'wavatar'},
        {label: 'Retro', value: 'retro'}
      ]"
      br-options="{inline: true, name: 'sysGravatarType', label: 'Gravatar Type'}">
      Setting up a <a href="https://www.gravatar.com" target="_blank">Gravatar</a> image
      for your email will allow you to use the same avatar image on many supported sites.
      You can also use a generated image unique to your email.
    </br-radio-group>

    <!-- FIXME: change br-input to type 'url' -->
    <br-input ng-show="$ctrl.identityChanges.sysImageType == 'url'"
      br-model="$ctrl.identityChanges.image"
      br-input-ng-change="$ctrl.updateImagePreview()"
      br-input-ng-model-options="{debounce: 1000}"
      br-options="{icon: 'picture-o', type: 'text', name: 'image', label: 'Image URL'}">
      <br-input-help>Enter the URL to an image for this identity.</br-input-help>
    </br-input>

    <div ng-show="$ctrl.imagePreview" class="form-group">
      <label class="control-label col-sm-3" for="image">Image Preview</label>
      <img ng-style="{'max-width': '80px', 'max-height': '80px'}" ng-src="{{$ctrl.imagePreview}}"/>
    </div>
    <div class="form-group" ng-show="$ctrl.publicMode == 'some'">
      <div class="col-sm-offset-3 col-sm-8">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="publicImage" ng-model="$ctrl.public.image">
              Allow <strong>public</strong> access to identity image.
          </label>
        </div>
      </div>
    </div>

    <br-textarea br-model="$ctrl.identityChanges.description"
      br-options="{icon: 'comment', name: 'description', label: 'Description'}">
      Optionally enter a description of this identity.
    </br-textarea>

    <div class="form-group" ng-show="$ctrl.publicMode == 'some'">
      <div class="col-sm-offset-3 col-sm-8">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="publicDescription" ng-model="$ctrl.public.description">
              Allow <strong>public</strong> access to identity description.
          </label>
        </div>
      </div>
    </div>

    <br-radio-group br-model="$ctrl.publicMode"
      br-group="[
        {label: 'No public access to <strong>any</strong> identity details.', value: 'none', icon: 'eye-close'},
        {label: 'Allow <strong>public</strong> access to specified properties.', value: 'some', icon: 'eye'},
        {label: 'Allow <strong>public</strong> access to all properties <strong>except</strong> email.', value: 'most', icon: 'eye'},
        {label: 'Allow <strong>public</strong> access to all properties <strong>including</strong> email.', value: 'all', icon: 'eye'}
      ]"
      br-options="{name: 'sysPublic', label: 'Privacy'}">
      Please choose a privacy setting.
    </br-radio-group>

    <div class="form-group">
      <div class="col-sm-offset-3 col-sm-8">
        <span ng-show="$ctrl.loading">
          <i class="fa fa-refresh fa-spin text-muted"></i>
        </span>
        <button type="button" class="btn btn-primary"
          ng-disabled="$ctrl.loading || !$ctrl.identityChanges"
          ng-click="$ctrl.update()"><i class="fa fa-check"></i> Update</button>
        <button type="button" class="btn btn-default"
          ng-disabled="$ctrl.loading"
          ng-click="$ctrl.cancel()">Cancel</button>
      </div>
    </div>
  </fieldset>
</form>