web/satellite/vuetify-poc: set input value length limits

Ensure that text inputs have length limits, like in production and more.

Issue:
https://github.com/storj/storj/issues/6536

Change-Id: I2f216cc57d6bcb49b88c34ce53bed58327b0cdc6
This commit is contained in:
Vitalii 2023-11-28 14:22:20 +02:00 committed by Storj Robot
parent 20a3045e1a
commit 1546732afc
34 changed files with 36 additions and 39 deletions

View File

@ -14,6 +14,7 @@
clearable
density="comfortable"
rounded="lg"
:maxlength="MAX_SEARCH_VALUE_LENGTH"
class="mx-2 mt-2"
/>
@ -87,6 +88,7 @@ import { useNotify } from '@/utils/hooks';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { DEFAULT_PAGE_LIMIT } from '@/types/pagination';
import { SortDirection, tableSizeOptions } from '@/types/common';
import { MAX_SEARCH_VALUE_LENGTH } from '@poc/types/common';
import DeleteAccessDialog from '@poc/components/dialogs/DeleteAccessDialog.vue';
import IconTrash from '@poc/components/icons/IconTrash.vue';

View File

@ -14,6 +14,7 @@
clearable
density="comfortable"
rounded="lg"
:maxlength="MAX_SEARCH_VALUE_LENGTH"
class="mx-2 mt-2"
/>
@ -137,6 +138,7 @@ import { tableSizeOptions } from '@/types/common';
import { RouteConfig } from '@/types/router';
import { EdgeCredentials } from '@/types/accessGrants';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import { MAX_SEARCH_VALUE_LENGTH } from '@poc/types/common';
import IconTrash from '@poc/components/icons/IconTrash.vue';
import IconShare from '@poc/components/icons/IconShare.vue';

View File

@ -28,6 +28,7 @@
clearable
density="comfortable"
rounded="lg"
:maxlength="MAX_SEARCH_VALUE_LENGTH"
class="mx-2 mt-2"
/>
</v-col>
@ -153,6 +154,7 @@ import { Project } from '@/types/projects';
import { SortDirection, tableSizeOptions } from '@/types/common';
import { useUsersStore } from '@/store/modules/usersStore';
import { useConfigStore } from '@/store/modules/configStore';
import { MAX_SEARCH_VALUE_LENGTH } from '@poc/types/common';
import IconTrash from '@poc/components/icons/IconTrash.vue';
import IconCopy from '@poc/components/icons/IconCopy.vue';

View File

@ -62,7 +62,6 @@
</template>
<script setup lang="ts">
import { VBtn, VBtnGroup, VCard, VChip, VCol, VRow, VSelect } from 'vuetify/components';
import { computed, onMounted, ref } from 'vue';
import { VDataTable } from 'vuetify/labs/components';

View File

@ -60,6 +60,7 @@
v-model="email"
variant="outlined"
:rules="emailRules"
maxlength="72"
label="Enter e-mail"
hint="Members will have read & write permissions."
required

View File

@ -40,6 +40,7 @@
:rules="[RequiredRule]"
label="Coupon Code"
:hide-details="false"
maxlength="50"
autofocus
/>
</v-form>

View File

@ -44,9 +44,7 @@
<v-form v-model="formValid" class="px-7 pt-9 pb-4">
<v-row>
<v-col
cols="12"
>
<v-col cols="12">
<v-text-field
v-model="folder"
variant="outlined"
@ -54,6 +52,7 @@
label="Folder Name"
placeholder="Enter a folder name"
:hide-details="false"
maxlength="50"
required
autofocus
/>

View File

@ -37,6 +37,7 @@
label="Full name"
placeholder="Enter your name"
:hide-details="false"
maxlength="72"
required
autofocus
class="mt-2"

View File

@ -13,7 +13,7 @@
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pa-5 pl-7 pos-relative">
<template #prepend>
<img class="d-block" :src="STEP_ICON_AND_TITLE[step].icon">
<img class="d-block" :src="STEP_ICON_AND_TITLE[step].icon" alt="icon">
</template>
<v-card-title class="font-weight-bold">

View File

@ -92,7 +92,6 @@ import {
import { useLoading } from '@/composables/useLoading';
import { useConfigStore } from '@/store/modules/configStore';
import { useUsersStore } from '@/store/modules/usersStore';
import { useNotify } from '@/utils/hooks';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';

View File

@ -108,6 +108,7 @@
type="number"
:rules="projectLimitRules"
:model-value="inputText"
maxlength="4"
@update:model-value="updateInputText"
/>
</v-col>

View File

@ -62,7 +62,7 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { ref, computed, watch } from 'vue';
import {
VDialog,
VCard,

View File

@ -42,6 +42,7 @@
:error-messages="isError ? 'Invalid code. Please re-enter.' : ''"
:label="useRecoveryCode ? 'Recovery code' : '2FA Code'"
:hide-details="false"
:maxlength="useRecoveryCode ? 50 : 6"
required
autofocus
/>

View File

@ -36,6 +36,7 @@
:rules="rules"
:label="`Project ${field}`"
:counter="maxLength"
:maxlength="maxLength"
persistent-counter
:hide-details="false"
autofocus

View File

@ -40,6 +40,7 @@
:rules="rules"
:hide-details="false"
:model-value="inputText"
maxlength="50"
@update:model-value="updateInputText"
>
<template #append-inner>

View File

@ -61,6 +61,7 @@
:error-messages="isError ? 'Invalid code. Please re-enter.' : ''"
label="2FA Code"
:hide-details="false"
maxlength="6"
required
autofocus
/>

View File

@ -10,7 +10,7 @@
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg">
<img class="d-block" src="@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg" alt="icon">
</template>
<v-card-title class="font-weight-bold">

View File

@ -43,6 +43,7 @@
:error-messages="isError ? 'Invalid code. Please re-enter.' : ''"
:label="useRecoveryCode ? 'Recovery code' : '2FA Code'"
:hide-details="false"
:maxlength="useRecoveryCode ? 50 : 6"
required
autofocus
/>

View File

@ -31,7 +31,7 @@
<script setup lang="ts">
import { ref } from 'vue';
import { generateMnemonic } from 'bip39-english';
import { VForm, VRow, VCol, VCheckbox, VDivider } from 'vuetify/components';
import { VForm, VRow, VCol, VCheckbox } from 'vuetify/components';
import { RequiredRule, DialogStepComponent } from '@poc/types/common';

View File

@ -98,7 +98,6 @@ import {
VExpandTransition,
VAlert,
VTextField,
VDivider,
} from 'vuetify/components';
import { PassphraseOption } from '@/types/createAccessGrant';

View File

@ -13,6 +13,7 @@
autofocus
:hide-details="false"
:rules="nameRules"
maxlength="100"
class="mb-n2"
/>
</v-col>

View File

@ -15,7 +15,6 @@
label="I understand, don't show this again."
color="default"
:hide-details="false"
:rules="[ RequiredRule ]"
@update:model-value="value => LocalData.setServerSideEncryptionModalHidden(value)"
/>
</v-col>

View File

@ -55,7 +55,7 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { VDivider, VBtn, VIcon, VCol, VRow } from 'vuetify/components';
import { VBtn, VIcon, VCol, VRow } from 'vuetify/components';
import { useTheme } from 'vuetify';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';

View File

@ -39,7 +39,7 @@
</template>
<script setup lang="ts">
import { VBtn, VCol, VDivider, VIcon, VRow } from 'vuetify/components';
import { VBtn, VCol, VIcon, VRow } from 'vuetify/components';
import { useUsersStore } from '@/store/modules/usersStore';
import { useNotify } from '@/utils/hooks';

View File

@ -14,7 +14,7 @@
</template>
<script setup lang="ts">
import { computed, onBeforeMount } from 'vue';
import { onBeforeMount } from 'vue';
import { VApp } from 'vuetify/components';
import DefaultBar from './AppBar.vue';

View File

@ -14,7 +14,7 @@
<script setup lang="ts">
import { VApp } from 'vuetify/components';
import { computed, onBeforeMount } from 'vue';
import { onBeforeMount } from 'vue';
import DefaultBar from './AppBar.vue';
import DefaultView from './View.vue';

View File

@ -90,9 +90,6 @@
<!-- My Account Menu -->
<v-list class="px-2 rounded-lg">
<v-list-item v-if="billingEnabled" class="py-2 rounded-lg">
<!-- <template #prepend>
<icon-team size="18"></icon-team>
</template> -->
<v-list-item-title class="text-body-2">
<v-chip
class="font-weight-bold"
@ -201,12 +198,10 @@ import { useAnalyticsStore } from '@/store/modules/analyticsStore';
import { useConfigStore } from '@/store/modules/configStore';
import IconCard from '@poc/components/icons/IconCard.vue';
import IconGlobe from '@poc/components/icons/IconGlobe.vue';
import IconUpgrade from '@poc/components/icons/IconUpgrade.vue';
import IconSettings from '@poc/components/icons/IconSettings.vue';
import IconLogout from '@poc/components/icons/IconLogout.vue';
import IconRegion from '@poc/components/icons/IconRegion.vue';
import IconTeam from '@poc/components/icons/IconTeam.vue';
const activeTheme = ref<number>(0);
const theme = useTheme();

View File

@ -73,7 +73,6 @@ import { VAppBar, VAppBarTitle, VBtn, VBtnToggle, VIcon, VImg, VMenu, VTooltip }
const theme = useTheme();
const activeTheme = ref(0);
const drawer = ref(true);
const menu = ref(false);
function toggleTheme(newTheme: string): void {

View File

@ -326,7 +326,7 @@ const selectedProject = computed((): Project => {
return projectsStore.state.selectedProject;
});
/*
/**
* Returns user's own projects.
*/
const ownProjects = computed((): Project[] => {

View File

@ -24,3 +24,5 @@ export type SaveButtonsItem = string | {
name: string;
value: string;
};
export const MAX_SEARCH_VALUE_LENGTH = 200;

View File

@ -12,6 +12,7 @@
:loading="loading"
autofocus
class="my-2"
maxlength="6"
@update:modelValue="value => onValueChange(value)"
/>
</v-card>
@ -45,6 +46,7 @@
label="Recovery Code"
class="mt-5"
required
maxlength="50"
@update:modelValue="value => onValueChange(value)"
/>
<v-btn

View File

@ -25,16 +25,11 @@
name="email"
type="email"
placeholder="Enter your email"
maxlength="72"
flat
clearable
required
>
<!-- <template v-slot:prepend-inner>
<v-icon
icon="mdi-email-outline"
/>
</template> -->
</v-text-field>
<v-text-field
v-model="password"
@ -44,13 +39,7 @@
:type="showPassword ? 'text' : 'password'"
:append-inner-icon="showPassword ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
@click:append-inner="showPassword = !showPassword"
>
<!-- <template v-slot:prepend-inner>
<v-icon
icon="mdi-key-outline"
/>
</template> -->
</v-text-field>
<v-checkbox density="compact" hide-details="true" required>
<template #label>

View File

@ -42,5 +42,4 @@ const projectsStore = useProjectsStore();
const isAddMemberDialogShown = ref<boolean>(false);
const selectedProjectID = computed((): string => projectsStore.state.selectedProject.id);
</script>