✨ Can use the autocompletion with the renderer

Ref di/vue-formbuilder#58

src/components/formrenderer/UsfRenderer/UsfRenderer.vue

@@ -4,8 +4,13 @@
     lazy-validation
     @submit.prevent="submitForm"
   >
-    <v-btn v-if="isHybridForm" @click="onActiveAutoCompletion">
-      {{ _uct('builder.renderer.autoCompletion.button') }}
+    <v-btn
+      color="primary"
+      v-if="isHybridForm && !autoCompletionIsActive"
+      @click="onActiveAutoCompletion"
+    >
+      <span v-if="userIsConnected">{{ _uct('builder.renderer.autoCompletion.button') }}</span>
+      <span v-else>{{ _uct('builder.renderer.autoCompletion.connection') }}</span>
     </v-btn>
 
     <usf-field
@@ -27,7 +32,7 @@
 </template>
 
 <script lang="ts">
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { UsfField } from '../../fields';
 import Vue, { PropType } from 'vue';
 import { Field } from '#form-plugin/models/form';
@@ -89,9 +94,14 @@ export default Vue.extend({
 
   computed: {
     ...mapState('form', ['root']),
+    ...mapGetters('form', ['autoCompletionIsActive']),
+    ...mapGetters('user', ['getUser']),
     ...mapState('submission', {
       submission: (state) => state,
     }),
+    userIsConnected(): boolean {
+      return !!Object.keys(this.getUser).length;
+    },
   },
 
   watch: {
@@ -136,6 +146,7 @@ export default Vue.extend({
     ...mapActions('form', ['setAutoCompletionStatus']),
     submitForm(): void {
       if (this.$refs.form.validate()) {
+        this.setAutoCompletionStatus(false);
         this.$emit('submit-form', this.submission);
       }
     },
@@ -146,3 +157,9 @@ export default Vue.extend({
   },
 });
 </script>
+
+<style>
+p {
+  color : #ff0000;
+}
+</style>

src/locales/fr.ts

@@ -244,7 +244,8 @@ export const fr: AppMessages = {
     },
     renderer: {
       autoCompletion: {
-        button: 'Charger mes données'
+        connection: 'Me connecter pour préremplir le formulaire',
+        button: 'Préremplir le formulaire'
       }
     }
   },