dashboard/shell/dialog/DisableAuthProviderDialog.vue

102 lines
1.9 KiB
Vue

<script>
import { Card } from '@components/Card';
export default {
name: 'PromptRemove',
emits: ['disable', 'close'],
components: { Card },
props: {
/**
* Inherited global identifier prefix for tests
* Define a term based on the parent component to avoid conflicts on multiple components
*/
componentTestid: {
type: String,
default: 'disable-auth-provider'
},
disableCb: {
type: Function,
default: () => {}
}
},
methods: {
close() {
this.$emit('close');
},
disable() {
this.disableCb();
this.$emit('close');
}
}
};
</script>
<template>
<Card
class="disable-auth-provider"
:show-highlight-border="false"
>
<template #title>
<h4 class="text-default-text">
{{ t('promptRemove.title') }}
</h4>
</template>
<template #body>
<div class="mb-10">
<p v-clean-html="t('promptRemove.attemptingToRemoveAuthConfig', null, true)" />
</div>
</template>
<template #actions>
<button
class="btn role-secondary"
@click="close"
>
{{ t('generic.cancel') }}
</button>
<div class="spacer" />
<button
class="btn role-primary bg-error ml-10"
:data-testid="componentTestid + '-confirm-button'"
@click="disable"
>
{{ t('generic.disable') }}
</button>
</template>
</Card>
</template>
<style lang='scss'>
.disable-auth-provider {
&.card-container {
box-shadow: none;
}
#confirm {
width: 90%;
margin-left: 3px;
}
.remove-modal {
border-radius: var(--border-radius);
overflow: scroll;
max-height: 100vh;
& ::-webkit-scrollbar-corner {
background: rgba(0,0,0,0);
}
}
.actions {
text-align: right;
}
.card-actions {
display: flex;
.spacer {
flex: 1;
}
}
}
</style>