Add Oauth

Author: NeftaliYagua

_layouts/default.html

@@ -16,6 +16,7 @@
   <meta name="title" content="Coderic">
   <meta name="description"
   content="Corporation Oriented to the Development of Engineering of Resources Information Commercial">
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
   <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
   <script src="https://cdn.auth0.com/js/auth0/9.28.0/auth0.min.js"></script>
   <script type="text/javascript">
@@ -27,14 +28,38 @@
       scope: 'read:current_user',
       responseType: 'token id_token'
     });
+    
+
     function login() {
       webAuth.authorize();
     }
-    function logout() {
-      webAuth.logout({
+
+    $(document).ready(function() {
+    
+    $(".login-btn").click(() => {
+      webAuth.authorize();
+      return false;
+    });
+    $(".logout-btn").click(() => webAuth.logout({
         returnTo: 'https://' +window.location.hostname + '/'
-      });
-    }
+    }));
+
+    webAuth.checkSession(
+      {
+        audience: `https://coderic.eu.auth0.com/api/v2/`,
+        scope: 'read:current_user'
+      }, 
+      function(err, result) {
+        if (err || !result || !result.accessToken) {
+          $(".guest").show();
+          $(".authenticated").hide();
+        } else {
+          $(".guest").hide();
+          $(".authenticated").show();
+        }
+      }
+      );
+    });
   </script>
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
   {% for localized_page in localized_pages %}

_layouts/layout_en.html

@@ -50,10 +50,26 @@
           </a>
         </li>
       </ol>
-      <!--ol class="inline-flex md:space-x-2 rtl:space-x-reverse">
+      <ol class="inline-flex md:space-x-2 rtl:space-x-reverse guest">
         <li>
-          <a href="/profile" class="inline-flex items-center text-sm font-medium hover:text-orange-600"
-            title="Profile">
+          <a class="btn-login inline-flex items-center text-sm font-medium hover:text-orange-600"
+            title="Log in">
+            <svg class="w-3.5 h-3.5 ms-2 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"
+              fill="currentColor">
+              <defs />
+              <title>login</title>
+              <path
+                d="M26,30H14a2,2,0,0,1-2-2V25h2v3H26V4H14V7H12V4a2,2,0,0,1,2-2H26a2,2,0,0,1,2,2V28A2,2,0,0,1,26,30Z" />
+              <polygon points="14.59 20.59 18.17 17 4 17 4 15 18.17 15 14.59 11.41 16 10 22 16 16 22 14.59 20.59" />
+              <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32"
+                height="32" style="fill:none" />
+            </svg> <span class="hidden sm:inline-block">Sign in</span>
+          </a>
+        </li>
+      </ol>
+      <ol class="inline-flex md:space-x-2 rtl:space-x-reverse authenticated">
+        <li>
+          <a href="/profile" class="inline-flex items-center text-sm font-medium hover:text-orange-600" title="Profile">
             <svg class="w-3.5 h-3.5 ms-2 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"
               fill="currentColor">
               <defs></defs>
@@ -83,8 +99,7 @@
           </a>
         </li>
         <li>
-          <button type="submit" (click)="logout()"
-            class="inline-flex items-center text-sm font-medium hover:text-orange-600">
+          <button type="submit" class="inline-flex logout-btn items-center text-sm font-medium hover:text-orange-600">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="w-3.5 h-3.5 ms-2 mr-2">
               <path stroke-linecap="round" stroke-linejoin="round"
@@ -93,7 +108,7 @@
             <span class="hidden sm:inline-block" i18n>Sign out</span>
           </button>
         </li>
-    </ol-->
+      </ol>
     </nav>
   </div>
   <header class="flex justify-between border-t-4 border-b-8 border-orange-500">
@@ -130,15 +145,15 @@
           background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(229, 229, 229, 0.50) 150%);">
         <div class="flex items-center justify-center h-full text-right">
           <div class="flex justify-end w-full gap-3 px-6 text-black md:px-6">
-            
+
           </div>
         </div>
       </div>
     </div>
   </header>
   <main>
     {% if page.navigation %}
-      {% include {{ page.navigation }} %}
+    {% include {{ page.navigation }} %}
     {% endif %}
     {{ content }}
   </main>
@@ -174,11 +189,13 @@
               i18n>Privacy</a>
           </li>
           <li>
-            <a href="https://coderic.org/legal" class="inline-flex items-center text-sm font-medium hover:text-white" i18n>Legal</a>
+            <a href="https://coderic.org/legal" class="inline-flex items-center text-sm font-medium hover:text-white"
+              i18n>Legal</a>
           </li>
           <li>·</li>
           <li>
-            <a href="https://coderic.org/tos" class="text-sm font-medium ms-1 hover:text-white" i18n>Terms and Conditions</a>
+            <a href="https://coderic.org/tos" class="text-sm font-medium ms-1 hover:text-white" i18n>Terms and
+              Conditions</a>
           </li>
         </ol>
       </nav>
@@ -190,4 +207,4 @@
       </p>
     </div>
   </footer>
-</div>
+</div>