Updated code according to deployment on medlab host server

_includes/header.html

@@ -55,20 +55,27 @@
 
 
   /* Style for the modal */
-  #navBar.modal {
+  /* #navBar.modal {
     display: flex;
     flex-direction: column;
     align-items: center;
-  }
+  } */
 
   #emailCode,
   #emailCodeVerify {
-    display: flex;
     flex-direction: row;
     align-items: center;
     margin-bottom: 10px;
   }
 
+  #emailCode {
+    display: block;
+  }
+
+  #emailCodeVerify {
+    display: none;
+  }
+
   .modal {
     display: none;
     position: fixed;
@@ -168,14 +175,14 @@
       </div>
   </div>
 
-  <div id="navBar" class="modal" style="display: none;">
-    <div id="emailCode" style="display:block; align-items: center;">
+  <div id="navBar" class="modal">
+    <div id="emailCode" style="align-items: center;">
       <label for="emailInput">Enter your email:</label>
       <input type="email" id="emailInput" v-model="loginEmail" required>
       <button class="btn_login_logout primary_login_logout is-large_login_logout" @click="sendOTP"
         style="text-align:center;">Send Code</button>
     </div>
-    <div id="emailCodeVerify" style="display: none;">
+    <div id="emailCodeVerify">
       <label for="otpInput">Enter Code to Login:</label>
       <input type="text" id="otpInput" v-model="otpCode" required>
       <button class="btn_login_logout primary_login_logout is-large_login_logout" @click="verifyOTP">Verify
@@ -215,10 +222,10 @@
     window.location.reload();
   }
 
-  function showLoginModal() {
-    document.getElementById('navBar').style.display = 'block';
-    // document.getElementById('overlay').style.display = 'block';
-  }
+  // function showLoginModal() {
+  //   document.getElementById('navBar').style.display = 'block';
+  //   // document.getElementById('overlay').style.display = 'block';
+  // }
 
   function hideLoginModal() {
     document.getElementById('navBar').style.display = 'none';
@@ -254,8 +261,8 @@
       loginEmail: '',
       email: localStorage.getItem('userEmail'),
       otpCode: "",
-      backendUrlOtp: "http://localhost:3000/api/send_otp",
-      backendUrlValidateOtp: "http://localhost:3000/api/validate_otp"
+      backendUrlOtp: "/api/send_otp",
+      backendUrlValidateOtp: "/api/validate_otp"
     },
     methods: {
 

_layouts/library.html

@@ -10,7 +10,7 @@ layout: default
             "https://api.steinhq.com/v1/storages/5e8b937ab88d3d04ae0816a5"
         );
 
-        const backendUrl = "http://localhost:3000/api/get_rules";
+        const backendUrl = "/api/get_rules";
         var rules = "";
 
         fetch(backendUrl, {

_sass/_layout.scss

@@ -10,7 +10,7 @@
     // Positioning context for the mobile navigation icon
     position: relative;
 }
-  
+
 .site-title {
     font-family: $header-font-family;
     font-size: 26px;
@@ -24,11 +24,13 @@
         color: #000;
     }
 }
+
 .site-nav {
     font-family: $header-font-family;
     float: right;
     line-height: 56px;
     z-index: 1000;
+
     .menu-icon {
         display: none;
     }
@@ -41,6 +43,7 @@
         &:not(:last-child) {
             margin-right: 20px;
         }
+
         &:hover,
         &.page-link-active {
             border-bottom: 3px solid;
@@ -67,7 +70,7 @@
             padding-top: 10px;
             text-align: center;
 
-            > svg {
+            >svg {
                 width: 18px;
                 height: 15px;
 
@@ -94,8 +97,14 @@
             &:not(:last-child) {
                 margin-right: 0;
             }
+
             margin-left: 20px;
         }
+
+        .user-icon {
+            display: block;
+        }
+
     }
 }
 
@@ -131,29 +140,30 @@
 
 .footer-col-1 {
     width: -webkit-calc(35% - (#{$spacing-unit} / 2));
-    width:         calc(35% - (#{$spacing-unit} / 2));
+    width: calc(35% - (#{$spacing-unit} / 2));
 }
 
 .footer-col-2 {
     width: -webkit-calc(20% - (#{$spacing-unit} / 2));
-    width:         calc(20% - (#{$spacing-unit} / 2));
+    width: calc(20% - (#{$spacing-unit} / 2));
 }
 
 .footer-col-3 {
     width: -webkit-calc(45% - (#{$spacing-unit} / 2));
-    width:         calc(45% - (#{$spacing-unit} / 2));
+    width: calc(45% - (#{$spacing-unit} / 2));
 }
 
 @include media-query($on-laptop) {
+
     .footer-col-1,
     .footer-col-2 {
         width: -webkit-calc(50% - (#{$spacing-unit} / 2));
-        width:         calc(50% - (#{$spacing-unit} / 2));
+        width: calc(50% - (#{$spacing-unit} / 2));
     }
 
     .footer-col-3 {
         width: -webkit-calc(100% - (#{$spacing-unit} / 2));
-        width:         calc(100% - (#{$spacing-unit} / 2));
+        width: calc(100% - (#{$spacing-unit} / 2));
     }
 }
 
@@ -161,7 +171,7 @@
     .footer-col {
         float: none;
         width: -webkit-calc(100% - (#{$spacing-unit} / 2));
-        width:         calc(100% - (#{$spacing-unit} / 2));
+        width: calc(100% - (#{$spacing-unit} / 2));
     }
 }
 
@@ -182,7 +192,7 @@
     margin-left: 0;
     list-style: none;
 
-    > li {
+    >li {
         margin-bottom: $spacing-unit;
     }
 }
@@ -206,8 +216,7 @@
     margin-bottom: $spacing-unit;
 }
 
-.post-title {
-}
+.post-title {}
 
 .post-content {
     margin-bottom: $spacing-unit;
@@ -235,4 +244,4 @@
             font-size: 18px;
         }
     }
-}
+}

assets/js/vue.rules.js

@@ -46,9 +46,9 @@ const app = Vue.createApp({
       preview: (global.rule) ? true : false,
       template: (global.rule) ? true : false,
       steinAPI: 'https://api.steinhq.com/v1/storages/5e8b937ab88d3d04ae0816a5',
-      backendUrl: 'http://localhost:3000/api/publish_rule',
-      backendUrlrule: 'http://localhost:3000/api/get_rule',
-      backedDeleterule: 'http://localhost:3000/api/delete_rule',
+      backendUrl: '/api/publish_rule',
+      backendUrlrule: '/api/get_rule',
+      backedDeleterule: '/api/delete_rule',
       adminMail: "communityrule@medlab.host",
       // TODO keep an array of past states for undo/redo
       history: [],
@@ -653,9 +653,9 @@ const app = Vue.createApp({
           body: JSON.stringify(requestData),
         }).then(response => {
           if (!response.ok) {
+            alert("Error while deleting rule");
             throw new Error('Network response was not ok');
           }
-          alert("Error while deleting rule");
           return response.json(); // This returns another Promise
         }).then(data => {
           alert('Rule deleted successfully');