kontakt

contact.html

@@ -13,10 +13,13 @@
     <main>
         <h3 class="page-title">Kontakt</h3>
         <hr>
+        <div id="contact-form-container">
+        </div>
     </main>
 
     <div class="page-footer"></div>
 
+    <script src="./scripts/contact.js"></script>
     <script src="./scripts/main.js" defer></script>
 </body>
 </html>

login.html

@@ -14,14 +14,14 @@
         <div class="page-title-container">
             <h3 class="page-title" id="page-title">Prijava</h3>
         </div>
-        <form class="page-login-form" id="login-form">
+        <form class="contact-form" id="login-form">
             <div class="form-group">
                 <label for="username">Uporabniško ime:</label><br>
-                <input type="text" id="username" name="username" required>
+                <input type="text" id="username" name="username" class="page-input" required>
             </div>
             <div class="form-group">
                 <label for="password">Geslo:</label><br>
-                <input type="password" id="password" name="password" required>
+                <input type="password" id="password" name="password" class="page-input" required>
             </div>
             <div class="form-group">
                 <button type="submit" class="page-btn">Prijavi se</button>

register.html

@@ -14,22 +14,22 @@
         <div class="page-title-container">
             <h3 class="page-title" id="page-title">Registracija</h3>
         </div>
-        <form class="page-login-form" id="login-form">
+        <form class="contact-form" id="login-form">
             <div class="form-group">
                 <label for="username">Uporabniško ime:</label><br>
-                <input type="text" id="username" name="username" required>
+                <input type="text" id="username" name="username" class="page-input" required>
             </div>
             <div class="form-group">
                 <label for="email">E-pošta:</label><br>
-                <input type="email" id="email" name="email" required>
+                <input type="email" id="email" name="email" class="page-input" required>
             </div>
             <div class="form-group">
                 <label for="password">Geslo:</label><br>
-                <input type="password" id="password" name="password" required>
+                <input type="password" id="password" name="password" class="page-input" required>
             </div>
             <div class="form-group">
                 <label for="confirm-password">Potrdite geslo:</label><br>
-                <input type="password" id="confirm-password" name="confirm-password" required>
+                <input type="password" id="confirm-password" name="confirm-password" class="page-input" required>
             </div>
             <div class="form-group">
                 <button type="submit" class="page-btn">Registriraj se</button>

scripts/contact.js

@@ -0,0 +1,49 @@
+const form = `
+<form class="contact-form" id="contact-form">
+    <label for="message">Sporočilo:</label>
+    <textarea id="message" name="message" rows="5" class="page-input" required></textarea>
+    <button type="submit" class="page-btn">Pošlji</button>
+    <p>Vaše sporočilo bo vezano na vaš račun, zato vam bomo lahko odgovorili na e-pošto, ki ste jo vnesli ob registraciji.</p>
+</form>`;
+
+document.addEventListener("DOMContentLoaded", () => {
+    const contactFormContainer = document.getElementById("contact-form-container");
+    // Najdi cookie "token" v cookies
+    const isLoggedIn = document.cookie.split(";").some(cookie => cookie.trim().startsWith("token="));
+    if (contactFormContainer && isLoggedIn) {
+        contactFormContainer.innerHTML = form;
+
+        document.getElementById("contact-form").addEventListener("submit", (e) => {
+            e.preventDefault();
+
+            const url = "http://localhost:3000/kontakt";
+            const message = document.getElementById("message").value;
+            fetch(url, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({ "token": document.cookie.split(";").find(cookie => cookie.trim().startsWith("token=")).split("=")[1], "message": message })
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error("Network response was not ok");
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log("Success:", data);
+                document.getElementById("contact-form").innerHTML = `<p class="page-paragraph-success">Hvala za vaše sporočilo! Odgovorili vam bomo v najkrajšem možnem času.</p>`;
+            })
+            .catch((error) => {
+                console.error("Error:", error);
+                document.getElementById("contact-form").innerHTML = `<p class="page-paragraph-error">Prišlo je do napake pri pošiljanju vašega sporočila. Prosimo, poskusite znova pozneje.</p>`;
+            });
+
+            // TODO: Popravi margin pri success in error textu da ne bo offsetan
+
+        });
+    } else if (contactFormContainer) {
+        contactFormContainer.innerHTML = `<p class="page-paragraph">Za pošiljanje sporočila se morate prijaviti.</p>`;
+    }
+});

styles/main.css

@@ -296,6 +296,22 @@ nav {
     outline: none;
 }
 
+.contact-form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 20px;
+    border: 1px solid var(--nav-btn-border);
+    border-radius: 8px;
+    background: var(--nav-btn-bg);
+    color: var(--text-color);
+    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
+    max-width: max(max-content, 400px);
+    margin: 20px auto;
+    margin-left: 23px;
+    margin-right: 23px;
+}
+
 @media (max-width: 720px) {
     header {
         padding: 6px 8px;