abstruse/src/app/components/app-user/app-user.component.html

Abstruse CI

<app-header></app-header>

<div class="container" *ngIf="loading">
  <img src="/assets/images/icons/flickr.svg" class="main-loader">
</div>

<div class="container user-profile-container">
  <div class="columns">
    <div class="column is-12" *ngIf="!loading">

      <div class="columns">
        <div class="column is-5">
          <div class="content-box">
            <div class="content-box-list-item" (click)="tab = 'profile'" [class.is-active]="tab === 'profile'" name="tab-profile">
              <div class="content-box-item-icon">
                <i class="ionicons ion-person"></i>
              </div>
              <div class="content-box-container">
                <h2>User Profile</h2>
                <p>How your profile looks like?</p>
              </div>
            </div>
            <div class="content-box-list-item" (click)="tab = 'tokens'" [class.is-active]="tab === 'tokens'" name="tab-tokens">
              <div class="content-box-item-icon">
                <i class="ionicons ion-key"></i>
              </div>
              <div class="content-box-container">
                <h2>Access Tokens</h2>
                <p>User saved access tokens.</p>
              </div>
            </div>
            <div class="content-box-list-item" (click)="tab = 'permissions'" [class.is-active]="tab === 'permissions'" name="tab-permissions">
              <div class="content-box-item-icon">
                <i class="ionicons ion-ios-paper"></i>
              </div>
              <div class="content-box-container">
                <h2>Permissions</h2>
                <p>Manage permissions for user access to repositories</p>
              </div>
            </div>
          </div>
        </div>
        <div class="column is-7">

          <div class="content-box" *ngIf="tab === 'profile'">
            <div class="user-content-profile">
              <h1>User Profile</h1>
              <div class="columns">
                <div class="column is-3">
                  <figure class="image profile-image">
                    <img [src]="avatarUrl">
                    <span class="label-blue">Change avatar</span>
                    <label class="upload-label" *ngIf="(loggedUser.id === user.id || loggedUser.admin)">
                      <input type="file" ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput">
                    </label>
                    <progress min="0" max="100" [value]="uploadProgress" class="progress-blue" *ngIf="uploading"></progress>
                  </figure>
                </div>
                <div class="column is-9">
                  <form class="form borderless" (ngSubmit)="updateUser($event)" #editForm="ngForm">
                    <div class="message red" *ngIf="!saving && userSaved === false">
                      <p>
                        <i class="ion ion-close-round"></i>
                        Error saving user data.
                      </p>
                    </div>
                    <div class="message green" *ngIf="!saving && userSaved">
                      <p>
                        <i class="ion ion-checkmark-round"></i>
                        User data successfully saved.
                      </p>
                    </div>
                    <div class="form-field">
                      <label class="form-label">Full Name</label>
                      <input class="form-input" type="text" placeholder="Full Name" name="fullname" required [(ngModel)]="user.fullname">
                    </div>
                    <div class="form-field">
                      <label class="form-label">Email</label>
                      <input class="form-input" type="text" placeholder="Email" name="email" required [(ngModel)]="user.email">
                    </div>
                    <div class="form-field" *ngIf="loggedUser.id !== user.id">
                      <label class="form-label is-for-toggle">Admin</label>
                      <app-toggle name="admin" [(ngModel)]="user.admin"></app-toggle>
                    </div>
                    <div class="form-field">
                      <button type="submit" name="save-user-data" class="button float-right" [class.is-loading]="saving" [disabled]="!editForm.form.valid || !(loggedUser.id === user.id || loggedUser.admin)">Save User Data</button>
                    </div>
                  </form>
                  <form class="form borderless" (ngSubmit)="updatePassword($event)" #passwdForm="ngForm">
                    <div class="message red" *ngIf="!savingPassword && passwordSaved === false">
                      <p>
                        <i class="ion ion-close-round"></i>
                        Error saving user password.
                      </p>
                    </div>
                    <div class="message green" *ngIf="!savingPassword && passwordSaved">
                      <p>
                        <i class="ion ion-checkmark-round"></i>
                        User password successfully updated.
                      </p>
                    </div>
                    <label class="form-label">Change Password</label>
                    <div class="form-field flex-centered">
                      <input class="form-input" type="password" placeholder="Password" name="password" required [(ngModel)]="password">
                      <button type="submit" name="change-password" class="button float-right is-marginless mleft10" [class.is-loading]="savingPassword" [disabled]="!passwdForm.form.valid || !(loggedUser.id === user.id || loggedUser.admin)">Change</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>

          <div class="content-box" *ngIf="tab === 'tokens'">
            <div class="user-content-profile">
              <h1>Access Tokens</h1>
              <div class="message" *ngIf="!user?.access_tokens?.length">
                <div class="columns">
                  <div class="column is-1">
                    <i class="ion ion-key"></i>
                  </div>
                  <div class="column is-11">
                    <p>No access tokens found.</p>
                  </div>
                </div>
              </div>
              <div class="access-tokens-container" *ngIf="user?.access_tokens?.length">
                <div class="access-token-item" *ngFor="let token of user?.access_tokens">
                  <div class="columns">
                    <div class="column is-1">
                      <i class="ionicon ion-key"></i>
                    </div>
                    <div class="column is-6">
                      <span>{{ token.description }}</span>
                    </div>
                    <div class="column is-4">
                      <span>{{ token.created_at | date:'medium' }}</span>
                    </div>
                    <div class="column is-1 justify-center">
                      <i class="ionicon ion-close pointer" name="btn-removeToken" (click)="removeToken(token.id)"></i>
                    </div>
                  </div>
                </div>
              </div>
              <form class="form" #tokenForm="ngForm" (ngSubmit)="addToken($event)" *ngIf="(loggedUser.id === user.id || loggedUser.admin)">
                <h4>New Authentication</h4>
                <div class="message">
                  <div class="columns">
                    <div class="column is-1">
                      <i class="ion ion-alert"></i>
                    </div>
                    <div class="column is-11">
                      <p>Treat your access tokens with same respect as passwords.</p>
                      <p>Once you save access token you cannot see it again.</p>
                    </div>
                  </div>
                </div>
                <div class="form-field">
                  <label class="form-label">Authentication Type</label>
                  <app-selectbox [data]="tokenTypeOptions" (ngModelChange)="changeTokenTypeSelect($event)" [(ngModel)]="token.type" name="access_token_type"></app-selectbox>
                </div>
                <div class="form-field">
                  <label class="form-label">Description</label>
                  <input class="form-input" type="text" placeholder="Description" name="token_description" required [(ngModel)]="token.description">
                </div>
                <div class="form-field" *ngIf="token.type === 'gitlab'">
                  <label class="form-label">GitLab Username</label>
                  <input class="form-input" type="text" placeholder="GitLab Username" name="gitlab_username" required [(ngModel)]="token.gitlab_username">
                </div>
                <div class="form-field" *ngIf="token.type !== 'bitbucket'">
                  <label class="form-label">Token</label>
                  <input class="form-input" type="text" placeholder="Access Token" name="token" required [(ngModel)]="token.token">
                </div>
                <div class="form-field" *ngIf="token.type === 'bitbucket'">
                  <label class="form-label">Bitbucket Client ID</label>
                  <input class="form-input" type="text" placeholder="Bitbucket Client ID" name="token_bitbucket_client_id" required [(ngModel)]="token.bitbucket_client_id">
                </div>
                <div class="form-field" *ngIf="token.type === 'bitbucket'">
                  <label class="form-label">Bitbucket OAuth Key</label>
                  <input class="form-input" type="text" placeholder="Bitbucket OAuth Key" name="token_bitbucket_oauth_key" required [(ngModel)]="token.bitbucket_oauth_key">
                </div>
                <div class="form-field" *ngIf="token.type === 'bitbucket'">
                  <label class="form-label">Bitbucket OAuth Secret</label>
                  <input class="form-input" type="text" placeholder="Bitbucket OAuth Secret" name="token_bitbucket_oauth_secret" required [(ngModel)]="token.bitbucket_oauth_secret">
                </div>
                <div class="form-field">
                  <button type="submit" name="add-token" class="button green float-right" [disabled]="!tokenForm.form.valid">Add</button>
                </div>
              </form>
            </div>
          </div>

          <div class="content-box" *ngIf="tab === 'permissions'">
            <div class="user-content-profile">
              <h1>Permissions</h1>
              <div class="message green" *ngIf="user?.admin">
                <div class="columns">
                  <div class="column is-1">
                    <i class="ion ion-ios-paper"></i>
                  </div>
                  <div class="column is-11">
                    <p>As an admin user has permissions to all repositories.</p>
                  </div>
                </div>
              </div>

              <div *ngIf="!user?.admin && repositories && repositories.length" class="permission-repositories">
                <div class="message">
                  <div class="columns">
                    <div class="column is-1">
                      <i class="ion ion-ios-paper"></i>
                    </div>
                    <div class="column is-11">
                      <p>List of repositories that user has access to.</p>
                    </div>
                  </div>
                </div>
                <div class="columns repo-item border-green" *ngFor="let repo of repositories; let i = index;">
                  <div class="column is-3" (click)="gotoRepository($event, repo.id)">
                    <span>{{ repo.full_name }}</span>
                  </div>
                  <div class="column is-6">
                    <span>{{ repo.html_url }}</span>
                  </div>
                  <div class="column is-2">
                    <span>{{ repo.default_branch }}</span>
                  </div>
                  <div class="column is-1">
                    <i class="ionicon ion-close pointer" (click)="updateRepositoryPermissions(user.id, repo.id, 0)" name="btn-removePermission" *ngIf="loggedUser.admin"></i>
                  </div>
                </div>
              </div>

              <div *ngIf="!user?.admin && loggedUser?.admin && restrictedRepositories && restrictedRepositories.length" class="permission-repositories">
                <div class="message">
                  <div class="columns">
                    <div class="column is-1">
                      <i class="ion ion-ios-paper"></i>
                    </div>
                    <div class="column is-11">
                      <p>List of repositories that user cannot see and manage.</p>
                    </div>
                  </div>
                </div>
                <div class="columns repo-item border-red" *ngFor="let repo of restrictedRepositories; let i = index;">
                  <div class="column is-3" (click)="gotoRepository($event, repo.id)">
                    <span>{{ repo.full_name }}</span>
                  </div>
                  <div class="column is-6">
                    <span>{{ repo.html_url }}</span>
                  </div>
                  <div class="column is-2">
                    <span>{{ repo.default_branch }}</span>
                  </div>
                  <div class="column is-1">
                    <i class="ionicon ion-checkmark-round pointer" (click)="updateRepositoryPermissions(user.id, repo.id, 1)" name="btn-addPermission" *ngIf="loggedUser.admin"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>