2021-10-18 14:27:42 +03:00
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
2022-01-26 17:49:50 +03:00
{{!-- Remove breadcrumbs for Authors and Contributors --}}
{{ # if this .currentUser .isAuthorOrContributor }}
<h2 class="gh-canvas-title" data-test-screen-title>Your profile</h2>
{{ else }}
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="settings">Settings</LinkTo>
<span> {{ svg-jar "arrow-right" }} </span>
<LinkTo @route="settings.staff" data-test-staff-link= {{ true }} >Staff</LinkTo>
<span> {{ svg-jar "arrow-right" }} </span>
{{ this .user .name }}
2021-10-18 14:27:42 +03:00
2022-01-26 17:49:50 +03:00
{{ # if this .user .isSuspended }}
<span class="gh-badge suspended" data-test-suspended-badge>Suspended</span>
{{ / if }}
</h2>
{{ / if }}
2021-10-18 14:27:42 +03:00
{{ # if this .showLeaveSettingsModal }}
<GhFullscreenModal @modal="leave-settings"
@confirm= {{ action "leaveSettings" }}
@close= {{ action "toggleLeaveSettingsModal" }}
@modifier="action wide" />
{{ / if }}
<section class="view-actions">
2022-08-23 13:22:58 +03:00
{{ # if ( or this .userActionsAreVisible ( and ( feature 'auditLog' ) this .session .user .isAdmin ) ) }}
2021-10-18 14:27:42 +03:00
<span class="dropdown">
<GhDropdownButton @dropdownName="user-actions-menu" @classNames="gh-btn gh-btn-white gh-btn-icon icon-only user-actions-cog" @title="User Actions" data-test-user-actions= {{ true }} >
<span>
{{ svg-jar "settings" }}
<span class="hidden">User Settings</span>
</span>
</GhDropdownButton>
<GhDropdown @name="user-actions-menu" @tagName="ul" @classNames="user-actions-menu dropdown-menu dropdown-align-right">
{{ # if this .canMakeOwner }}
<li>
2022-02-02 19:09:43 +03:00
<button type="button" {{ action "toggleTransferOwnerModal" }} >
2021-10-18 14:27:42 +03:00
Make owner
</button>
{{ # if this .showTransferOwnerModal }}
<GhFullscreenModal @modal="transfer-owner"
@confirm= {{ action "transferOwnership" }}
@close= {{ action "toggleTransferOwnerModal" }}
@modifier="action wide" />
{{ / if }}
</li>
{{ / if }}
{{ # if this .deleteUserActionIsVisible }}
<li>
2022-02-02 19:09:43 +03:00
<button class="delete" data-test-delete-button type="button" {{ action "toggleDeleteUserModal" }} >
2021-10-18 14:27:42 +03:00
Delete user
</button>
</li>
{{ # if this .user .isActive }}
<li>
2022-02-02 19:09:43 +03:00
<button class="suspend" data-test-suspend-button type="button" {{ action "toggleSuspendUserModal" }} >
2021-10-18 14:27:42 +03:00
Suspend user
</button>
</li>
{{ / if }}
{{ # if this .user .isSuspended }}
<li>
2022-02-02 19:09:43 +03:00
<button class="unsuspend" data-test-unsuspend-button type="button" {{ action "toggleUnsuspendUserModal" }} >
2021-10-18 14:27:42 +03:00
Un-suspend user
</button>
</li>
{{ / if }}
{{ / if }}
2022-08-23 13:22:58 +03:00
{{ # if ( feature 'auditLog' ) }}
2022-08-23 13:15:23 +03:00
<li>
2022-08-23 13:26:51 +03:00
<LinkTo @route="settings.audit-log" @query= {{ hash user = this .user .id }} >
2022-08-23 13:15:23 +03:00
<span>View user activity</span>
</LinkTo>
</li>
2022-08-23 13:22:58 +03:00
{{ / if }}
2021-10-18 14:27:42 +03:00
</GhDropdown>
</span>
{{ / if }}
<GhTaskButton @class="gh-btn gh-btn-primary gh-btn-icon" @task= {{ this .save }} data-test-save-button= {{ true }} />
{{ # if this .showDeleteUserModal }}
<GhFullscreenModal @modal="delete-user"
@model= {{ this .user }}
@confirm= {{ action ( perform this .deleteUser ) }}
@close= {{ action "toggleDeleteUserModal" }}
@modifier="action wide" />
{{ / if }}
{{ # if this .showSuspendUserModal }}
<GhFullscreenModal @modal="suspend-user"
@model= {{ this .user }}
@confirm= {{ action "suspendUser" }}
@close= {{ action "toggleSuspendUserModal" }}
@modifier="action wide" />
{{ / if }}
{{ # if this .showUnsuspendUserModal }}
{{ # if this .limitErrorMessage }}
<GhFullscreenModal @modal="upgrade-unsuspend-user-host-limit"
@model= {{ hash
2022-02-02 20:09:02 +03:00
message=this.limitErrorMessage
2021-10-18 14:27:42 +03:00
}}
@close= {{ action "toggleUnsuspendUserModal" }}
@modifier="action wide" />
{{ else }}
<GhFullscreenModal @modal="unsuspend-user"
@model= {{ this .user }}
@confirm= {{ action "unsuspendUser" }}
@close= {{ action "toggleUnsuspendUserModal" }}
@modifier="action wide" />
{{ / if }}
{{ / if }}
</section>
</GhCanvasHeader>
2022-02-02 20:09:02 +03:00
{{ # if this .user .isLocked }}
2021-10-18 14:27:42 +03:00
<p class="gh-box gh-box-alert"> {{ svg-jar "info" }} This user account is locked. To sign in, ask this user to perform a password reset on their account.</p>
{{ / if }}
{{!-- <div class="bg-"> --}}
<section>
<div class="gm-main view-container settings-user">
<form class="user-profile" novalidate="novalidate" autocomplete="off" {{ action ( perform this .save ) on = "submit" }} >
<figure class="user-cover" style= {{ background-image-style this .user .coverImageUrl }} >
<button type="button" class="gh-btn gh-btn-default user-cover-edit" {{ action "toggleUploadCoverModal" }} ><span>Change cover</span></button>
{{ # if this .showUploadCoverModal }}
<GhFullscreenModal @modal="upload-image"
@model= {{ hash model = this .user imageProperty = "coverImage" }}
@close= {{ action "toggleUploadCoverModal" }}
@modifier="action wide" />
{{ / if }}
</figure>
<figure class="user-image bg-whitegrey">
<div id="user-image" class="img" style= {{ background-image-style this .user .profileImageUrl }} ><span class="hidden"> {{ this .user .name }} "s picture</span></div>
<button type="button" {{ action "toggleUploadImageModal" }} class="edit-user-image">Edit picture</button>
{{ # if this .showUploadImageModal }}
<GhFullscreenModal @modal="upload-image"
@model= {{ hash model = this .user imageProperty = "profileImage" paramsHash = ( hash purpose = "profile_image" ) }}
@close= {{ action "toggleUploadImageModal" }}
@modifier="action wide" />
{{ / if }}
</figure>
<div class="pa5">
<fieldset class="user-details-bottom">
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="name" @class="first-form-group">
<label for="user-name">Full name</label>
<GhTextInput
@id="user-name"
@class="user-name"
@autocorrect="off"
@value= {{ readonly this .user .name }}
@input= {{ action ( mut this .user .name ) value = "target.value" }}
@focus-out= {{ action "validate" "name" target = this .user }}
data-test-name-input= {{ true }}
/>
{{ # if this .user .errors .name }}
<GhErrorMessage @errors= {{ this .user .errors }} @property="name" data-test-error="user-name" />
{{ else }}
<p>Use your real name so people can recognize you</p>
{{ / if }}
</GhFormGroup>
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="slug">
<label for="user-slug">Slug</label>
<GhTextInput
@class="user-name"
@id="user-slug"
@name="user"
@selectOnClick="true"
@autocorrect="off"
@value= {{ readonly this .slugValue }}
@input= {{ action ( mut this .slugValue ) value = "target.value" }}
@focus-out= {{ action ( perform this .updateSlug this .slugValue ) }}
data-test-slug-input= {{ true }}
/>
<p><GhBlogUrl />/author/ {{ this .slugValue }} </p>
<GhErrorMessage @errors= {{ this .user .errors }} @property="slug" data-test-error="user-slug" />
</GhFormGroup>
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="email">
<label for="user-email">Email</label>
{{!-- Administrators only see text of Owner's email address but not input --}}
{{ # if this .canChangeEmail }}
<GhTextInput
@type="email"
@id="user-email"
@name="email"
@placeholder="jamie@example.com"
@autocapitalize="off"
@autocorrect="off"
@autocomplete="off"
@value= {{ readonly this .user .email }}
@input= {{ action ( mut this .user .email ) value = "target.value" }}
@focus-out= {{ action "validate" "email" target = this .user }}
data-test-email-input= {{ true }}
/>
<GhErrorMessage @errors= {{ this .user .errors }} @property="email" data-test-error="user-email" />
{{ else }}
<span> {{ this .user .email }} </span>
{{ / if }}
<p>Used for notifications</p>
</GhFormGroup>
{{ # if this .rolesDropdownIsVisible }}
<div class="form-group">
<label for="user-role">Role</label>
<div class="gh-input pointer" {{ on "click" ( action "toggleRoleSelectionModal" ) }} > {{ this .user .role .name }} {{ svg-jar "arrow-down-small" }} </div>
<p>What permissions should this user have?</p>
</div>
{{ # if this .showRoleSelectionModal }}
<GhFullscreenModal
@modal="select-user-role"
@model= {{ readonly this .user .role }}
@confirm= {{ action "changeRole" }}
@close= {{ action "toggleRoleSelectionModal" }}
@modifier="change-role"
/>
{{ / if }}
{{ / if }}
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="location">
<label for="user-location">Location</label>
<GhTextInput
@id="user-location"
@value= {{ readonly this .user .location }}
@input= {{ action ( mut this .user .location ) value = "target.value" }}
@focus-out= {{ action "validate" "location" target = this .user }}
data-test-location-input= {{ true }} />
<GhErrorMessage @errors= {{ this .user .errors }} @property="location" data-test-error="user-location" />
<p>Where in the world do you live?</p>
</GhFormGroup>
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="website">
<label for="user-website">Website</label>
<GhTextInput
@type="url"
@id="user-website"
@autocapitalize="off"
@autocorrect="off"
@autocomplete="off"
@value= {{ readonly this .user .website }}
@input= {{ action ( mut this .user .website ) value = "target.value" }}
@focus-out= {{ action "validate" "website" target = this .user }}
data-test-website-input= {{ true }} />
<GhErrorMessage @errors= {{ this .user .errors }} @property="website" data-test-error="user-website" />
<p>Have a website or blog other than this one? Link it!</p>
</GhFormGroup>
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="facebook">
<label for="user-facebook">Facebook profile</label>
<GhTextInput
@type="url"
@placeholder="https://www.facebook.com/username"
@autocorrect="off"
@id="user-facebook"
@name="user[facebook]"
@value= {{ readonly this .user .facebook }}
@input= {{ action ( mut this ._scratchFacebook ) value = "target.value" }}
@focus-out= {{ action "validateFacebookUrl" }}
data-test-facebook-input= {{ true }}
/>
<GhErrorMessage @errors= {{ this .user .errors }} @property="facebook" data-test-error="user-facebook" />
<p>URL of your personal Facebook Profile</p>
</GhFormGroup>
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="twitter">
<label for="user-twitter">Twitter profile</label>
<GhTextInput
@type="url"
@placeholder="https://twitter.com/username"
@autocorrect="off"
@id="user-twitter"
@name="user[twitter]"
@value= {{ readonly this .user .twitter }}
@input= {{ action ( mut this ._scratchTwitter ) value = "target.value" }}
@focus-out= {{ action "validateTwitterUrl" }}
data-test-twitter-input= {{ true }}
/>
<GhErrorMessage @errors= {{ this .user .errors }} @property="twitter" data-test-error="user-twitter" />
<p>URL of your personal Twitter profile</p>
</GhFormGroup>
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="bio" @class="bio-container">
<label for="user-bio">Bio</label>
<GhTextarea
@id="user-bio"
@value= {{ readonly this .user .bio }}
@input= {{ action ( mut this .user .bio ) value = "target.value" }}
@focus-out= {{ action "validate" "bio" target = this .user }}
data-test-bio-input= {{ true }}
/>
<GhErrorMessage @errors= {{ this .user .errors }} @property="bio" data-test-error="user-bio" />
<p>
2022-07-06 19:32:13 +03:00
Recommended: <strong>200</strong> characters.
2021-11-04 10:58:55 +03:00
You've used {{ gh-count-down-characters this .user .bio 2 0 0 }}
2021-10-18 14:27:42 +03:00
</p>
</GhFormGroup>
2022-08-12 17:06:06 +03:00
<div class="user-settings-subgroup">
<h4 class="user-settings-heading">Email notifications</h4>
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="email">
<div class="user-setting-toggle">
<div>
<label for="user-email">Comments</label>
<p>Receive notifications when members comment on one of your posts</p>
2022-08-10 18:13:27 +03:00
</div>
2022-08-12 17:06:06 +03:00
<div class="for-switch">
<label class="switch" for="comment-notifications">
<input
id="comment-notifications"
type="checkbox"
checked= {{ this .user .commentNotifications }}
class="gh-input"
{{ on "change" this .toggleCommentNotifications }}
data-test-checkbox="comment-notifications"
>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
</GhFormGroup>
</div>
2021-10-18 14:27:42 +03:00
</fieldset>
</div>
</form> {{! user details form }}
{{!-- If an administrator is viewing Owner's profile then hide inputs for change password --}}
{{ # if this .canChangePassword }}
<form id="password-reset" class="user-profile" novalidate="novalidate" autocomplete="off" {{ action ( perform this .user .saveNewPassword ) on = "submit" }} >
<div class="pa5">
<fieldset class="user-details-form">
{{ # if this .isOwnProfile }}
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="password">
<label for="user-password-old">Old password</label>
<GhTextInput
@type="password"
@id="user-password-old"
@autocomplete="current-password"
@value= {{ readonly this .user .password }}
@input= {{ action "updatePassword" value = "target.value" }}
@keyEvents= {{ hash
Enter=(action (perform this.user.saveNewPassword))
}}
data-test-old-pass-input= {{ true }}
/>
<GhErrorMessage @errors= {{ this .user .errors }} @property="password" data-test-error="user-old-pass" />
</GhFormGroup>
{{ / if }}
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="newPassword">
<label for="user-password-new">New password</label>
<GhTextInput
@value= {{ readonly this .user .newPassword }}
@type="password"
@autocomplete="new-password"
@id="user-password-new"
@input= {{ action "updateNewPassword" value = "target.value" }}
@keyEvents= {{ hash
Enter=(action (perform this.user.saveNewPassword))
}}
data-test-new-pass-input= {{ true }}
/>
<GhErrorMessage @errors= {{ this .user .errors }} @property="newPassword" data-test-error="user-new-pass" />
</GhFormGroup>
<GhFormGroup @errors= {{ this .user .errors }} @hasValidated= {{ this .user .hasValidated }} @property="ne2Password">
<label for="user-new-password-verification">Verify password</label>
<GhTextInput
@value= {{ readonly this .user .ne2Password }}
@type="password"
@id="user-new-password-verification"
@input= {{ action "updateNe2Password" value = "target.value" }}
@keyEvents= {{ hash
Enter=(action (perform this.user.saveNewPassword))
}}
data-test-ne2-pass-input= {{ true }}
/>
<GhErrorMessage @errors= {{ this .user .errors }} @property="ne2Password" data-test-error="user-ne2-pass" />
</GhFormGroup>
<div class="form-group">
<GhTaskButton @buttonText="Change Password" @idleClass="gh-btn-red" @class="gh-btn gh-btn-icon button-change-password" @task= {{ this .user .saveNewPassword }} data-test-save-pw-button="true" />
</div>
</fieldset>
</div>
</form> {{! change password form }}
{{ / if }}
{{ # if this .isOwnProfile }}
<form class="user-profile">
<div class="pa5">
<fieldset class="user-details-form">
<GhFormGroup>
<label for="personal-token">Staff access token</label>
<div class="relative flex items-center {{ unless this .copyContentKey .isRunning "hide-child-instant" }} ">
<GhTextInput
@id="personal-token"
@value= {{ readonly this .personalToken }}
@readonly
@type="text"
onclick="this.select()"
/>
<div class="app-api-personal-token-buttons child">
<button type="button" {{ action "confirmRegenerateTokenModal" }} class="app-button-regenerate" data-tooltip="Regenerate">
{{ svg-jar "reload" class = "w4 h4 stroke-midgrey" }}
</button>
<button type="button" {{ action ( perform this .copyContentKey ) }} class="app-button-copy">
{{ # if this .copyContentKey .isRunning }}
{{ svg-jar "check-circle" class = "w3 v-mid mr2 stroke-white" }} Copied
{{ else }}
Copy
{{ / if }}
</button>
</div>
</div>
<p>
Give apps personal access without sharing your email/password.
</p>
{{ # if this .personalTokenRegenerated }}
<p class="green">Staff access token was successfully regenerated </p>
{{ / if }}
{{ # if this .showRegenerateTokenModal }}
<GhFullscreenModal @modal="regenerate-token"
@confirm= {{ action "regenerateToken" }}
@close= {{ action "cancelRegenerateTokenModal" }}
@modifier="action wide" />
{{ / if }}
</GhFormGroup>
</fieldset>
</div>
</form>
{{ / if }}
</div>
</section>
</section>
