Skip to content

Commit

Permalink
Merge pull request #744 from ChicagoWorldcon/plan-795-social-media-va…
Browse files Browse the repository at this point in the history 
…lidation

PLAN-795 fix social media validation
  • Loading branch information
@Gailbear
Gailbear authored Oct 11, 2022
2 parents 05313d0 + a36a102 commit 6788573
Show file tree
Hide file tree
Showing 6 changed files with 217 additions and 145 deletions.
15 changes: 15 additions & 0 deletions app/javascript/packs/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,21 @@ import { CustomIconsPlugin } from '../icons';
import AsyncComputed from 'vue-async-computed';
import CKEditor from 'ckeditor4-vue';
import VuePluralize from 'vue-pluralize';
import { configure as validationConfigure, extend as validationExtend} from 'vee-validate';
import { min, max, regex, required } from 'vee-validate/dist/rules';

validationConfigure({
classes: {
valid: 'is-valid',
invalid: 'is-invalid',
dirty: 'is-dirty'
}
})

validationExtend('min', min);
validationExtend('max', max);
validationExtend('regex', regex);
validationExtend('required', required);

Vue.config.errorHandler = (err, vm, info) => {
console.error(err);
Expand Down
80 changes: 50 additions & 30 deletions app/javascript/profile/person_demographics.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,41 +10,59 @@
<dl-person :fields="communityFields"></dl-person>
</div>
</div>
<person-edit-modal id="person-demo-modal" :person="selected" :data="demoData">
<person-edit-modal id="person-demo-modal" :person="selected" :data="demoData" :validate="true">
<template #modal-title>Edit Demographics - {{selected.published_name}}</template>
<template #default="{fields}">
<b-form-group label="Ethnicity">
<b-form-input type="text" v-model="fields.ethnicity"></b-form-input>
</b-form-group>
<b-form-group label="Gender">
<b-form-input type="text" v-model="fields.gender"></b-form-input>
</b-form-group>
<b-form-group label="Age at time of event">
<b-form-input type="text" v-model="fields.age_at_convention"></b-form-input>
</b-form-group>
<b-form-group label="Romantic and/or sexual orientation">
<b-form-textarea v-model="fields.romantic_sexual_orientation"></b-form-textarea>
</b-form-group>
<validation-provider>
<b-form-group label="Ethnicity">
<b-form-input type="text" v-model="fields.ethnicity"></b-form-input>
</b-form-group>
</validation-provider>
<validation-provider>
<b-form-group label="Gender">
<b-form-input type="text" v-model="fields.gender"></b-form-input>
</b-form-group>
</validation-provider>
<validation-provider>
<b-form-group label="Age at time of event">
<b-form-input type="text" v-model="fields.age_at_convention"></b-form-input>
</b-form-group>
</validation-provider>
<validation-provider>
<b-form-group label="Romantic and/or sexual orientation">
<b-form-textarea v-model="fields.romantic_sexual_orientation"></b-form-textarea>
</b-form-group>
</validation-provider>
</template>
</person-edit-modal>
<person-edit-modal id="person-community-modal" :person="selected" :data="communityData">
<person-edit-modal id="person-community-modal" :person="selected" :data="communityData" :validate="true">
<template #modal-title>Edit community memberships - {{selected.published_name}}</template>
<template #default="{fields}">
<b-form-group label="Experience with being &quot;othered&quot;">
<b-form-textarea v-model="fields.othered"></b-form-textarea>
</b-form-group>
<b-form-group label="Member of an Indigenous community">
<b-form-textarea v-model="fields.indigenous"></b-form-textarea>
</b-form-group>
<b-form-group label="Member of the global Black diaspora">
<b-form-textarea v-model="fields.black_diaspora"></b-form-textarea>
</b-form-group>
<b-form-group label="Represent something other than a purely US-centric perspective">
<b-form-textarea v-model="fields.non_us_centric_perspectives"></b-form-textarea>
</b-form-group>
<b-form-group label="Other demographic categories">
<b-form-textarea v-model="fields.demographic_categories"></b-form-textarea>
</b-form-group>
<validation-provider>
<b-form-group label="Experience with being &quot;othered&quot;">
<b-form-textarea v-model="fields.othered"></b-form-textarea>
</b-form-group>
</validation-provider>
<validation-provider>
<b-form-group label="Member of an Indigenous community">
<b-form-textarea v-model="fields.indigenous"></b-form-textarea>
</b-form-group>
</validation-provider>
<validation-provider>
<b-form-group label="Member of the global Black diaspora">
<b-form-textarea v-model="fields.black_diaspora"></b-form-textarea>
</b-form-group>
</validation-provider>
<validation-provider>
<b-form-group label="Represent something other than a purely US-centric perspective">
<b-form-textarea v-model="fields.non_us_centric_perspectives"></b-form-textarea>
</b-form-group>
</validation-provider>
<validation-provider>
<b-form-group label="Other demographic categories">
<b-form-textarea v-model="fields.demographic_categories"></b-form-textarea>
</b-form-group>
</validation-provider>
</template>
</person-edit-modal>
</section>
Expand All @@ -58,6 +76,7 @@ import PersonEditModal from "./person_edit_modal.vue";
import EditButton from '@/components/edit_button';
import DlPerson from './dl_person.vue';
import personSessionMixin from '@/auth/person_session.mixin';
import { ValidationProvider } from 'vee-validate';
export default {
name: "PersonDemographics",
Expand All @@ -70,7 +89,8 @@ export default {
components: {
PersonEditModal,
EditButton,
DlPerson
DlPerson,
ValidationProvider,
},
data: () => ({
model,
Expand Down
119 changes: 57 additions & 62 deletions app/javascript/profile/person_details.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,36 +73,44 @@
<h5 class="mt-3">Social Media <edit-button v-b-modal.person-social-modal v-if="!readOnly"></edit-button></h5>
<dl-person :fields="socialFields"></dl-person>
</div>
<person-edit-modal id="person-bio-modal" :person="selected" :data="{bio: null}">
<person-edit-modal id="person-bio-modal" :person="selected" :data="{bio: null}" :validate="true">
<template #modal-title>Edit Bio - {{selected.published_name}}</template>
<template #default="{fields}">
<plano-editor
v-model="fields.bio"
type='classic'
></plano-editor>
<validation-provider
name="Bio"
>
<plano-editor
v-model="fields.bio"
type='classic'
></plano-editor>
</validation-provider>
</template>
</person-edit-modal>
<person-edit-modal id="person-misc-modal" :person="selected" :data="miscData">
<person-edit-modal id="person-misc-modal" :person="selected" :data="miscData" :validate="true">
<template #modal-title>Edit Preferences - {{selected.published_name}}</template>
<template #default="{fields}">
<b-form-group label="Anyone that should not be assigned to be on a panel with participant">
<!-- TODO change edit permissions to sensitive data tickybox -->
<b-form-textarea v-if="canEditSensitiveInfo" v-model="fields.do_not_assign_with"></b-form-textarea>
<b-form-textarea v-if="!canEditSensitiveInfo" disabled value="Restricted"></b-form-textarea>
</b-form-group>
<validation-provider name="Anyone that should not be assigned with">
<b-form-group label="Anyone that should not be assigned to be on a panel with participant">
<!-- TODO change edit permissions to sensitive data tickybox -->
<b-form-textarea v-if="canEditSensitiveInfo" v-model="fields.do_not_assign_with"></b-form-textarea>
<b-form-textarea v-if="!canEditSensitiveInfo" disabled value="Restricted"></b-form-textarea>
</b-form-group>
</validation-provider>

<!-- HERE -->
<b-form-group label="Permission to share email with other Participants">
<validation-provider name="Sharing preferences">
<b-form-group label="Permission to share email with other Participants">
<b-form-radio-group
stacked
v-model="fields.can_share"
>
<b-form-radio :value="true">{{yesLabel.label}}</b-form-radio>
<b-form-radio :value="false">{{noLabel.label}}</b-form-radio>
</b-form-radio-group>
</b-form-group>
</b-form-group>
</validation-provider>

<b-form-group label="Permission to be included in a livestreamed program">
<validation-provider>
<b-form-radio-group
stacked
v-model="fields.can_stream"
Expand All @@ -111,91 +119,94 @@
<b-form-radio :value="noLabel.value">{{noLabel.label}}</b-form-radio>
<b-form-radio :value="maybeLabel.value">{{maybeLabel.label}}</b-form-radio>
</b-form-radio-group>
</validation-provider>
<validation-provider>
<b-textarea v-model="fields.can_stream_exceptions"></b-textarea>
</validation-provider>
</b-form-group>
<b-form-group label="Permission to be included in a recorded program">
<validation-provider>
<b-form-radio-group stacked v-model="fields.can_record" >
<b-form-radio :value="yesLabel.value">{{yesLabel.label}}</b-form-radio>
<b-form-radio :value="noLabel.value">{{noLabel.label}}</b-form-radio>
<b-form-radio :value="maybeLabel.value">{{maybeLabel.label}}</b-form-radio>
</b-form-radio-group>
</validation-provider>
<validation-provider>
<b-textarea v-model="fields.can_record_exceptions"></b-textarea>
</validation-provider>
</b-form-group>
<b-form-group>
<b-form-checkbox switch v-model="fields.is_local">Local to the event</b-form-checkbox>
</b-form-group>
<validation-provider>
<b-form-group>
<b-form-checkbox switch v-model="fields.is_local">Local to the event</b-form-checkbox>
</b-form-group>
</validation-provider>
<validation-provider>
<b-form-group label="Moderating experience">
<b-form-textarea v-model="fields.moderation_experience"></b-form-textarea>
</b-form-group>
</validation-provider>
</template>
</person-edit-modal>
<person-edit-modal id="person-social-modal" :person="selected" :data="socialsData">
<person-edit-modal id="person-social-modal" :person="selected" :data="socialsData" :validate="true">
<template #modal-title>Edit Socials - {{selected.published_name}}</template>
<template #default="{fields}">
<validated-social
:rules="{ regex: /^[a-z0-9_]{1,15}$/i }"
<simple-social
label="Twitter"
:rules="{min: 1, max: 15, regex: /^[a-z0-9_]{1,15}$/i}"
prepend="@"
v-model="fields.twitter"
:disabled="disabled"
:message="TWITTER_ID_INVALID_MSG"
></validated-social>
<validated-social
:rules="{ regex: /^[a-z\d.]{5,}$/i }"
></simple-social>
<simple-social
:rules="{min: 5, regex: /^[a-z\d.]{5,}$/i }"
label="Facebook"
prepend="facebook.com/"
v-model="fields.facebook"
:disabled="disabled"
:message="FACEBOOK_ID_INVALID_MSG"
></validated-social>
<validated-social
></simple-social>
<simple-social
:rules="{ regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-zA-Z0-9\/]+([\-\.]{1}[a-zA-Z0-9\/]+)*\.[a-zA-Z\/]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }"
label="Website"
prepend="url"
v-model="fields.website"
:disabled="disabled"
:message="WEBSITE_INVALID_MSG"
></validated-social>
<validated-social
></simple-social>
<simple-social
:rules="{ regex: /^[a-zA-Z0-9._]+$/ }"
label="Instagram"
prepend="instagram.com/"
v-model="fields.instagram"
:disabled="disabled"
:message="INSTAGRAM_ID_INVALID_MSG"
></validated-social>
<validated-social
></simple-social>
<simple-social
:rules="{ regex: /^(#)?[a-zA-Z0-9][\w]{2,24}$/ }"
label="Twitch"
prepend="twitch.tv/"
v-model="fields.twitch"
:disabled="disabled"
:message="TWITCH_ID_INVALID_MSG"
></validated-social>
<validated-social
></simple-social>
<simple-social
:rules="{ regex: /^[a-zA-Z0-9\/_]+([\-\.]{1}[a-zA-Z0-9\/_]+)*$/ }"
label="YouTube"
prepend="youtube.com/"
v-model="fields.youtube"
:disabled="disabled"
:message="YOUTUBE_ID_INVALID_MSG"
></validated-social>
<validated-social
></simple-social>
<simple-social
:rules="{ regex:/^([a-zA-Z0-9._-])+$/ }"
label="TikTok"
prepend="@"
v-model="fields.tiktok"
:disabled="disabled"
:message="TIKTOK_ID_INVALID_MSG"
></validated-social>
<validated-social
></simple-social>
<simple-social
:rules="{ regex:/^([a-zA-Z0-9.\/_-])+$/ }"
label="LinkedIn"
prepend="linkedin.com/in/"
v-model="fields.linkedin"
:disabled="disabled"
:message="LINKEDIN_ID_INVALID_MSG"
></validated-social>
></simple-social>
<simple-social
label="Other"
v-model="fields.othersocialmedia"
Expand All @@ -219,21 +230,13 @@
import TimezoneSelector from "@/components/timezone_selector.vue"
import EmailAddressesEditor from "@/components/email_addresses_editor.vue"
import PlanoEditor from '@/components/plano_editor'
import ValidatedSocial from '@/components/validated_social.vue';
import SimpleSocial from '../social-media/simple-social.vue';
import EditButton from '@/components/edit_button.vue';
import PersonEditModal from './person_edit_modal.vue';
import DlPerson from './dl_person.vue';
import { ValidationProvider } from 'vee-validate';
import {
TWITTER_ID_INVALID_MSG,
FACEBOOK_ID_INVALID_MSG,
WEBSITE_INVALID_MSG,
INSTAGRAM_ID_INVALID_MSG,
TWITCH_ID_INVALID_MSG,
YOUTUBE_ID_INVALID_MSG,
TIKTOK_ID_INVALID_MSG,
LINKEDIN_ID_INVALID_MSG,
PERSON_ATTENDANCE_TYPE
} from '../constants/strings';
import settingsMixin from "@/store/settings.mixin";
Expand All @@ -255,11 +258,11 @@ export default {
TimezoneSelector,
EmailAddressesEditor,
PlanoEditor,
ValidatedSocial,
SimpleSocial,
PersonEditModal,
EditButton,
DlPerson,
ValidationProvider,
},
mixins: [
settingsMixin,
Expand All @@ -269,14 +272,6 @@ export default {
],
data: () => ({
disabled: false,
TWITTER_ID_INVALID_MSG,
FACEBOOK_ID_INVALID_MSG,
WEBSITE_INVALID_MSG,
INSTAGRAM_ID_INVALID_MSG,
TWITCH_ID_INVALID_MSG,
YOUTUBE_ID_INVALID_MSG,
TIKTOK_ID_INVALID_MSG,
LINKEDIN_ID_INVALID_MSG,
PERSON_ATTENDANCE_TYPE,
model,
miscData: {
Expand Down
Loading

0 comments on commit 6788573

Please sign in to comment.