From 03a7e8c42ded0c8cb4bba6235280a03de0256d3f Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Mon, 31 May 2021 17:53:04 +0200
Subject: [PATCH] feat(tool): added URL encoder/decoder

---
 CHANGELOG.md                      |  1 +
 tools/web/url-encoder-decoder.vue | 76 +++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 tools/web/url-encoder-decoder.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 839c52e4..19cc2e3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - URL path changed
     - `/hash` -> [`/hash-text`](https://it-tools.tech/hash-text)
     - `/cypher` -> [`/cypher-uncyfer-text`](https://it-tools.tech/cypher-uncyfer-text)
+    - `/url-encoder` -> [`/url-encoder-decoder`](https://it-tools.tech/url-encoder-decoder)
 - [Crontab generator](https://it-tools.tech/crontab-generator) now handle 6 digits format (second support)  
 
 ### Added
diff --git a/tools/web/url-encoder-decoder.vue b/tools/web/url-encoder-decoder.vue
new file mode 100644
index 00000000..7721071e
--- /dev/null
+++ b/tools/web/url-encoder-decoder.vue
@@ -0,0 +1,76 @@
+<template>
+  <ToolWrapper :config="$toolConfig">
+    <v-textarea
+      v-model="decoded"
+      outlined
+      label="URL decoded string"
+      :rules="rules.decoded"
+    />
+    <v-textarea
+      v-model="encoded"
+      outlined
+      label="URL encoded string"
+      :rules="rules.encoder"
+    />
+
+    <div class="text-center">
+      <v-btn @click="copy(decoded)">Copy decoded</v-btn>
+      <v-btn @click="copy(encoded)">Copy encoded</v-btn>
+    </div>
+  </ToolWrapper>
+</template>
+
+<tool>
+title: 'URL encode / decode'
+description: 'Lorem Ipsum dolor sit amet'
+icon: 'mdi-link-variant'
+keywords: [ 'system', 'port', 'lan' ]
+path: '/url-encoder-decoder'
+</tool>
+
+<script lang="ts">
+
+import {Component} from 'nuxt-property-decorator'
+import {CopyableMixin} from '@/mixins/copyable.mixin'
+import Tool from '~/components/Tool.vue'
+
+@Component({
+  mixins: [CopyableMixin]
+})
+export default class RandomPortGenerator extends Tool {
+  decoded = 'Hello world :)'
+  rules = {
+    decoder: [
+      (v: string) => {
+        try {
+          decodeURIComponent(v)
+          return true
+        } catch (_) {
+          return 'Impossible to parse this string'
+        }
+      }
+    ],
+    encoder: [
+      (v: string) => {
+        try {
+          encodeURIComponent(v)
+          return true
+        } catch (_) {
+          return 'Impossible to parse this string'
+        }
+      }
+    ]
+  }
+
+  get encoded() {
+    return encodeURIComponent(this.decoded)
+  }
+
+  set encoded(value: string) {
+    try {
+      this.decoded = decodeURIComponent(value)
+    } catch (_) {
+    }
+  }
+}
+</script>