Email report on every report page; kiosk long-name fix

plugins/printers/frontend/views/TonerReport.vue

@@ -4,7 +4,7 @@
       <h1>Toner Report</h1>
       <div class="header-actions">
         <button v-if="!loading && !error" class="btn btn-secondary" @click="exportCSV">Export CSV</button>
-        <EmailReportButton v-if="!loading && !error" subject="Toner / Supply Report"
+        <EmailReportButton v-if="!loading && !error && canemail" subject="Toner / Supply Report"
           :columns="emailColumns" :rows="emailRows" />
         <router-link to="/reports" class="btn btn-secondary">Back to Reports</router-link>
       </div>
@@ -133,9 +133,16 @@
 import { ref, computed, onMounted } from 'vue'
 import { printersApi } from '@/api'
 import EmailReportButton from '@/components/EmailReportButton.vue'
+import { useAuthStore } from '@/stores/auth'
 import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
 import { getPrinterHostnameTemplate } from '@/utils/siteSettings'
 
+// Emailing a report is the reports.export permission the endpoint enforces.
+// Offering the button to somebody who will only get a 403 is worse than not
+// offering it.
+const authStore = useAuthStore()
+const canemail = computed(() => authStore.hasPermission('reports.export'))
+
 const emailColumns = [
   { key: 'printer', label: 'Printer' },
   { key: 'hostname', label: 'Hostname' },