Create intial config setup modal

remove the registry title

config_app/js/components/config-setup-app/config-setup-app.component.html

@@ -0,0 +1,26 @@
+<div ng-if="$ctrl.state === 'choice'">
+    <div class="co-dialog modal fade initial-setup-modal in" id="setupModal" style="display: block;">
+        <div class="modal-backdrop fade in" style="height: 1000px;"></div>
+        <div class="modal-dialog fade in">
+            <div class="modal-content">
+                <!-- Header -->
+                <div class="modal-header">
+                    <h4 class="modal-title"><span>Choose an option</span></h4>
+                </div>
+                <!-- Body -->
+                <div class="config-setup-wrapper">
+                    <a class="config-setup_option" ng-click="$ctrl.chooseSetup()">
+                        <i class="fas fa-edit fa-2x"></i>
+                        <div>Start New Registry Setup</div>
+                    </a>
+                    <a class="config-setup_option" ng-click="$ctrl.chooseLoad()">
+                        <i class="fas fa-upload fa-2x"></i>
+                        <div>Modify an existing configuration</div>
+                    </a>
+                </div>
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</div>
+<div ng-if="$ctrl.state === 'setup'" class="setup"></div>
+<load-config ng-if="$ctrl.state === 'load'"></load-config>

config_app/js/components/config-setup-app/config-setup-app.component.ts

@@ -0,0 +1,25 @@
+import { Input, Component, Inject } from 'ng-metadata/core';
+const templateUrl = require('./config-setup-app.component.html');
+
+/**
+ * Initial Screen and Choice in the Config App
+ */
+@Component({
+    selector: 'config-setup-app',
+    templateUrl: templateUrl,
+})
+export class ConfigSetupAppComponent {
+    private state: 'choice' | 'setup' | 'load';
+
+    constructor() {
+        this.state = 'choice';
+    }
+
+    private chooseSetup(): void {
+        this.state = 'setup';
+    }
+
+    private chooseLoad(): void {
+        this.state = 'load';
+    }
+}

config_app/js/components/load-config/load-config.component.ts

@@ -0,0 +1,11 @@
+import { Input, Component, Inject } from 'ng-metadata/core';
+const templateUrl = require('./load-config.html');
+
+@Component({
+    selector: 'load-config',
+    templateUrl,
+})
+export class LoadConfigComponent {
+    constructor() {
+    }
+}

config_app/js/components/load-config/load-config.html

@@ -0,0 +1,18 @@
+<div>
+    <div class="co-dialog modal fade initial-setup-modal in" id="setupModal" style="display: block;">
+        <div class="modal-backdrop fade in" style="height: 1000px;"></div>
+        <div class="modal-dialog fade in">
+            <div class="modal-content">
+                <!-- Header -->
+                <div class="modal-header">
+                    <h4 class="modal-title"><span>Load Config</span></h4>
+                </div>
+                <!-- Body -->
+                <div>
+                    Please upload a tarball
+                    <input type="file" accept=".tar"></div>
+                </div>
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</div>

config_app/js/config-app.module.ts

@@ -1,6 +1,9 @@
 import { NgModule } from 'ng-metadata/core';
 import * as restangular from 'restangular';
 
+import { ConfigSetupAppComponent } from './components/config-setup-app/config-setup-app.component';
+import { LoadConfigComponent } from './components/load-config/load-config.component';
+
 const quayDependencies: string[] = [
     'restangular',
     'ngCookies',
@@ -37,7 +40,10 @@ function provideConfig($provide: ng.auto.IProvideService,
 
 @NgModule({
     imports: [ DependencyConfig ],
-    declarations: [],
+    declarations: [
+        ConfigSetupAppComponent,
+        LoadConfigComponent,
+    ],
     providers: []
 })
 export class ConfigAppModule {}

config_app/js/main.ts

@@ -20,7 +20,6 @@ function requireAll(r) {
 }
 
 // load all services
-// require('./services/api-service');
 requireAll(require.context('./services', true, /\.js$/));
 
 
@@ -29,6 +28,9 @@ requireAll(require.context('./setup', true, /\.js$/));
 requireAll(require.context('./core-config-setup', true, /\.js$/));
 requireAll(require.context('./components', true, /\.js$/));
 
+// load config-app specific css
+requireAll(require.context('../static/css', true, /\.css$/));
+
 
 // Load all the main quay css
 requireAll(require.context('../../static/css', true, /\.css$/));

config_app/js/setup/setup.html

@@ -1,7 +1,7 @@
 <div>
 <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="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>
@@ -24,10 +24,8 @@
         <div>Configure your Redis database and other settings below</div>
       </div>
 
-      <!--<config-setup-tool is-active="isStep(currentStep, States.CONFIG)"-->
+      <config-setup-tool is-active="isStep(currentStep, States.CONFIG)"
-          <!--configuration-saved="configurationSaved(config)"></config-setup-tool>-->
+          configuration-saved="configurationSaved(config)"></config-setup-tool>
-      <div class="config-setup-tool" is-active="true"
-           configuration-saved="configurationSaved(config)"></div>
     </div>
   </div>
 </div>
@@ -48,7 +46,7 @@
           <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>
+          <h4 class="modal-title">Setup</h4>
       </div>
 
       <form id="superuserForm" name="superuserForm" ng-submit="createSuperUser()">

config_app/static/css/config-setup-app-component.css

@@ -0,0 +1,24 @@
+.config-setup-wrapper {
+    display: flex;
+}
+
+.config-setup_option {
+    font-size: x-large;
+    height: 250px;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 15px;
+    margin: 15px;
+}
+
+.config-setup_option i {
+    padding-bottom: 10px;
+}
+
+.config-setup_option:hover {
+    background-color: #dddddd;
+    text-decoration: none;
+}

config_app/templates/index.html

@@ -7,7 +7,7 @@
 
 
     <!--REMOTE CSS-->
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" integrity="sha384-DmABxgPhJN5jlTwituIyzIUk6oqyzf3+XuP7q3VfcWA2unxgim7OSSZKKf0KSsnh" crossorigin="anonymous">
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" type="text/css">
     <link rel="stylesheet" href="//s3.amazonaws.com/cdn.core-os.net/icons/core-icons.css" type="text/css">
@@ -28,14 +28,7 @@
     {% endfor %}
     <title>Config app</title>
 </head>
-<body>
+<body class="co-img-bg-network">
-<div>
+<config-setup-app></config-setup-app>
-    <p>What is my purpose</p>
-    <p>You make tarballs</p>
-    <div class="setup">
-
-    </div>
-    </div>
-</div>
 </body>
 </html>