From 2c6d9e699fdb0c43943b4fa12aa88b6ecfb976bc Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 7 Mar 2025 12:08:19 +0100
Subject: [PATCH] Add app configure proxy view

---
 dashboard/src/components/app/Proxy.vue   | 48 ++++++++++++++++++++++++
 dashboard/src/views/AppConfigureView.vue |  3 +-
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 dashboard/src/components/app/Proxy.vue

diff --git a/dashboard/src/components/app/Proxy.vue b/dashboard/src/components/app/Proxy.vue
new file mode 100644
index 000000000..f88fb9067
--- /dev/null
+++ b/dashboard/src/components/app/Proxy.vue
@@ -0,0 +1,48 @@
+<script setup>
+
+import { ref } from 'vue';
+import { Button, FormGroup, TextInput } from 'pankow';
+import AppsModel from '../../models/AppsModel.js';
+
+const { app } = defineProps([ 'app' ]);
+
+const appsModel = AppsModel.create();
+
+const busy = ref(false);
+const errorMessage = ref('');
+const upstreamUri = ref(app.upstreamUri);
+
+async function onSubmit() {
+  busy.value = true;
+  errorMessage.value = '';
+
+  const [error] = await appsModel.configure(app.id, 'upstream_uri', { upstreamUri: upstreamUri.value.replace(/\/$/, '') });
+  if (error) {
+    errorMessage.value = error.body ? error.body.message : 'Internal error';
+    busy.value = false;
+    return console.error(error);
+  }
+
+  busy.value = false;
+}
+
+</script>
+
+<template>
+  <div>
+    <form @submit.prevent="onSubmit()" autocomplete="off">
+      <fieldset :disabled="busy">
+        <input type="submit" style="display: none" :disabled="!upstreamUri"/>
+
+        <FormGroup>
+          <label for="upstreamUriInput">Upstream URI</label>
+          <TextInput id="upstreamUriInput" v-model="upstreamUri"/>
+          <p class="text-danger" v-if="errorMessage">{{ errorMessage }}</p>
+        </FormGroup>
+      </fieldset>
+    </form>
+
+    <br/>
+    <Button @click="onSubmit()" :loading="busy" :disabled="busy || app.error || app.taskId" v-tooltip="app.taskId ? (app.error ? 'App is in error state' : 'App is busy') : ''">{{ $t('main.dialog.save') }}</Button>
+  </div>
+</template>
diff --git a/dashboard/src/views/AppConfigureView.vue b/dashboard/src/views/AppConfigureView.vue
index c2bc7e2c6..135a08dba 100644
--- a/dashboard/src/views/AppConfigureView.vue
+++ b/dashboard/src/views/AppConfigureView.vue
@@ -15,6 +15,7 @@ import Eventlog from '../components/app/Eventlog.vue';
 import Graphs from '../components/app/Graphs.vue';
 import Info from '../components/app/Info.vue';
 import Location from '../components/app/Location.vue';
+import Proxy from '../components/app/Proxy.vue';
 import Resources from '../components/app/Resources.vue';
 import Repair from '../components/app/Repair.vue';
 import Security from '../components/app/Security.vue';
@@ -216,7 +217,7 @@ onBeforeUnmount(() => {
             <Info v-if="view === 'info'" :app="app"/>
             <Display v-else-if="view === 'display'" :app="app"/>
             <Location v-else-if="view === 'location'" :app="app"/>
-            <div v-else-if="view === 'proxy'"></div>
+            <Proxy v-else-if="view === 'proxy'" :app="app"/>
             <Access v-else-if="view === 'access'" :app="app"/>
             <Resources v-else-if="view === 'resources'" :app="app"/>
             <Services v-else-if="view === 'services'" :app="app"/>