Skip to content

Commit e0d0134

Browse files
author
Adelino Ngomacha
committed
feat: add app form page
1 parent a8d1b8d commit e0d0134

File tree

3 files changed

+158
-2
lines changed

3 files changed

+158
-2
lines changed

‎libs/components/Dashboard/Settings/Forms/AppForm.vue

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<form>
7+
<div class="space-y-12">
8+
<div class="border-b border-gray-900/10 pb-12">
9+
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
10+
<div class="sm:col-span-3">
11+
<label for="name" class="block text-sm font-medium leading-6 text-gray-900">App Name</label>
12+
<div class="mt-2">
13+
<input id="name" type="text" name="name" placeholder="App Name" value="Stacks" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
14+
</div>
15+
</div>
16+
<div class="sm:col-span-3">
17+
<label for="key" class="block text-sm font-medium leading-6 text-gray-900">App Key</label>
18+
<div class="mt-2">
19+
<input id="key" type="text" name="key" placeholder="" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
20+
</div>
21+
</div>
22+
<div class="sm:col-span-3">
23+
<label for="env" class="block text-sm font-medium leading-6 text-gray-900">App Url</label>
24+
<div class="mt-2">
25+
<input id="env" type="text" name="env" placeholder="https://test.test" value="stacks.localhost" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
26+
</div>
27+
</div>
28+
29+
<div class="sm:col-span-full">
30+
<label for="description" class="block text-sm font-medium leading-6 text-gray-900">Description</label>
31+
<div class="mt-2">
32+
<textarea id="description" name="description" rows="3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
33+
</div>
34+
</div>
35+
36+
<div class="sm:col-span-3">
37+
<label for="env" class="block text-sm font-medium leading-6 text-gray-900">Environment</label>
38+
<div class="mt-2">
39+
<input id="env" type="text" name="env" placeholder="production" value="local" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
40+
</div>
41+
</div>
42+
43+
44+
45+
<div class="sm:col-span-3">
46+
<label for="env" class="block text-sm font-medium leading-6 text-gray-900">Redirect Urls</label>
47+
<div class="mt-2">
48+
<input id="env" type="text" name="env" placeholder="https://test.test" value="stacks.localhost,localhost:3000,stack.com" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
49+
</div>
50+
</div>
51+
52+
<div class="sm:col-span-2">
53+
<label for="default-config" class="block text-sm font-medium leading-6 text-gray-900">Deploy AI
54+
Endpoints</label>
55+
<div class="mt-2">
56+
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
57+
<button
58+
type="button"
59+
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
60+
role="switch" aria-checked="false"
61+
>
62+
<span class="sr-only">App Debug</span>
63+
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
64+
<span
65+
aria-hidden="true"
66+
class="pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
67+
/>
68+
</button>
69+
</div>
70+
</div>
71+
<div class="sm:col-span-2">
72+
<label for="default-config" class="block text-sm font-medium leading-6 text-gray-900">Maintenance Mode</label>
73+
<div class="mt-2">
74+
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
75+
<button
76+
type="button"
77+
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
78+
role="switch" aria-checked="false"
79+
>
80+
<span class="sr-only">Maintenance Mode</span>
81+
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
82+
<span
83+
aria-hidden="true"
84+
class="pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
85+
/>
86+
</button>
87+
</div>
88+
</div>
89+
<div class="sm:col-span-2">
90+
<label for="default-config" class="block text-sm font-medium leading-6 text-gray-900">Doc Mode</label>
91+
<div class="mt-2">
92+
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
93+
<button
94+
type="button"
95+
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-indigo-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
96+
role="switch" aria-checked="false"
97+
>
98+
<span class="sr-only">Doc Mode</span>
99+
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
100+
<span
101+
aria-hidden="true"
102+
class="pointer-events-none inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
103+
/>
104+
</button>
105+
</div>
106+
</div>
107+
108+
<div class="sm:col-span-2">
109+
<label for="timezone" class="block text-sm font-medium leading-6 text-gray-900">Timezone</label>
110+
<div class="mt-2">
111+
<input id="timezone" type="text" name="timezone" placeholder="UTC" value="America/Los_Angeles" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
112+
</div>
113+
</div>
114+
<div class="sm:col-span-2">
115+
<label for="locale" class="block text-sm font-medium leading-6 text-gray-900">Locale</label>
116+
<div class="mt-2">
117+
<input id="locale" type="text" name="locale" placeholder="UTC" value="en" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
118+
</div>
119+
</div>
120+
<div class="sm:col-span-2">
121+
<label for="fallback-locale" class="block text-sm font-medium leading-6 text-gray-900">Fallback Locale</label>
122+
<div class="mt-2">
123+
<input id="fallback-locale" type="text" name="fallback-locale" placeholder="UTC" value="en" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
124+
</div>
125+
</div>
126+
<div class="sm:col-span-2">
127+
<label for="cipher" class="block text-sm font-medium leading-6 text-gray-900">Cipher</label>
128+
<div class="mt-2">
129+
<input id="cipher" type="text" name="cipher" placeholder="AES-256-CBC" value="aes-256-cbc" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
130+
</div>
131+
</div>
132+
133+
</div>
134+
</div>
135+
</div>
136+
<div class="mt-6 flex items-center justify-end gap-x-6">
137+
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">
138+
Cancel
139+
</button>
140+
<Button
141+
type="submit"
142+
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
143+
>
144+
Save
145+
</Button>
146+
</div>
147+
</form>
148+
</template>
149+
150+
<style scoped>
151+
152+
</style>

‎libs/components/Dashboard/Settings/SettingsFormManager.vue

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
import AIForm from './Forms/AIForm.vue'
33
import AnalyticsForm from './Forms/AnalyticsForm.vue'
4+
import AppForm from './Forms/AppForm.vue'
45
56
const props = defineProps({
67
name: String,
@@ -116,6 +117,9 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
116117
<template v-else-if="name === 'analytics'">
117118
<AnalyticsForm />
118119
</template>
120+
<template v-else-if="name === 'app'">
121+
<AppForm />
122+
</template>
119123
<template v-else>
120124
<div class="text-center">
121125
<div class="i-heroicons-cog-8-tooth text-gray-400 w-12 h-12 dark:text-gray-200 transition-all duration-150 ease-in-out" />

‎libs/components/Dashboard/SettingsSidebar.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<li>
1818
<RouterLink to="ai" class="sidebar-links group flex items-center justify-between">
1919
<div class="flex items-center gap-x-2">
20-
<div class="i-heroicons-cpu-chip text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
20+
<div class="i-heroicons-sparkles text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
2121
AI
2222
</div>
2323
<div class="i-heroicons-chevron-right text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out self-end" />
@@ -35,7 +35,7 @@
3535
<li>
3636
<RouterLink to="app" class="sidebar-links group flex items-center justify-between">
3737
<div class="flex items-center gap-x-2">
38-
<div class="i-heroicons-square-3-stack-3d text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
38+
<div class="i-heroicons-cog-6-tooth text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
3939
App
4040
</div>
4141
<div class="i-heroicons-chevron-right text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out self-end" />

0 commit comments

Comments
 (0)