<template>
    <button
        v-bind="attributes"
        :class="{
            'yo-button-medium': attributes.class === 'yo-form-medium',
        }"
        class="uk-button yo-button-panel uk-width-1-1"
        type="button"
        @click.prevent="connect"
    >
        <span>{{ $t(connected ? 'Re-Authenticate' : 'Authenticate') }}</span>
    </button>
</template>

<script>
import fields from '@yootheme/fields';

export default {
    extends: fields.components.FieldText,

    inject: ['AuthModal'],

    computed: {
        connected() {
            return this.values.scopes?.length;
        },
    },

    methods: {
        connect() {
            this.AuthModal.connect();
        },
    },
};
</script>
