fastlane/ci

<div class="fci-onboard-header">
  <div fci-grid class="fci-onboard-welcome">
    <div fci-cell="12">
      <div class="fci-onboard-title">Welcome to fastlane.ci!</div>
      <div class="fci-onboard-subtitle">
        Open source, self-hosted, mobile-optimized CI powered by fastlane brought to you by the fastlane team.
      </div>
      <button mat-raised-button color="primary" (click)="goToOldOnboarding()">Old Onboarding</button>
    </div>
  </div>
</div>
<div fci-grid>
  <div fci-cell="12">
    <h6>NOT WORKING - CURRENTLY IN DEVELOPMENT</h6>
    <form [formGroup]="form" (ngSubmit)="submitOnboarding()">
      <mat-vertical-stepper>
        <mat-step label="Set up your Encryption Key">
          <p>
            <b>fastlane.ci</b> uses an encryption key to encrypt your API tokens and passwords written out to the private
            <b>fastlane.ci</b>
            configuration repository generated at the end of onboarding.</p>
          <div class="fci-input-container">
            <label>CI encryption key</label>
            <input formControlName="encryptionKey" placeholder="my-encryption-key" type="password">
          </div>
          <div>
            <button mat-button mat-raised-button color="primary" matStepperNext>Next</button>
          </div>
        </mat-step>
        <mat-step label="Set Up your CI bot account">
          <p>
            <b>fastlane.ci</b> needs you to set up a CI bot account to update the build status, etc.</p>
          <div class="fci-substep">
            <div class="fci-substep-label">
              <span class="fci-substep-letter">a</span>
              Create an account for your fastlane.ci bot on GitHub
            </div>
          </div>
          <div class="fci-substep">
            <div class="fci-substep-label">
              <span class="fci-substep-letter">b</span>
              Create a personal access token for use with your bot on GitHub</div>
            <div class="fci-substep-content">
              <div>Enable the following permissions
                <a href="https://github.com" target="_blank">on GitHub</a>:</div>
              <div class="fci-github-token-scopes-image"></div>
            </div>
          </div>
          <div class="fci-substep">
            <div class="fci-substep-label">
              <span class="fci-substep-letter">c</span>
              Enter information for your fastlane.ci bot
            </div>
            <div class="fci-substep-content">
              <div class="fci-input-container">
                <label>CI Bot GitHub API token</label>
                <input formControlName="botToken" placeholder="Enter API token" type="text">
                <div class="fci-input-status">
                  <mat-spinner *ngIf="isFetchingBotEmail" mode="indeterminate" diameter="24"></mat-spinner>
                  <mat-icon class="fci-success-icon" *ngIf="botEmail">check_circle</mat-icon>
                </div>
              </div>
              <ng-container *ngIf="botEmail">
                <div class="fci-input-container">
                  <label>fastlane.ci bot username</label>
                  <span class="fci-username">{{botEmail}}</span>
                </div>
                <div class="fci-input-container">
                  <label>fastlane.ci bot password</label>
                  <input formControlName="botPassword" placeholder="Enter fastlane.ci password" type="password">
                </div>
              </ng-container>
            </div>
            <div>
              <button mat-button mat-raised-button color="primary" matStepperNext>Next</button>
              <button mat-button mat-raised-button matStepperPrevious>Back</button>
            </div>
          </div>
        </mat-step>
        <mat-step label="Create private repository for ci-config">
          <p>
            <b>fastlane.ci</b> requires you setup a private configuration repository on GitHub</p>
          <div class="fci-input-container">
            <label>Enter an existing private repository or create one with the default name</label>
            <input formControlName="configRepo" placeholder="fastlane/ci-config-repo" type="text">
          </div>
          <div>
            <button class="fci-form-submit-button" mat-button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Done</button>
            <button mat-button mat-raised-button matStepperPrevious>Back</button>
          </div>
        </mat-step>
      </mat-vertical-stepper>
    </form>
  </div>
</div>