readonly and required should only be assigned boolean values

dashboard/src/components/SystemUpdate.vue

@@ -347,7 +347,7 @@ onMounted(async () => {
       <div class="button-bar" v-if="ready">
         <Button :disabled="checkingBusy" :loading="checkingBusy" v-if="!updateBusy" @click="onCheck()">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>
         <Button danger v-if="updateBusy" @click="onStop()">{{ $t('settings.updates.stopUpdateAction') }}</Button>
-        <Button :danger="pendingUpdate?.unstable" :success="!pendingUpdate?.unstable" v-show="pendingUpdate && pendingUpdate.version !== version && !updateBusy" @click="onShowUpdate()">{{ $t('settings.updates.updateAvailableAction') }}</Button>
+        <Button :danger="pendingUpdate?.unstable" :success="!pendingUpdate?.unstable" v-if="pendingUpdate && pendingUpdate.version !== version && !updateBusy" @click="onShowUpdate()">{{ $t('settings.updates.updateAvailableAction') }}</Button>
       </div>
     </Section>
   </div>

dashboard/src/components/UserDialog.vue

@@ -241,20 +241,20 @@ defineExpose({
         <!-- if profile edit is locked a username has to be set here . username is editable if none is set -->
         <FormGroup :has-error="formError.username">
           <label for="usernameInput">{{ $t('users.user.username') }}</label>
-          <TextInput id="usernameInput" v-model="username" :required="!user?.username && profileLocked" :readonly="!!user?.username" />
+          <TextInput id="usernameInput" v-model="username" :required="!user?.username && profileLocked" :readonly="user?.username ? true : false" />
           <small v-if="!user?.username && !profileLocked" class="helper-text">{{ $t('users.user.usernamePlaceholder') }}</small>
           <div class="error-label" v-if="formError.username">{{ formError.username }}</div>
         </FormGroup>
 
         <FormGroup>
           <label for="emailInput" :has-error="formError.email">{{ $t('users.user.primaryEmail') }} <sup><a href="https://docs.cloudron.io/profile/#primary-email" class="help" target="_blank" tabindex="-1"><i class="fa fa-question-circle"></i></a></sup></label>
-          <EmailInput id="emailInput" v-model="email" :readonly="user && user.source" :required="!(user && user.source)" />
+          <EmailInput id="emailInput" v-model="email" :readonly="user?.source ? true : false" :required="user?.source ? false : true" />
           <div class="error-label" v-if="formError.email">{{ formError.email }}</div>
         </FormGroup>
 
         <FormGroup style="flex-grow: 1">
           <label for="displayNameInput">{{ $t('users.user.fullName') }}</label>
-          <TextInput id="displayNameInput" v-model="displayName" :readonly="user?.source"/>
+          <TextInput id="displayNameInput" v-model="displayName" :readonly="user?.source ? true : false"/>
           <small v-if="!user || !user.username" class="helper-text">{{ $t('users.user.displayNamePlaceholder') }}</small> <!-- don't show if user has already signed up -->
         </FormGroup>