ztp-next/app/configure/page.js

'use client';

import { useState, useEffect } from 'react';
import { useNotification } from '@/app/context/NotificationContext';

export default function ConfigurePage() {
    const [config, setConfig] = useState('');
    const { showNotification } = useNotification();
    const [showDialog, setShowDialog] = useState(false);
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    // Function to fetch the DHCP configuration
    const fetchConfig = async () => {
        try {
            const response = await fetch('/api/dhcp/config');
            const data = await response.json();
            if (response.ok) {
                setConfig(data.config);
                showNotification('DHCP configuration loaded successfully.', 'success');
            } else {
                showNotification(data.error, 'error');
            }
        } catch (error) {
            showNotification('Error loading DHCP configuration', 'error');
        }
    };

    useEffect(() => {
        // Initial load of the DHCP configuration
        fetchConfig();
    }, []);

    const handleConfigChange = (event) => {
        setConfig(event.target.value);
    };

    const handleSave = async () => {
        try {
            const response = await fetch('/api/dhcp/config', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ config }),
            });
            const data = await response.json();
            if (response.ok) {
                showNotification('DHCP configuration updated and server restarted successfully.', 'success');
            } else {
                showNotification(data.error, 'error');
            }
        } catch (error) {
            showNotification('Error updating configuration or restarting server', 'error');
        }
    };

    // automatically add webserver to sudo
    const openDialog = () => {
        setShowDialog(true);
    };

    const closeDialog = () => {
        setShowDialog(false);
    };

    const handleGrantSudoRights = async () => {
        try {
            const response = await fetch('/api/grant-sudo', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password }),
            });
            const data = await response.json();
            if (response.ok) {
                showNotification('Sudo rights granted successfully.', 'success');
            } else {
                showNotification(data.error, 'error');
            }
            closeDialog();
        } catch (error) {
            showNotification('Error granting sudo rights', 'error');
        }
    };


    return (
        <div className="container mt-5">
            <h1 className="mb-4">Configure DHCP Options</h1>
            <div className="form-group">
                <label htmlFor="dhcpConfig">DHCP Configuration</label>
                <textarea
                    id="dhcpConfig"
                    className="form-control"
                    rows="20"
                    value={config}
                    onChange={handleConfigChange}
                />
            </div>
            <button className="btn btn-secondary mt-3 mr-2" onClick={fetchConfig}>
                Refresh
            </button>
            <button className="btn btn-primary mt-3" onClick={handleSave}>
                Save and Restart DHCP Server
            </button>
            <button className="btn btn-warning mt-3 ml-2" onClick={openDialog}>
                Grant Sudo Rights
            </button>

            {showDialog && (
                <div className="modal show" style={{display: 'block'}}>
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h5 className="modal-title">Grant Sudo Rights</h5>
                                <button type="button" className="btn-close" aria-label="Close"
                                        onClick={closeDialog}></button>
                            </div>
                            <div className="modal-body">
                                <div className="form-group">
                                    <label htmlFor="username">Username</label>
                                    <input
                                        type="text"
                                        className="form-control"
                                        id="username"
                                        value={username}
                                        onChange={(e) => setUsername(e.target.value)}
                                    />
                                </div>
                                <div className="form-group">
                                    <label htmlFor="password">Password</label>
                                    <input
                                        type="password"
                                        className="form-control"
                                        id="password"
                                        value={password}
                                        onChange={(e) => setPassword(e.target.value)}
                                    />
                                </div>
                            </div>
                            <div className="modal-footer">
                                <button type="button" className="btn btn-secondary" onClick={closeDialog}>
                                    Cancel
                                </button>
                                <button type="button" className="btn btn-primary" onClick={handleGrantSudoRights}>
                                    Grant Sudo Rights
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}