quay/static/partials/setup.html

<div>
  <div class="cor-loader" ng-show="currentStep == States.LOADING"></div>
  <div class="page-content" quay-show="Features.SUPER_USERS && currentStep == States.CONFIG">
    <div class="cor-title">
      <span class="cor-title-link"></span>
      <span class="cor-title-content">Quay Enterprise Setup</span>
    </div>

    <div class="cor-tab-panel" style="padding: 20px;">
      <div class="co-alert alert alert-info">
        <span class="cor-step-bar" progress="stepProgress">
          <span class="cor-step" title="Upload License" text="1"></span>
          <span class="cor-step" title="Configure Database" text="2"></span>
          <span class="cor-step" title="Setup Database" icon="database"></span>
          <span class="cor-step" title="Container Restart" icon="refresh"></span>
          <span class="cor-step" title="Create Superuser" text="3"></span>
          <span class="cor-step" title="Configure Registry" text="4"></span>
          <span class="cor-step" title="Validate Configuration" text="5"></span>
          <span class="cor-step" title="Container Restart" icon="refresh"></span>
          <span class="cor-step" title="Setup Complete" icon="check"></span>
        </span>

        <div><strong>Almost done!</strong></div>
        <div>Configure your Redis database and other settings below</div>
      </div>

      <div class="config-setup-tool" is-active="isStep(currentStep, States.CONFIG)"
           configuration-saved="configurationSaved(config)"></div>
    </div>
  </div>
</div>

<!-- Modal message dialog -->
<div class="co-dialog modal fade initial-setup-modal" id="setupModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Header -->
      <div class="modal-header">
        <span class="cor-step-bar" progress="stepProgress">
          <span class="cor-step" title="Upload License" text="1"></span>
          <span class="cor-step" title="Configure Database" text="2"></span>
          <span class="cor-step" title="Setup Database" icon="database"></span>
          <span class="cor-step" title="Container Restart" icon="refresh"></span>
          <span class="cor-step" title="Create Superuser" text="3"></span>
          <span class="cor-step" title="Configure Registry" text="4"></span>
          <span class="cor-step" title="Validate Configuration" text="5"></span>
          <span class="cor-step" title="Container Restart" icon="refresh"></span>
          <span class="cor-step" title="Setup Complete" icon="check"></span>
        </span>
        <h4 class="modal-title"><span><span class="registry-name" is-short="true"></span> Setup</h4>
      </div>

      <form id="superuserForm" name="superuserForm" ng-submit="createSuperUser()">
        <!-- Content: CREATE_SUPERUSER or SUPERUSER_ERROR or CREATING_SUPERUSER -->
        <div class="modal-body config-setup-tool-element" style="padding: 20px"
             ng-show="isStep(currentStep, States.CREATE_SUPERUSER, States.SUPERUSER_ERROR, States.CREATING_SUPERUSER)">
            <p>A superuser is the main administrator of your <span class="registry-name" is-short="true"></span>. Only superusers can edit configuration settings.</p>

            <div class="form-group">
              <label>Username</label>
              <input class="form-control" type="text" ng-model="superUser.username"
                     ng-pattern="/^[a-z0-9_]{4,30}$/" required>
              <div class="help-text">Minimum 4 characters in length</div>
            </div>

            <div class="form-group">
              <label>Email address</label>
              <input class="form-control" type="email" ng-model="superUser.email" required>
            </div>

            <div class="form-group">
              <label>Password</label>
              <input class="form-control" type="password" ng-model="superUser.password"
                     ng-pattern="/^[^\s]+$/"
                     ng-minlength="8" required>
              <div class="help-text">Minimum 8 characters in length</div>
            </div>

            <div class="form-group">
              <label>Repeat Password</label>
              <input class="form-control" type="password" ng-model="superUser.repeatPassword"
                     match="superUser.password" required>
            </div>
       </div>

        <!-- Footer: CREATE_SUPERUSER or SUPERUSER_ERROR -->
        <div class="modal-footer"
             ng-show="isStep(currentStep, States.CREATE_SUPERUSER, States.SUPERUSER_ERROR)">
          <button type="submit" class="btn btn-primary" ng-disabled="!superuserForm.$valid">
            Create Super User
          </button>
        </div>
      </form>

      <!-- Content: DB_RESTARTING or CONFIG_RESTARTING -->
      <div class="modal-body" style="padding: 20px;"
           ng-show="isStep(currentStep, States.DB_RESTARTING, States.CONFIG_RESTARTING)">
           <h4 style="margin-bottom: 20px;">
            <i class="fa fa-lg fa-refresh" style="margin-right: 10px;"></i>
             <span class="registry-name"></span> is currently being restarted
           </h4>
           This can take several minutes. If the container does not restart on its own,
           please re-execute the <code>docker run</code> command.
      </div>

     <!-- Content: READY -->
      <div class="modal-body" style="padding: 20px;"
           ng-show="isStep(currentStep, States.READY)">
           <h4>Installation and setup of <span class="registry-name"></span> is complete</h4>
           You can now invite users to join, create organizations and start pushing and pulling
           repositories.

           <strong ng-if="hasSSL" style="margin-top: 20px;">
            Note: SSL is enabled. Please make sure to visit with
            an <u>https</u> prefix
           </strong>
      </div>

     <!-- Content: VALID_CONFIG -->
      <div class="modal-body" style="padding: 20px;"
           ng-show="isStep(currentStep, States.VALID_CONFIG)">
           <h4>All configuration has been validated and saved</h4>
           The container must be restarted to apply the configuration changes.
      </div>

      <!-- Content: DB_SETUP_SUCCESS -->
      <div class="modal-body" style="padding: 20px;"
           ng-show="isStep(currentStep, States.DB_SETUP_SUCCESS)">
           <h4>The database has been setup and is ready</h4>
           The container must be restarted to apply the configuration changes.
      </div>

      <!-- Content: VALIDATED_LICENSE -->
      <div class="modal-body license-valid" style="padding: 20px;"
           ng-show="isStep(currentStep, States.VALIDATED_LICENSE)">
        <h5><i class="fa fa-check"></i> License Validated</h5>
        Your license has been validated and saved. Please press "Next" to continue setup of your Quay Enterprise installation.
        <table class="co-table">
          <tr><td>Product:</td><td>{{ currentState.licenseDecoded.publicProductName || currentState.licenseDecoded.productName }}</td></tr>
          <tr><td>Plan:</td><td>{{ currentState.licenseDecoded.publicPlanName || currentState.licenseDecoded.planName }}</td></tr>
        </table>
      </div>

      <!-- Content: UPLOAD_LICENSE or VALIDATING_LICENSE -->
      <div class="modal-body upload-license" style="padding: 20px;"
           ng-show="isStep(currentStep, States.UPLOAD_LICENSE, States.VALIDATING_LICENSE)"
           ng-class="isStep(currentStep, States.VALIDATING_LICENSE) ? 'validating' : 'entering'">
        <h4>
          Quay Enterprise License
        </h4>
        <div>
          Please provide your Quay Enterprise License. It can be found under the "Raw Format" tab
          of your Quay Enterprise subscription in the <a href="https://account.tectonic.com" target="_blank">Tectonic Account</a>.
        </div>
        <textarea id="enterLicenseBox" ng-model="currentState.licenseContents" placeholder="Paste your raw license here, which should already be in base64 format: GtqMjMwNDgyM3Vq..."
                  ng-readonly="isStep(currentStep, States.VALIDATING_LICENSE)"></textarea>
        <div class="license-invalid" ng-visible="isStep(currentStep, States.UPLOAD_LICENSE) && currentState.licenseError">
          <h5><i class="fa fa-times-circle"></i> Validation Failed</h5>
          <h6>{{ currentState.licenseError }}</h6>
          Please try copying your license from the Tectonic Account again.
        </div>
      </div>

      <!-- Content: DB_SETUP or DB_SETUP_ERROR -->
      <div class="modal-body" style="padding: 20px;"
           ng-show="isStep(currentStep, States.DB_SETUP, States.DB_SETUP_ERROR)">
           <h4>
             <i class="fa fa-lg fa-database" style="margin-right: 10px;"></i>
             <span class="registry-name"></span> is currently setting up its database
             schema
           </h4>
           This can take several minutes.
      </div>

      <!-- Content: CONFIG_DB or DB_ERROR or VALIDATING_DB or SAVING_DB -->
      <div class="modal-body validate-database config-setup-tool-element"
           ng-show="isStep(currentStep, States.CONFIG_DB, States.DB_ERROR, States.VALIDATING_DB, States.SAVING_DB)">
        <p>
        Please enter the connection details for your <strong>empty</strong> database. The schema will be created in the following step.</p>
        </p>

        <div class="config-parsed-field" binding="databaseUri"
                                   parser="parseDbUri(value)"
                                   serializer="serializeDbUri(fields)">
          <table class="config-table">
            <tr>
              <td class="non-input">Database Type:</td>
              <td>
                 <select ng-model="fields.kind">
                    <option value="mysql+pymysql">MySQL</option>
                    <option value="postgresql">Postgres</option>
                 </select>
              </td>
            </tr>
            <tr ng-show="fields.kind">
              <td>Database Server:</td>
              <td>
                <span class="config-string-field" binding="fields.server"
                      placeholder="dbserverhost"
                      pattern="{{ HOSTNAME_REGEX }}"
                      validator="validateHostname(value)">></span>
                <div class="help-text">
                  The server (and optionally, custom port) where the database lives
                </div>
              </td>
            </tr>
            <tr ng-show="fields.kind">
              <td>Username:</td>
              <td>
                <span class="config-string-field" binding="fields.username"
                      placeholder="someuser"></span>
                <div class="help-text">This user must have <strong>full access</strong> to the database</div>
              </td>
            </tr>
            <tr ng-show="fields.kind">
              <td>Password:</td>
              <td>
                <input class="form-control" type="password" ng-model="fields.password"></span>
              </td>
            </tr>
            <tr ng-show="fields.kind">
              <td>Database Name:</td>
              <td>
                <span class="config-string-field" binding="fields.database"
                      placeholder="registry-database"></span>
              </td>
            </tr>
            <tr ng-show="fields.kind">
              <td>SSL Certificate:</td>
              <td>
                <span class="config-file-field" filename="database.pem"
                      skip-check-file="true" has-file="currentState.hasDatabaseSSLCert"></span>
                <div class="help-text">Optional SSL certicate (in PEM format) to use to connect to the database</div>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <!-- Footer: CREATING_SUPERUSER -->
      <div class="modal-footer working" ng-show="isStep(currentStep, States.CREATING_SUPERUSER)">
        <span class="cor-loader-inline"></span> Creating superuser...
      </div>

      <!-- Footer: SUPERUSER_ERROR -->
      <div class="modal-footer alert alert-warning"
           ng-show="isStep(currentStep, States.SUPERUSER_ERROR)">
        {{ errors.SuperuserCreationError }}
      </div>

      <!-- Footer: DB_SETUP_ERROR -->
      <div class="modal-footer alert alert-warning"
           ng-show="isStep(currentStep, States.DB_SETUP_ERROR)">
        Database Setup Failed. Please report this to support: {{ errors.DatabaseSetupError }}
      </div>

      <!-- Footer: DB_ERROR -->
      <div class="modal-footer alert alert-warning" ng-show="isStep(currentStep, States.DB_ERROR)">
        Database Validation Issue: {{ errors.DatabaseValidationError }}
      </div>

      <!-- Footer: UPLOAD_LICENSE or VALIDATING_LICENSE -->
      <div class="modal-footer"
           ng-show="isStep(currentStep, States.UPLOAD_LICENSE, States.VALIDATING_LICENSE)">
          <div ng-show="isStep(currentStep, States.VALIDATING_LICENSE)">
            <span class="cor-loader-inline"></span>
            Validating License...
          </div>

          <button type="submit" class="btn btn-primary" ng-click="validateLicense()"
                  ng-disabled="!currentState.licenseContents"
                  ng-show="isStep(currentStep, States.UPLOAD_LICENSE)">
             Validate License
          </button>
      </div>

      <!-- Footer: VALIDATED_LICENSE -->
      <div class="modal-footer"
           ng-show="isStep(currentStep, States.VALIDATED_LICENSE)">
          <button type="submit" class="btn btn-primary" ng-click="beginSetup()">
             Next
          </button>
      </div>

      <!-- Footer: CONFIG_DB or DB_ERROR -->
      <div class="modal-footer"
           ng-show="isStep(currentStep, States.CONFIG_DB, States.DB_ERROR)">
          <span class="left-align" ng-show="isStep(currentStep, States.DB_ERROR)">
            <i class="fa fa-warning"></i>
            Problem Detected
          </span>

          <button type="submit" class="btn btn-primary"
                  ng-disabled="!databaseUri"
                  ng-click="validateDatabase()">
            Validate Database Settings
          </button>
      </div>

      <!-- Footer: READY -->
      <div class="modal-footer"
           ng-show="isStep(currentStep, States.READY)">
          <span class="left-align">
            <i class="fa fa-check"></i>
            Installation Complete!
          </span>

          <a ng-click="showSuperuserPanel()" class="btn btn-primary">
            View Superuser Panel
          </a>
      </div>

      <!-- Footer: VALID_CONFIG -->
      <div class="modal-footer"
           ng-show="isStep(currentStep, States.VALID_CONFIG)">
          <span class="left-align">
            <i class="fa fa-check"></i>
            Configuration Validated and Saved
          </span>

          <button type="submit" class="btn btn-primary"
                  ng-click="restartContainer(States.CONFIG_RESTARTING)">
            Restart Container
          </button>
      </div>

      <!-- Footer: DB_SETUP_SUCCESS -->
      <div class="modal-footer"
           ng-show="isStep(currentStep, States.DB_SETUP_SUCCESS)">
          <span class="left-align">
            <i class="fa fa-check"></i>
            Database Setup and Ready
          </span>

          <button type="submit" class="btn btn-primary"
                  ng-click="restartContainer(States.DB_RESTARTING)">
            Restart Container
          </button>
      </div>

      <!-- Footer: DB_SETUP -->
      <div class="modal-footer working" ng-show="isStep(currentStep, States.DB_SETUP)">
        <span class="cor-loader-inline"></span> Setting up database...
      </div>

      <!-- Footer: SAVING_DB -->
      <div class="modal-footer working" ng-show="isStep(currentStep, States.SAVING_DB)">
        <span class="cor-loader-inline"></span> Saving database configuration...
      </div>

      <!-- Footer: VALIDATING_DB -->
      <div class="modal-footer working" ng-show="isStep(currentStep, States.VALIDATING_DB)">
        <span class="cor-loader-inline"></span> Testing database settings...
      </div>

      <!-- Footer: DB_RESTARTING or CONFIG_RESTARTING-->
      <div class="modal-footer working"
           ng-show="isStep(currentStep, States.DB_RESTARTING, States.CONFIG_RESTARTING)">
        <span class="cor-loader-inline"></span> Waiting for container to restart...
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->