307 lines
		
	
	
	
		
			13 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			307 lines
		
	
	
	
		
			13 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <div id="padding-container">
 | |
| <div>
 | |
|   <div class="cor-loader" ng-show="currentStep == States.LOADING"></div>
 | |
|   <div class="page-content" ng-show="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="co-main-content-panel" style="padding: 20px;">
 | |
|       <div class="co-alert alert alert-info">
 | |
|         <span class="cor-step-bar" progress="stepProgress">
 | |
|           <span class="cor-step" title="Configure Database" text="1"></span>
 | |
|           <span class="cor-step" title="Setup Database" icon="database"></span>
 | |
|           <span class="cor-step" title="Create Superuser" text="2"></span>
 | |
|           <span class="cor-step" title="Configure Registry" text="3"></span>
 | |
|           <span class="cor-step" title="Validate Configuration" text="4"></span>
 | |
|           <span class="cor-step" title="Setup Complete" icon="download"></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)"
 | |
|            setup-completed="setupCompleted()"
 | |
|       ></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="Configure Database" text="1"></span>
 | |
|           <span class="cor-step" title="Setup Database" icon="database"></span>
 | |
|           <span class="cor-step" title="Create Superuser" text="2"></span>
 | |
|           <span class="cor-step" title="Configure Registry" text="3"></span>
 | |
|           <span class="cor-step" title="Validate Configuration" text="4"></span>
 | |
|           <span class="cor-step" title="Setup Complete" icon="download"></span>
 | |
|         </span>
 | |
|         <h4 class="modal-title">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-sync" 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: 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-danger"
 | |
|            ng-show="isStep(currentStep, States.SUPERUSER_ERROR)">
 | |
|         {{ errors.SuperuserCreationError }}
 | |
|       </div>
 | |
| 
 | |
|       <!-- Footer: DB_SETUP_ERROR -->
 | |
|       <div class="modal-footer alert alert-danger"
 | |
|            ng-show="isStep(currentStep, States.DB_SETUP_ERROR)">
 | |
|         Database Setup Failed: {{ errors.DatabaseSetupError }}
 | |
|       </div>
 | |
| 
 | |
|       <!-- Footer: DB_ERROR -->
 | |
|       <div class="modal-footer alert alert-danger" ng-show="isStep(currentStep, States.DB_ERROR)">
 | |
|         Database Validation Issue: {{ errors.DatabaseValidationError }}
 | |
|       </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 -->
 | |
| </div>
 |