Ghost/ghost/admin/app/templates/member.hbs

<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            <LinkTo @route="members" data-test-link="members-back">Members</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            {{#if this.member.isNew}}
                New member
            {{else}}
                {{or this.member.name this.member.email}}
            {{/if}}
        </h2>

        <section class="view-actions">
            {{#if this.session.user.isOwner}}
                {{#unless this.member.isNew}}
                    <button
                        class="gh-btn gh-btn-white gh-btn-icon mr2"
                        {{on "click" (action "toggleImpersonateMemberModal")}}>
                        <span>Impersonate</span>
                    </button>
                {{/unless}}
            {{/if}}

            <GhTaskButton @class="gh-btn gh-btn-blue gh-btn-icon" @type="button" @task={{this.save}} @data-test-button="save" />
        </section>
    </GhCanvasHeader>

    <form class="mb10 member-basic-info-form">
        <div class="flex items-center mb10 bt b--lightgrey-d1 pt8">
            {{#if (or this.member.name this.member.email)}}
                <GhMemberAvatar
                    @member={{this.member}}
                    @sizeClass={{if this.member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}}
                    @containerClass="w20 h20 mr4 gh-member-detail-avatar"
                />
            {{else}}
                <div class="flex items-center justify-center br-100 w18 h18 mr4 gh-new-member-avatar">
                    <span class="gh-member-avatar-label f-subheadline fw4 lh-zero tracked-1">N</span>
                </div>
            {{/if}}
            <div>
                <h3 class="f2 fw6 ma0 pa0">
                    {{or this.member.name this.member.email}}
                </h3>
                <p class="f7 pa0 ma0 midlightgrey-d1">
                    {{#if (and this.member.name this.member.email)}}
                        <span class="darkgrey fw5">{{this.member.email}}</span>
                    {{/if}}
                    {{#unless this.member.isNew}}
                        {{if (and this.member.name this.member.email) "–"}}
                        Created on {{this.subscribedAt}}
                    {{/unless}}
                </p>
            </div>
        </div>

        <GhMemberSettingsForm
            @member={{this.member}}
            @scratchMember={{this.scratchMember}}
            @setProperty={{action "setProperty"}}
            @isLoading={{this.isLoading}} />
    </form>

    {{#unless this.member.isNew}}
        <button
            type="button"
            class="gh-btn gh-btn-red gh-btn-icon mt3"
            {{on "click" (action "toggleDeleteMemberModal")}}
            data-test-button="delete-member"
        >
            <span>Delete member</span>
        </button>
    {{/unless}}
</section>

{{#if this.showUnsavedChangesModal}}
    <GhFullscreenModal
        @modal="leave-settings"
        @confirm={{action "leaveScreen"}}
        @close={{action "toggleUnsavedChangesModal"}}
        @modifier="action wide" />
{{/if}}

{{#if this.showDeleteMemberModal}}
    <GhFullscreenModal
        @modal="delete-member"
        @model={{this.member}}
        @confirm={{action "deleteMember"}}
        @close={{action "toggleDeleteMemberModal"}}
        @modifier="action wide" />
{{/if}}

{{#if this.showImpersonateMemberModal}}
    <GhFullscreenModal
        @modal="impersonate-member"
        @model={{this.member}}
        @close={{action "toggleImpersonateMemberModal"}}
        @modifier="action wide" />
{{/if}}