tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🐛 Fixes regex for validating custom CSS input

This commit is contained in:
Alicia Sykes 2021-08-22 15:46:08 +01:00
parent ade0da19ed
commit b0384d8f06
1 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Configuration/CustomCss.vue
View File

@ -1,11 +1,17 @@
<template> <template>
<div class="css-editor-outer"> <div class="css-editor-outer">
<!-- Add raw custom CSS -->
<div class="css-wrapper">
<h2 class="css-input-title">Custom CSS</h2>
<textarea class="css-editor" v-model="customCss" /> <textarea class="css-editor" v-model="customCss" />
<button class="save-button" @click="save()">{{ $t('config.css-save-btn') }}</button> <button class="save-button" @click="save()">{{ $t('config.css-save-btn') }}</button>
<p class="quick-note"> <p class="quick-note">
<b>{{ $t('config.css-note-label') }}:</b> <b>{{ $t('config.css-note-label') }}:</b>
{{ $t('config.css-note-l1') }} {{ $t('config.css-note-l2') }} {{ $t('config.css-note-l3') }} {{ $t('config.css-note-l1') }} {{ $t('config.css-note-l2') }} {{ $t('config.css-note-l3') }}
</p> </p>
</div>
<!-- UI color configurator -->
<CustomThemeMaker :themeToEdit="currentTheme" class="color-config" /> <CustomThemeMaker :themeToEdit="currentTheme" class="color-config" />
</div> </div>
</template> </template>
@ -31,9 +37,11 @@ export default {
}; };
}, },
methods: { methods: {
/* A regex to validate the users CSS */
validate(css) { validate(css) {
return css === '' || css.match(/((?:^\s*)([\w#.@*,:\-.:>,*\s]+)\s*{(?:[\s]*)((?:[A-Za-z\- \s]+[:]\s*['"0-9\w .,/()\-!%]+;?)*)*\s*}(?:\s*))/gmi); return css === '' || css.match(/([#.@]?[\w.:> ]+)[\s]{[\r\n]?([A-Za-z\- \r\n\t]+[:][\s]*[\w ./()\-!]+;[\r\n]*(?:[A-Za-z\- \r\n\t]+[:][\s]*[\w ./()\-!]+;[\r\n]*(2)*)*)}/gmi);
}, },
/* Save custom CSS in browser, call inject, and show success message */
save() { save() {
let msg = ''; let msg = '';
if (this.validate(this.customCss)) { if (this.validate(this.customCss)) {
@ -48,6 +56,7 @@ export default {
} }
this.$toasted.show(msg); this.$toasted.show(msg);
}, },
/* Formats CSS, and applies it to page */
inject(userStyles) { inject(userStyles) {
const cleanedCss = userStyles.replace(/<\/?[^>]+(>|$)/g, ''); const cleanedCss = userStyles.replace(/<\/?[^>]+(>|$)/g, '');
const style = document.createElement('style'); const style = document.createElement('style');
@ -63,6 +72,12 @@ export default {
div.css-editor-outer { div.css-editor-outer {
text-align: center; text-align: center;
padding-bottom: 1rem; padding-bottom: 1rem;
display: flex;
flex-direction: column;
h2.css-input-title {
margin: 0.5rem 0 0.2rem;
}
} }
button.save-button { button.save-button {
@ -104,6 +119,8 @@ p.quick-note {
width: 80%; width: 80%;
margin: 1rem auto; margin: 1rem auto;
padding: 0.5rem; padding: 0.5rem;
font-size: 0.9rem;
opacity: var(--dimming-factor);
border-radius: var(--curve-factor); border-radius: var(--curve-factor);
} }