updated code

_includes/header.html

@@ -154,6 +154,9 @@
     // Hide the dropdown and overlay
     document.getElementById('login').style.display = 'block';
     document.getElementById('logout').style.display = 'none';
+    document.getElementById('emailCode').style.display = 'block';
+    document.getElementById('emailCodeVerify').style.display = 'none';
+    window.location.reload();
   }
 
   function showLoginModal() {
@@ -195,7 +198,8 @@
       loginEmail: '',
       email: localStorage.getItem('userEmail'),
       otpCode: "",
-      backendUrl: "http://localhost:3000/api/send_otp"
+      backendUrlOtp: "http://localhost:3000/api/send_otp",
+      backendUrlValidateOtp: "http://localhost:3000/api/validate_otp"
     },
     methods: {
 
@@ -208,7 +212,7 @@
           email: this.loginEmail
         }
         if (isValidEmail(this.loginEmail)) {
-          fetch(this.backendUrl, {
+          fetch(this.backendUrlOtp, {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
@@ -239,7 +243,7 @@
           email: this.loginEmail,
           otp: this.otpCode
         }
-        fetch(this.backendUrl, {
+        fetch(this.backendUrlValidateOtp, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
@@ -252,15 +256,15 @@
           console.log(response)
           if (response.status == 500) {
             alert('Error while validating code');
-          } else if (response.status == 400) {
-            alert('Invalid code, please enter valid code');
-          } else {
+          } else if (response.status == 200) {
             alert('Logged in successfully');
             localStorage.setItem('userEmail', this.loginEmail)
             document.getElementById('login').style.display = 'none';
             document.getElementById('logout').style.display = 'block';
             document.getElementById('logout').classList.remove('active');
             this.closeModal();
+          } else {
+            alert('Invalid code, please enter valid code');
           }
         })
 

_includes/vue-rule-script.html

@@ -1,4 +1,3 @@
-
 <div id="app">
     <div class="app-wrapper" :class="{'is-preview':preview}">
         <div class="editor" v-if="!preview && !legacy" v-cloak>
@@ -16,7 +15,8 @@
                         <div class="dropdown">
                             <label v-for="(icon, iconName, idx) in ruleIcons" :key="idx"
                                 :class="{ selected: rule.icon == icon }">
-                                <input type="radio" id="" :selected="rule.icon == icon" :value="icon" v-model="rule.icon">
+                                <input type="radio" id="" :selected="rule.icon == icon" :value="icon"
+                                    v-model="rule.icon">
                                 <div><img :src="icon" :alt="iconName"></div>
                             </label>
                             <label class="default">
@@ -31,58 +31,52 @@
                 </label>
             </div>
             <div class="rule__modules" :class="{ target: holding }">
-                <label class="label" for="" v-if="rule.name"><icon :icon="rule.icon"></icon>[[rule.name]]</label>
-                <div
-                    class="modules__dropzone modules__grid"
-                    :data-module-id="rule.ruleID"
-                    .module="rule"
-                    @drop.prevent="dropOnRule" @dragenter.prevent @dragover.prevent
-                >
-                    <div v-if="rule.modules.length < 1">Drag rules from the library below here, or create your own.</div>
-                    <module
-                        v-for="module in rule.modules"
-                        :key="module"
-                        @click="handleClickEditModule"
-                        :module="module"
-                        draggable="true"
-                        @dragstart="rearrangeModule"
-                    ></module>
+                <label class="label" for="" v-if="rule.name">
+                    <icon :icon="rule.icon"></icon>[[rule.name]]
+                </label>
+                <div class="modules__dropzone modules__grid" :data-module-id="rule.ruleID" .module="rule"
+                    @drop.prevent="dropOnRule" @dragenter.prevent @dragover.prevent>
+                    <div v-if="rule.modules.length < 1">Drag rules from the library below here, or create your own.
+                    </div>
+                    <module v-for="module in rule.modules" :key="module" @click="handleClickEditModule" :module="module"
+                        draggable="true" @dragstart="rearrangeModule"></module>
                 </div>
             </div>
             <div class="label-group is-mobile">
                 <div class="module" @click="newCustomModule">
-                  <span class="plus"><img :src="icons.plus" alt="Add"></span>
-                  Create Custom Module
+                    <span class="plus"><img :src="icons.plus" alt="Add"></span>
+                    Create Custom Module
                 </div>
                 <div class="module-editor__empty">
-                    <small>Or click any module in categories like culture/decision/process/struture  to start editing it.</small>
+                    <small>Or click any module in categories like culture/decision/process/struture to start editing
+                        it.</small>
                 </div>
             </div>
-            
+
             <div class="module-editor__wrapper">
                 <div class="module-editor">
-                    <module
-                        class="module-editor__label"
-                        hide-submodules
-                        :module="editor.module"
-                        draggable="false"
-                        v-if="editor.module.name"
-                    ></module>
-                    
+                    <module class="module-editor__label" hide-submodules :module="editor.module" draggable="false"
+                        v-if="editor.module.name"></module>
+
                     <div class="module-editor__fields">
                         <div class="label-group">
                             <label class="label">
                                 <span>Module name:</span>
-                                <input class="input-stack" type="text" v-model="editor.module.name" @change="editor.module.moduleID = slugify(editor.module.name)">
+                                <input class="input-stack" type="text" v-model="editor.module.name"
+                                    @change="editor.module.moduleID = slugify(editor.module.name)">
                             </label>
                             <label class="label">
                                 <span>Icon:</span>
                                 <div class="dropdown">
-                                    <label v-for="(icon, iconName, idx) in moduleIcons" :key="idx" :class="{ selected: editor.module.icon == icon }">
-                                        <input type="radio" id="" :selected="editor.module.icon == icon" :value="icon" v-model="editor.module.icon">
+                                    <label v-for="(icon, iconName, idx) in moduleIcons" :key="idx"
+                                        :class="{ selected: editor.module.icon == icon }">
+                                        <input type="radio" id="" :selected="editor.module.icon == icon" :value="icon"
+                                            v-model="editor.module.icon">
                                         <div><img :src="icon" :alt="iconName"></div>
                                     </label>
-                                    <label class="default"><div><img :src="icons.blank"></div></label>
+                                    <label class="default">
+                                        <div><img :src="icons.blank"></div>
+                                    </label>
                                 </div>
                             </label>
                         </div>
@@ -92,34 +86,28 @@
                         </label>
 
                         <label class="label configs">
-                          <table>
-                            <tr v-for="(value, key) in editor.module.config">
-                              <td>[[key]]</td>
-                              <td><input type="text"
-                                    v-model="editor.module.config[key]" /></td>
-                              <td style="vertical-align: initial">
-                                <span class="config-button"
-                                        @click="removeConfig([[key]])">
-                                  <img :src="icons.minus" alt="Remove">
-                                </span>
-                              </td>
-                            </tr>
-                            <tr >
-                              <td><input id="newConfigKey"
-                                         type="text"
-                                         value="Configuration" /></td>
-                              <td>
-                                <input id="newConfigValue"
-                                         type="text"
-                                         value="Value" /></td>
-                              <td style="vertical-align: initial">
-                                <span class="config-button"
-                                        @click="addConfig">
-                                  <img :src="icons.plus" alt="Add">
-                                </span>
-                              </td>
-                            </tr>
-                          </table>
+                            <table>
+                                <tr v-for="(value, key) in editor.module.config">
+                                    <td>[[key]]</td>
+                                    <td><input type="text" v-model="editor.module.config[key]" /></td>
+                                    <td style="vertical-align: initial">
+                                        <span class="config-button" @click="removeConfig([[key]])">
+                                            <img :src="icons.minus" alt="Remove">
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td><input id="newConfigKey" type="text" value="Configuration" /></td>
+                                    <td>
+                                        <input id="newConfigValue" type="text" value="Value" />
+                                    </td>
+                                    <td style="vertical-align: initial">
+                                        <span class="config-button" @click="addConfig">
+                                            <img :src="icons.plus" alt="Add">
+                                        </span>
+                                    </td>
+                                </tr>
+                            </table>
                         </label>
                         <!-- Working on custom module library
 
@@ -150,29 +138,27 @@
                     </div>
                 </div>
                 <div>
-                    <vue-button class="success" :icon="icons.plus" @click="clickAddModule" v-if="!moduleContains(editor.module) && editor.module">Add</vue-button>
-                    <vue-button class="danger" :icon="icons.minus" @click="clickRemoveModule" v-if="moduleContains(editor.module)">Remove</vue-button>
+                    <vue-button class="success" :icon="icons.plus" @click="clickAddModule"
+                        v-if="!moduleContains(editor.module) && editor.module">Add</vue-button>
+                    <vue-button class="danger" :icon="icons.minus" @click="clickRemoveModule"
+                        v-if="moduleContains(editor.module)">Remove</vue-button>
                 </div>
             </div>
             <div class="modules">
                 <div class="tabs">
-                    <div class="tab__control" v-for="(type, name) in moduleTypes" :key="name" @click="moduleLibrary = name" :class="{ active: moduleLibrary == name}">
+                    <div class="tab__control" v-for="(type, name) in moduleTypes" :key="name"
+                        @click="moduleLibrary = name" :class="{ active: moduleLibrary == name}">
                         <img :src="type.icon" :alt="name"><span class="tab__control-name">[[ name ]]</span>
                     </div>
                 </div>
                 <div class="tab__pane">
-                    <div class="modules__type" v-for="(type, name) in moduleTypes" :key="name" v-show="moduleLibrary == name" :test="name">
+                    <div class="modules__type" v-for="(type, name) in moduleTypes" :key="name"
+                        v-show="moduleLibrary == name" :test="name">
                         <p>[[ type.question ]]</p>
                         <div class="modules__grid">
-                            <module
-                                v-for="(module, index) in getModulesByType(name)"
-                                :key="index"
-                                :module="module"
-                                @click="handleClickCopyModule"
-                                has-grain
-                                draggable="true"
-                                @dragstart="startDragModule"
-                            ></module>
+                            <module v-for="(module, index) in getModulesByType(name)" :key="index" :module="module"
+                                @click="handleClickCopyModule" has-grain draggable="true" @dragstart="startDragModule">
+                            </module>
                         </div>
                     </div>
                 </div>
@@ -188,22 +174,22 @@
                 </label>
             </div>
         </div>
-        
+
         <div class="rule" v-show="preview" v-if="!legacy">
             <div class="controls">
-                <vue-button class="primary is-large" @click="clickPreview" :icon="icons.edit" v-if="!view">Edit</vue-button>
+                <vue-button class="primary is-large" @click="clickPreview" :icon="icons.edit"
+                    v-if="!view">Edit</vue-button>
             </div>
-            <h1><icon :icon="rule.icon" v-if="rule.icon"></icon> [[rule.name]]</h1>
+            <h1>
+                <icon :icon="rule.icon" v-if="rule.icon"></icon> [[rule.name]]
+            </h1>
             <p>[[rule.summary]]</p>
             <div class="modules__grid" :data-module-id="rule.ruleID" .module="rule">
-                <module-display
-                    v-for="module in rule.modules"
-                    :key="module"
-                    :module="module"
-                ></module-display>
+                <module-display v-for="module in rule.modules" :key="module" :module="module"></module-display>
             </div>
             <ul class="module-list">
-                <module-list v-for="(module, index) in rule.modules" :key="index" :module="module" v-if="rule.modules"></module-list>
+                <module-list v-for="(module, index) in rule.modules" :key="index" :module="module"
+                    v-if="rule.modules"></module-list>
             </ul>
             <div class="rule__creator" v-if="rule.creator.name">
                 Created By
@@ -211,6 +197,17 @@
                 <span v-if="rule.creator.url"><a :href="rule.creator.url">[[rule.creator.name]]</a></span>
                 <span v-else>[[rule.creator.name]]</span>
             </div>
+            Version History:
+            <div style="white-space: normal;">
+                <div v-for="ruleId1 in rule.edit_history" :key="ruleId1"
+                    style="display: inline-block; margin-right: 10px;">
+                    <a :href="getRuleLink(ruleId1)">[[
+                        getRuleName(ruleId1) ]]</a>
+                    ==>
+                </div>
+
+            </div>
+
         </div>
         <div class="rule legacy" v-if="legacy && preview">
             <h1>[[rule.name]]</h1>
@@ -232,18 +229,23 @@
         </div>
         <div class="btn-group" v-if="!legacy && !view">
             <!-- <vue-button class="primary is-large" @click="handleClickPublish" :icon="icons.publish" :loading="publishing">Publish</vue-button> -->
-            <vue-button v-if="edit" class="primary is-large" @click="handleClickPublish" :icon="icons.edit" :loading="editing">
+            <vue-button v-if="edit" class="primary is-large" @click="handleClickPublish" :icon="icons.edit"
+                :loading="editing">
                 Edit
-              </vue-button>
-              <vue-button v-else class="primary is-large" @click="handleClickPublish" :icon="icons.publish" :loading="publishing">Publish</vue-button>
-              </vue-button>
+            </vue-button>
+            <vue-button v-else class="primary is-large" @click="handleClickPublish" :icon="icons.publish"
+                :loading="publishing">Publish</vue-button>
+            </vue-button>
             <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
-            <vue-button class="is-large" @click="handleClickImport" :icon="icons.upload">Import <div class="btn-cover">coming soon!</div></vue-button>
+            <vue-button class="is-large" @click="handleClickImport" :icon="icons.upload">Import <div class="btn-cover">
+                    coming soon!</div></vue-button>
         </div>
         <div class="btn-group" v-if="view && !legacy">
             <vue-button class="primary is-large" @click="clickPreview" :icon="icons.fork">Fork &amp; Edit</vue-button>
-            <vue-button class="primary is-large" v-if = "isOwner" @click="clickPreviewEdit" :icon="icons.fork">Edit </vue-button>
-            <vue-button class="primary is-large" v-if = "isAdmin" @click="clickDelete" :icon="icons.fork">Delete </vue-button>
+            <vue-button class="primary is-large" v-if="isOwner" @click="clickPreviewEdit" :icon="icons.fork">Edit
+            </vue-button>
+            <vue-button class="primary is-large" v-if="isAdmin" @click="clickDelete" :icon="icons.fork">Delete
+            </vue-button>
             <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
         </div>
     </div>
@@ -252,7 +254,8 @@
         <h1>[[rule.name]]</h1>
         <p>[[rule.summary]]</p>
         <ul class="module-list">
-            <module-list v-for="(module, index) in rule.modules" :key="index" :module="module" v-if="rule.modules" hide-icon></module-list>
+            <module-list v-for="(module, index) in rule.modules" :key="index" :module="module" v-if="rule.modules"
+                hide-icon></module-list>
         </ul>
         <hr>
         <h2>Created By</h2>
@@ -272,30 +275,30 @@
 <script>
 
     let global = {};
-    
+
     global.modules = [
         {% assign modules_array = site.modules | sort: "type" %}
-            {% for module in modules_array %}
-            {
-                name: "{{ module.title | escape }}",
-                url: "{{ site.baseurl }}{{ module.permalink }}",
+        {% for module in modules_array %}
+    {
+        name: "{{ module.title | escape }}",
+            url: "{{ site.baseurl }}{{ module.permalink }}",
                 moduleID: "{{ module.slug }}",
-                icon: "{{ site.data.module_types[module.type].icon | default: 'null'}}",
-                summary: "{{ module.summary }}",
-                type: "{{ module.type }}",
-                content: `{{ module.content | markdownify }}`,
-                {% if module.config %}
-                config: {
-                      {% for config in module.config %}
-                      "{{ config[0] }}": "{{ config[1] }}"
-                      {% unless forloop.last %}, {% endunless %}
-                      {% endfor %}
-                },
-                {% endif %}
-                readonly: true,
-                modules: []
-            } {% unless forloop.last %}, {% endunless %}
+                    icon: "{{ site.data.module_types[module.type].icon | default: 'null'}}",
+                        summary: "{{ module.summary }}",
+                            type: "{{ module.type }}",
+                                content: `{{ module.content | markdownify }}`,
+                                    {% if module.config %}
+    config: {
+        {% for config in module.config %}
+        "{{ config[0] }}": "{{ config[1] }}"
+        {% unless forloop.last %}, {% endunless %}
         {% endfor %}
+    },
+    {% endif %}
+    readonly: true,
+        modules: []
+            } {% unless forloop.last %}, {% endunless %}
+    {% endfor %}
     ];
 
     // global.url = "{{ site.url }}{{ site.baseurl }}";
@@ -304,4 +307,4 @@
     global.rule = {{ page.rule | jsonify }};
 
 </script>
-<script src="/assets/js/vue.rules.js"></script>
+<script src="/assets/js/vue.rules.js"></script>

assets/js/vue.rules.js

@@ -29,7 +29,9 @@ const app = Vue.createApp({
           url: "",
         },
         modules: [],
-        latest_version: 1
+        latest_version: 1,
+        list: "",
+        edit_history: []
       },
       legacy: false,
       rID: false,
@@ -503,6 +505,10 @@ const app = Vue.createApp({
 
           return;
         }
+
+        const splitArray = rule.list.split(':');
+        const resultArray = splitArray.filter(value => value.trim() !== '');
+
         this.rule = {
           ruleID: rule.rule_id,
           timestamp: rule.time_stamp,
@@ -516,7 +522,9 @@ const app = Vue.createApp({
             url: rule.creator_url,
           },
           modules: (rule.modules) ? JSON.parse(rule.modules) : [],
-          latest_version: rule.latest_version
+          latest_version: rule.latest_version,
+          list: rule.list,
+          edit_history: resultArray
         }
 
         if (rule.email == localStorage.getItem('userEmail')) {
@@ -526,6 +534,7 @@ const app = Vue.createApp({
           this.isAdmin = true;
         }
 
+
         /** Add name to <title> for v3+ rules */
         document.title = rule.name + " / CommunityRule"
 
@@ -592,12 +601,34 @@ const app = Vue.createApp({
         this.loading = false;
       }); */
     },
+    getRuleLink(ruleId) {
+
+      // Further split each part based on '@'
+
+      const subParts = ruleId.split('@');
+
+      // Use the desired sub-part in your link construction
+      // For example, if you want the first sub-part after splitting on '@'
+      const finalPart = subParts[0];
+
+      return `/create/?r=${finalPart}`;
+    },
+    getRuleName(ruleId) {
+
+      // Further split each part based on '@'
+      const subParts = ruleId.split('@');
+
+      // Use the desired sub-part in your link construction
+      // For example, if you want the first sub-part after splitting on '@'
+      const ruleName = subParts[1];
+
+      return ruleName
+    },
 
     // editor methods =========================================================
     clickDelete() {
       (async () => {
         // read values from all sheets
-        console.log("rule to delete " + this.rule.ruleID);
         const requestData = {
           ruleID: this.rule.ruleID
         }
@@ -792,15 +823,24 @@ const app = Vue.createApp({
 
       const rule = this.ruleExport;
       var ruleID = new Date().getTime(); // TODO: allow for custom named IDs, check for uniqueness
+      console.log("after export")
+      console.log(this.rule)
       if (this.edit) {
-
         ruleID = this.rule.ruleID;
       }
+      console.log("rule" + ruleID)
       var latest_ver = 1;
 
       if (this.edit) {
         latest_ver = parseInt(this.rule.latest_version) + 1;
       }
+
+      var previousListVersion = "";
+      if (this.edit) {
+        previousListVersion = this.rule.list
+      } else {
+        previousListVersion = this.rule.list + ruleID + "@" + rule.name + ":";
+      }
       // ------------------ exisituing code ---------------
       // add to database
       //   const store = new SteinStore(
@@ -840,7 +880,8 @@ const app = Vue.createApp({
         email: localStorage.getItem('userEmail'),
         edit: this.edit,
         version: 3,
-        latest_version: latest_ver
+        latest_version: latest_ver,
+        list: previousListVersion
       }
 
       fetch(this.backendUrl, {
@@ -853,12 +894,14 @@ const app = Vue.createApp({
         },
         body: JSON.stringify(requestData),
       }).then(response => {
+        console.log("adfasdfasdfasdfasdf")
         if (!response.ok) {
           throw new Error(`HTTP error! Status: ${response.status}`);
         }
         return response.json(); // or response.text() if expecting plain text
       }).then(data => {
         // Handle the data received from the backend
+
         console.log('Data from backend:', data);
       }).then(data => {
         this.publishing = false;