make readonly and required mutually exclusive

per https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly

"Note: The required attribute is not permitted on inputs with the readonly attribute specified."
This commit is contained in:
Girish Ramakrishnan
2025-12-03 23:33:22 +01:00
parent c656903772
commit fdac444aed
6 changed files with 9 additions and 9 deletions
+1 -1
View File
@@ -148,7 +148,7 @@ defineExpose({
<FormGroup>
<label for="domainInput">{{ $t('domains.domainDialog.domain') }}</label>
<TextInput id="domainInput" v-model="domain" placeholder="example.com" :readonly="editing ? true : undefined" required />
<TextInput id="domainInput" v-model="domain" placeholder="example.com" :readonly="editing" :required="!editing" />
</FormGroup>
<DomainProviderForm v-model:provider="provider" v-model:dns-config="dnsConfig" v-model:tls-provider="tlsProvider" v-model:zone-name="zoneName" v-model:custom-nameservers="customNameservers" :domain="domain" :show-advanced="showAdvanced" />
+1 -1
View File
@@ -167,7 +167,7 @@ defineExpose({
<FormGroup>
<label for="nameInput">{{ $t('email.addMailboxDialog.name') }}</label>
<InputGroup>
<TextInput id="nameInput" style="flex-grow: 1;" v-model="name" :readonly="mailbox ? true : undefined" :required="!mailbox"/>
<TextInput id="nameInput" style="flex-grow: 1;" v-model="name" :readonly="!!mailbox" :required="!mailbox"/>
<SingleSelect v-model="domain" :options="domainList" option-key="domain" option-label="label" :disabled="!!mailbox" :required="!mailbox"/>
</InputGroup>
<div class="warning-label" v-if="!domainHasIncomingEnabled">{{ $t('email.addMailboxDialog.incomingDisabledWarning') }}</div>
@@ -108,7 +108,7 @@ defineExpose({
<FormGroup>
<label for="nameInput">{{ $t('email.addMailinglistDialog.name') }}</label>
<InputGroup>
<TextInput id="nameInput" style="flex-grow: 1;" v-model="name" :readonly="mailinglist ? true : undefined"/>
<TextInput id="nameInput" style="flex-grow: 1;" v-model="name" :readonly="!!mailinglist"/>
<SingleSelect v-model="domain" :options="domainList" option-key="domain" option-label="label" :disabled="!!mailinglist"/>
</InputGroup>
<div class="error-label" v-if="formError.name">{{ formError.name }}</div>
+1 -1
View File
@@ -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 && pendingUpdate.unstable) ? true : undefined" :success="(pendingUpdate && !pendingUpdate.unstable) ? true : undefined" v-show="pendingUpdate && pendingUpdate.version !== version && !updateBusy" @click="onShowUpdate()">{{ $t('settings.updates.updateAvailableAction') }}</Button>
<Button :danger="pendingUpdate?.unstable" :success="!pendingUpdate?.unstable" v-show="pendingUpdate && pendingUpdate.version !== version && !updateBusy" @click="onShowUpdate()">{{ $t('settings.updates.updateAvailableAction') }}</Button>
</div>
</Section>
</div>
+4 -4
View File
@@ -238,23 +238,23 @@ defineExpose({
<div class="text-warning" v-if="user && user.source">{{ $t('users.editUserDialog.externalLdapWarning') }}</div>
<div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
<!-- if profile edit is locked a username has to be set here . username is editable until one is set -->
<!-- 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="profileLocked ? true : null" :readonly="user?.username ? true : undefined" />
<TextInput id="usernameInput" v-model="username" :required="!user?.username && profileLocked" :readonly="!!user?.username" />
<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) ? true : undefined" required />
<EmailInput id="emailInput" v-model="email" :readonly="user && user.source" :required="!(user && user.source)" />
<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 && user.source) ? true : undefined"/>
<TextInput id="displayNameInput" v-model="displayName" :readonly="user?.source"/>
<small v-if="!user || !user.username" class="helper-text">{{ $t('users.user.displayNamePlaceholder') }}</small> <!-- don't show if user has already signed up -->
</FormGroup>