107 lines
3.1 KiB
Vue
Executable File
107 lines
3.1 KiB
Vue
Executable File
<template>
|
|
<q-page class="circuit-activation-page">
|
|
<div class="circuit-container">
|
|
<!-- Header con gradient -->
|
|
<div class="circuit-header">
|
|
<div class="header-content">
|
|
<q-img
|
|
src="/images/1ris_rosso_100.png"
|
|
width="64px"
|
|
class="header-icon"
|
|
/>
|
|
<h4 class="header-title">
|
|
{{ t('reg.title_abilita_circuito') }}
|
|
</h4>
|
|
<p class="header-subtitle">
|
|
Abilitazione fiducia del <strong>{{ circuitName }}</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading state -->
|
|
<transition
|
|
enter-active-class="animated fadeIn"
|
|
leave-active-class="animated fadeOut"
|
|
mode="out-in"
|
|
>
|
|
<div v-if="isLoading" class="loading-state">
|
|
<q-spinner-dots color="primary" size="50px" />
|
|
<p class="loading-text">
|
|
Elaborazione in corso...
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Result card -->
|
|
<q-card v-else class="result-card" flat bordered>
|
|
<!-- Already activated warning -->
|
|
<q-card-section
|
|
v-if="giaammesso()"
|
|
class="warning-section"
|
|
>
|
|
<div class="status-content">
|
|
<q-icon name="warning" size="48px" />
|
|
<div class="status-text">
|
|
<div class="status-title">Attenzione</div>
|
|
<div class="status-message" v-html="risultato"></div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- Success message -->
|
|
<q-card-section
|
|
v-else-if="abilitaok()"
|
|
class="success-section"
|
|
>
|
|
<div class="status-content">
|
|
<q-icon name="check_circle" size="48px" />
|
|
<div class="status-text">
|
|
<div class="status-title">Circuito Abilitato</div>
|
|
<div class="status-message" v-html="risultato"></div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- Actions -->
|
|
<q-card-actions align="center" class="actions-section">
|
|
<q-btn
|
|
v-if="abilitaok()"
|
|
label="Visualizza Profilo"
|
|
color="primary"
|
|
unelevated
|
|
icon="person"
|
|
@click="goToProfile"
|
|
class="action-btn-primary"
|
|
/>
|
|
<q-btn
|
|
label="Torna alla Home"
|
|
color="primary"
|
|
outline
|
|
@click="goHome"
|
|
class="action-btn-outline"
|
|
/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</transition>
|
|
|
|
<!-- Info card -->
|
|
<q-card flat bordered class="info-card">
|
|
<q-card-section class="info-section">
|
|
<div class="info-content">
|
|
<q-icon name="info" color="primary" size="24px" />
|
|
<div class="info-text">
|
|
L'attivazione del circuito verrà notificata via email
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script lang="ts" src="./abilitacircuito.ts">
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './abilitacircuito.scss';
|
|
</style>
|