use undefined instead of null for most refs

frontend/src/components/AdminSettings.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="admin == null || version == null || wotMaxDepth == null || wotIdVerifyLen == null">
-    <div v-if="onFetchError == null">
+  <div v-if="admin === undefined || version === undefined || wotMaxDepth === undefined || wotIdVerifyLen === undefined">
+    <div v-if="!onFetchError">
       {{ t('common.loading') }}
     </div>
     <div v-else>
@@ -72,7 +72,7 @@
         </form>
       </section>
 
-      <section v-if="admin.hasLicense && remainingSeats != null" class="bg-white px-4 py-5 shadow-sm sm:rounded-lg sm:p-6">
+      <section v-if="admin.hasLicense && remainingSeats !== undefined" class="bg-white px-4 py-5 shadow-sm sm:rounded-lg sm:p-6">
         <h3 class="text-lg font-medium leading-6 text-gray-900">
           {{ t('admin.licenseInfo.title') }}
         </h3>
@@ -140,7 +140,7 @@
         </form>
       </section>
 
-      <section v-if="!admin.hasLicense && remainingSeats != null" class="bg-white px-4 py-5 shadow-sm sm:rounded-lg sm:p-6">
+      <section v-if="!admin.hasLicense && remainingSeats !== undefined" class="bg-white px-4 py-5 shadow-sm sm:rounded-lg sm:p-6">
         <h3 class="text-lg font-medium leading-6 text-gray-900">
           {{ t('admin.licenseInfo.title') }}
         </h3>
@@ -249,7 +249,7 @@
                 <span v-if="!wotUpdated">{{ t('admin.webOfTrust.save') }}</span>
                 <span v-else>{{ t('admin.webOfTrust.saved') }}</span>
               </button>
-              <p v-if="onSaveError != null && !(onSaveError instanceof FormValidationFailedError)" class="mt-2 text-sm text-red-900">
+              <p v-if="onSaveError && !(onSaveError instanceof FormValidationFailedError)" class="mt-2 text-sm text-red-900">
                 {{ t('common.unexpectedError', [onSaveError.message]) }}
               </p>
               <div v-if="wotHasUnsavedChanges" class="flex items-center whitespace-nowrap gap-1 text-sm text-yellow-700">
@@ -295,11 +295,11 @@ const wotUpdated = ref(false);
 const debouncedWotUpdated = debounce(() => wotUpdated.value = false, 2000);
 const form = ref<HTMLFormElement>();
 const processing = ref(false);
-const onFetchError = ref<Error | null>();
+const onFetchError = ref<Error>();
 const errorOnFetchingUpdates = ref<boolean>(false);
-const onSaveError = ref<Error | null>(null);
-const wotMaxDepthError = ref<Error | null >(null);
-const wotIdVerifyLenError = ref<Error | null >(null);
+const onSaveError = ref<Error>();
+const wotMaxDepthError = ref<Error>();
+const wotIdVerifyLenError = ref<Error>();
 
 class FormValidationFailedError extends Error {
   constructor() {
@@ -392,10 +392,10 @@ function manageSubscription() {
 }
 
 async function saveWebOfTrust() {
-  onSaveError.value = null;
-  wotMaxDepthError.value = null;
-  wotIdVerifyLenError.value = null;
-  if (admin.value == null || wotMaxDepth.value == null || wotIdVerifyLen.value == null) {
+  onSaveError.value = undefined;
+  wotMaxDepthError.value = undefined;
+  wotIdVerifyLenError.value = undefined;
+  if (admin.value === undefined || wotMaxDepth.value === undefined || wotIdVerifyLen.value === undefined) {
     throw new Error('No data available.');
   }
   if (!form.value?.checkValidity()) {

frontend/src/components/ArchiveVaultDialog.vue

@@ -35,7 +35,7 @@
                     {{ t('common.cancel') }}
                   </button>
                 </div>
-                <p v-if="onArchiveVaultError != null" class="text-sm text-red-900 px-4 sm:px-6 text-right bg-red-50">
+                <p v-if="onArchiveVaultError" class="text-sm text-red-900 px-4 sm:px-6 text-right bg-red-50">
                   {{ t('common.unexpectedError', [onArchiveVaultError.message]) }}
                 </p>
               </form>
@@ -58,7 +58,7 @@ const { t } = useI18n({ useScope: 'global' });
 
 const open = ref(false);
 
-const onArchiveVaultError = ref<Error | null>();
+const onArchiveVaultError = ref<Error>();
 
 const props = defineProps<{
   vault: VaultDto
@@ -78,7 +78,7 @@ function show() {
 }
 
 async function archiveVault() {
-  onArchiveVaultError.value = null;
+  onArchiveVaultError.value = undefined;
   const v = props.vault;
   try {
     const vaultDto = await backend.vaults.createOrUpdateVault(v.id, v.name, true, v.description);

frontend/src/components/AuditLog.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="state == State.Loading">
-    <div v-if="onFetchError == null">
+    <div v-if="!onFetchError">
       {{ t('common.loading') }}
     </div>
     <div v-else>
@@ -198,7 +198,7 @@
               </tfoot>
             </table>
           </div>
-          <p v-if="onFetchError != null" class="text-sm text-red-900 mt-2">{{ onFetchError.message }}</p>
+          <p v-if="onFetchError" class="text-sm text-red-900 mt-2">{{ onFetchError.message }}</p>
         </div>
       </div>
     </div>
@@ -254,7 +254,7 @@ const { t } = useI18n({ useScope: 'global' });
 
 const state = ref(State.Loading);
 const auditEvents = ref<AuditEventDto[]>([]);
-const onFetchError = ref<Error | null>();
+const onFetchError = ref<Error>();
 
 const startDate = ref(beginOfDate(new Date(new Date().setMonth(new Date().getMonth() - 1))));
 const startDateFilter = ref(startDate.value.toISOString().split('T')[0]);
@@ -330,7 +330,7 @@ watch(selectedEventTypes, (newSelection, oldSelection) => {
 });
 
 async function fetchData(page: number = 0) {
-  onFetchError.value = null;
+  onFetchError.value = undefined;
   try {
     // Fetch one more event than the page size to determine if there is a next page
     const events = await auditlog.service.getAllEvents(startDate.value, endDate.value, selectedEventTypes.value, lastIdOfPreviousPage[page], selectedOrder.value, pageSize.value + 1);

frontend/src/components/AuthenticatedMain.vue

@@ -1,7 +1,7 @@
 <template>
-  <div v-if="me == null">
+  <div v-if="me === undefined">
     <!--TODO: beautify loading screen -->
-    <div v-if="onFetchError == null">
+    <div v-if="!onFetchError">
       {{ t('common.loading') }}
     </div>
     <div v-else>
@@ -29,12 +29,12 @@ import NavigationBar from './NavigationBar.vue';
 const { t } = useI18n({ useScope: 'global' });
 
 const me = ref<UserDto>();
-const onFetchError = ref<Error | null>();
+const onFetchError = ref<Error>();
 
 onMounted(fetchData);
 
 async function fetchData() {
-  onFetchError.value = null;
+  onFetchError.value = undefined;
   try {
     me.value = await userdata.me;
   } catch (error) {

frontend/src/components/ClaimVaultOwnershipDialog.vue

@@ -35,7 +35,7 @@
                   <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-xs px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" @click="open = false">
                     {{ t('common.cancel') }}
                   </button>
-                  <div v-if="onAuthenticationError != null">
+                  <div v-if="onAuthenticationError">
                     <p v-if="onAuthenticationError instanceof FormValidationFailedError" class="text-sm text-red-900">
                       {{ t('claimVaultOwnershipDialog.error.formValidationFailed') }}
                     </p>
@@ -74,7 +74,7 @@ const { t } = useI18n({ useScope: 'global' });
 
 const form = ref<HTMLFormElement>();
 
-const onAuthenticationError = ref<Error|null>();
+const onAuthenticationError = ref<Error>();
 
 const open = ref(false);
 const password = ref('');
@@ -97,7 +97,7 @@ function show() {
 }
 
 async function authenticateVaultAdmin() {
-  onAuthenticationError.value = null;
+  onAuthenticationError.value = undefined;
   try {
     if (!form.value?.checkValidity()) {
       throw new FormValidationFailedError();

frontend/src/components/CreateVault.vue

@@ -29,7 +29,7 @@
             <button type="submit" :disabled="processing" class="inline-flex w-full justify-center rounded-md border border-transparent bg-primary px-4 py-2 text-base font-medium text-white shadow-xs hover:bg-primary-d1 focus:outline-hidden focus:ring-2 focus:primary focus:ring-offset-2 sm:text-sm disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed">
               {{ t('createVault.enterRecoveryKey.submit') }}
             </button>
-            <div v-if="onRecoverError != null">
+            <div v-if="onRecoverError">
               <p v-if="(onRecoverError instanceof FormValidationFailedError)" class="text-sm text-red-900 mt-2">{{ t('createVault.error.formValidationFailed') }}</p>
               <p v-else class="text-sm text-red-900 mt-2">{{ t('createVault.error.invalidRecoveryKey') }}</p>
             </div>
@@ -78,7 +78,7 @@
           <div class="bg-gray-50 mt-4 px-4 py-3 sm:px-6">
             <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center sm:space-x-4">
               <div class="text-sm text-red-900 text-right sm:flex-1 sm:min-w-0">
-                <template v-if="onCreateError !== null">
+                <template v-if="onCreateError">
                   <p v-if="(onCreateError instanceof FormValidationFailedError)">
                     {{ t('createVault.error.formValidationFailed','') }} 
                   </p>
@@ -156,7 +156,7 @@
           <div class="bg-gray-50 mt-4 px-4 py-3 sm:px-6">
             <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center sm:space-x-4">
               <div class="text-sm text-red-900 sm:flex-1 sm:min-w-0">
-                <template v-if="onCreateError !== null">
+                <template v-if="onCreateError">
                   <p v-if="!(onCreateError instanceof PaymentRequiredError)">
                     {{ t('common.unexpectedError', [onCreateError.message]) }}
                   </p>
@@ -211,7 +211,7 @@
             <ArrowDownTrayIcon class="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
             {{ t('createVault.success.download') }}
           </button>
-          <p v-if="onDownloadTemplateError != null " class="text-sm text-red-900 mr-4">{{ t('createVault.error.downloadTemplateFailed', [onDownloadTemplateError.message]) }}</p> <!-- TODO: not beautiful-->
+          <p v-if="onDownloadTemplateError" class="text-sm text-red-900 mr-4">{{ t('createVault.error.downloadTemplateFailed', [onDownloadTemplateError.message]) }}</p> <!-- TODO: not beautiful-->
         </div>
         <div class="mt-2">
           <router-link to="/app/vaults" class="text-sm text-gray-500">
@@ -228,7 +228,7 @@ import { ClipboardIcon } from '@heroicons/vue/20/solid';
 import { ArrowPathIcon, CheckIcon, KeyIcon, PlusIcon } from '@heroicons/vue/24/outline';
 import { ArrowDownTrayIcon } from '@heroicons/vue/24/solid';
 import { saveAs } from 'file-saver';
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import backend, { PaymentRequiredError } from '../common/backend';
 import { VaultKeys } from '../common/crypto';
@@ -262,9 +262,9 @@ const { t } = useI18n({ useScope: 'global' });
 
 const form = ref<HTMLFormElement>();
 
-const onCreateError = ref<Error | null >(null);
-const onRecoverError = ref<Error | null >(null);
-const onDownloadTemplateError = ref<Error | null>(null);
+const onCreateError = ref<Error>();
+const onRecoverError = ref<Error>();
+const onDownloadTemplateError = ref<Error>();
 
 const state = ref(State.Initial);
 const processing = ref(false);
@@ -294,7 +294,7 @@ async function initialize() {
 }
 
 async function validateRecoveryKey() {
-  onRecoverError.value = null;
+  onRecoverError.value = undefined;
   if (!form.value?.checkValidity()) {
     onRecoverError.value = new FormValidationFailedError();
     return;
@@ -309,7 +309,7 @@ const allCreateStates = [
 ];
 
 async function recoverVault() {
-  onRecoverError.value = null;
+  onRecoverError.value = undefined;
   try {
     processing.value = true;
     vaultKeys.value = await VaultKeys.recover(recoveryKey.value);
@@ -323,7 +323,7 @@ async function recoverVault() {
 }
 
 async function validateVaultDetails() {
-  onCreateError.value = null;
+  onCreateError.value = undefined;
   if (!form.value?.checkValidity()) {
     onCreateError.value = new FormValidationFailedError();
     return;
@@ -340,7 +340,7 @@ function backToEnterVaultDetails(){
 }
 
 async function createVault() {
-  onCreateError.value = null;
+  onCreateError.value = undefined;
   try {
     if (!vaultKeys.value) {
       throw new Error('Invalid state');
@@ -372,10 +372,10 @@ async function copyRecoveryKey() {
 }
 
 async function downloadVaultTemplate() {
-  onDownloadTemplateError.value = null;
+  onDownloadTemplateError.value = undefined;
   try {
     const blob = await vaultConfig.value?.exportTemplate();
-    if (blob != null) {
+    if (blob !== undefined) {
       saveAs(blob, `${vaultName.value}.zip`);
     } else {
       throw new EmptyVaultTemplateError();

frontend/src/components/DeviceList.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="me == null">
-    <div v-if="onFetchError == null">
+  <div v-if="me === undefined">
+    <div v-if="!onFetchError">
       {{ t('common.loading') }}
     </div>
     <div v-else>
@@ -78,7 +78,7 @@
                     </td>
                   </tr>
                   <!-- TODO: good styling -->
-                  <tr v-if="onRemoveDeviceError[device.id] != null" class="bg-red-50">
+                  <tr v-if="onRemoveDeviceError[device.id]" class="bg-red-50">
                     <td colspan="5" class="px-6 py-3 text-center text-xs font-medium text-red-500 uppercase tracking-wider">
                       {{ t('common.unexpectedError', [onRemoveDeviceError[device.id].message]) }}
                     </td>
@@ -105,15 +105,15 @@ const { t, d } = useI18n({ useScope: 'global' });
 
 const me = ref<UserDto>();
 const myDevice = ref<DeviceDto>();
-const onFetchError = ref<Error | null>();
-const onRemoveDeviceError = ref< {[id: string]: Error} >({});
+const onFetchError = ref<Error>();
+const onRemoveDeviceError = ref<Record<string, Error>>({});
 
 onMounted(async () => {
   await fetchData();
 });
 
 async function fetchData() {
-  onFetchError.value = null;
+  onFetchError.value = undefined;
   try {
     me.value = await userdata.meWithLastAccess;
     myDevice.value = await userdata.browser;

frontend/src/components/DownloadVaultTemplateDialog.vue

@@ -34,7 +34,7 @@
                   <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-xs px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" @click="open = false">
                     {{ t('common.cancel') }}
                   </button>
-                  <p v-if="onDownloadError != null" class="text-sm text-red-900">
+                  <p v-if="onDownloadError" class="text-sm text-red-900">
                     {{ t('common.unexpectedError', [onDownloadError.message]) }}
                   </p>
                 </div>
@@ -61,7 +61,7 @@ const { t } = useI18n({ useScope: 'global' });
 
 const open = ref(false);
 
-const onDownloadError = ref<Error|null>();
+const onDownloadError = ref<Error>();
 
 const props = defineProps<{
   vault: VaultDto
@@ -81,7 +81,7 @@ function show() {
 }
 
 async function downloadVault() {
-  onDownloadError.value = null;
+  onDownloadError.value = undefined;
   try {
     const blob = await generateVaultZip();
     saveAs(blob, `${props.vault.name}.zip`);

frontend/src/components/EditVaultMetadataDialog.vue

@@ -45,7 +45,7 @@
                   <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-xs px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" @click="open = false">
                     {{ t('common.cancel') }}
                   </button>
-                  <div v-if="onUpdateVaultMetadataError != null">
+                  <div v-if="onUpdateVaultMetadataError">
                     <p v-if="onUpdateVaultMetadataError instanceof FormValidationFailedError" class="text-sm text-red-900">
                       {{ t('editVaultMetadataDialog.error.formValidationFailed') }}
                     </p>
@@ -81,7 +81,7 @@ const { t } = useI18n({ useScope: 'global' });
 const open = ref(false);
 const form = ref<HTMLFormElement>();
 
-const onUpdateVaultMetadataError = ref<Error|null>();
+const onUpdateVaultMetadataError = ref<Error>();
 
 const vaultName = ref('');
 const vaultDescription = ref<string | undefined>();
@@ -106,7 +106,7 @@ function show() {
 }
 
 async function updateVaultMetadata() {
-  onUpdateVaultMetadataError.value = null;
+  onUpdateVaultMetadataError.value = undefined;
   try {
     if (!form.value?.checkValidity()) {
       throw new FormValidationFailedError();

frontend/src/components/FetchError.vue

@@ -7,7 +7,7 @@
     <p class="mt-1 text-sm text-gray-500">
       {{ error.message }}
     </p>
-    <div v-if="retry != undefined " class="mt-6">
+    <div v-if="retry !== undefined " class="mt-6">
       <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-d1 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary" @click="retry">
         <ArrowPathIcon class="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
         {{ t('common.retry') }}
@@ -24,6 +24,6 @@ const { t } = useI18n({ useScope: 'global' });
 
 defineProps<{
   error: Error
-  retry: (() => Promise<void>) | null
+  retry?: (() => Promise<void>)
 }>();
 </script>