fcc5d99d40
* add vitest * initialize lib w/ tests * move to dev dep * run tests in CI * update file names * move api folder to lib * move api and api types to same folder * update generator outpath * rm husky * i guess i _did_ need those types * reorg types * extract validators into testable components * (WIP) start composable testing * fix import type * fix linter complaint * simplify icon type def * fix linter errors (maybe?) * rename client file for sorting
55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
import { computed, Ref, ref, useContext } from "@nuxtjs/composition-api";
|
|
import { scorePassword } from "~/lib/validators";
|
|
|
|
export function usePasswordField() {
|
|
const show = ref(false);
|
|
|
|
const { $globals } = useContext();
|
|
|
|
const passwordIcon = computed(() => {
|
|
return show.value ? $globals.icons.eyeOff : $globals.icons.eye;
|
|
});
|
|
const inputType = computed(() => (show.value ? "text" : "password"));
|
|
|
|
const togglePasswordShow = () => {
|
|
show.value = !show.value;
|
|
};
|
|
|
|
return {
|
|
inputType,
|
|
togglePasswordShow,
|
|
passwordIcon,
|
|
};
|
|
}
|
|
|
|
export const usePasswordStrength = (password: Ref<string>) => {
|
|
const score = computed(() => {
|
|
return scorePassword(password.value);
|
|
});
|
|
|
|
const strength = computed(() => {
|
|
if (score.value < 50) {
|
|
return "Weak";
|
|
} else if (score.value < 80) {
|
|
return "Good";
|
|
} else if (score.value < 100) {
|
|
return "Strong";
|
|
} else {
|
|
return "Very Strong";
|
|
}
|
|
});
|
|
|
|
const color = computed(() => {
|
|
if (score.value < 50) {
|
|
return "error";
|
|
} else if (score.value < 80) {
|
|
return "warning";
|
|
} else if (score.value < 100) {
|
|
return "info";
|
|
} else {
|
|
return "success";
|
|
}
|
|
});
|
|
|
|
return { score, strength, color };
|
|
};
|