add login API

web/api/env.ts

@@ -0,0 +1,4 @@
+export function get_api_server(): string {
+	console.log('API_SERVER:', process.env.NEXT_PUBLIC_API_SERVER);
+	return process.env.NEXT_PUBLIC_API_SERVER || '';
+};

web/api/login.ts

@@ -0,0 +1,27 @@
+import { get_api_server } from '@/api/env';
+
+export async function login(username: string, password: string): Promise<boolean> {
+	// combine username and password into a single string and use Base64 encoding
+	const credentials = `${username}:${password}`;
+	const encodedCredentials = btoa(credentials);
+
+	// make a GET request to the /api/auth endpoint via basic authentication
+	const resp = await fetch(get_api_server() + '/api/v1/auth', {
+		method: 'GET',
+		headers: {
+			'Authorization': `Basic ${encodedCredentials}`
+		}
+	})
+
+	if (resp.status === 200) {
+		// store the credentials in local storage
+		localStorage.setItem('credentials', encodedCredentials);
+		return true;
+	}
+
+	return false;
+}
+
+export async function logout(): Promise<void> {
+	localStorage.removeItem('credentials');
+}

web/app/login/page.tsx

@@ -1,6 +1,9 @@
 'use client';
 // components/Login.tsx
 import React, { useState } from 'react';
+import { login } from '@/api/login';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function Login() {
   const [username, setUsername] = useState<string>('');
@@ -9,11 +12,25 @@ export default function Login() {
   const handleLogin = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     // Handle login logic here
-    console.log('Login attempt with:', username, password);
+    login(username, password).then((success) => {
+      if (!success) {
+        toast.error('Invalid username or password!', {
+          position: "top-right",
+          autoClose: 3000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "light",
+        });
+      }
+    });
   };
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-center">
+      <ToastContainer />
       <div className="card w-96 shadow-2xl shadow-neutral-950">
         <div className="card-body">
           <form onSubmit={handleLogin} className="flex flex-col mb-4">
@@ -24,15 +41,21 @@ export default function Login() {
                 <div className="label">
                   <span className="label-text font-bold">Username</span>
                 </div>
-                <input type="text" id="username" placeholder="Type here" className="input input-primary input-bordered w-full max-w-xs" />
+                <input type="text" id="username" placeholder="Type here" className="input input-primary input-bordered w-full max-w-xs"
+                  onChange={
+                    (e) => setUsername(e.target.value)
+                  } />
               </label>
             </div>
             <div className="mb-4">
               <label className="form-control w-full max-w-xs">
                 <div className="label">
                   <span className="label-text font-bold">Password</span>
                 </div>
-                <input type="password" id="password" placeholder="Type here" className="input input-primary input-bordered w-full max-w-xs" />
+                <input type="password" id="password" placeholder="Type here" className="input input-primary input-bordered w-full max-w-xs"
+                  onChange={
+                    (e) => setPassword(e.target.value)
+                  } />
               </label>
             </div>
             <div className="card-actions justify-end">

web/components/navbar.tsx

@@ -21,7 +21,7 @@ export const Navbar = () => {
 						}
 					</ul>
 				</div>
-				<a className="btn text-xl">GoDNS</a>
+				<span className="text-2xl font-bold ml-5">GoDNS</span>
 			</div>
 			<div className="navbar-center hidden lg:flex">
 				<ul className="menu menu-horizontal px-1">

web/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "14.1.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-toastify": "^10.0.4"
   },
   "devDependencies": {
     "@types/node": "^20",