Skip to content

Commit 24c1dc4

Browse files
author
Adelino Ngomacha
committed
feat: add security form page
1 parent 4df8511 commit 24c1dc4

File tree

2 files changed

+156
-0
lines changed

2 files changed

+156
-0
lines changed

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

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
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+
Firewall
14+
</h2>
15+
<p class="mt-1 text-sm leading-6 text-gray-600">
16+
Update your firewall settings.
17+
</p>
18+
</div>
19+
20+
<div class="md:col-span-2">
21+
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
22+
<div class="col-span-2">
23+
<label
24+
for="api-deploy"
25+
class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
26+
>Enabled</label>
27+
<div class="mt-2">
28+
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
29+
<button
30+
type="button"
31+
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"
32+
role="switch" aria-checked="false"
33+
>
34+
<span class="sr-only">Api Deploy</span>
35+
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
36+
<span
37+
aria-hidden="true"
38+
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"
39+
/>
40+
</button>
41+
</div>
42+
</div>
43+
<div class="col-span-2">
44+
<label
45+
for="api-deploy"
46+
class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
47+
>Use Ip Reputation Lists</label>
48+
<div class="mt-2">
49+
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
50+
<button
51+
type="button"
52+
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"
53+
role="switch" aria-checked="false"
54+
>
55+
<span class="sr-only">Use Ip Reputation Lists</span>
56+
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
57+
<span
58+
aria-hidden="true"
59+
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"
60+
/>
61+
</button>
62+
</div>
63+
</div>
64+
<div class="col-span-2">
65+
<label
66+
for="api-deploy"
67+
class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
68+
>Use Known Bad Inputs Rule Set</label>
69+
<div class="mt-2">
70+
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
71+
<button
72+
type="button"
73+
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"
74+
role="switch" aria-checked="false"
75+
>
76+
<span class="sr-only">Use Ip Reputation Lists</span>
77+
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
78+
<span
79+
aria-hidden="true"
80+
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"
81+
/>
82+
</button>
83+
</div>
84+
</div>
85+
<div class="col-span-2">
86+
<label
87+
for="api-limit-per-minute"
88+
class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
89+
>Rate Limit per minute</label>
90+
<div class="mt-2">
91+
<input
92+
id="api-limit-per-minute"
93+
name="limit-per-minute"
94+
type="text"
95+
value="1000"
96+
class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
97+
>
98+
</div>
99+
</div>
100+
<div class="col-span-2">
101+
<label
102+
for="api-country-codes"
103+
class="block cursor-pointer text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
104+
>Country Codes</label>
105+
<div class="mt-2">
106+
<input
107+
id="api-country-codes"
108+
name="limit-per-minute"
109+
type="text"
110+
value="RU,IN"
111+
class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
112+
>
113+
</div>
114+
</div>
115+
<div class="sm:col-span-full">
116+
<label for="ip-addresses" class="block text-sm font-medium leading-6 text-gray-900">IP Addresses</label>
117+
<div class="mt-2">
118+
<input id="ip-addresses" type="text" name="env" placeholder="https://test.test" value="56.123.456.789" 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">
119+
</div>
120+
</div>
121+
<div class="sm:col-span-3">
122+
<label for="query-string" class="block text-sm font-medium leading-6 text-gray-900">Query String</label>
123+
<div class="mt-2">
124+
<input id="query-string" type="text" name="env" placeholder="https://test.test" value="foo,bar" 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">
125+
</div>
126+
</div>
127+
<div class="sm:col-span-3">
128+
<label for="http-headers" class="block text-sm font-medium leading-6 text-gray-900">HTTP Headers</label>
129+
<div class="mt-2">
130+
<input id="http-headers" type="text" name="env" placeholder="https://test.test" value="x-foo,x-bar" 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">
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
</div>
137+
</main>
138+
<div class="mt-6 flex items-center justify-end gap-x-6">
139+
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">
140+
Cancel
141+
</button>
142+
<Button
143+
type="submit"
144+
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"
145+
>
146+
Save
147+
</Button>
148+
</div>
149+
</form>
150+
</template>
151+
152+
<style scoped>
153+
154+
</style>

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

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import HashingForm from './Forms/HashingForm.vue'
1313
import LibraryForm from './Forms/LibraryForm.vue'
1414
import QueueForm from './Forms/QueueForm.vue'
1515
import SearchEngineForm from './Forms/SearchEngineForm.vue'
16+
import SecurityForm from './Forms/SecurityForm.vue'
1617
1718
const props = defineProps({
1819
name: String,
@@ -136,6 +137,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
136137
<template v-else-if="name === 'library'"><LibraryForm /></template>
137138
<template v-else-if="name === 'queue'"><QueueForm /></template>
138139
<template v-else-if="name === 'search-engine'"><SearchEngineForm /></template>
140+
<template v-else-if="name === 'security'"><SecurityForm /></template>
139141
<template v-else>
140142
<div class="text-center">
141143
<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)