Skip to content

Commit 5d51c26

Browse files
author
Adelino Ngomacha
committed
feat: add email form page
1 parent 13da164 commit 5d51c26

File tree

3 files changed

+104
-0
lines changed

3 files changed

+104
-0
lines changed

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

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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 Email Settings
14+
</h2>
15+
<p class="mt-1 text-sm leading-6 text-gray-600">
16+
Update your default email 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="from" class="block text-sm font-medium leading-6 text-gray-900">From Name</label>
24+
<div class="mt-2">
25+
<input id="from" type="text" name="from" 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">
26+
</div>
27+
</div>
28+
29+
<div class="sm:col-span-3">
30+
<label for="address" class="block text-sm font-medium leading-6 text-gray-900">From Address</label>
31+
<div class="mt-2">
32+
<input id="address" type="text" name="address" value="no-reply@stacksjs.org" 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-full">
37+
<label for="mailboxes" class="block text-sm font-medium leading-6 text-gray-900">Mailboxes</label>
38+
<div class="mt-2">
39+
<input id="maiboxes" type="text" name="mailboxes" value="chris@stacksjs.org,blake@stacksjs.org,glenn@stacksjs.org" 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+
<div class="sm:col-span-3">
44+
<label for="url" class="block text-sm font-medium leading-6 text-gray-900">Url</label>
45+
<div class="mt-2">
46+
<input id="url" type="text" name="url" value="http://localhost:3000" 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">
47+
</div>
48+
</div>
49+
50+
<div class="sm:col-span-3">
51+
<label for="type" class="block text-sm font-medium leading-6 text-gray-900">Charset</label>
52+
<div class="mt-2">
53+
<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">
54+
<option selected>
55+
UTF-8
56+
</option>
57+
</select>
58+
</div>
59+
</div>
60+
61+
<div class="sm:col-span-2">
62+
<label for="default-config" class="block text-sm font-medium leading-6 text-gray-900">Scan Server</label>
63+
<div class="mt-2">
64+
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
65+
<button
66+
type="button"
67+
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"
68+
role="switch" aria-checked="false"
69+
>
70+
<span class="sr-only">Enable Docs</span>
71+
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
72+
<span
73+
aria-hidden="true"
74+
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"
75+
/>
76+
</button>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
</main>
84+
<div class="mt-6 flex items-center justify-end gap-x-6">
85+
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">
86+
Cancel
87+
</button>
88+
<Button
89+
type="submit"
90+
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"
91+
>
92+
Save
93+
</Button>
94+
</div>
95+
</form>
96+
</template>
97+
98+
<style scoped>
99+
100+
</style>

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

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import CliForm from './Forms/CLIForm.vue'
77
import CloudForm from './Forms/CloudForm.vue'
88
import DatabaseForm from './Forms/DatabaseForm.vue'
99
import DNSForm from './Forms/DNSForm.vue'
10+
import EmailForm from './Forms/EmailForm.vue'
1011
1112
const props = defineProps({
1213
name: String,
@@ -124,6 +125,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
124125
<template v-else-if="name === 'cloud'"><CloudForm /></template>
125126
<template v-else-if="name === 'database'"><DatabaseForm /></template>
126127
<template v-else-if="name === 'dns'"><DNSForm /></template>
128+
<template v-else-if="name === 'email'"><EmailForm /></template>
127129
<template v-else>
128130
<div class="text-center">
129131
<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" />

‎storage/framework/types/components.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ declare module 'vue' {
2727
DeploymentHistory: typeof import('./../../../libs/components/Dashboard/Deployments/DeploymentHistory.vue')['default']
2828
DeploymentList: typeof import('./../../../libs/components/Dashboard/Deployments/DeploymentList.vue')['default']
2929
DeployScript: typeof import('./../../../libs/components/Dashboard/Deployments/DeployScript.vue')['default']
30+
DNSForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/DNSForm.vue')['default']
3031
Editor: typeof import('./../../../resources/components/Editor.vue')['default']
32+
EmailForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/EmailForm.vue')['default']
3133
Faqs: typeof import('./../../../libs/components/Marketing/Faqs.vue')['default']
3234
Feature: typeof import('./../../../libs/components/Marketing/Feature.vue')['default']
3335
Fields: typeof import('./../../../libs/components/Marketing/Fields.vue')['default']

0 commit comments

Comments
 (0)