<template>
  <div v-if="!authStore.user?.sudo_token" class="auth-challenge-screen">
    <h3 class="danger">--- {{ $t('profile.danger_zone') }} ---</h3>
    <p>Cette zone contient des actions sensibles. Veuillez confirmer votre identité.</p>

    <div v-if="authStore.user?.is_google" class="reauth-box">
      <p>Compte Google détecté : veuillez confirmer votre session.</p>
      <ButtonGoogleChallenge />
    </div>
    
    <div v-else class="reauth-box">
      <ProfileModulesPasswordChallenge />
    </div>
  </div>

  <div v-else class="red-zone-content">
    <div class="module-wrapper">
      <ProfileModulesEmailUpdate />
    </div>
    
    <div class="danger-section">
      <h3 class="danger">--- {{ $t('profile.danger_zone') }} ---</h3>
      <ProfileModulesGlobalLogout />
      <ProfileModulesDeleteAccount />
    </div>
  </div>
</template>

<script setup lang="ts">
  const authStore = useAuthStore();
  onUnmounted( () => {
    if (authStore.user) authStore.user.sudo_token = null
  }
)
</script>

<style scoped lang="scss">
h3.danger{
  color : red;
  margin-bottom: 0.5em;
}

.reauth-box{
  margin-top: 1em;
}
</style>