From c444b39f8a8b55e7f56b0d084f976cc918c301e4 Mon Sep 17 00:00:00 2001
From: qypol342 <qypol342@gmail.com>
Date: Sun, 15 Sep 2024 23:10:41 +0200
Subject: [PATCH] finish html page rework

---
 main.go           |  2 +-
 static/index.html | 66 ++++++++++++++++++++++++++++++++++++++++-------
 static/styles.css | 24 +++++++++++++++++
 3 files changed, 81 insertions(+), 11 deletions(-)

diff --git a/main.go b/main.go
index f37ffd4..ccf8555 100644
--- a/main.go
+++ b/main.go
@@ -35,7 +35,7 @@ func main() {
 	r.HandleFunc("/your-cpe-calendar.ics", handlers.GenerateICSHandler).Methods("GET")
 
 	//validate route
-	r.HandleFunc("/validate", handlers.ValidateHandler).Methods("POST")
+	r.HandleFunc("/validate", handlers.ValidateHandler).Methods("GET")
 
 	// Use the router in the http server
 	log.Fatal(http.ListenAndServe(":8080", r))
diff --git a/static/index.html b/static/index.html
index bd25d18..536fdd9 100644
--- a/static/index.html
+++ b/static/index.html
@@ -54,8 +54,16 @@ <h2>Obtenez votre calendrier</h2>
                     <label for="password">Mot de passe</label>
                     <input type="password" id="password" name="password" placeholder="Votre mot de passe CPE" required>
                 </div>
-                <button class="btn-primary" onclick="generateEncryptedLink()">Obtenez votre calendrier</button>
+                <button class="btn-primary" onclick="generateEncryptedLink(event)">
+                 <svg style="display: none;" id="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="#ADC3C1" stroke="#ADC3C1" stroke-width="15" transform-origin="center" d="m148 84.7 13.8-8-10-17.3-13.8 8a50 50 0 0 0-27.4-15.9v-16h-20v16A50 50 0 0 0 63 67.4l-13.8-8-10 17.3 13.8 8a50 50 0 0 0 0 31.7l-13.8 8 10 17.3 13.8-8a50 50 0 0 0 27.5 15.9v16h20v-16a50 50 0 0 0 27.4-15.9l13.8 8 10-17.3-13.8-8a50 50 0 0 0 0-31.7Zm-47.5 50.8a35 35 0 1 1 0-70 35 35 0 0 1 0 70Z"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="0;120" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></path></svg>
+                    <span>Obtenez votre calendrier</span> 
+                </button>
             </form>
+            <div id="success">
+                <p>Votre lien de connexion est <b>copié</b> dans le presse-papier.</p>
+                <button class="btn-primary" onclick="copyLink()">Copier le lien</button>
+                <button class="btn-secondary" onclick="back()">Retour</button>
+            </div>
         </section>
 
         <section id="about" class="about">
@@ -103,41 +111,79 @@ <h2>Affiliation</h2>
 <script >
     const pemEncodedKey = `{{.PublicKey}}`;
     const separator = `{{.Separator}}`;
+    let url = '';
 
     
-function copyLink(link) {
-    const fullLink = `${window.location.origin}${link}`;
+function copyLink() {
+    const fullLink = `${window.location.origin}${url}`;
     navigator.clipboard.writeText(fullLink).then(() => {
-        showToast();
+        showToast('success', 'Lien copié avec succès!');
     }).catch(err => {
         console.error('Failed to copy text: ', err);
     });
 }
 
 
-    async function generateEncryptedLink() {
+    async function generateEncryptedLink(event) {
+        event.preventDefault();
+        document.querySelector("#loader").style.display = "block";
         try {
             const username = document.getElementById("email").value;
             const password = document.getElementById("password").value;
 
             if (!username || !password) {
-                alert("Please enter both username and password.");
+                showToast('error', 'Veuillez remplir tous les champs');
                 return;
             }
 
             const encryptedCreds = await encryptMessage(`${username}${separator}${password}`);
             if (!encryptedCreds) throw new Error('Encryption failed');
 
-            const url = `/your-cpe-calendar.ics?creds=${encodeURIComponent(encryptedCreds)}`;
-            copyLink(url);
+            // validate creds
+
+            res = await fetch(`/validate?creds=${encodeURIComponent(encryptedCreds)}`);
+            
+            console.log(res.ok);
+
+            if (!res.ok) {
+                showToast('error', 'Credentiel invalide');
+                console.log('Error validating creds:', res.statusText);
+            document.querySelector("#loader").style.display = "none";
+
+                return;
+            }
+
+             url = `/your-cpe-calendar.ics?creds=${encodeURIComponent(encryptedCreds)}`;
+            copyLink();
+
+            document.querySelector("form").style.display = "none";
+            document.querySelector("#success").style.display = "flex";
+            document.querySelector("#loader").style.display = "none";
         } catch (error) {
             console.error('Error generating encrypted link:', error);
+            document.querySelector("#loader").style.display = "none";
         }
+        document.querySelector("#loader").style.display = "none";
+        return false
+    }
+
+    function back() {
+        document.querySelector("form").style.display = "flex";
+        document.querySelector("#success").style.display = "none";
     }
 
-    function showToast() {
+    function showToast(type, message) {
     const toast = document.getElementById('toast');
-    toast.className = 'show';
+    toast.innerText = message;
+    if (type === 'error') {
+        toast.classList.add('error');
+        toast.classList.remove('success');
+    } else if (type === 'success') {
+        toast.classList.add('success');
+        toast.classList.remove('error');
+    }
+
+    toast.classList.add('show');
     setTimeout(() => {
         toast.className = toast.className.replace('show', '');
     }, 3000);
diff --git a/static/styles.css b/static/styles.css
index 7e2ce34..a4a9f79 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -26,6 +26,7 @@
     --toast-animation-time: 0.5s;
     --toast-background: #333;
     --toast-color: #fff;
+    --error-color: #ff0000;
 
 
     /* Border Radius */
@@ -174,6 +175,8 @@ footer div {
 }
 
 .btn-primary {
+    display: flex;
+    gap: .5rem;
     background-color: var(--primary-color);
     color: var(--secondary-background-color);
     border: none;
@@ -183,6 +186,11 @@ footer div {
     width: fit-content;
 }
 
+.btn-primary svg {
+    display: none;
+    height: 2rem;
+}
+
 .btn-secondary {
     background-color: var(--secondary-color);
     color: var(--text-color);
@@ -244,6 +252,13 @@ li .btn-secondary {
     width: 100%;
 }
 
+#success {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
 #toast {
     visibility: hidden;
     min-width: 250px;
@@ -260,6 +275,15 @@ li .btn-secondary {
     transform: translateX(-50%);
 }
 
+#toast.success {
+    background-color: var(--toast-background);
+    color: var(--toast-color);
+}
+
+#toast.error {
+    background-color: var(--error-color);
+}
+
 #toast.show {
     visibility: visible;
     animation: fadein var(--toast-animation-time), fadeout var(--toast-animation-time) 2.5s;