From 56fec664a9bb5c1539423e396c127c4a45e8f4e9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 19 Nov 2018 20:22:46 +0300 Subject: cleanup and optimization --- src/modules/config.js | 6 +++--- src/modules/instance.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'src/modules') diff --git a/src/modules/config.js b/src/modules/config.js index 375d0167..96f2fd5e 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -1,5 +1,5 @@ import { set, delete as del } from 'vue' -import StyleSetter from '../services/style_setter/style_setter.js' +import { setPreset, setColors } from '../services/style_setter/style_setter.js' const browserLocale = (window.navigator.language || 'en').split('-')[0] @@ -51,10 +51,10 @@ const config = { commit('setOption', {name, value}) switch (name) { case 'theme': - StyleSetter.setPreset(value, commit) + setPreset(value, commit) break case 'customTheme': - StyleSetter.setColors(value, commit) + setColors(value, commit) } } } diff --git a/src/modules/instance.js b/src/modules/instance.js index cb724821..611212c3 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -1,5 +1,5 @@ import { set } from 'vue' -import StyleSetter from '../services/style_setter/style_setter.js' +import { setPreset } from '../services/style_setter/style_setter.js' const defaultState = { // Stuff from static/config.json and apiConfig @@ -54,7 +54,7 @@ const instance = { dispatch('setPageTitle') break case 'theme': - StyleSetter.setPreset(value, commit) + setPreset(value, commit) } } } -- cgit v1.2.3-70-g09d2 From 406df4399b630268c1028664f3b818571d6f8e4f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 30 Nov 2018 16:39:07 +0300 Subject: avatars shadows, also allows drop-shadow use --- src/components/notification/notification.js | 3 ++- src/components/notification/notification.vue | 2 +- src/components/notifications/notifications.scss | 6 +++++ src/components/status/status.js | 3 ++- src/components/status/status.vue | 13 +++++++++- src/components/style_switcher/style_switcher.vue | 12 ++++++++++ .../user_card_content/user_card_content.js | 3 ++- .../user_card_content/user_card_content.vue | 7 +++++- src/i18n/en.json | 7 ++++++ src/modules/interface.js | 6 +++++ src/services/style_setter/style_setter.js | 28 ++++++++++++++++++++-- 11 files changed, 82 insertions(+), 8 deletions(-) (limited to 'src/modules') diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index c786f2cc..4dea63bb 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -6,7 +6,8 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/ const Notification = { data () { return { - userExpanded: false + userExpanded: false, + betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, props: [ diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 72c1ca69..f98afbe0 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -2,7 +2,7 @@
- +
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 87c89f6a..d17ae25d 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -49,11 +49,17 @@ .avatar-compact { width: 32px; height: 32px; + box-shadow: var(--avatarStatusShadow); border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); overflow: hidden; line-height: 0; + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + &.animated::before { display: none; } diff --git a/src/components/status/status.js b/src/components/status/status.js index 10716583..725bc3f8 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -33,7 +33,8 @@ const Status = { showingTall: false, expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined' ? !this.$store.state.instance.collapseMessageWithSubject - : !this.$store.state.config.collapseMessageWithSubject + : !this.$store.state.config.collapseMessageWithSubject, + betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, computed: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 4541c560..26be335c 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -21,7 +21,7 @@
- +
@@ -464,8 +464,14 @@ .status .avatar-compact { width: 32px; height: 32px; + box-shadow: var(--avatarStatusShadow); border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } } .avatar { @@ -477,6 +483,11 @@ overflow: hidden; position: relative; + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + img { width: 100%; height: 100%; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index fa173b98..66fe0f6b 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -278,6 +278,18 @@
+
+ + filter: drop-shadow() + + + drop-shadow + spread-radius + inset + +

{{$t('settings.style.shadows.filter_hint.inset_ignored')}}

+

{{$t('settings.style.shadows.filter_hint.spread_zero')}}

+
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 254d1666..97cd4983 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -7,7 +7,8 @@ export default { return { hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined' ? this.$store.state.instance.hideUserStats - : this.$store.state.config.hideUserStats + : this.$store.state.config.hideUserStats, + betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, computed: { diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 5529948e..cca418ff 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -10,7 +10,7 @@
- +
@@ -159,6 +159,11 @@ box-shadow: var(--avatarShadow); object-fit: cover; + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + &.animated::before { display: none; } diff --git a/src/i18n/en.json b/src/i18n/en.json index 8847b11e..7f5a2a4f 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -236,6 +236,13 @@ "spread": "Spread", "inset": "Inset", "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.", + "filter_hint": { + "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.", + "text": "Please note that {0} does not support {1} parameter and {2} keyword.", + "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero", + "inset_ignored": "Inset shadows using will be ignored", + "inset_substituted": "Inset shadows will be substituted with {1} equivalent" + }, "components": { "panel": "Panel", "panelHeader": "Panel header", diff --git a/src/modules/interface.js b/src/modules/interface.js index 07489685..132fb08d 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -4,6 +4,12 @@ const defaultState = { settings: { currentSaveStateNotice: null, noticeClearTimeout: null + }, + browserSupport: { + cssFilter: window.CSS && window.CSS.supports && ( + window.CSS.supports('filter', 'drop-shadow(0 0)') || + window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)') + ) } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 7c375206..cff81c40 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -110,6 +110,24 @@ const getCssShadow = (input) => { ]).join(' ')).join(', ') } +const getCssShadowFilter = (input) => { + if (input.length === 0) { + return 'none' + } + + return input + // drop-shadow doesn't support inset or spread + .filter((shad) => console.log(shad) || !shad.inset && Number(shad.spread) === 0) + .map((shad) => [ + shad.x, + shad.y, + // drop-shadow's blur is twice as strong compared to box-shadow + shad.blur / 2 + ].map(_ => _ + 'px').concat([ + getCssColor(shad.color, shad.alpha) + ]).join(' ')).join(', ') +} + const getCssColor = (input, a) => { let rgb = {} if (typeof input === 'object') { @@ -384,7 +402,12 @@ const generateShadows = (input) => { return { rules: { - shadows: Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';') + shadows: Object + .entries(shadows) + // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally + // convert all non-inset shadows into filter: drop-shadow() to boost performance + .map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}; --${k}ShadowFilter: ${getCssShadowFilter(v)}`) + .join(';') }, theme: { shadows @@ -467,5 +490,6 @@ export { generateFonts, generatePreset, composePreset, - getCssShadow + getCssShadow, + getCssShadowFilter } -- cgit v1.2.3-70-g09d2 From 822559afd889262f0dc6989531a54a21a01beadc Mon Sep 17 00:00:00 2001 From: raeno Date: Mon, 3 Dec 2018 22:43:58 +0400 Subject: Humanize validation errors returned on registration --- src/components/registration/registration.js | 10 ++++++---- src/components/registration/registration.vue | 6 ++++-- src/modules/errors.js | 12 ++++++++++++ 3 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 src/modules/errors.js (limited to 'src/modules') diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index f7f8a720..7e8b1848 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -1,9 +1,10 @@ import oauthApi from '../../services/new_api/oauth.js' +import { humanizeErrors } from '../../modules/errors' const registration = { data: () => ({ user: {}, - error: false, + errors: [], registering: false }), created () { @@ -37,7 +38,8 @@ const registration = { app, instance: data.instance, username: this.user.username, - password: this.user.password}) + password: this.user.password + }) .then((result) => { this.$store.commit('setToken', result.access_token) this.$store.dispatch('loginUser', result.access_token) @@ -47,10 +49,10 @@ const registration = { } else { this.registering = false response.json().then((data) => { - this.error = data.error + this.errors = humanizeErrors(JSON.parse(data.error)) }) } - } + }, ) } } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 087cab6b..867e26f0 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -49,8 +49,10 @@
-
-
{{error}}
+
+
+ {{error}} +
diff --git a/src/modules/errors.js b/src/modules/errors.js new file mode 100644 index 00000000..25b5bd81 --- /dev/null +++ b/src/modules/errors.js @@ -0,0 +1,12 @@ +import {capitalize, reduce} from 'lodash' + +export function humanizeErrors (errors) { + return reduce(errors, (errs, val, k) => { + let message = reduce(val, (acc, message) => { + let key = capitalize(k.replace(/_/g, ' ')) + return acc + [key, message].join(' ') + '. ' + }, '') + return [...errs, message] + }, []) +} + -- cgit v1.2.3-70-g09d2 From 02e000b53ea19fc234a615ebe526efa44cf2630f Mon Sep 17 00:00:00 2001 From: raeno Date: Wed, 5 Dec 2018 01:58:38 +0400 Subject: Use Array.reduce instead of lodash.reduce --- src/modules/errors.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/modules') diff --git a/src/modules/errors.js b/src/modules/errors.js index 25b5bd81..c809e1b5 100644 --- a/src/modules/errors.js +++ b/src/modules/errors.js @@ -1,8 +1,8 @@ -import {capitalize, reduce} from 'lodash' +import { capitalize } from 'lodash' export function humanizeErrors (errors) { - return reduce(errors, (errs, val, k) => { - let message = reduce(val, (acc, message) => { + return Object.entries(errors).reduce((errs, [k, val]) => { + let message = val.reduce((acc, message) => { let key = capitalize(k.replace(/_/g, ' ')) return acc + [key, message].join(' ') + '. ' }, '') -- cgit v1.2.3-70-g09d2 From 0029313775fb294b488ebfd809c88d1ace7eea94 Mon Sep 17 00:00:00 2001 From: raeno Date: Wed, 5 Dec 2018 13:43:01 +0400 Subject: Add client validation for registration form * also extract registration logic to users.js module --- package.json | 1 + src/components/registration/registration.js | 70 +- src/components/registration/registration.vue | 79 ++- src/modules/users.js | 44 +- src/mutation_types.js | 7 + yarn.lock | 981 +-------------------------- 6 files changed, 147 insertions(+), 1035 deletions(-) create mode 100644 src/mutation_types.js (limited to 'src/modules') diff --git a/package.json b/package.json index b716e7c6..18e79e16 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "vue-router": "^3.0.1", "vue-template-compiler": "^2.3.4", "vue-timeago": "^3.1.2", + "vuelidate": "^0.7.4", "vuex": "^3.0.1", "whatwg-fetch": "^2.0.3" }, diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index 7e8b1848..ba3561a0 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -1,12 +1,27 @@ -import oauthApi from '../../services/new_api/oauth.js' -import { humanizeErrors } from '../../modules/errors' +import { validationMixin } from 'vuelidate' +import { required } from 'vuelidate/lib/validators' +import { mapActions, mapState } from 'vuex' +import { SIGN_UP } from "../../mutation_types" const registration = { + mixins: [validationMixin], data: () => ({ - user: {}, - errors: [], - registering: false + user: { + email: '', + username: '', + password: '', + confirm: '' + }, + clientValidationFailed: false }), + validations: { + user: { + email: { required }, + username: { required }, + password: { required }, + confirm: { required } + } + }, created () { if ((!this.$store.state.instance.registrationOpen && !this.token) || !!this.$store.state.users.currentUser) { this.$router.push('/main/all') @@ -17,43 +32,24 @@ const registration = { } }, computed: { - termsofservice () { return this.$store.state.instance.tos }, - token () { return this.$route.params.token } + token () { return this.$route.params.token }, + ...mapState({ + isPending: (state) => state.users[SIGN_UP.isPending], + serverValidationErrors: (state) => state.users[SIGN_UP.errors], + termsofservice: 'instance.tos', + }) }, methods: { + ...mapActions(['signUp']), submit () { - this.registering = true this.user.nickname = this.user.username this.user.token = this.token - this.$store.state.api.backendInteractor.register(this.user).then( - (response) => { - if (response.ok) { - const data = { - oauth: this.$store.state.oauth, - instance: this.$store.state.instance.server - } - oauthApi.getOrCreateApp(data).then((app) => { - oauthApi.getTokenWithCredentials( - { - app, - instance: data.instance, - username: this.user.username, - password: this.user.password - }) - .then((result) => { - this.$store.commit('setToken', result.access_token) - this.$store.dispatch('loginUser', result.access_token) - this.$router.push('/main/friends') - }) - }) - } else { - this.registering = false - response.json().then((data) => { - this.errors = humanizeErrors(JSON.parse(data.error)) - }) - } - }, - ) + + this.$v.$touch() + + if (!this.$v.$invalid) { + this.signUp(this.user) + } } } } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 867e26f0..73200990 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -7,29 +7,46 @@
-
- - +
+ +
-
- - +
+ Username is required.
+
- - + +
-
- - + +
+ +
-
- - +
+ Email is required.
+
- - + + +
+ +
+ + +
+
+ Password is required. +
+ +
+ + +
+
+ Password confirmation is required.