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
Storj Robot
parent
20a3045e1a
commit
1546732afc
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
:rules="[RequiredRule]"
|
||||
label="Coupon Code"
|
||||
:hide-details="false"
|
||||
maxlength="50"
|
||||
autofocus
|
||||
/>
|
||||
</v-form>
|
||||
|
||||
@ -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
|
||||
/>
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
label="Full name"
|
||||
placeholder="Enter your name"
|
||||
:hide-details="false"
|
||||
maxlength="72"
|
||||
required
|
||||
autofocus
|
||||
class="mt-2"
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -108,6 +108,7 @@
|
||||
type="number"
|
||||
:rules="projectLimitRules"
|
||||
:model-value="inputText"
|
||||
maxlength="4"
|
||||
@update:model-value="updateInputText"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
/>
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
:rules="rules"
|
||||
:label="`Project ${field}`"
|
||||
:counter="maxLength"
|
||||
:maxlength="maxLength"
|
||||
persistent-counter
|
||||
:hide-details="false"
|
||||
autofocus
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
:rules="rules"
|
||||
:hide-details="false"
|
||||
:model-value="inputText"
|
||||
maxlength="50"
|
||||
@update:model-value="updateInputText"
|
||||
>
|
||||
<template #append-inner>
|
||||
|
||||
@ -61,6 +61,7 @@
|
||||
:error-messages="isError ? 'Invalid code. Please re-enter.' : ''"
|
||||
label="2FA Code"
|
||||
:hide-details="false"
|
||||
maxlength="6"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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
|
||||
/>
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -98,7 +98,6 @@ import {
|
||||
VExpandTransition,
|
||||
VAlert,
|
||||
VTextField,
|
||||
VDivider,
|
||||
} from 'vuetify/components';
|
||||
|
||||
import { PassphraseOption } from '@/types/createAccessGrant';
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
autofocus
|
||||
:hide-details="false"
|
||||
:rules="nameRules"
|
||||
maxlength="100"
|
||||
class="mb-n2"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -326,7 +326,7 @@ const selectedProject = computed((): Project => {
|
||||
return projectsStore.state.selectedProject;
|
||||
});
|
||||
|
||||
/*
|
||||
/**
|
||||
* Returns user's own projects.
|
||||
*/
|
||||
const ownProjects = computed((): Project[] => {
|
||||
|
||||
@ -24,3 +24,5 @@ export type SaveButtonsItem = string | {
|
||||
name: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
export const MAX_SEARCH_VALUE_LENGTH = 200;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -42,5 +42,4 @@ const projectsStore = useProjectsStore();
|
||||
const isAddMemberDialogShown = ref<boolean>(false);
|
||||
|
||||
const selectedProjectID = computed((): string => projectsStore.state.selectedProject.id);
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user