Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add language picker for all languages #283

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add language picker for all languages #283

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c9eff86
docs(demo): add language picker for all languages
MrWook Oct 1, 2024
a1c61e7
Merge branch 'master' into feat/demo-add-language-picker
MrWook Oct 1, 2024
8bcaa72
Merge branch 'master' into feat/demo-add-language-picker
MrWook Oct 4, 2024
bb8119b
Merge branch 'master' into feat/demo-add-language-picker
MrWook Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 99 additions & 11 deletions docs/.vuepress/components/ZxcvbnInteractive.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,17 @@
Use recommended dictionary
</label>
</li>
<li v-if="useDictionaries">
<Multiselect
v-model="activeLanguages"
:options="languages"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
placeholder="Pick some"
/>
</li>

<li>
<label>
Expand Down Expand Up @@ -65,18 +76,20 @@

<script>
import crossFetch from 'cross-fetch'
import Multiselect from 'vue-multiselect'
import {
ZxcvbnFactory,
debounce,
} from '../../../packages/libraries/main/dist/index'
import * as zxcvbnCommonPackage from '../../../packages/languages/common/dist/index'
import * as zxcvbnEnPackage from '../../../packages/languages/en/dist/index'
import translationKeys from '../../../packages/libraries/main/dist/data/translationKeys'
import { matcherPwnedFactory } from '@zxcvbn-ts/matcher-pwned'

const matcherPwned = matcherPwnedFactory(crossFetch)
export default {
name: 'ZxcvbnInteractive',
components: {
Multiselect,
},
data() {
return {
password: '',
Expand All @@ -90,12 +103,37 @@ export default {
debounce: debounce(this.useZxcvbn, 200),
userInputs: '',
zxcvbn: null,
activeLanguages: ['en', 'common'],
languages: [
'ar',
'common',
'cs',
'da-dk',
'de',
'en',
'es-es',
'fi',
'fr',
'id',
'it',
'ja',
'nl-be',
'pl',
'pl-br',
],
loadedLanguagePackages: {},
}
},
mounted() {
async mounted() {
await this.fillLoadedLanguages(this.activeLanguages)
this.setOptions(true)
},
methods: {
async loadLanguagePack(language) {
return await import(
`../../../packages/languages/${language}/dist/index.mjs`
)
},
setResult(result) {
this.result = result
},
Expand All @@ -107,16 +145,22 @@ export default {
useLevenshteinDistance: this.useLevenshteinDistance,
}
if (this.useDictionaries) {
options.dictionary = {
...zxcvbnCommonPackage.dictionary,
...zxcvbnEnPackage.dictionary,
}
options.dictionary = Object.entries(this.loadedLanguagePackages)
.filter(([language]) => {
return this.activeLanguages.includes(language)
})
.reduce((acc, [language, languagePackage]) => {
return {
...acc,
...languagePackage.dictionary,
}
}, {})
}
if (this.useTranslations) {
options.translations = zxcvbnEnPackage.translations
if (this.useTranslations && this.loadedLanguagePackages.en) {
options.translations = this.loadedLanguagePackages.en.translations
}
if (this.useGraphs) {
options.graphs = zxcvbnCommonPackage.adjacencyGraphs
if (this.useGraphs && this.loadedLanguagePackages.common) {
options.graphs = this.loadedLanguagePackages.common.adjacencyGraphs
}
const customMatcher = {}
if (hasPwnedMatcher) {
Expand All @@ -134,6 +178,15 @@ export default {
}
console.log(this.result)
},
async fillLoadedLanguages(newValue) {
const promises = newValue.map(async (language) => {
if (!this.loadedLanguagePackages[language]) {
this.loadedLanguagePackages[language] =
await this.loadLanguagePack(language)
}
})
await Promise.all(promises)
},
},
watch: {
password() {
Expand Down Expand Up @@ -167,9 +220,17 @@ export default {
this.setOptions()
}
},
async activeLanguages(newValue) {
if (newValue) {
await this.fillLoadedLanguages(newValue)
}
this.password = ''
this.setOptions()
},
},
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style>
.example input[type='text'] {
Expand All @@ -192,4 +253,31 @@ export default {
padding: 1em 0 1em;
margin-bottom: 2em;
}

/* in your app.scss of laravel */
.multiselect .multiselect__tags {
background-color: var(--vp-c-gutter);
border-color: var(--vp-c-border);
color: var(--vp-c-text);
}

.multiselect__tags .multiselect__single {
color: var(--vp-c-text);
}

.multiselect .multiselect__input {
background-color: var(--vp-c-gutter);
border-color: var(--vp-c-border);
color: var(--vp-c-text);
}

.multiselect .multiselect__content-wrapper {
background-color: var(--vp-c-gutter);
border-color: var(--vp-c-border);
color: var(--vp-c-text);
}

.multiselect .multiselect__option--selected {
background-color: var(--vp-c-bg-elv);
}
</style>
Loading