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

Abstruse CI

<div class="hero is-fullheight">
  <div class="hero-body">
    <div class="container">
      <div class="columns is-multiline">
        <div class="column is-8 is-offset-2">
          <div class="setup-logo">
            <img src="/assets/images/abstruse-text-logo.svg">
          </div>
        </div>
        <div class="column is-10 is-offset-1">
          <div class="setup-content">
            <h1>
              <img src="/assets/images/icons/server.svg"> AbstruseCI Setup
              <span>Configure Abstruse Continous Integration Server</span>
            </h1>
            <hr/>

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

            <div *ngIf="!loading">
              <div *ngIf="step === 'config'">
                <h2>
                  <img src="/assets/images/icons/server-status.svg"> Server Status
                </h2>
                <div class="setup-list">
                  <div class="setup-list-item">
                    <img class="icon" [src]="serverStatus.docker ? '/assets/images/icons/check-true.svg' : '/assets/images/icons/check-false.svg'"
                      name="docker-installed-icon"> Docker Installed
                  </div>
                  <div class="setup-list-item">
                    <img class="icon" [src]="serverStatus.dockerRunning ? '/assets/images/icons/check-true.svg' : '/assets/images/icons/check-false.svg'"
                      name="docker-running-icon"> Docker Running
                  </div>
                  <div class="setup-list-item">
                    <img class="icon" [src]="serverStatus.sqlite ? '/assets/images/icons/check-true.svg' : '/assets/images/icons/check-false.svg'"
                      name="sqlite3-installed-icon"> SQLite3 Installed
                  </div>
                  <div class="setup-list-item">
                    <img class="icon" [src]="serverStatus.git ? '/assets/images/icons/check-true.svg' : '/assets/images/icons/check-false.svg'"
                      name="git-installed-icon"> Git Installed
                  </div>
                </div>
                <hr/>
                <p *ngIf="!readyToSetup">Please make sure that all of the above checkmarks are green as it is mandatory to run Abstruse on this server.</p>
                <button type="button" class="button" name="btn-recheck" (click)="checkConfiguration()" *ngIf="!readyToSetup">Re-check Configuration</button>
                <button type="button" class="button" name="btn-continue" (click)="continueToSecrets()" *ngIf="readyToSetup">Continue</button>
              </div>

              <div *ngIf="step === 'secrets'">
                <h2>
                  Abstruse Server Secrets
                </h2>
                <form class="secrets-form" #secretsForm="ngForm" (ngSubmit)="saveSecrets()">
                  <div class="columns is-multiline">
                    <div class="column is-6 is-offset-3">
                      <div class="form-field">
                        <label class="form-label">API Secret</label>
                        <input class="form-input" type="text" name="api_secret" placeholder="API Secret" [(ngModel)]="secrets.api_secret" required minlength="7">
                        <p class="helper">API secret is used to encode and decode remote requests to git providers.</p>
                      </div>
                      <div class="form-field">
                        <label class="form-label">JWT Secret</label>
                        <input class="form-input" type="text" name="jwt_secret" placeholder="JWT Secret" [(ngModel)]="secrets.jwt_secret" required minlength="7">
                        <p class="helper">JWT secret is used to encode and decode user passwords.</p>
                      </div>
                      <div class="form-field">
                        <button type="submit" class="button green" name="btn-continue" [disabled]="!secretsForm.valid">Continue</button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

              <div *ngIf="step === 'db'">
                <h2>
                  <img src="/assets/images/icons/password.svg"> Administrator Account
                </h2>
                <form class="password-form" #userForm="ngForm" (ngSubmit)="createUser()">
                  <div class="columns is-multiline">
                    <div class="column is-6 is-offset-3">
                      <div class="form-field">
                        <label class="form-label">Email</label>
                        <input class="form-input" type="email" name="email" placeholder="Email" [(ngModel)]="user.email" required email>
                        <p class="helper">Email is used for username.</p>
                      </div>
                      <div class="form-field">
                        <label class="form-label">Full Name</label>
                        <input class="form-input" type="text" name="name" placeholder="Full Name" [(ngModel)]="user.fullname" required>
                        <p class="helper">John Wayne.</p>
                      </div>
                      <div class="form-field">
                        <label class="form-label">Password</label>
                        <input class="form-input" type="password" name="password" placeholder="Password" [(ngModel)]="user.password" required>
                        <p class="helper">Pick your password.</p>
                      </div>
                      <div class="form-field">
                        <label class="form-label">Repeat Password</label>
                        <input class="form-input" type="password" name="password2" placeholder="Repeat Password" [(ngModel)]="user.confirmPassword"
                          required validateEqual="password">
                        <p class="helper">Repeat picked password from the previous field.</p>
                      </div>
                      <div class="form-field">
                        <button type="submit" class="button green" name="btn-register" [disabled]="!userForm.valid">Continue</button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

              <div *ngIf="step === 'done'">
                <div class="message green">
                  <p>
                    Abstruse successfully configured.
                  </p>
                </div>
                <a class="button" name="loginPage" routerLink="/login">Login Page</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>