hummingbird-me/hummingbird

View on GitHub
frontend/app/templates/settings.hbs

Summary

Maintainability
Test Coverage
<div class="container settings">
  <h2>Settings</h2>
  <div class="row">
    <div class="col-sm-6">
      <div class="panel panel-default" id="account-settings">
        <div class="panel-heading"><h3 class="panel-title">Account</h3></div>
        <div class="panel-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label class="control-label col-sm-4" for="username">Username</label>
              <div class="col-sm-8">
                {{input type="text" class="form-control" id="username" value=currentUser.newUsername}}
                <span class="help-block">Usernames can contain letters, numbers, and underscores</span>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-4" for="email">Email</label>
              <div class="col-sm-8">
                {{input type="email" class="form-control" id="email" value=currentUser.email}}
              </div>
            </div>
            {{#unless usernameValid}}
              <div class="alert alert-danger">
                {{#each usernameProblems as |problem|}}
                  <p><i class="fa fa-warning"></i> {{problem}}</p>
                {{/each}}
              </div>
            {{/unless}}
          </form>
        </div>
      </div>
      <div class="panel panel-default" id="security-settings">
        <div class="panel-heading"><h3 class="panel-title">Security</h3></div>
        <div class="panel-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label class="control-label col-sm-4" for="password">New Password</label>
              <div class="col-sm-8">
                {{input type="password" class="form-control" id="password" value=currentUser.newPassword}}
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-4" for="password-confirm">Again</label>
              <div class="col-sm-8">
                {{input type="password" class="form-control" id="password-confirm" value=passwordConfirm}}
              </div>
            </div>
            {{#unless passwordValid}}
              <div class="alert alert-danger">
                {{#each passwordProblems as |problem|}}
                  <p><i class="fa fa-warning"></i> {{problem}}</p>
                {{/each}}
              </div>
            {{/unless}}
          </form>
        </div>
      </div>
      <div class="panel panel-default" id="backup-settings">
        <div class="panel-heading">
          <h3 class="panel-title">Backup and Restore</h3>
          <span class="last-backup">last backup: {{time-ago time=currentUser.lastBackup}}</span>
        </div>
        <div class="panel-body">
          {{#if currentUser.isImportErrored}}
            <div class="alert alert-danger">
              <p><i class="fa fa-warning"></i> {{currentUser.importError}}</p>
            </div>
          {{/if}}
          <div class="row">
            <label class="control-label col-sm-6">Dropbox Backup</label>
            <div class="col-sm-6">
              {{#if currentUser.hasDropbox}}
                <button class="col-sm-6 btn btn-success" {{action "dropboxSync"}}>
                  <i class="fa fa-refresh"></i> Sync
                </button>
                <button class="col-sm-6 btn btn-danger" {{action "dropboxDisconnect"}}>
                  Disconnect
                </button>
              {{else}}
              <a class="col-sm-6 col-sm-offset-6 btn btn-default" href="/settings/backup/dropbox_connect">
                <i class="fa fa-dropbox"></i> Connect
              </a>
              {{/if}}
              </div>
          </div>
          <div class="row">
            <label class="control-label col-sm-6">Manual Backup</label>
            <div class="col-sm-6">
              <a class="col-sm-6 col-sm-offset-6 btn btn-default" href="/settings/backup/download">
                Download
              </a>
            </div>
          </div>
          <div class="row">
            {{#if currentUser.isImportOngoing}}
              <label class="control-label col-sm-6">
                <i class="fa fa-spinner fa-spin"></i>
                Importing...
              </label>
            {{else}}
              <label class="control-label col-sm-6">MAL Import</label>
              <div class="col-sm-6">
                {{view "file-upload" action="importMal" name="animelist" id="mal-file"}}
                <button class="col-sm-6 col-sm-offset-6 btn btn-default" {{action "pickMalFile"}}>
                  Upload
                </button>
              </div>
            {{/if}}
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-default" id="content-settings">
        <div class="panel-heading"><h3 class="panel-title">Content</h3></div>
        <div class="panel-body">
          <form class="form-horizontal" role="form">
            <label class="control-label col-sm-4" for="titles">Adult Content</label>
            <div class="col-sm-8">
              <label class="radio-inline">
                {{radio-button name="sfw-filter" value=false checked=currentUser.sfwFilter}}
                Show
              </label>
              <label class="radio-inline">
                {{radio-button name="sfw-filter" value=true checked=currentUser.sfwFilter}}
                Hide
              </label>
              <span class="help-block">With adult content hidden, you will not see R18+ anime or manga in your feed, in libraries, or in search.</span>
            </div>
            <label class="control-label col-sm-4">Ratings</label>
            <div class="col-sm-8 ratings-picker">
              <label class="radio-inline">
                {{radio-button name="rating-system" value="advanced" checked=currentUser.ratingType}}
                {{awesome-rating type="advanced" rating="2.5"}}
              </label>
              <label class="radio-inline">
                {{radio-button name="rating-system" value="simple" checked=currentUser.ratingType}}
                {{awesome-rating type="simple"}}
              </label>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-4" for="titles">Titles</label>
              <div class="col-sm-8">
                {{view "select"
                       class="form-control"
                       content=titleChoices
                       optionValuePath="content.value"
                       optionLabelPath="content.label"
                       value=currentUser.titleLanguagePreference}}
                <span class="help-block">You can still see the others: this is just the main one.</span>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="panel panel-default" id="connections-settings">
        <div class="panel-heading"><h3 class="panel-title">Connections</h3></div>
        <div class="panel-body">
          {{#if currentUser.hasFacebook }}
            <form method="POST" {{bind-attr action=facebookDisconnectUrl}}>
              <button type="submit" class="btn fb-connect">Disconnect from Facebook</button>
            </form>
          {{else}}
            <a href="/users/auth/facebook" class="btn fb-connect">Connect to Facebook</a>
          {{/if}}
        </div>
      </div>
      <div class="panel panel-default settings-buttons">
        <div class="center-block panel-body">
          <button class="btn btn-primary" {{bind-attr disabled=submitDisabled}} {{action "save" currentUser}}>Save</button>
          <button class="btn btn-default" {{bind-attr disabled=submitDisabled}} {{action "clean" currentUser}}>Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>