From ed492c4021357e859e0db0cf55666d199cb8f29d Mon Sep 17 00:00:00 2001 From: "severin.plewe@googlemail.com" Date: Thu, 19 Dec 2024 18:20:42 +0100 Subject: [PATCH 1/5] Added Password Strength Component in a seperate file --- .../src/components/Login/PasswordStength.vue | 126 + client/src/components/Login/RegisterForm.vue | 12 +- client/types/zxcvbn.d.ts | 18 + .../static/fits_graph_viewer.js | 1 + package-lock.json | 5972 +++++++++++++++++ package.json | 12 +- 6 files changed, 6138 insertions(+), 3 deletions(-) create mode 100644 client/src/components/Login/PasswordStength.vue create mode 100644 client/types/zxcvbn.d.ts create mode 100644 config/plugins/visualizations/fits_graph_viewer/static/fits_graph_viewer.js create mode 100644 package-lock.json diff --git a/client/src/components/Login/PasswordStength.vue b/client/src/components/Login/PasswordStength.vue new file mode 100644 index 000000000000..28c6993a8ebc --- /dev/null +++ b/client/src/components/Login/PasswordStength.vue @@ -0,0 +1,126 @@ + + + + + diff --git a/client/src/components/Login/RegisterForm.vue b/client/src/components/Login/RegisterForm.vue index d2237174c182..21c4273a8a1c 100644 --- a/client/src/components/Login/RegisterForm.vue +++ b/client/src/components/Login/RegisterForm.vue @@ -13,6 +13,7 @@ import { BFormGroup, BFormInput, BFormText, + BModal, } from "bootstrap-vue"; import { computed, type Ref, ref } from "vue"; @@ -22,6 +23,7 @@ import { withPrefix } from "@/utils/redirect"; import { errorMessageAsString } from "@/utils/simple-error"; import ExternalLogin from "@/components/User/ExternalIdentities/ExternalLogin.vue"; +import PasswordStrength from "@/components/Login/PasswordStength.vue"; interface Props { sessionCsrfToken: string; @@ -43,7 +45,7 @@ const emit = defineEmits<{ const email = ref(null); const confirm = ref(null); -const password = ref(null); +const password = ref(null); const username = ref(null); const subscribe = ref(null); const messageText: Ref = ref(null); @@ -145,7 +147,10 @@ async function submit() { name="password" type="password" autocomplete="new-password" - required /> + required + /> + + @@ -217,7 +222,10 @@ async function submit() { + diff --git a/client/src/components/Login/RegisterForm.vue b/client/src/components/Login/RegisterForm.vue index d42b0552a3a3..0d951aab06b7 100644 --- a/client/src/components/Login/RegisterForm.vue +++ b/client/src/components/Login/RegisterForm.vue @@ -38,6 +38,7 @@ interface Props { } const props = defineProps(); +const showPassword = ref(false); const emit = defineEmits<{ (e: "toggle-login"): void; @@ -64,6 +65,10 @@ function toggleLogin() { emit("toggle-login"); } +function togglePasswordVisibility() { + showPassword.value = !showPassword.value; +} + async function submit() { disableCreate.value = true; @@ -145,10 +150,20 @@ async function submit() { id="register-form-password" v-model="password" name="password" - type="password" + :type="showPassword ? 'text' : 'password'" autocomplete="new-password" - required + required /> + + + @@ -245,6 +260,21 @@ async function submit() { border: 1px solid #ccc; padding: 2px 5px; border-radius: 4px; - } + } } + +.password-toggle-icon { + position: absolute; + right: 0.75rem; + background: none; + border: none; + cursor: pointer; + color: $gray-600; + font-size: 1rem; +} + +.password-toggle-icon:hover { + color: $gray-900; +} + From 44f4e95821c3384164107b36b31947aa20adc959 Mon Sep 17 00:00:00 2001 From: "severin.plewe@googlemail.com" Date: Tue, 14 Jan 2025 12:22:59 +0100 Subject: [PATCH 4/5] Modified Password Component and files inside client folder --- client/package.json | 9 +- .../src/components/Login/PasswordStrength.vue | 37 +- client/tsconfig.json | 2 +- client/types/{zxcvbn.d.ts => zxcvbn.ts} | 0 client/yarn.lock | 31 +- .../static/fits_graph_viewer.js | 1 - package-lock.json | 5972 ----------------- package.json | 12 +- 8 files changed, 62 insertions(+), 6002 deletions(-) rename client/types/{zxcvbn.d.ts => zxcvbn.ts} (100%) delete mode 100644 config/plugins/visualizations/fits_graph_viewer/static/fits_graph_viewer.js delete mode 100644 package-lock.json diff --git a/client/package.json b/client/package.json index de12b9f71852..9befb9f38d38 100644 --- a/client/package.json +++ b/client/package.json @@ -45,6 +45,9 @@ "@types/jest": "^29.5.12", "@vueuse/core": "^10.5.0", "@vueuse/math": "^10.9.0", + "@zxcvbn-ts/core": "^3.0.4", + "@zxcvbn-ts/language-common": "^3.0.4", + "@zxcvbn-ts/language-en": "^3.0.2", "assert": "^2.1.0", "axios": "^1.6.2", "babel-runtime": "^6.26.0", @@ -117,7 +120,8 @@ "vue2-teleport": "^1.0.1", "vuedraggable": "^2.24.3", "winbox": "^0.2.82", - "xml-beautifier": "^0.5.0" + "xml-beautifier": "^0.5.0", + "zxcvbn": "^4.4.2" }, "scripts": { "develop": "NODE_ENV=development gulp && webpack-dev-server", @@ -213,7 +217,8 @@ "xml-js": "^1.6.11", "xml2js": "^0.6.2", "yaml-jest": "^1.2.0", - "yaml-loader": "^0.8.0" + "yaml-loader": "^0.8.0", + "@types/zxcvbn": "^4.4.5" }, "peerDependencies": { "postcss": "^8.4.6" diff --git a/client/src/components/Login/PasswordStrength.vue b/client/src/components/Login/PasswordStrength.vue index f32cbd6993ef..c72570e4d26b 100644 --- a/client/src/components/Login/PasswordStrength.vue +++ b/client/src/components/Login/PasswordStrength.vue @@ -1,8 +1,7 @@