Skip to content

Commit a5b27d3

Browse files
TimothyYeTimothyYe
committed
refactor the FE
1 parent 0198b0e commit a5b27d3

File tree

2 files changed

+77
-16
lines changed

2 files changed

+77
-16
lines changed

‎internal/handler/handler.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ func (handler *Handler) updateDNS(domain *settings.Domain, ip string) error {
133133

134134
// check against the current known IP, if no change, skip update
135135
if ip == lastIP {
136-
log.Infof("IP is the same as cached one (%s). Skip update.", ip)
136+
log.Infof("Domain %s: IP is the same as cached one (%s). Skip update.", hostname, ip)
137137
} else {
138138
log.Infof("Updating domain: %s, current IP: %s, new IP: %s", hostname, lastIP, ip)
139139
if err := domainProvider.UpdateIP(domain.DomainName, subdomainName, ip); err != nil {

‎web/components/domain-control.tsx‎

Lines changed: 76 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ import { DomainCard } from '@/components/domain-card';
66
import { useContext } from 'react';
77
import { CommonContext } from '@/components/user';
88
import { get_domains, add_domain, remove_domain } from '@/api/domain';
9+
import { get_multi_providers } from '@/api/provider';
910
import { toast } from 'react-toastify';
10-
import { WarningIcon } from './icons';
11+
import { WarningIcon, PlusIcon } from './icons';
1112

1213
export const DomainControl = () => {
1314
const router = useRouter();
@@ -18,8 +19,15 @@ export const DomainControl = () => {
1819
const modalRef = useRef<HTMLDialogElement | null>(null);
1920
const [domainName, setDomainName] = useState<string>('');
2021
const [subDomains, setSubDomains] = useState<string[]>([]);
22+
const [selectedProvider, setSelectedProvider] = useState<string>('');
23+
const [availableProviders, setAvailableProviders] = useState<string[]>([]);
2124

2225
const openModal = () => {
26+
// Reset form fields
27+
setDomainName('');
28+
setSubDomains([]);
29+
setSelectedProvider('');
30+
2331
if (modalRef.current) {
2432
modalRef.current.showModal();
2533
}
@@ -31,6 +39,7 @@ export const DomainControl = () => {
3139
return;
3240
}
3341

42+
// Load domains
3443
get_domains(credentials).then((domains) => {
3544
if (!domains) {
3645
setShowAlert(true);
@@ -39,6 +48,12 @@ export const DomainControl = () => {
3948
setDomains(domains.sort((a, b) => a.domain_name.localeCompare(b.domain_name)));
4049
}
4150
});
51+
52+
// Load available providers
53+
get_multi_providers(credentials).then((providers) => {
54+
const providerNames = Object.keys(providers);
55+
setAvailableProviders(providerNames);
56+
});
4257
}, [credentials, router]);
4358

4459
const onRemove = (domain: string) => {
@@ -63,9 +78,15 @@ export const DomainControl = () => {
6378
return;
6479
}
6580

81+
if (!selectedProvider) {
82+
toast.error('Please select a provider');
83+
return;
84+
}
85+
6686
const newDomain: Domain = {
6787
domain_name: domainName,
68-
sub_domains: subDomains
88+
sub_domains: subDomains,
89+
provider: selectedProvider
6990
};
7091

7192
if (credentials) {
@@ -75,6 +96,9 @@ export const DomainControl = () => {
7596
// reset the form fields
7697
setDomainName('');
7798
setSubDomains([]);
99+
setSelectedProvider('');
100+
// close the modal
101+
modalRef.current?.close();
78102
toast.success('Domain added successfully');
79103
} else {
80104
toast.error('Failed to add domain');
@@ -86,9 +110,13 @@ export const DomainControl = () => {
86110
};
87111

88112
return (
89-
<div className="flex flex-col w-full">
90-
<div className="flex flex-row justify-start">
91-
<button className="btn btn-primary btn-sm mb-5" onClick={openModal}>Add Domain</button>
113+
<div className="w-full">
114+
<div className="flex items-center justify-between mb-4">
115+
<h2 className="text-xl font-semibold text-neutral-500">Domain Settings</h2>
116+
<button className="btn btn-primary btn-sm" onClick={openModal}>
117+
<PlusIcon />
118+
Add Domain
119+
</button>
92120
</div>
93121
{
94122
showAlert ? (
@@ -106,37 +134,70 @@ export const DomainControl = () => {
106134
)
107135
}
108136
<dialog id="modal_add" className="modal" ref={modalRef}>
109-
<div className="modal-box">
110-
<h3 className="font-bold text-lg">Add domain</h3>
137+
<div className="modal-box max-w-lg">
138+
<h3 className="font-bold text-lg">Add Domain</h3>
111139
<p className="py-4">Add a new domain to the configuration.</p>
112140
<form method="dialog">
113-
<label className="form-control w-full">
141+
<label className="form-control w-full mb-4">
142+
<div className="label">
143+
<span className="label-text font-bold">Provider</span>
144+
</div>
145+
<select
146+
className="select select-primary select-bordered w-full"
147+
value={selectedProvider}
148+
onChange={(e) => setSelectedProvider(e.target.value)}
149+
>
150+
<option value="">Select a provider</option>
151+
{availableProviders.map((provider) => (
152+
<option key={provider} value={provider}>
153+
{provider}
154+
</option>
155+
))}
156+
</select>
157+
</label>
158+
<label className="form-control w-full mb-4">
114159
<div className="label">
115160
<span className="label-text font-bold">Domain</span>
116161
</div>
117162
<input
118-
type="input"
163+
type="text"
119164
id="domain"
120165
placeholder="Input the domain name"
121166
className="input input-primary input-bordered w-full"
122167
value={domainName}
123168
onChange={(e) => setDomainName(e.target.value)}
124169
/>
125170
</label>
126-
<label className="form-control w-full">
171+
<label className="form-control w-full mb-4">
127172
<div className="label">
128-
<span className="label-text font-bold">Subdomain</span>
173+
<span className="label-text font-bold">Subdomains</span>
129174
</div>
130175
<textarea
131176
className="textarea textarea-primary h-36"
132-
placeholder={`subdomain1\nsubdomain2`}
177+
placeholder={`subdomain1\nsubdomain2\nsubdomain3`}
133178
value={subDomains.join('\n')}
134-
onChange={(e) => setSubDomains(e.target.value.split('\n'))}
179+
onChange={(e) => setSubDomains(e.target.value.split('\n').filter(s => s.trim()))}
135180
/>
181+
<div className="label">
182+
<span className="label-text-alt">Enter each subdomain on a new line</span>
183+
</div>
136184
</label>
137185
<div className="modal-action">
138-
<button className="btn mr-2">Close</button>
139-
<button className="btn btn-primary" onClick={addNewDomain} >Add</button>
186+
<button
187+
className="btn mr-2"
188+
type="button"
189+
onClick={() => modalRef.current?.close()}
190+
>
191+
Close
192+
</button>
193+
<button
194+
className="btn btn-primary"
195+
type="button"
196+
onClick={addNewDomain}
197+
disabled={!domainName || !subDomains.length || !selectedProvider}
198+
>
199+
Add Domain
200+
</button>
140201
</div>
141202
</form>
142203
</div>

0 commit comments

Comments
 (0)