1 files changed, 62 insertions, 0 deletions
diff --git a/src/tools/password-strength-analyser/password-strength-analyser.vue b/src/tools/password-strength-analyser/password-strength-analyser.vue
new file mode 100644
index 0000000..7064ad0
--- /dev/null
+++ b/src/tools/password-strength-analyser/password-strength-analyser.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { getPasswordCrackTimeEstimation } from './password-strength-analyser.service';
+
+const password = ref('');
+const crackTimeEstimation = computed(() => getPasswordCrackTimeEstimation({ password: password.value }));
+
+const details = computed(() => [
+  {
+    label: 'Password length:',
+    value: crackTimeEstimation.value.passwordLength,
+  },
+  {
+    label: 'Entropy:',
+    value: Math.round(crackTimeEstimation.value.entropy * 100) / 100,
+  },
+  {
+    label: 'Character set size:',
+    value: crackTimeEstimation.value.charsetLength,
+  },
+  {
+    label: 'Score:',
+    value: `${Math.round(crackTimeEstimation.value.score * 100)} / 100`,
+  },
+]);
+</script>
+
+<template>
+  <div flex flex-col gap-3>
+    <c-input-text
+      v-model:value="password"
+      type="password"
+      placeholder="Enter a password..."
+      clearable
+      autofocus
+      raw-text
+      test-id="password-input"
+    />
+
+    <c-card text-center>
+      <div op-60>
+        Duration to crack this password with brute force
+      </div>
+      <div text-2xl data-test-id="crack-duration">
+        {{ crackTimeEstimation.crackDurationFormatted }}
+      </div>
+    </c-card>
+    <c-card>
+      <div v-for="({ label, value }) of details" :key="label" flex gap-3>
+        <div flex-1 text-right op-60>
+          {{ label }}
+        </div>
+        <div flex-1 text-left>
+          {{ value }}
+        </div>
+      </div>
+    </c-card>
+    <div op-70>
+      <span font-bold>Note: </span>
+      The computed strength is based on the time it would take to crack the password using a brute force approach, it does not take into account the possibility of a dictionary attack.
+    </div>
+  </div>
+</template>