Skip to content
Permalink
Browse files

プロフィール編集時、500ミリ秒未入力状態が続いた時に、プロフィールに入力されたHTMLをサニタイズした上でプレビューを更新する

  • Loading branch information...
h-sakano committed Dec 3, 2018
1 parent 35c2371 commit cfcaf4c65ccaa4863d66c8b483f8552b90f6565c
Showing with 19 additions and 2 deletions.
  1. +19 −2 src/views/MyPage.vue
@@ -13,7 +13,7 @@
<div class="field">
<label class="label">Preview</label>
<div class="control">
<div v-html="profile" class="preview"></div>
<div v-html="sanitizedProfile" class="preview"></div>
</div>
</div>
<div class="field">
@@ -31,15 +31,21 @@
<script lang="ts">
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/functions'
import _ from 'lodash'
import firestore from '@/firestore'
import { Component, Vue } from 'vue-property-decorator'
import { Component, Vue, Watch } from 'vue-property-decorator'
import UserDataType from '@/types/UserDataType'
@Component
export default class MyPage extends Vue {
private profile: string = ''
private debouncedSanitize: any = null
private sanitizedProfile: string = ''
private created () {
this.debouncedSanitize = _.debounce(this.updateSanitizedProfile, 500)
firestore.collection('users').doc(this.$store.getters.user.uid).get()
.then((doc) => {
const userData = doc.data()
@@ -64,9 +70,20 @@ export default class MyPage extends Vue {
this.$router.push('/')
}
private async updateSanitizedProfile () {
const sanitizeFunc = firebase.functions().httpsCallable('sanitize')
const response = await sanitizeFunc({ text: this.profile })
this.sanitizedProfile = response.data.sanitizedText
}
get displayName (): string {
return this.$store.getters.user.displayName || 'Nameless'
}
@Watch('profile')
private watchProfile (val: string, oldVal: string) {
this.debouncedSanitize()
}
}
</script>

0 comments on commit cfcaf4c

Please sign in to comment.
You can’t perform that action at this time.