feat(tool): added random port generator

CHANGELOG.md

@@ -6,8 +6,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Next
 ### Changed
 - Switched to [Nuxt.js](//nuxtjs.org)
-    - Server-Side rendered static app 
-    - Better SEO
 - Switched to Typescript using class components decorators from [nuxt-property-decorator](https://github.com/nuxt-community/nuxt-property-decorator)
 - UI and theme reworked
 - URL path changed
@@ -18,6 +16,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Added [/how-to-report-bug-or-request](/how-to-report-bug-or-request) route to explain how to report bug and request features
 - Added i18n support
+- Added new tools
+  - [Random port generator](https://it-tools.tech/random-port-generator)
 
 ### Removed
 - Removed markdown editor

pages/tools/sys-admin/random-port-generator.vue

@@ -0,0 +1,61 @@
+<template>
+  <ToolWrapper :config="config()">
+    <v-text-field
+      v-model="port"
+      outlined
+      class="centered-input"
+      readonly
+    />
+
+    <div class="text-center">
+      <v-btn depressed class="mr-4" @click="refreshPort">
+        Refresh
+      </v-btn>
+      <v-btn depressed @click="copy(port.toString())">
+        Copy port
+      </v-btn>
+    </div>
+  </ToolWrapper>
+</template>
+
+<script lang="ts">
+
+import {Component} from 'nuxt-property-decorator'
+import {CopyableMixin} from '@/mixins/copyable.mixin'
+import type {ToolConfig} from '@/types/ToolConfig'
+import Tool from '~/components/Tool.vue'
+import {randIntFromInterval} from '~/utils/random'
+
+const generatePort = () => randIntFromInterval(1024, 65535)
+
+@Component({
+  mixins: [CopyableMixin]
+})
+export default class RandomPortGenerator extends Tool {
+  config(): ToolConfig {
+    return {
+      title: 'Random port generator',
+      description: 'Random port generator without the range of "known" ports (0-1023).',
+      icon: 'mdi-lan-pending',
+      keywords: ['system', 'port', 'lan']
+    }
+  }
+
+  port!: number
+
+  created() {
+    this.refreshPort()
+  }
+
+  refreshPort() {
+    this.port = generatePort()
+  }
+}
+</script>
+
+<style scoped lang="less">
+::v-deep .centered-input input {
+  text-align: center;
+  font-family: Consolas, monospace;
+}
+</style>