web/satellite/vuetify-poc: always show details container under validatable inputs
Inputs that have some custom validation messaging attached should not use hide-details=auto to prevent 'jumpy' visual experience. Issue: https://github.com/storj/storj/issues/6230 Change-Id: Ia90e122516eb853a3908c0f57634971243fb38b3
This commit is contained in:
Vitalii
Storj Robot
parent
088496efdf
commit
4e4da7be6d
@ -36,6 +36,7 @@
|
||||
variant="outlined"
|
||||
:rules="rules"
|
||||
label="Full name"
|
||||
:hide-details="false"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
type="password"
|
||||
:rules="oldRules"
|
||||
label="Current password"
|
||||
:hide-details="false"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
@ -51,6 +52,7 @@
|
||||
type="password"
|
||||
:rules="newRules"
|
||||
label="New password"
|
||||
:hide-details="false"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
@ -60,6 +62,7 @@
|
||||
type="password"
|
||||
:rules="repeatRules"
|
||||
label="Repeat password"
|
||||
:hide-details="false"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
@ -34,17 +34,16 @@
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="formValid" class="pa-8 pb-3" @submit.prevent="onCreate">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<p>Buckets are used to store and organize your files.</p>
|
||||
|
||||
<v-row class="ma-0">
|
||||
<p>Buckets are used to store and organize your files.</p>
|
||||
<v-col class="px-0 flex-1-1-100">
|
||||
<v-text-field
|
||||
v-model="bucketName"
|
||||
variant="outlined"
|
||||
:rules="bucketNameRules"
|
||||
label="Enter bucket name"
|
||||
hint="Lowercase letters, numbers, hyphens (-), and periods (.)"
|
||||
hide-details="auto"
|
||||
:hide-details="false"
|
||||
required
|
||||
autofocus
|
||||
class="mt-8 mb-3"
|
||||
|
||||
@ -46,6 +46,7 @@
|
||||
label="Project Name"
|
||||
:counter="MAX_NAME_LENGTH"
|
||||
persistent-counter
|
||||
:hide-details="false"
|
||||
autofocus
|
||||
/>
|
||||
<v-btn
|
||||
@ -64,6 +65,7 @@
|
||||
v-model="description"
|
||||
variant="outlined"
|
||||
:rules="descriptionRules"
|
||||
:hide-details="false"
|
||||
label="Project Description (Optional)"
|
||||
:counter="MAX_DESCRIPTION_LENGTH"
|
||||
persistent-counter
|
||||
@ -103,7 +105,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, Component } from 'vue';
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import {
|
||||
VDialog,
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
:rules="rules"
|
||||
:error-messages="isError ? 'Invalid code. Please re-enter.' : ''"
|
||||
:label="useRecoveryCode ? 'Recovery code' : '2FA Code'"
|
||||
hide-details="auto"
|
||||
:hide-details="false"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
@ -95,7 +95,6 @@ import {
|
||||
VDialog,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VTextField,
|
||||
} from 'vuetify/components';
|
||||
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
:label="`Project ${field}`"
|
||||
:counter="maxLength"
|
||||
persistent-counter
|
||||
:hide-details="false"
|
||||
autofocus
|
||||
/>
|
||||
</v-form>
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
density="compact"
|
||||
type="number"
|
||||
:rules="rules"
|
||||
:hide-details="false"
|
||||
:model-value="inputText"
|
||||
@update:model-value="updateInputText"
|
||||
>
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
:rules="rules"
|
||||
:error-messages="isError ? 'Invalid code. Please re-enter.' : ''"
|
||||
label="2FA Code"
|
||||
hide-details="auto"
|
||||
:hide-details="false"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
@ -153,7 +153,6 @@ import {
|
||||
VDialog,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VTextField,
|
||||
VWindow,
|
||||
VWindowItem,
|
||||
|
||||
@ -45,12 +45,11 @@
|
||||
<v-text-field
|
||||
v-model="passphrase"
|
||||
:base-color="isWarningState ? 'warning' : ''"
|
||||
|
||||
label="Encryption Passphrase"
|
||||
:append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
|
||||
:type="isPassphraseVisible ? 'text' : 'password'"
|
||||
variant="outlined"
|
||||
hide-details="auto"
|
||||
:hide-details="false"
|
||||
:rules="[ RequiredRule ]"
|
||||
@click:append-inner="isPassphraseVisible = !isPassphraseVisible"
|
||||
/>
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
:append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
|
||||
:type="isPassphraseVisible ? 'text' : 'password'"
|
||||
:rules="passphraseRules"
|
||||
:hide-details="false"
|
||||
@click:append-inner="isPassphraseVisible = !isPassphraseVisible"
|
||||
/>
|
||||
<v-divider class="my-4" />
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
multiple
|
||||
chips
|
||||
closable-chips
|
||||
hide-details="auto"
|
||||
:hide-details="false"
|
||||
:rules="[ RequiredRule ]"
|
||||
>
|
||||
<template #prepend-item>
|
||||
@ -60,7 +60,7 @@
|
||||
multiple
|
||||
chips
|
||||
closable-chips
|
||||
hide-details="auto"
|
||||
:hide-details="false"
|
||||
:rules="bucketsRules"
|
||||
:custom-filter="bucketFilter"
|
||||
>
|
||||
@ -96,7 +96,7 @@
|
||||
color="default"
|
||||
label="End date"
|
||||
return-object
|
||||
hide-details="auto"
|
||||
:hide-details="false"
|
||||
:items="endDateItems"
|
||||
:rules="[ RequiredRule ]"
|
||||
>
|
||||
|
||||
@ -12,14 +12,14 @@
|
||||
variant="outlined"
|
||||
color="default"
|
||||
autofocus
|
||||
hide-details="auto"
|
||||
:hide-details="false"
|
||||
:rules="nameRules"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<h4 class="mb-2">Type</h4>
|
||||
<v-input v-model="types" :rules="[ RequiredRule ]" hide-details="auto">
|
||||
<v-input v-model="types" :rules="[ RequiredRule ]" :hide-details="false">
|
||||
<div>
|
||||
<v-checkbox
|
||||
v-for="accessType in typeOrder"
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<v-checkbox
|
||||
density="compact"
|
||||
label="I understand, don't show this again."
|
||||
hide-details="auto"
|
||||
:hide-details="false"
|
||||
:rules="[ RequiredRule ]"
|
||||
@update:model-value="value => LocalData.setServerSideEncryptionModalHidden(value)"
|
||||
/>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
:append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
|
||||
:type="isPassphraseVisible ? 'text' : 'password'"
|
||||
variant="outlined"
|
||||
hide-details="auto"
|
||||
:hide-details="false"
|
||||
:rules="[ RequiredRule ]"
|
||||
@click:append-inner="isPassphraseVisible = !isPassphraseVisible"
|
||||
/>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
density="compact"
|
||||
color="primary"
|
||||
label="Yes, I saved my encryption passphrase."
|
||||
hide-details="auto"
|
||||
:hide-details="false"
|
||||
:rules="[ RequiredRule ]"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user