services/self-service/src/main/resources/webapp/src/app/resources/manage-ungit/manage-ungit.component.html

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<div class="manage-ungit" id="dialog-box">
  <header class="dialog-header">
    <h4 class="modal-title">Manage Git Credentials</h4>
    <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
  </header>
  <div class="dialog-content tabs">
    <mat-tab-group mat-stretch-tabs #tabGroupGit class="content-box">
      <mat-tab label="LIST">
        <button mat-raised-button class="butt add-creds" (click)="tabGroupGit.selectedIndex = 1; resetForm()">
          <i class="material-icons">people_outline</i>Add account
        </button>
        <mat-divider></mat-divider>
        <mat-list *ngIf="gitCredentials?.length" [ngStyle]="editableForm && gitCredentials?.length && {'height': '250px'}">
          <mat-list-item class="list-header">
            <div class="hostname-field">Host name</div>
            <div class="user-field">User</div>
            <div class="mail-field">Email</div>
            <div class="login-field">Login</div>
            <div class="actions"></div>
          </mat-list-item>

          <div class="scrollingList" id="scrolling" [ngStyle]="editableForm && gitCredentials?.length && {'height': '200px'}">
            <mat-list-item *ngFor="let item of gitCredentials">
              <div class="hostname-field ellipsis">
                <strong>{{ item.hostname }}</strong>
              </div>
              <div class="user-field ellipsis">{{ item.username }}</div>
              <div class="mail-field ellipsis">{{ item.email }}</div>
              <div class="login-field ellipsis">{{ item.login }}</div>
              <div class="actions">
                <span class="git-actions" (click)="editSpecificAccount(item)">
                  <i class="material-icons">mode_edit</i>
                </span>
                <span class="git-actions remove" (click)="deleteAccount(item)">
                  <i class="material-icons">delete_forever</i>
                </span>
              </div>
            </mat-list-item>
          </div>
        </mat-list>
        <div *ngIf="!gitCredentials?.length" class="scrollingList info">
          <p>You have no related accounts</p>
        </div>

        <div class="text-center m-top-30 m-bott-10" *ngIf="editableForm && gitCredentials?.length">
          <button mat-raised-button type="button" class="butt action" (click)="cancelAllModifyings()">Cancel</button>
          <button mat-raised-button type="button" class="butt butt-success action"
            (click)="editAccounts_btnClick()">Apply changes</button>
        </div>
      </mat-tab>
      <mat-tab label="MANAGE ACCOUNT">
        <form [formGroup]="updateAccountCredentialsForm" novalidate>
          <div class="tab-content git-form">
            <div class="col">
              <div class="control-group">
                <label class="label">Host name</label>
                <div class="control">
                  <input type="text" formControlName="hostname"
                    placeholder="Enter host name ( without http:// or https:// )">
                </div>
                <span class="danger_color"
                  *ngIf="!updateAccountCredentialsForm.controls['hostname'].valid
                  && updateAccountCredentialsForm.controls['hostname'].touched && !updateAccountCredentialsForm.controls['hostname'].hasError('duplicate')">
                  Hostname field is required. Please provide a qualified domain name (e.g. gitlab.com or github.com).
                </span>
                <span class="danger_color"
                  *ngIf="updateAccountCredentialsForm.controls['hostname'].hasError('duplicate') && updateAccountCredentialsForm.controls['hostname'].dirty">
                  The Host name is already in use.
                </span>
              </div>
              <div class="control-group">
                <label class="label">User name</label>
                <div class="control">
                  <input type="text" formControlName="username" placeholder="Enter user name">
                </div>
                <span class="danger_color"
                  *ngIf="!updateAccountCredentialsForm.controls['username'].valid && updateAccountCredentialsForm.controls['username'].touched">
                  Username field is required. Please provide a valid username.
                </span>
              </div>
              <div class="control-group">
                <label class="label">Email</label>
                <div class="control">
                  <input type="email" formControlName="email" placeholder="Enter email">
                </div>
                <span class="danger_color"
                  *ngIf="!updateAccountCredentialsForm.controls['email'].valid && updateAccountCredentialsForm.controls['email'].touched">
                  Email field is required. Please provide a valid email.
                </span>
              </div>
            </div>
            <div class="col">
              <div class="control-group">
                <label class="label">Login</label>
                <div class="control">
                  <input type="text" formControlName="login" placeholder="Enter login">
                </div>
                <span class="danger_color"
                  *ngIf="!updateAccountCredentialsForm.controls['login'].valid && updateAccountCredentialsForm.controls['login'].touched">
                  Login field is required. Please provide a valid login.
                </span>
              </div>
              <div class="control-group">
                <label class="label">Password</label>
                <div class="control">
                  <input type="password" formControlName="password" placeholder="Enter Password">
                </div>
                <span class="danger_color"
                  *ngIf="!updateAccountCredentialsForm.controls['password'].valid && updateAccountCredentialsForm.controls['password'].touched">
                  Field is required. Password must be at least 6 characters.
                </span>
              </div>
              <div class="control-group">
                <label class="label">Confirm password</label>
                <div class="control">
                  <input type="password" formControlName="confirmPassword" placeholder="Enter Password">
                </div>
                <span class="danger_color" *ngIf="updateAccountCredentialsForm.value.password !== updateAccountCredentialsForm.value.confirmPassword && updateAccountCredentialsForm.controls['confirmPassword'].touched && !!updateAccountCredentialsForm.value.password">
                  Passwords don't match.
                </span>
              </div>
            </div>
          </div>
          <div class="text-center submit m-bott-10">
            <button mat-raised-button type="button" class="butt action" (click)="resetForm()">Clear</button>
            <button mat-raised-button type="button" [disabled]="!updateAccountCredentialsForm.valid || updateAccountCredentialsForm.value.password !== updateAccountCredentialsForm.value.confirmPassword"
              (click)="assignChanges(updateAccountCredentialsForm.value)"
              class="butt butt-success action">Assign</button>
          </div>
        </form>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>