add basic auth form

Author: mms-gianni

client/src/components/apps/form.vue

@@ -440,6 +440,83 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
+      <!-- AUTHENTICATION -->
+      <v-expansion-panel bg-color="rgb(var(--v-theme-on-surface-variant))" :style="advanced ? 'display: block;' : 'display: none;'">
+        <v-expansion-panel-title class="text-uppercase text-caption-2 font-weight-medium" color="secondary">Authentication</v-expansion-panel-title>
+        <v-expansion-panel-text color="secondary">
+
+
+          <v-row>
+            <v-col
+              cols="12"
+              md="6"
+            >
+                <v-text-field
+                  v-model="basicAuth.realm"
+                  label="name"
+                  :counter="60"
+                ></v-text-field>
+            </v-col>
+          </v-row>
+
+
+          <v-row v-for="(account, index) in basicAuth.accounts" :key="index">
+              <v-col
+                cols="12"
+                md="5"
+              >
+                <v-text-field
+                  v-model="account.user"
+                  label="Username"
+                  :counter="60"
+                ></v-text-field>
+              </v-col>
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-text-field
+                  v-model="account.pass"
+                  label="Password"
+                ></v-text-field>
+              </v-col>
+              <v-col
+                cols="12"
+                md="1"
+              >
+                <v-btn
+                elevation="2"
+                icon
+                small
+                @click="removeAuthLine(account.user)"
+                >
+                    <v-icon dark >
+                        mdi-minus
+                    </v-icon>
+                </v-btn>
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col
+                cols="12"
+              >
+                <v-btn
+                elevation="2"
+                icon
+                small
+                @click="addAuthLine()"
+                >
+                    <v-icon dark >
+                        mdi-plus
+                    </v-icon>
+                </v-btn>
+              </v-col>
+            </v-row>
+
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
       <!-- SECURITY -->
       <v-expansion-panel bg-color="rgb(var(--v-theme-on-surface-variant))" :style="advanced ? 'display: block;' : 'display: none;'">
         <v-expansion-panel-title class="text-uppercase text-caption-2 font-weight-medium" color="secondary">Security</v-expansion-panel-title>
@@ -1370,6 +1447,10 @@ export default defineComponent({
       sleepEnabled: false,
       envFile: [],
       buildpacks: [] as { text: string, value: Buildpack }[],
+      basicAuth: {
+        realm: 'Authentication required',
+        accounts: [] as { user: string, pass: string }[],
+      },
       buildpack: {
         run: {
           readOnlyAppStorage: true,
@@ -1969,6 +2050,7 @@ export default defineComponent({
             this.buildstrategy = response.data.spec.buildstrategy || 'plain';
             this.appname = response.data.spec.name;
             this.sleep = response.data.spec.sleep;
+            this.basicAuth = response.data.spec.basicAuth || { realm: 'Authentication required', accounts: [] };
             this.buildpack = {
               run: response.data.spec.image.run,
               build: response.data.spec.image.build,
@@ -2091,6 +2173,7 @@ export default defineComponent({
           buildpack: this.buildpack,
           appname: this.appname,
           sleep: this.sleep,
+          basicAuth: this.basicAuth,
           gitrepo: this.gitrepo,
           branch: this.branch,
           deploymentstrategy: this.deploymentstrategy,
@@ -2190,6 +2273,7 @@ export default defineComponent({
           phase: this.phase,
           appname: this.appname.toLowerCase(),
           sleep: this.sleep,
+          basicAuth: this.basicAuth,
           gitrepo: this.gitrepo,
           branch: this.branch,
           deploymentstrategy: this.deploymentstrategy,
@@ -2270,6 +2354,19 @@ export default defineComponent({
           console.log(error);
         });
       },
+      addAuthLine() {
+        this.basicAuth.accounts.push({
+          user: '',
+          pass: '',
+        });
+      },
+      removeAuthLine(index: string) {
+        for (let i = 0; i < this.basicAuth.accounts.length; i++) {
+          if (this.basicAuth.accounts[i].user === index) {
+            this.basicAuth.accounts.splice(i, 1);
+          }
+        }
+      },
       addEnvLine() {
         this.envvars.push({
           name: '',

server/src/kubero.ts

@@ -715,6 +715,10 @@ export class Kubero {
                     autodeploy: true,
                     podsize: this.config.podSizeList[0], //TODO select from podsizelist
                     autoscale: false,
+                    basicAuth: {
+                        realm: '',
+                        accounts: []
+                    },
                     envVars: pipeline.phases.find(p => p.name == phaseName)?.defaultEnvvars || [],
                     extraVolumes: [], //TODO Not sure how to handlle extra Volumes on PR Apps
                     serviceAccount: {

server/src/modules/application.ts

@@ -35,6 +35,7 @@ export class App implements IApp{
     public podsize: IPodSize
     public autoscale: boolean
     //public envVars: {[key: string]: string} = {}
+    public basicAuth: { realm: string; accounts: { user: string; password: string; }[]; };
     public envVars: {}[] = []
     public extraVolumes: IExtraVolume[] = []
     public cronjobs: ICronjob[] = []
@@ -152,6 +153,8 @@ export class App implements IApp{
         this.podsize = app.podsize
         this.autoscale = app.autoscale // TODO: may be redundant with autoscaling.enabled
 
+        this.basicAuth = app.basicAuth
+
         this.envVars =  app.envVars
 
         this.serviceAccount = app.serviceAccount;

server/src/routes/apps.ts

@@ -213,6 +213,7 @@ function createApp(req: Request) : IApp {
         autodeploy: req.body.autodeploy,
         podsize: req.body.podsize,
         autoscale: req.body.autoscale,
+        basicAuth: req.body.basicAuth,
         envVars: req.body.envvars,
         extraVolumes: req.body.extraVolumes,
         serviceAccount: req.body.serviceAccount,
@@ -275,6 +276,7 @@ Router.put('/pipelines/:pipeline/:phase/:app', authMiddleware, async function (r
         podsize: req.body.podsize,
         autoscale: req.body.autoscale,
         extraVolumes: req.body.extraVolumes,
+        basicAuth: req.body.basicAuth,
         envVars: req.body.envvars,
         serviceAccount: req.body.serviceAccount,
         image: {

server/src/types.ts

@@ -12,6 +12,13 @@ export interface IApp {
     autodeploy: boolean,
     podsize: IPodSize,
     autoscale: boolean,
+    basicAuth: {
+        realm: string,
+        accounts: {
+            user: string,
+            password: string,
+        }[]
+    },
     envVars: {}[],
     image : {
         repository: string,