jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Autofocus location input during app install flow

Browse Source
This commit is contained in:
Johannes Zellner
2025-01-16 18:06:39 +01:00
parent 3f3226391a
commit 97cb73cb73
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/AppInstallDialog.vue
+9 -3
View File
@@ -12,7 +12,7 @@
</div>
<Transition name="slide-left" mode="out-in">
<div v-if="step === STEP.DETAILS">
<Button @click="step = STEP.INSTALL" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
<Button @click="setStep(STEP.INSTALL)" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
<div class="screenshots">
<img class="screenshot" v-for="image in manifest.mediaLinks" :key="image" :src="image"/>
</div>
@@ -26,7 +26,7 @@
<FormGroup :class="{ 'has-error': formError.location }">
<label for="location">{{ $t('appstore.installDialog.location') }}</label>
<div>
<TextInput id="location" v-model="location" />
<TextInput id="location" ref="locationInput" v-model="location" />
<Dropdown v-model="domain" :options="domains" option-label="domain" />
</div>
</FormGroup>
@@ -50,7 +50,7 @@
<PortBindings v-model:tcp-ports="tcpPorts" v-model:udp-ports="udpPorts" :error="formError"/>
<AccessControl v-model="accessRestriction" :manifest="manifest"/>
<Button @click="submit" icon="fa-solid fa-circle-down" :disabled="!formValid" :loading="busy">Install {{ manifest.title }}</Button>
<Button style="margin-top: 15px" @click="submit" icon="fa-solid fa-circle-down" :disabled="!formValid" :loading="busy">Install {{ manifest.title }}</Button>
</fieldset>
</form>
</div>
@@ -90,6 +90,7 @@ const app = ref({});
const manifest = ref({});
const step = ref(STEP.DETAILS);
const dialog = useTemplateRef('dialogHandle');
const locationInput = useTemplateRef('locationInput');
const description = computed(() => marked.parse(manifest.value.description || ''));
const domains = ref([]);
const formValid = computed(() => {
@@ -106,6 +107,11 @@ const formValid = computed(() => {
return true;
});
function setStep(newStep) {
this.step = newStep;
if (newStep === STEP.INSTALL) setTimeout(() => locationInput.value.$el.focus(), 500);
}
// form data
const location = ref('');
// accessRestriction: