[profile] pronoun validation

assets/style.scss

@@ -117,3 +117,7 @@ label.required::after {
     color: $danger;
     content: ' *';
 }
+
+.mw-input {
+    min-width: 16ch;
+}

components/ListInput.vue

@@ -1,7 +1,7 @@
 <template>
     <draggable tag="ul" v-model="iVal" handle=".handle" ghostClass="ghost" @end="$emit('input', iVal)" class="list-unstyled" :group="group">
         <li v-for="(v, i) in iVal" ref="items">
-            <div class="input-group mb-1">
+            <div class="input-group input-group-sm mb-1">
                 <div class="input-group-prepend">
                     <button class="btn btn-light border handle" type="button" :aria-label="$t('table.sort')">
                         <Icon v="bars"/>
@@ -19,7 +19,7 @@
         </li>
 
         <li slot="footer">
-            <button class="btn btn-outline-success btn-block" type="button" @click.prevent="add" :aria-label="$t('crud.add')">
+            <button class="btn btn-outline-success btn-block btn-sm" type="button" @click.prevent="add" :aria-label="$t('crud.add')">
                 <Icon v="plus"/>
             </button>
         </li>

components/OpinionListInput.vue

@@ -17,7 +17,15 @@
                 <Icon v="thumbs-down"/>
             </button>
         </div>
-        <input v-model="s.val.key" class="form-control" @keyup="s.update(s.val)" required/>
+        <input v-model="s.val.key" class="form-control mw-input" @keyup="s.update(s.val)" required/>
+        <div v-if="validation && s.val.key" class="input-group-append">
+            <span v-if="validation(s.val.key)" class="input-group-text bg-danger text-white">
+                <small>
+                    <Icon v="exclamation-triangle"/>
+                    <span class="ml-1">{{$t(validation(s.val.key))}}</span>
+                </small>
+            </span>
+        </div>
     </ListInput>
 </template>
 
@@ -26,6 +34,7 @@
         props: {
             value: {},
             group: {},
+            validation: {},
         },
         data() { return { v: this.value } },
         watch: { v() { this.$emit('input', this.v); } }

locale/pl/translations.suml

@@ -717,7 +717,8 @@ profile:
     description: 'Opis'
     names: 'Imiona'
     pronouns: 'Zaimki'
-    pronounsInfo: 'Możesz tu wpisać zaimek lub wkleić linka do niego.'
+    pronounsInfo: 'Możesz tu wpisać zaimek (np. „onu”, „on/jego”) lub wkleić linka do niego (np. „https://zaimki.pl/ona/ich”).'
+    pronounsNotFound: 'Nie możemy znaleźć tego zaimka!'
     words: 'Słowa'
     birthday: 'Wiek'
     birthdayInfo: 'Nie pokazujemy publicznie pełnej daty urodzenia, jedynie obliczony wiek.'

routes/profileEditor.vue

@@ -31,7 +31,7 @@
                 <p class="small text-muted mb-0">
                     <T>profile.pronounsInfo</T>
                 </p>
-                <OpinionListInput v-model="pronouns"/>
+                <OpinionListInput v-model="pronouns" :validation="validatePronoun"/>
             </div>
 
             <div class="form-group">
@@ -39,7 +39,7 @@
                     <Icon v="comment-edit"/>
                     <T>profile.description</T>
                 </h3>
-                <textarea class="form-control" v-model="description" maxlength="256" rows="4"/>
+                <textarea class="form-control form-control-sm" v-model="description" maxlength="256" rows="4"/>
             </div>
 
             <div class="form-group">
@@ -73,7 +73,7 @@
                 <p class="small text-muted mb-0">
                     <T>profile.birthdayInfo</T>
                 </p>
-                <input type="date" class="form-control" v-model="birthday"/>
+                <input type="date" class="form-control form-control-sm" v-model="birthday"/>
             </div>
 
             <div class="form-group">
@@ -187,6 +187,12 @@
                 this.saving = false;
                 this.$router.push(`/@${this.$user().username}`)
             },
+            validatePronoun(pronoun) {
+                const link = pronoun.replace(new RegExp('^' + process.env.BASE_URL), '').replace(new RegExp('^/'), '');
+                const template = buildTemplate(templates, link);
+
+                return template ? null : 'profile.pronounsNotFound'
+            },
         },
         head() {
             return head({