Few enhancements.

frontend/src/api/domains.js

@@ -13,7 +13,7 @@ export default {
   getDomainDNSDetail (domainId) {
     return repository.get(`/${domainResource}/${domainId}/dns_detail/`)
   },
-  getDomainDmarcAligment (domainId, period) {
+  getDomainDmarcAlignment (domainId, period) {
     return repository.get(
       `${domainResource}/${domainId}/dmarc/alignment_stats/`,
       { params: { period } }

frontend/src/components/dmarc/DmarcAligmentChart.vue

@@ -1,8 +1,8 @@
 <template>
-<div>
+<div v-if="alignments">
   <v-card>
     <v-toolbar dense elevation="0" class="mr-2">
-      <v-toolbar-title><translate>Aligment</translate></v-toolbar-title>
+      <v-toolbar-title><translate>Alignment</translate></v-toolbar-title>
       <v-spacer />
       <v-btn
         icon
@@ -97,6 +97,22 @@
     </v-expansion-panel>
   </v-expansion-panels>
 </div>
+<div v-else>
+  <v-alert
+    v-if="dmarcDisabled"
+    type="info"
+    outlined
+    prominent
+    border="left"
+    class="mt-6"
+    >
+    <translate tag="div">
+      DMARC support does not seem to be enabled for this domain.</translate>
+    <translate tag="div">
+      If you configured it recently, please wait for the first report to be received and processed.
+    </translate>
+  </v-alert>
+</div>
 </template>
 
 <script>
@@ -130,7 +146,7 @@ export default {
           position: 'bottom'
         }
       },
-      alignments: {},
+      alignments: null,
       boxes: [
         { key: 'total', label: this.$gettext('Total'), color: 'primary lighten-2' },
         { key: 'aligned', label: this.$gettext('Fully aligned'), color: 'green lighten-2' },
@@ -140,6 +156,7 @@ export default {
       ],
       currentWeek: 0,
       currentYear: 0,
+      dmarcDisabled: false,
       loading: false,
       panel: null,
       series: [],
@@ -193,13 +210,18 @@ export default {
         this.currentWeek -= 1
       }
     },
-    fetchAligmentStats () {
+    fetchAlignmentStats () {
       if (this.loading) {
         return
       }
       const period = `${this.currentYear}-${this.currentWeek}`
       this.loading = true
-      domainsApi.getDomainDmarcAligment(this.domain.pk, period).then(resp => {
+      domainsApi.getDomainDmarcAlignment(this.domain.pk, period).then(resp => {
+        this.loading = false
+        if (resp.status === 204) {
+          this.dmarcDisabled = true
+          return
+        }
         this.stats = { total: 0 }
         this.alignments = resp.data
         this.series = []
@@ -214,7 +236,6 @@ export default {
           this.stats[key] = total
           this.series.push(total)
         }
-        this.loading = false
       })
     }
   },
@@ -224,14 +245,14 @@ export default {
     this.currentWeek = now.weekNumber
   },
   mounted () {
-    this.fetchAligmentStats()
+    this.fetchAlignmentStats()
   },
   watch: {
     currentWeek () {
-      this.fetchAligmentStats()
+      this.fetchAlignmentStats()
     },
     currentYear () {
-      this.fetchAligmentStats()
+      this.fetchAlignmentStats()
     }
   }
 }

frontend/src/views/TwoFA.vue

@@ -13,6 +13,7 @@
       <validation-provider
         v-slot="{ errors }"
         vid="code"
+        name="code"
         rules="required"
         >
         <v-row>
@@ -24,13 +25,14 @@
               :error-messages="errors"
               :hint="'Enter the code from the two-factor app on your mobile device. If you have lost your device, you may enter one of your recovery codes.'|translate"
               persistent-hint
+              @finish="verifyCode"
               />
           </v-col>
         </v-row>
       </validation-provider>
     </validation-observer>
     <div class="d-flex justify-center mt-6">
-      <v-btn class="flex-grow-1" color="primary" large @click="verifyCode">
+      <v-btn class="flex-grow-1" color="primary" large @click="verifyCode" :loading="loading">
         <translate>Verify code</translate>
       </v-btn>
     </div>
@@ -46,7 +48,8 @@ export default {
   data () {
     return {
       code: null,
-      errors: {}
+      errors: {},
+      loading: false
     }
   },
   methods: {
@@ -55,6 +58,7 @@ export default {
       if (!isValid) {
         return
       }
+      this.loading = true
       account.verifyTFACode(this.code).then(resp => {
         Cookies.set('token', resp.data.access, { sameSite: 'strict' })
         Cookies.set('refreshToken', resp.data.refresh, { sameSite: 'strict' })
@@ -63,6 +67,7 @@ export default {
         })
       }).catch(error => {
         this.$refs.observer.setErrors(error.response.data)
+        this.loading = false
       })
     }
   }

modoboa/dmarc/api/v2/viewsets.py

@@ -26,6 +26,8 @@ class DMARCViewSet(GetThrottleViewsetMixin, viewsets.GenericViewSet):
     )
     def alignment_stats(self, request, **kwargs):
         domain = self.get_object()
+        if not domain.record_set.exists():
+            return response.Response(status=204)
         try:
             stats = lib.get_aligment_stats(
                 domain, self.request.query_params.get("period")

modoboa/dmarc/lib.py

@@ -263,8 +263,8 @@ def get_aligment_stats(domain, period=None) -> dict:
            report__end_date__lte=daterange[1])) &
         Q(header_from=domain)
     )
-    all_records = models.Record.objects.select_related().filter(qargs)
-    stats = {
+    all_records = models.Record.objects.filter(qargs)
+    stats: dict = {
         "aligned": {},
         "trusted": {},
         "forwarded": {},