feat: allow edit name of the table column

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {
@@ -47,7 +47,7 @@
     "papaparse": "^5.3.1",
     "tippy.js": "^6.3.1",
     "v-remixicon": "^0.1.1",
-    "vue": "3.2.19",
+    "vue": "^3.2.31",
     "vue-i18n": "^9.2.0-beta.29",
     "vue-router": "^4.0.11",
     "vue-toastification": "^2.0.0-rc.5",

src/background/workflow-engine/engine.js

@@ -87,17 +87,17 @@ class WorkflowEngine {
     }
 
     const workflowTable = this.workflow.table || this.workflow.dataColumns;
-    const dataColumns = Array.isArray(workflowTable)
+    const columns = Array.isArray(workflowTable)
       ? workflowTable
       : Object.values(workflowTable);
 
-    dataColumns.forEach(({ name, type }) => {
-      this.columns[name] = { index: 0, type };
+    columns.forEach(({ name, type, id }) => {
+      this.columns[id || name] = { index: 0, name, type };
     });
 
     this.blocks = blocks;
     this.startedTimestamp = Date.now();
-    this.workflow.table = dataColumns;
+    this.workflow.table = columns;
     this.currentBlock = currentBlock || triggerBlock;
 
     this.states.on('stop', this.onWorkflowStopped);
@@ -147,8 +147,9 @@ class WorkflowEngine {
       return;
     }
 
-    const columnName = objectHasKey(this.columns, key) ? key : 'column';
-    const currentColumn = this.columns[columnName];
+    const columnKey = objectHasKey(this.columns, key) ? key : 'column';
+    const currentColumn = this.columns[columnKey];
+    const columnName = currentColumn.name || 'column';
     const convertedValue = convertData(value, currentColumn.type);
 
     if (objectHasKey(this.referenceData.table, currentColumn.index)) {

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -314,8 +314,6 @@ export default {
       const blockInputs = Object.keys(inputs).length || defInputs;
       const blockOutputs = Object.keys(outputs).length || defOutputs;
 
-      console.log(blockInputs, blockOutputs);
-
       editor.value.addNode(
         name,
         blockInputs,

src/components/newtab/workflow/WorkflowDataTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex mb-4">
     <ui-input
-      v-model.lowercase="state.query"
+      v-model="state.query"
       autofocus
       :placeholder="t('workflow.table.placeholder')"
       class="mr-2 flex-1"
@@ -18,14 +18,14 @@
   >
     <li
       v-for="(column, index) in columns"
-      :key="column.name"
+      :key="column.id"
       class="flex items-center space-x-2"
     >
       <ui-input
         :model-value="columns[index].name"
-        disabled
-        class="flex-1"
         :placeholder="t('workflow.table.column.name')"
+        class="flex-1"
+        @blur="updateColumnName(index, $event.target)"
       />
       <ui-select
         v-model="columns[index].type"
@@ -44,6 +44,7 @@
 </template>
 <script setup>
 import { computed, onMounted, watch, reactive } from 'vue';
+import { nanoid } from 'nanoid';
 import { useI18n } from 'vue-i18n';
 import { debounce } from '@/utils/helper';
 
@@ -72,28 +73,56 @@ const columns = computed(() =>
   state.columns.filter(({ name }) => name.includes(state.query))
 );
 
+function getColumnName(name) {
+  const columnName = name.replace(/[\s@[\]]/g, '');
+  const isColumnExists = state.columns.some(
+    (column) => column.name === columnName
+  );
+
+  if (isColumnExists || columnName.trim() === '') return '';
+
+  return columnName;
+}
+function updateColumnName(index, target) {
+  const columnName = getColumnName(target.value);
+
+  if (!columnName) {
+    target.value = state.columns[index].name;
+    return;
+  }
+
+  state.columns[index].name = columnName;
+}
 function addColumn() {
-  const isColumnExists = state.columns.some(({ name }) => name === state.query);
+  const columnName = getColumnName(state.query);
 
-  if (isColumnExists || state.query.trim() === '') return;
+  if (!columnName) return;
 
-  state.columns.push({ name: state.query, type: 'string' });
+  state.columns.push({ id: nanoid(5), name: columnName, type: 'string' });
   state.query = '';
 }
 
 watch(
   () => state.columns,
   debounce((newValue) => {
+    console.log(newValue);
     emit('update', { table: newValue });
   }, 250),
   { deep: true }
 );
 
 onMounted(() => {
-  const tempColumns = props.workflow.table;
+  let isChanged = false;
+  state.columns =
+    props.workflow.table?.map((column) => {
+      if (!column.id) {
+        isChanged = true;
+        column.id = column.name;
+      }
+
+      return column;
+    }) || props.workflow.table;
 
-  state.columns = Array.isArray(tempColumns)
-    ? tempColumns
-    : Object.values(tempColumns);
+  if (isChanged) emit('update', { table: state.columns });
 });
 </script>

src/components/newtab/workflow/edit/EditAttributeValue.vue

@@ -8,83 +8,18 @@
       class="w-full"
       @change="updateData({ attributeName: $event })"
     />
-    <ui-checkbox
-      :model-value="data.assignVariable"
-      block
-      class="mt-4"
-      @change="updateData({ assignVariable: $event })"
-    >
-      {{ t('workflow.variables.assign') }}
-    </ui-checkbox>
-    <ui-input
-      v-if="data.assignVariable"
-      :model-value="data.variableName"
-      :placeholder="t('workflow.variables.name')"
-      :title="t('workflow.variables.name')"
-      class="mt-2 w-full"
-      @change="updateData({ variableName: $event })"
-    />
-    <ui-checkbox
-      :model-value="data.saveData"
-      class="mt-4"
-      @change="updateData({ saveData: $event })"
-    >
-      {{ t('workflow.blocks.attribute-value.forms.checkbox') }}
-    </ui-checkbox>
-    <ui-select
-      v-if="data.saveData"
-      :model-value="data.dataColumn"
-      :placeholder="t('workflow.blocks.attribute-value.forms.column')"
-      class="w-full mt-2"
-      @change="updateData({ dataColumn: $event })"
-    >
-      <option
-        v-for="column in workflow.data.value.table"
-        :key="column.name"
-        :value="column.name"
-      >
-        {{ column.name }}
-      </option>
-    </ui-select>
-    <ui-checkbox
-      :model-value="data.addExtraRow"
-      class="mt-4"
-      block
-      @change="updateData({ addExtraRow: $event })"
-    >
-      {{ t('workflow.blocks.attribute-value.forms.extraRow.checkbox') }}
-    </ui-checkbox>
-    <ui-input
-      v-if="data.addExtraRow"
-      :model-value="data.extraRowValue"
-      :title="t('workflow.blocks.attribute-value.forms.extraRow.title')"
-      :placeholder="
-        t('workflow.blocks.attribute-value.forms.extraRow.placeholder')
-      "
-      class="w-full mt-2 mb-2"
-      @change="updateData({ extraRowValue: $event })"
+    <insert-workflow-data
+      :data="data"
+      extra-row
+      variables
+      @update="updateData"
     />
-    <ui-select
-      v-if="data.addExtraRow"
-      :model-value="data.extraRowDataColumn"
-      placeholder="Select column"
-      class="mt-1 w-full"
-      @change="updateData({ extraRowDataColumn: $event })"
-    >
-      <option
-        v-for="column in workflow.data.value.table"
-        :key="column.name"
-        :value="column.name"
-      >
-        {{ column.name }}
-      </option>
-    </ui-select>
   </edit-interaction-base>
 </template>
 <script setup>
-import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import EditInteractionBase from './EditInteractionBase.vue';
+import InsertWorkflowData from './InsertWorkflowData.vue';
 
 const props = defineProps({
   data: {
@@ -95,7 +30,6 @@ const props = defineProps({
 const emit = defineEmits(['update:data']);
 
 const { t } = useI18n();
-const workflow = inject('workflow');
 
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });

src/components/newtab/workflow/edit/EditClipboard.vue

@@ -10,53 +10,7 @@
       <p class="mt-4">
         {{ t('workflow.blocks.clipboard.data') }}
       </p>
-      <ui-input
-        v-if="data.responseType === 'json'"
-        :model-value="data.dataPath"
-        placeholder="path.to.data"
-        label="Data path"
-        class="w-full mt-2"
-        @change="updateData({ dataPath: $event })"
-      />
-      <ui-checkbox
-        :model-value="data.assignVariable"
-        block
-        class="mt-4"
-        @change="updateData({ assignVariable: $event })"
-      >
-        {{ t('workflow.variables.assign') }}
-      </ui-checkbox>
-      <ui-input
-        v-if="data.assignVariable"
-        :model-value="data.variableName"
-        :placeholder="t('workflow.variables.name')"
-        :title="t('workflow.variables.name')"
-        class="mt-2 w-full"
-        @change="updateData({ variableName: $event })"
-      />
-      <ui-checkbox
-        :model-value="data.saveData"
-        block
-        class="mt-4"
-        @change="updateData({ saveData: $event })"
-      >
-        {{ t('workflow.blocks.get-text.checkbox') }}
-      </ui-checkbox>
-      <ui-select
-        v-if="data.saveData"
-        :model-value="data.dataColumn"
-        placeholder="Select column"
-        class="mt-2 w-full"
-        @change="updateData({ dataColumn: $event })"
-      >
-        <option
-          v-for="column in workflow.data.value.table"
-          :key="column.name"
-          :value="column.name"
-        >
-          {{ column.name }}
-        </option>
-      </ui-select>
+      <insert-workflow-data :data="data" variables @update="updateData" />
     </template>
     <template v-else>
       <p class="mt-4">
@@ -69,9 +23,10 @@
   </div>
 </template>
 <script setup>
-import { ref, inject, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import browser from 'webextension-polyfill';
+import InsertWorkflowData from './InsertWorkflowData.vue';
 
 const props = defineProps({
   data: {
@@ -84,7 +39,6 @@ const emit = defineEmits(['update:data']);
 const permission = { permissions: ['clipboardRead'] };
 const { t } = useI18n();
 
-const workflow = inject('workflow');
 const hasPermission = ref(false);
 
 function handlePermission(status) {

src/components/newtab/workflow/edit/EditForms.vue

@@ -7,47 +7,12 @@
     >
       {{ t('workflow.blocks.forms.getValue') }}
     </ui-checkbox>
-    <template v-if="data.getValue && !hideBase">
-      <ui-checkbox
-        :model-value="data.saveData"
-        block
-        class="mt-4"
-        @change="updateData({ saveData: $event })"
-      >
-        Insert to table
-      </ui-checkbox>
-      <ui-select
-        v-if="data.saveData"
-        :model-value="data.dataColumn"
-        placeholder="Select column"
-        class="w-full mt-2"
-        @change="updateData({ dataColumn: $event })"
-      >
-        <option
-          v-for="column in workflow.data.value.table"
-          :key="column.name"
-          :value="column.name"
-        >
-          {{ column.name }}
-        </option>
-      </ui-select>
-      <ui-checkbox
-        :model-value="data.assignVariable"
-        block
-        class="mt-4"
-        @change="updateData({ assignVariable: $event })"
-      >
-        {{ t('workflow.variables.assign') }}
-      </ui-checkbox>
-      <ui-input
-        v-if="data.assignVariable"
-        :model-value="data.variableName"
-        :placeholder="t('workflow.variables.name')"
-        :title="t('workflow.variables.name')"
-        class="mt-2 w-full"
-        @change="updateData({ variableName: $event })"
-      />
-    </template>
+    <insert-workflow-data
+      v-if="data.getValue && !hideBase"
+      :data="data"
+      variables
+      @update="updateData"
+    />
     <template v-else>
       <ui-select
         :model-value="data.type"
@@ -94,8 +59,8 @@
   </edit-interaction-base>
 </template>
 <script setup>
-import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';
+import InsertWorkflowData from './InsertWorkflowData.vue';
 import EditInteractionBase from './EditInteractionBase.vue';
 
 const props = defineProps({
@@ -111,7 +76,6 @@ const props = defineProps({
 const emit = defineEmits(['update:data']);
 
 const { t } = useI18n();
-const workflow = inject('workflow');
 
 const forms = ['text-field', 'select', 'checkbox', 'radio'];
 

src/components/newtab/workflow/edit/EditGetText.vue

@@ -7,7 +7,7 @@
         :value="data.regex"
         placeholder="Regex"
         class="w-11/12 bg-transparent p-2 focus:ring-0"
-        @change="updateData({ regex: $event.target.value })"
+        @input="updateData({ regex: $event.target.value })"
       />
       <ui-popover>
         <template #trigger>
@@ -52,80 +52,18 @@
       {{ t('workflow.blocks.get-text.includeTags') }}
     </ui-checkbox>
     <hr />
-    <ui-checkbox
-      :model-value="data.assignVariable"
-      block
-      @change="updateData({ assignVariable: $event })"
-    >
-      {{ t('workflow.variables.assign') }}
-    </ui-checkbox>
-    <ui-input
-      v-if="data.assignVariable"
-      :model-value="data.variableName"
-      :placeholder="t('workflow.variables.name')"
-      :title="t('workflow.variables.name')"
-      class="mt-2 w-full"
-      @change="updateData({ variableName: $event })"
+    <insert-workflow-data
+      :data="data"
+      variables
+      extra-row
+      @update="updateData"
     />
-    <ui-checkbox
-      :model-value="data.saveData"
-      block
-      class="mt-4"
-      @change="updateData({ saveData: $event })"
-    >
-      {{ t('workflow.blocks.get-text.checkbox') }}
-    </ui-checkbox>
-    <ui-select
-      v-if="data.saveData"
-      :model-value="data.dataColumn"
-      placeholder="Select column"
-      class="w-full mt-2 mb-4"
-      @change="updateData({ dataColumn: $event })"
-    >
-      <option
-        v-for="column in workflow.data.value.table"
-        :key="column.name"
-        :value="column.name"
-      >
-        {{ column.name }}
-      </option>
-    </ui-select>
-    <ui-checkbox
-      :model-value="data.addExtraRow"
-      block
-      class="mt-4"
-      @change="updateData({ addExtraRow: $event })"
-    >
-      {{ t('workflow.blocks.get-text.extraRow.checkbox') }}
-    </ui-checkbox>
-    <template v-if="data.addExtraRow">
-      <ui-input
-        :model-value="data.extraRowValue"
-        :title="t('workflow.blocks.get-text.extraRow.title')"
-        :placeholder="t('workflow.blocks.get-text.extraRow.placeholder')"
-        class="w-full my-2"
-        @change="updateData({ extraRowValue: $event })"
-      />
-      <ui-select
-        :model-value="data.extraRowDataColumn"
-        placeholder="Select column"
-        class="w-full"
-        @change="updateData({ extraRowDataColumn: $event })"
-      >
-        <option
-          v-for="column in workflow.data.value.table"
-          :key="column.name"
-          :value="column.name"
-        >
-          {{ column.name }}
-        </option>
-      </ui-select>
-    </template>
   </edit-interaction-base>
 </template>
 <script setup>
-import { inject, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import InsertWorkflowData from './InsertWorkflowData.vue';
 import EditInteractionBase from './EditInteractionBase.vue';
 
 const props = defineProps({
@@ -138,7 +76,6 @@ const emit = defineEmits(['update:data']);
 
 const { t } = useI18n();
 
-const workflow = inject('workflow');
 const regexExp = ref([...new Set(props.data.regexExp)]);
 
 const exps = [

src/components/newtab/workflow/edit/EditTakeScreenshot.vue

@@ -59,8 +59,8 @@
     >
       <option
         v-for="column in workflow.data.value.table"
-        :key="column.name"
-        :value="column.name"
+        :key="column.id || column.name"
+        :value="column.id || column.name"
       >
         {{ column.name }}
       </option>

src/components/newtab/workflow/edit/EditWebhook.vue

@@ -116,45 +116,7 @@
           class="w-full mt-2"
           @change="updateData({ dataPath: $event })"
         />
-        <ui-checkbox
-          :model-value="data.assignVariable"
-          block
-          class="mt-2"
-          @change="updateData({ assignVariable: $event })"
-        >
-          {{ t('workflow.variables.assign') }}
-        </ui-checkbox>
-        <ui-input
-          v-if="data.assignVariable"
-          :model-value="data.variableName"
-          :placeholder="t('workflow.variables.name')"
-          :title="t('workflow.variables.name')"
-          class="mt-2 w-full mb-2"
-          @change="updateData({ variableName: $event })"
-        />
-        <ui-checkbox
-          :model-value="data.saveData"
-          block
-          class="mt-2"
-          @change="updateData({ saveData: $event })"
-        >
-          {{ t('workflow.blocks.get-text.checkbox') }}
-        </ui-checkbox>
-        <ui-select
-          v-if="data.saveData"
-          :model-value="data.dataColumn"
-          placeholder="Select column"
-          class="mt-2 w-full"
-          @change="updateData({ dataColumn: $event })"
-        >
-          <option
-            v-for="column in workflow.data.value.table"
-            :key="column.name"
-            :value="column.name"
-          >
-            {{ column.name }}
-          </option>
-        </ui-select>
+        <insert-workflow-data :data="data" variables @update="updateData" />
       </ui-tab-panel>
     </ui-tab-panels>
     <ui-modal
@@ -182,9 +144,10 @@
   </div>
 </template>
 <script setup>
-import { ref, watch, defineAsyncComponent, inject } from 'vue';
+import { ref, watch, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { contentTypes } from '@/utils/shared';
+import InsertWorkflowData from './InsertWorkflowData.vue';
 
 const SharedCodemirror = defineAsyncComponent(() =>
   import('@/components/newtab/shared/SharedCodemirror.vue')
@@ -203,7 +166,6 @@ const { t } = useI18n();
 const methods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
 const notHaveBody = ['GET', 'DELETE'];
 
-const workflow = inject('workflow');
 const activeTab = ref('headers');
 const showBodyModal = ref(false);
 const headers = ref(JSON.parse(JSON.stringify(props.data.headers)));

src/components/newtab/workflow/edit/InsertWorkflowData.vue

@@ -0,0 +1,97 @@
+<template>
+  <template v-if="variables">
+    <ui-checkbox
+      :model-value="data.assignVariable"
+      block
+      class="mt-4"
+      @change="updateData({ assignVariable: $event })"
+    >
+      {{ t('workflow.variables.assign') }}
+    </ui-checkbox>
+    <ui-input
+      v-if="data.assignVariable"
+      :model-value="data.variableName"
+      :placeholder="t('workflow.variables.name')"
+      :title="t('workflow.variables.name')"
+      class="mt-2 w-full"
+      @change="updateData({ variableName: $event })"
+    />
+  </template>
+  <ui-checkbox
+    :model-value="data.saveData"
+    block
+    class="mt-4"
+    @change="updateData({ saveData: $event })"
+  >
+    {{ t('workflow.blocks.base.table.checkbox') }}
+  </ui-checkbox>
+  <ui-select
+    v-if="data.saveData"
+    :model-value="data.dataColumn"
+    :placeholder="t('workflow.blocks.base.table.select')"
+    class="w-full mt-2"
+    @change="updateData({ dataColumn: $event })"
+  >
+    <option
+      v-for="column in workflow.data.value.table"
+      :key="column.id"
+      :value="column.id"
+    >
+      {{ column.name }}
+    </option>
+  </ui-select>
+  <template v-if="extraRow">
+    <ui-checkbox
+      :model-value="data.addExtraRow"
+      class="mt-4"
+      block
+      @change="updateData({ addExtraRow: $event })"
+    >
+      {{ t('workflow.blocks.base.table.extraRow.checkbox') }}
+    </ui-checkbox>
+    <template v-if="data.addExtraRow">
+      <ui-input
+        :model-value="data.extraRowValue"
+        :title="t('workflow.blocks.base.table.extraRow.title')"
+        :placeholder="t('workflow.blocks.base.table.extraRow.placeholder')"
+        class="w-full mt-2 mb-2"
+        @change="updateData({ extraRowValue: $event })"
+      />
+      <ui-select
+        :model-value="data.extraRowDataColumn"
+        placeholder="Select column"
+        class="mt-1 w-full"
+        @change="updateData({ extraRowDataColumn: $event })"
+      >
+        <option
+          v-for="column in workflow.data.value.table"
+          :key="column.id"
+          :value="column.id"
+        >
+          {{ column.name }}
+        </option>
+      </ui-select>
+    </template>
+  </template>
+</template>
+<script setup>
+import { inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  extraRow: Boolean,
+  variables: Boolean,
+});
+const emit = defineEmits(['update']);
+
+const { t } = useI18n();
+const workflow = inject('workflow', {});
+
+function updateData(data) {
+  emit('update', data);
+}
+</script>

src/locales/en/blocks.json

@@ -12,6 +12,15 @@
       "base": {
         "moveToGroup": "Move block to blocks group",
         "selector": "Element selector",
+        "table": {
+          "checkbox": "Insert to table",
+          "select": "Select column",
+          "extraRow": {
+            "checkbox": "Add extra row",
+            "placeholder": "Value",
+            "title": "Value of the extra row"
+          }
+        },
         "findElement": {
           "placeholder": "Find element by",
           "options": {
@@ -224,11 +233,6 @@
         "suffixText": {
           "placeholder": "Text suffix",
           "title": "Add suffix to the text"
-        },
-        "extraRow": {
-          "checkbox": "Add extra row",
-          "placeholder": "Value",
-          "title": "Value of the extra row"
         }
       },
       "export-data": {

src/models/workflow.js

@@ -53,6 +53,13 @@ class Workflow extends Model {
       model.drawflow = decryptFlow(model, pass);
       model.isProtected = false;
     }
+    if (model.table && !model.table[0]?.id) {
+      model.table = model.table.map((column) => {
+        if (!column.id) column.id = column.name;
+
+        return column;
+      });
+    }
 
     return model;
   }

src/newtab/pages/workflows/[id].vue

@@ -1,43 +1,5 @@
 <template>
-  <div v-if="protectionState.needed" class="py-12 mx-auto max-w-md w-full">
-    <div
-      class="inline-block p-4 bg-green-200 dark:bg-green-400 mb-4 rounded-full"
-    >
-      <v-remixicon name="riShieldKeyholeLine" size="52" />
-    </div>
-    <h1 class="text-xl dark:text-gray-100 font-semibold">
-      {{ t('workflow.locked.title') }}
-    </h1>
-    <p class="text-gray-600 dark:text-gray-200">
-      {{ t('workflow.locked.body') }}
-    </p>
-    <form class="flex items-center mt-6" @submit.prevent="unlockWorkflow">
-      <ui-input
-        v-model="protectionState.password"
-        :placeholder="t('common.password')"
-        :type="protectionState.showPassword ? 'text' : 'password'"
-        autofocus
-        class="w-80 mr-4"
-      >
-        <template #append>
-          <v-remixicon
-            :name="protectionState.showPassword ? 'riEyeOffLine' : 'riEyeLine'"
-            class="absolute right-2"
-            @click="
-              protectionState.showPassword = !protectionState.showPassword
-            "
-          />
-        </template>
-      </ui-input>
-      <ui-button variant="accent">
-        {{ t('workflow.locked.unlock') }}
-      </ui-button>
-    </form>
-    <p v-if="protectionState.message" class="ml-2 text-red-500">
-      {{ t(`workflow.locked.messages.${protectionState.message}`) }}
-    </p>
-  </div>
-  <div v-else-if="workflow" class="flex h-screen">
+  <div v-if="workflow" class="flex h-screen">
     <div
       v-if="state.showSidebar"
       class="w-80 bg-white dark:bg-gray-800 py-6 relative border-l border-gray-100 dark:border-gray-700 dark:border-opacity-50 flex flex-col"
@@ -719,20 +681,6 @@ function workflowExporter() {
 
   exportWorkflow(currentWorkflow);
 }
-function unlockWorkflow() {
-  protectionState.message = '';
-
-  const decryptedFlow = decryptFlow(workflow.value, protectionState.password);
-
-  if (decryptedFlow.isError) {
-    protectionState.message = decryptedFlow.message;
-    return;
-  }
-
-  state.drawflow = decryptedFlow;
-  protectionState.password = '';
-  protectionState.needed = false;
-}
 function toggleSidebar() {
   state.showSidebar = !state.showSidebar;
   localStorage.setItem('workflow:sidebar', state.showSidebar);
@@ -908,12 +856,7 @@ onMounted(() => {
     return;
   }
 
-  if (workflow.value.isProtected) {
-    protectionState.needed = true;
-  } else {
-    state.drawflow = workflow.value.drawflow;
-  }
-
+  state.drawflow = workflow.value.drawflow;
   state.showSidebar =
     JSON.parse(localStorage.getItem('workflow:sidebar')) ?? true;
 

src/utils/shared.js

@@ -781,7 +781,7 @@ export const firstWorkflows = [
     id: nanoid(),
     name: 'Google search',
     createdAt: Date.now(),
-    drawflow: `{"drawflow":{"Home":{"data":{"d634ff22-5dfe-44dc-83d2-842412bd9fbf":{"id":"d634ff22-5dfe-44dc-83d2-842412bd9fbf","name":"trigger","data":{"type":"manual","interval":10},"class":"trigger","html":"BlockBasic","typenode":"vue","inputs":{},"outputs":{"output_1":{"connections":[{"node":"b9e7e0d4-e86a-4635-a352-31c63723fef4","output":"input_1"}]}},"pos_x":50,"pos_y":300},"b9e7e0d4-e86a-4635-a352-31c63723fef4":{"id":"b9e7e0d4-e86a-4635-a352-31c63723fef4","name":"new-tab","data":{"url":"https://google.com","active":true},"class":"new-tab","html":"BlockBasic","typenode":"vue","inputs":{"input_1":{"connections":[{"node":"d634ff22-5dfe-44dc-83d2-842412bd9fbf","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"09f3a14c-0514-4287-93b0-aa92b0064fba","output":"input_1"}]}},"pos_x":278,"pos_y":268},"09f3a14c-0514-4287-93b0-aa92b0064fba":{"id":"09f3a14c-0514-4287-93b0-aa92b0064fba","name":"forms","data":{"description":"Type query","selector":"[name='q']","markEl":false,"multiple":false,"selected":true,"type":"text-field","value":"Stackoverflow","delay":"120","events":[]},"class":"forms","html":"BlockBasic","typenode":"vue","inputs":{"input_1":{"connections":[{"node":"b9e7e0d4-e86a-4635-a352-31c63723fef4","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"5f76370d-aa3d-4258-8319-230fcfc49a3a","output":"input_1"}]}},"pos_x":551,"pos_y":290},"5f76370d-aa3d-4258-8319-230fcfc49a3a":{"id":"5f76370d-aa3d-4258-8319-230fcfc49a3a","name":"event-click","data":{"description":"Click search","selector":"center:nth-child(1) > .gNO89b","markEl":false,"multiple":false},"class":"event-click","html":"BlockBasic","typenode":"vue","inputs":{"input_1":{"connections":[{"node":"09f3a14c-0514-4287-93b0-aa92b0064fba","input":"output_1"}]}},"outputs":{"output_1":{"connections":[]}},"pos_x":794,"pos_y":308}}}}}`,
+    drawflow: `{"drawflow":{"Home":{"data":{"d634ff22-5dfe-44dc-83d2-842412bd9fbf":{"id":"d634ff22-5dfe-44dc-83d2-842412bd9fbf","name":"trigger","data":{"type":"manual","interval":10},"class":"trigger","html":"BlockBasic","typenode":"vue","inputs":{},"outputs":{"output_1":{"connections":[{"node":"b9e7e0d4-e86a-4635-a352-31c63723fef4","output":"input_1"}]}},"pos_x":50,"pos_y":300},"b9e7e0d4-e86a-4635-a352-31c63723fef4":{"id":"b9e7e0d4-e86a-4635-a352-31c63723fef4","name":"new-tab","data":{"url":"https://google.com","active":true},"class":"new-tab","html":"BlockBasic","typenode":"vue","inputs":{"input_1":{"connections":[{"node":"d634ff22-5dfe-44dc-83d2-842412bd9fbf","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"09f3a14c-0514-4287-93b0-aa92b0064fba","output":"input_1"}]}},"pos_x":278,"pos_y":268},"09f3a14c-0514-4287-93b0-aa92b0064fba":{"id":"09f3a14c-0514-4287-93b0-aa92b0064fba","name":"forms","data":{"description":"Type query","selector":"[name='q']","markEl":false,"multiple":false,"selected":true,"type":"text-field","value":"Automa Chrome Extension","delay":"120","events":[]},"class":"forms","html":"BlockBasic","typenode":"vue","inputs":{"input_1":{"connections":[{"node":"b9e7e0d4-e86a-4635-a352-31c63723fef4","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"5f76370d-aa3d-4258-8319-230fcfc49a3a","output":"input_1"}]}},"pos_x":551,"pos_y":290},"5f76370d-aa3d-4258-8319-230fcfc49a3a":{"id":"5f76370d-aa3d-4258-8319-230fcfc49a3a","name":"event-click","data":{"description":"Click search","selector":"center:nth-child(1) > .gNO89b","markEl":false,"multiple":false},"class":"event-click","html":"BlockBasic","typenode":"vue","inputs":{"input_1":{"connections":[{"node":"09f3a14c-0514-4287-93b0-aa92b0064fba","input":"output_1"}]}},"outputs":{"output_1":{"connections":[]}},"pos_x":794,"pos_y":308}}}}}`,
   },
   {
     id: nanoid(),

yarn.lock

@@ -307,6 +307,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.6.tgz#043b9aa3c303c0722e5377fef9197f4cf1796549"
   integrity sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==
 
+"@babel/parser@^7.16.4":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.3.tgz#b07702b982990bf6fdc1da5049a23fece4c5c3d0"
+  integrity sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==
+
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.15.4.tgz#dbdeabb1e80f622d9f0b583efb2999605e0a567e"
@@ -1706,6 +1711,16 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
+"@vue/compiler-core@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.31.tgz#d38f06c2cf845742403b523ab4596a3fda152e89"
+  integrity sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.31"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
 "@vue/compiler-dom@3.2.19":
   version "3.2.19"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.19.tgz#0607bc90de6af55fde73b09b3c4d0bf8cb597ed8"
@@ -1714,6 +1729,14 @@
     "@vue/compiler-core" "3.2.19"
     "@vue/shared" "3.2.19"
 
+"@vue/compiler-dom@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.31.tgz#b1b7dfad55c96c8cc2b919cd7eb5fd7e4ddbf00e"
+  integrity sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==
+  dependencies:
+    "@vue/compiler-core" "3.2.31"
+    "@vue/shared" "3.2.31"
+
 "@vue/compiler-sfc@3.2.19":
   version "3.2.19"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.19.tgz#d412195a98ebd49b84602f171719294a1d9549be"
@@ -1730,6 +1753,22 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.31.tgz#d02b29c3fe34d599a52c5ae1c6937b4d69f11c2f"
+  integrity sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.31"
+    "@vue/compiler-dom" "3.2.31"
+    "@vue/compiler-ssr" "3.2.31"
+    "@vue/reactivity-transform" "3.2.31"
+    "@vue/shared" "3.2.31"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
 "@vue/compiler-ssr@3.2.19":
   version "3.2.19"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.19.tgz#3e91ecf70f8f961c5f63eacd2139bcdab9a7a07c"
@@ -1738,6 +1777,14 @@
     "@vue/compiler-dom" "3.2.19"
     "@vue/shared" "3.2.19"
 
+"@vue/compiler-ssr@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.31.tgz#4fa00f486c9c4580b40a4177871ebbd650ecb99c"
+  integrity sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==
+  dependencies:
+    "@vue/compiler-dom" "3.2.31"
+    "@vue/shared" "3.2.31"
+
 "@vue/devtools-api@^6.0.0-beta.11":
   version "6.0.0-beta.15"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
@@ -1748,12 +1795,23 @@
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97"
   integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
 
-"@vue/reactivity@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.19.tgz#fc6e0f0106f295226835cfed5ff5f84d927bea65"
-  integrity sha512-FtachoYs2SnyrWup5UikP54xDX6ZJ1s5VgHcJp4rkGoutU3Ry61jhs+nCX7J64zjX992Mh9gGUC0LqTs8q9vCA==
+"@vue/reactivity-transform@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.31.tgz#0f5b25c24e70edab2b613d5305c465b50fc00911"
+  integrity sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==
   dependencies:
-    "@vue/shared" "3.2.19"
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.31"
+    "@vue/shared" "3.2.31"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
+"@vue/reactivity@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.31.tgz#fc90aa2cdf695418b79e534783aca90d63a46bbd"
+  integrity sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==
+  dependencies:
+    "@vue/shared" "3.2.31"
 
 "@vue/ref-transform@3.2.19":
   version "3.2.19"
@@ -1766,36 +1824,41 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/runtime-core@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.19.tgz#807715b7f4728abb84fa4a8efdbe37d8ddb4c6d3"
-  integrity sha512-qArZSWKxWsgKfxk9BelZ32nY0MZ31CAW2kUUyVJyxh4cTfHaXGbjiQB5JgsvKc49ROMNffv9t3/qjasQqAH+RQ==
+"@vue/runtime-core@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.31.tgz#9d284c382f5f981b7a7b5971052a1dc4ef39ac7a"
+  integrity sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==
   dependencies:
-    "@vue/reactivity" "3.2.19"
-    "@vue/shared" "3.2.19"
+    "@vue/reactivity" "3.2.31"
+    "@vue/shared" "3.2.31"
 
-"@vue/runtime-dom@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.19.tgz#7e8bf645754703e360fa132e4be9113edf2377bb"
-  integrity sha512-hIRboxXwafeHhbZEkZYNV0MiJXPNf4fP0X6hM2TJb0vssz8BKhD9cF92BkRgZztTQevecbhk0gu4uAPJ3dxL9A==
+"@vue/runtime-dom@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.31.tgz#79ce01817cb3caf2c9d923f669b738d2d7953eff"
+  integrity sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==
   dependencies:
-    "@vue/runtime-core" "3.2.19"
-    "@vue/shared" "3.2.19"
+    "@vue/runtime-core" "3.2.31"
+    "@vue/shared" "3.2.31"
     csstype "^2.6.8"
 
-"@vue/server-renderer@3.2.19":
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.19.tgz#870bcec9f7cdaee0c2187a169b6e636ab4362fb1"
-  integrity sha512-A9FNT7fgQJXItwdzWREntAgWKVtKYuXHBKGev/H4+ByTu8vB7gQXGcim01QxaJshdNg4dYuH2tEBZXCNCNx+/w==
+"@vue/server-renderer@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.31.tgz#201e9d6ce735847d5989403af81ef80960da7141"
+  integrity sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==
   dependencies:
-    "@vue/compiler-ssr" "3.2.19"
-    "@vue/shared" "3.2.19"
+    "@vue/compiler-ssr" "3.2.31"
+    "@vue/shared" "3.2.31"
 
 "@vue/shared@3.2.19":
   version "3.2.19"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.19.tgz#111ec3da18337d86274446984c49925b1b2b2dd7"
   integrity sha512-Knqhx7WieLdVgwCAZgTVrDCXZ50uItuecLh9JdLC8O+a5ayaSyIQYveUK3hCRNC7ws5zalHmZwfdLMGaS8r4Ew==
 
+"@vue/shared@3.2.31":
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.31.tgz#c90de7126d833dcd3a4c7534d534be2fb41faa4e"
+  integrity sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==
+
 "@vuex-orm/core@^0.36.4":
   version "0.36.4"
   resolved "https://registry.yarnpkg.com/@vuex-orm/core/-/core-0.36.4.tgz#9e2b1b8dfd74c2a508f1862ffa3e4a2c1e4cc60c"
@@ -7336,16 +7399,16 @@ vue-toastification@^2.0.0-rc.5:
   resolved "https://registry.yarnpkg.com/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz#92798604d806ae473cfb76ed776fae294280f8f8"
   integrity sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==
 
-vue@3.2.19:
-  version "3.2.19"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.19.tgz#da2c80a6a0271c7097fee9e31692adfd9d569c8f"
-  integrity sha512-6KAMdIfAtlK+qohTIUE4urwAv4A3YRuo8uAbByApUmiB0CziGAAPs6qVugN6oHPia8YIafHB/37K0O6KZ7sGmA==
+vue@^3.2.31:
+  version "3.2.31"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.31.tgz#e0c49924335e9f188352816788a4cca10f817ce6"
+  integrity sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==
   dependencies:
-    "@vue/compiler-dom" "3.2.19"
-    "@vue/compiler-sfc" "3.2.19"
-    "@vue/runtime-dom" "3.2.19"
-    "@vue/server-renderer" "3.2.19"
-    "@vue/shared" "3.2.19"
+    "@vue/compiler-dom" "3.2.31"
+    "@vue/compiler-sfc" "3.2.31"
+    "@vue/runtime-dom" "3.2.31"
+    "@vue/server-renderer" "3.2.31"
+    "@vue/shared" "3.2.31"
 
 vuedraggable@^4.1.0:
   version "4.1.0"