Add Base64Decode utility

Co-Authored-By: David Czachor <[email protected]>
Co-Authored-By: Christopher McGale <[email protected]>
Co-Authored-By: Gerrie Swart <[email protected]>

cypress/e2e/utils/base64Decode.cy.ts

@@ -0,0 +1,21 @@
+import { Base64Decode } from '../../../src/utilities/Base64Decode'
+
+describe('Base64 Decoder', () => {
+    beforeEach(() => {
+        cy.visit('/tools/base-64-decode')
+    })
+
+    const text: string = 'Rm9vYmFy'
+
+    it('should allow the user to enter text to decode', () => {
+        cy.get('textarea[aria-label="input-to-decode"]').type(text)
+    })
+
+    it('should display the decoded text', () => {
+        cy.get('textarea[aria-label="input-to-decode"]').type(text)
+        cy.get('button[aria-label="decode-text"]').click()
+        const decodedText: string = Base64Decode(text)
+        cy.get('textarea[aria-label="decoded-text"]').should('have.value', decodedText)
+    })
+
+})

cypress/e2e/utils/base64Encode.cy.ts

@@ -1,6 +1,6 @@
-import { inspect, InspectionResult } from '../../../src/utilities/StringInspector'
+import { Base64Encode } from '../../../src/utilities/Base64Encode'
 
-describe('String Inspector', () => {
+describe('Base64 Encoder', () => {
     beforeEach(() => {
         cy.visit('/tools/base-64-encode')
     })
@@ -14,7 +14,7 @@ describe('String Inspector', () => {
     it('should display the encoded text', () => {
         cy.get('textarea[aria-label="input-to-encode"]').type(text)
         cy.get('button[aria-label="encode-text"]').click()
-        const encodedText: string = btoa(text)
+        const encodedText: string = Base64Encode(text)
         cy.get('textarea[aria-label="encoded-text"]').should('have.value', encodedText)
     })
 

src/router/index.ts

@@ -10,6 +10,7 @@ import Dates from '@/views/UnixEpochToDate.vue'
 import PHPArrayToJson from '@/views/PHPArrayToJSON.vue'
 import JSONToPHPArray from '@/views/JSONToPHPArray.vue'
 import Base64Encode from '@/views/Base64Encode.vue'
+import Base64Decode from '@/views/Base64Decode.vue'
 
 export const routes = [
     {
@@ -76,7 +77,12 @@ export const routes = [
                 path: 'base-64-encode',
                 name: 'Base64Encode',
                 component: Base64Encode,
-            }
+            },
+            {
+                path: 'base-64-decode',
+                name: 'Base64Decode',
+                component: Base64Decode,
+            },
         ],
     },
 ]

src/utilities/Base64Decode.ts

@@ -0,0 +1,3 @@
+export function Base64Decode(encodedString: string): string {
+    return atob(encodedString)
+}

src/views/Base64Decode.vue

@@ -0,0 +1,33 @@
+<template>
+<div class="">
+<div class="bg-white shadow rounded p-5">
+  <div class="flex justify-evenly w-4/5">
+        <textarea aria-label="input-to-decode" v-model="stringToDecode" type="text" placeholder="String to decode" rows="5"
+                  class="w-full p-2"></textarea>
+    <button aria-label="decode-text" class="bg-indigo-600 text-white text-sm leading-6 font-medium mx-4 rounded-lg w-28" type="button"
+            @click="decode">Decode
+    </button>
+  </div>
+  <textarea aria-label="decoded-text" :value="decodedString" readonly rows="30"
+            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+            placeholder="Decoded String"></textarea>
+</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+
+import { ref } from 'vue'
+import { Base64Decode } from '@/utilities/Base64Decode'
+
+const stringToDecode = ref<string>('')
+const decodedString = ref<string>('')
+
+function decode() {
+  try {
+    decodedString.value = Base64Decode(stringToDecode.value)
+  } catch (e: any) {
+    alert(e.message)
+  }
+}
+</script>

tests/utilities/Base64Decode.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+import { Base64Decode } from '@/utilities/Base64Decode'
+
+describe('Base64Encode', () => {
+    it('should decode to string', () => {
+        const input: string = 'Rm9vYmFy'
+
+        const expectedOutput = 'Foobar'
+
+        expect(Base64Decode(input)).toEqual(expectedOutput)
+    })
+
+    it('can handle empty string', function () {
+        const input: string = ''
+
+        expect(Base64Decode(input)).toEqual('')
+    })
+})