Add random string generator

src/components/HeaderBar.vue

@@ -1,12 +1,10 @@
 <template>
   <div class="header">
-    <h2>Aliases</h2>
+    <slot />
-    <PlusIcon class="icon" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { PlusIcon } from '@heroicons/vue/24/outline';
 
 </script>
 

src/css/main.css

@@ -4,3 +4,16 @@
   cursor: pointer;
 }
 
+.icon-with-text {
+  svg {
+    width: 2em;
+    height: 2em;
+  }
+  padding: .5em;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: 1px solid black;
+  border-radius: 20px;
+}

src/lib/alias-generator.ts

@@ -0,0 +1,9 @@
+export function generateRandomString(length: number): string {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  const charactersLength = chars.length;
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}

src/router.ts

@@ -1,14 +1,16 @@
-import { createMemoryHistory, createRouter } from 'vue-router'
+import { createMemoryHistory, createRouter, createWebHistory } from 'vue-router'
 
 import HomeView from '@/views/HomeView.vue'
 import OptionsView from '@/views/OptionsView.vue'
+import AddAliasView from '@/views/AddAliasView.vue'
 
 const routes = [
-  { path: '/', component: HomeView },
+  { name: 'home', path: '/', component: HomeView },
-  { path: '/options', component: OptionsView },
+  { name: 'add_alias', path: '/add_alias', component: AddAliasView },
+  { name: 'options', path: '/options', component: OptionsView },
 ]
 
 export default createRouter({
-  history: createMemoryHistory(),
+  history: createWebHistory(),
   routes,
 })

src/views/AddAliasView.vue

@@ -0,0 +1,44 @@
+<template>
+  <HeaderBar>
+    <h2>Aliases</h2>
+    <div class="header-buttons">
+      <div class="icon-with-text" @click="newAlias">
+        <PlusCircleIcon class="icon" /> save
+      </div>
+
+      <RouterLink :to="{ name: 'home' }" class="icon-with-text">
+        <XMarkIcon class="icon" /> cancel
+      </RouterLink>
+
+    </div>
+  </HeaderBar>
+  <div>
+    <input type="text" name="alias" ref="aliasInput" />
+    <button @click="newAlias">Generate new alias</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import HeaderBar from '@/components/HeaderBar.vue';
+import { PlusCircleIcon, XMarkIcon } from '@heroicons/vue/24/outline';
+import { generateRandomString } from '@/lib/alias-generator';
+
+const aliasInput = ref();
+
+onMounted(async () => {
+  newAlias()
+})
+
+const newAlias = async () => {
+  aliasInput.value.value = generateRandomString(10);
+}
+
+</script>
+
+<style scoped>
+.header-buttons {
+  display: flex;
+  flex-direction: row;
+}
+</style>

src/views/HomeView.vue

@@ -1,11 +1,18 @@
 <template>
-  <HeaderBar />
+  <HeaderBar>
+    <h2>Aliases</h2>
+    <RouterLink :to="{ name: 'add_alias' }">
+      <PlusIcon class="icon" />
+    </RouterLink>
+  </HeaderBar>
+
   <AliasList />
 </template>
 
 <script setup lang="ts">
 import HeaderBar from '@/components/HeaderBar.vue';
 import AliasList from '@/components/AliasList.vue';
+import { PlusIcon } from '@heroicons/vue/24/outline';
 
 </script>