Skip to content

Commit d036cc6

Browse files
author
Adelino Ngomacha
committed
feat: add storage form page
1 parent 7bd0b4c commit d036cc6

File tree

4 files changed

+186
-242
lines changed

4 files changed

+186
-242
lines changed

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

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<form>
7+
<main class="border-b border-gray-900/10">
8+
<!-- Settings forms -->
9+
<div class="divide-y divide-gray-900/10">
10+
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
11+
<div>
12+
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
13+
Default Storage Settings
14+
</h2>
15+
<p class="mt-1 text-sm leading-6 text-gray-600">
16+
Update your default Storage settings
17+
</p>
18+
</div>
19+
20+
<div class="md:col-span-2">
21+
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
22+
<div class="sm:col-span-3">
23+
<label for="type" class="block text-sm font-medium leading-6 text-gray-900">Default</label>
24+
<div class="mt-2">
25+
<select id="type" name="type" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
26+
<option selected>
27+
s3
28+
</option>
29+
<option>Dropbox</option>
30+
<option>Meema</option>
31+
</select>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
39+
<div>
40+
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
41+
AWS S3
42+
</h2>
43+
<p class="mt-1 text-sm leading-6 text-gray-600">
44+
Update your AWS S3 configurations
45+
</p>
46+
</div>
47+
48+
<div class="md:col-span-2">
49+
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
50+
<div class="sm:col-span-3">
51+
<label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Key</label>
52+
<div class="mt-2">
53+
<input id="local-driver" type="text" name="local-driver" value="JKHJK$KJAHKS" 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">
54+
</div>
55+
</div>
56+
57+
<div class="sm:col-span-3">
58+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Secret</label>
59+
<div class="mt-2">
60+
<input id="local-root" type="text" name="local-root" value="kldsanko3njksdasjfasdn2m" 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">
61+
</div>
62+
</div>
63+
64+
<div class="sm:col-span-3">
65+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Region</label>
66+
<div class="mt-2">
67+
<input id="local-root" type="text" name="local-root" value="us-east-1" 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">
68+
</div>
69+
</div>
70+
71+
<div class="sm:col-span-3">
72+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Bucket</label>
73+
<div class="mt-2">
74+
<input id="local-root" type="text" name="local-root" 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">
75+
</div>
76+
</div>
77+
78+
<div class="sm:col-span-full">
79+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">URL</label>
80+
<div class="mt-2">
81+
<input id="local-root" type="text" name="local-root" value="stacks.s3.amazonaws.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">
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
88+
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
89+
<div>
90+
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
91+
Dropbox
92+
</h2>
93+
<p class="mt-1 text-sm leading-6 text-gray-600">
94+
Update your Dropbox configurations
95+
</p>
96+
</div>
97+
98+
<div class="md:col-span-2">
99+
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
100+
<div class="sm:col-span-3">
101+
<label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Key</label>
102+
<div class="mt-2">
103+
<input id="local-driver" type="text" name="local-driver" value="JKHJK$KJAHKS" 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">
104+
</div>
105+
</div>
106+
107+
<div class="sm:col-span-3">
108+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Secret</label>
109+
<div class="mt-2">
110+
<input id="local-root" type="text" name="local-root" value="kldsanko3njksdasjfasdn2m" 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">
111+
</div>
112+
</div>
113+
114+
<div class="sm:col-span-full">
115+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Box</label>
116+
<div class="mt-2">
117+
<input id="local-root" type="text" name="local-root" 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">
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
124+
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
125+
<div>
126+
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
127+
Meema
128+
</h2>
129+
<p class="mt-1 text-sm leading-6 text-gray-600">
130+
Update your Meema configurations
131+
</p>
132+
</div>
133+
134+
<div class="md:col-span-2">
135+
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
136+
<div class="sm:col-span-3">
137+
<label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Key</label>
138+
<div class="mt-2">
139+
<input id="local-driver" type="text" name="local-driver" value="HJDSU41HJJKAD" 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">
140+
</div>
141+
</div>
142+
143+
<div class="sm:col-span-3">
144+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Secret</label>
145+
<div class="mt-2">
146+
<input id="local-root" type="text" name="local-root" value="jkhnb523nbmnb9dsanmeop" 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">
147+
</div>
148+
</div>
149+
150+
<div class="sm:col-span-3">
151+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Region</label>
152+
<div class="mt-2">
153+
<input id="local-root" type="text" name="local-root" value="us-east-1" 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">
154+
</div>
155+
</div>
156+
157+
<div class="sm:col-span-3">
158+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Baacket</label>
159+
<div class="mt-2">
160+
<input id="local-root" type="text" name="local-root" 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">
161+
</div>
162+
</div>
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
</main>
168+
<div class="mt-6 flex items-center justify-end gap-x-6">
169+
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">
170+
Cancel
171+
</button>
172+
<Button
173+
type="submit"
174+
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"
175+
>
176+
Save
177+
</Button>
178+
</div>
179+
</form>
180+
</template>
181+
182+
<style scoped>
183+
184+
</style>

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

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import QueueForm from './Forms/QueueForm.vue'
1515
import SearchEngineForm from './Forms/SearchEngineForm.vue'
1616
import SecurityForm from './Forms/SecurityForm.vue'
1717
import ServicesForm from './Forms/ServicesForm.vue'
18+
import StorageForm from './Forms/StorageForm.vue'
1819
1920
const props = defineProps({
2021
name: String,
@@ -140,6 +141,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
140141
<template v-else-if="name === 'search-engine'"><SearchEngineForm /></template>
141142
<template v-else-if="name === 'security'"><SecurityForm /></template>
142143
<template v-else-if="name === 'services'"><ServicesForm /></template>
144+
<template v-else-if="name === 'storage'"><StorageForm /></template>
143145
<template v-else>
144146
<div class="text-center">
145147
<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" />

0 commit comments

Comments
 (0)