sails-test/views/pages/account/account-overview.ejs

<div id="account-overview" v-cloak>
  <div class="container">
    <h1>My account</h1>
    <hr/>
    <div class="row mb-3">
      <div class="col-sm-6">
        <h4>Personal information</h4>
      </div>
      <div class="col-sm-6">
        <span class="float-sm-right">
          <a class="btn btn-sm btn-outline-info account-settings-button" href="/account/profile">Edit profile</a>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="col-3">Name:</div>
      <div class="col"><strong>{{me.fullName}}</strong></div>
    </div>
    <div class="row">
      <div class="col-3">Email:</div>
      <div class="col">
        <strong :class="[me.emailStatus === 'unconfirmed' || me.emailStatus === 'changeRequested' ? 'text-muted' : '']">{{me.emailChangeCandidate ? me.emailChangeCandidate : me.emailAddress}}</strong>
        <span v-if="me.emailStatus === 'unconfirmed' || me.emailStatus === 'changeRequested'" class="badge badge-pill badge-warning">Unverified</span>
      </div>
    </div>
    <hr/>
    <div class="row mb-3">
      <div class="col-sm-6">
        <h4>Password</h4>
      </div>
      <div class="col-sm-6">
        <span class="float-sm-right">
          <a class="btn btn-sm btn-outline-info account-settings-button" href="/account/password">Change password</a>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="col-3">Password:</div>
      <div class="col"><strong>••••••••••</strong></div>
    </div>
    <hr/>
    <div class="row mb-3" v-if="isBillingEnabled">
      <div class="col-sm-6">
        <h4>Billing</h4>
      </div>
      <div class="col-sm-6">
        <span class="float-sm-right">
          <button class="btn btn-sm btn-outline-info account-settings-button" :disabled="syncingUpdateCard" @click="clickStripeCheckoutButton()">{{ syncingUpdateCard ? 'Updating...' : hasBillingCard ? 'Change card' : 'Add Card' }}</button>
        </span>
      </div>
    </div>
    <div v-if="isBillingEnabled && hasBillingCard">
      <div class="row">
        <div class="col-3">Credit card:</div>
        <div class="col">{{me.billingCardBrand}} ending in <strong>{{me.billingCardLast4}}</strong> <a class="remove-button ml-2" @click="clickRemoveCardButton()">Remove</a></div>
      </div>
      <div class="row">
        <div class="col-3">Expiration:</div>
        <div class="col">{{me.billingCardExpMonth}}/{{me.billingCardExpYear}}</div>
      </div>
    </div>
    <div class="alert alert-danger" v-else-if="isBillingEnabled && cloudError">
      There was an error updating your credit card information. Please check your information and try again, or <a href="/contact">contact support</a> if the error persists.
    </div>
    <div class="alert alert-secondary" v-else-if="isBillingEnabled">
      You have not linked a payment source to your account. In order to access paid features, you'll need to provide your credit card information. (Don't worry: you will only be charged when you've reached the limit of your free plan.)
    </div>
  </div>

  <% /* Confirm Remove Card Info Modal */ %>
  <modal v-if="removeCardModalVisible" @close="closeRemoveCardModal()" v-cloak>
    <div class="modal-header">
      <h5 class="modal-title">Remove Card Info?</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span>&times;</span>
      </button>
    </div>
    <ajax-form action="updateBillingCard" :syncing.sync="syncingRemoveCard" :cloud-error.sync="cloudError" :handle-parsing="handleParsingRemoveCardForm" @submitted="submittedRemoveCardForm()">
      <div class="modal-body">
        <p>Are you sure you want to remove your {{me.billingCardBrand}} ending in <strong>{{me.billingCardLast4}}</strong>?</p>
        <p class="text-muted">This may restrict your access to paid features.</p>
        <p class="text-danger" v-if="cloudError"><small>An error occured while processing your request. Please check your information and try again, or <a href="/contact">contact support</a> if the error persists.</small></p>
      </div>
      <div class="modal-footer">
        <button data-dismiss="modal" class="btn btn-outline-secondary mr-1">Nevermind</button>
        <ajax-button type="submit" :syncing="syncingRemoveCard" class="btn btn-danger ml-1">Remove</ajax-button>
      </div>
    </ajax-form>
  </modal>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>