@itfin/components 1.4.35 → 1.5.0

package/src/components/view/View.vue

@@ -4,24 +4,26 @@
     <itf-filter-panel
       :search-placeholder="searchPlaceholder"
       search
-      show-filter
+      :visible="!noFilters"
+      :filters-only="filtersOnly"
+      ref="filters"
+      :mini="panel.isMultiple()"
       class="py-2 px-3"
-      :static-filters="filters"
       :endpoint="filtersEndpoint"
       :panel="panel"
       v-model="filter"
-      @input="onFilterSet"
-      @set-table-schema="setTableSchema"
+      @loaded="onFilterSet($event, true)"
+      @change="onFilterSet($event, false)"
     >
       <template #after-filter-btn>
-        <itf-dropdown v-if="$refs.table && tableSchema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
+        <itf-dropdown v-if="$refs.table && schema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
           <template #button>
-            <itf-icon new name="table-config" />
+            <itf-icon new name="table-view" />
           </template>
           <div class="dropdown-header">
             {{ $t('components.table.columns') }}
           </div>
-          <a v-for="(property, n) of tableSchema.properties" :key="n" href="" @click.stop.prevent="$refs.table.toggleVisibility(property.property)" class="dropdown-item justify-content-between d-flex gap-3">
+          <a v-for="(property, n) of schema.properties" :key="n" href="" @click.stop.prevent="$refs.table.toggleVisibility(property.property)" class="dropdown-item justify-content-between d-flex gap-3">
             <div class="d-flex align-items-center gap-1">
               <itf-icon v-if="property.icon" :size="24" new :name="property.icon" />
               {{getTitle(property.title)}}
@@ -40,101 +42,61 @@
             </div>
           </a>
         </itf-dropdown>
-        <itf-dropdown v-if="downloadEndpoint" shadow append-to-context :button-options="{ default: true, small: true }" class="h-100" autoclose="outside">
-          <template #button>
-            <itf-icon name="download"/>
-            {{ $t('export') }}
-          </template>
-          <a v-for="(item, n) in getDownloadLinks()" target="_blank" :key="n" :href="item.link" class="dropdown-item">
-            {{item.title}}
-          </a>
-        </itf-dropdown>
-
-        <slot name="before-tabs"></slot>
-
-        <itf-segmented-control
-          v-if="tabs.length > 1"
-          class="small"
-          v-model="currentTab"
-          item-key="value"
-          :items="tabs"
-        >
-          <template #item="{ item }">
-            <div class="d-flex align-items-center">
-              <itf-icon class="text-muted" new :name="item.icon" />
-              {{item.text}}
-            </div>
-          </template>
-        </itf-segmented-control>
       </template>
     </itf-filter-panel>
 
-    <div v-if="currentTab === 'list'" class="position-relative flex-grow-1">
-      <div class="position-absolute" style="top: 0; left: 0; right: 0; bottom: 0;     overflow: auto;">
-      <slot name="list-view" :items="items" :loading="loading"></slot>
+    <div class="flex-grow-1 px-3 d-flex flex-column">
+      <div class="position-relative flex-grow-1">
+        <itf-table
+          ref="table"
+          style="--shadow-area-width: 0px;"
+          absolute
+          striped
+          clickable
+          column-sorting
+          column-resizing
+          :indicator-type="indicatorType"
+          class="permanent-checkboxes"
+          :state-name="stateName"
+          id-property="id"
+          :rows="preparedItems"
+          :schema="schema"
+          :sorting="sorting"
+          :active="activeIds"
+          :show-actions="showActions"
+          v-model="selectedIds"
+          @row-click="$emit('open', $event)"
+          @update:sorting="updateSorting($event)"
+        >
+          <template v-for="(_, name) in $slots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData || {}"/>
+          </template>
+          <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData || {}"/>
+          </template>
+        </itf-table>
       </div>
     </div>
-    <slot v-else-if="currentTab === 'board'" name="kanban-view"></slot>
-    <slot v-else-if="currentTab === 'calendar'" name="calendar-view"></slot>
-    <slot v-else name="table-view">
-      <div class="flex-grow-1 px-3 d-flex flex-column">
-        <div class="position-relative flex-grow-1">
-          <itf-table
-            ref="table"
-            style="--shadow-area-width: 0px;"
-            absolute
-            striped
-            clickable
-            column-sorting
-            column-resizing
-            :indicator-type="indicatorType"
-            class="permanent-checkboxes"
-            :state-name="stateName"
-            id-property="id"
-            :sort-as-string="sortAsString"
-            :rows="items"
-            :group-by="groupBy"
-            :schema="tableSchema"
-            :sorting.sync="sorting"
-            :active="activeIds"
-            :no-select-all="noSelectAll"
-            :show-actions="showActions"
-            :indicator-width="indicatorWidth"
-            v-model="selectedIds"
-            @row-click="$emit('open', $event)"
-            @update:sorting="updateSorting($event)"
-          >
-            <template v-for="(_, name) in $slots" #[name]="slotData">
-              <slot :name="name" v-bind="slotData || {}"/>
-            </template>
-            <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-              <slot :name="name" v-bind="slotData || {}"/>
-            </template>
-          </itf-table>
-        </div>
-      </div>
-    </slot>
 
     <itf-pagination
       class="my-2 px-3"
-      v-if="showPagination"
       show-size
       :size="size"
-      :items="items"
+      :items="preparedItems"
       :pages="countPages"
       :value="page"
       @input="updatePage($event)"
       @per-page="updateSizePerPage($event)"
     >
       <template #center>
-        <slot name="pagination-center" :totals="totals" />
+        <slot name="pagination-center" />
       </template>
     </itf-pagination>
   </div>
 
 </template>
 <script>
-import {Vue, ModelSync, Component, Prop, Inject, PropSync, Watch} from 'vue-property-decorator';
+import { Vue, ModelSync, Component, Prop, Inject } from 'vue-property-decorator';
 import loading from '../../directives/loading';
 import itfTable from '../table/Table2.vue';
 import itfFilterPanel from '../filter/FilterPanel.vue';
@@ -142,16 +104,11 @@ import itfPagination from '../pagination/Pagination2.vue';
 import itfTableBody from "../table/TableBody.vue";
 import itfIcon from "../icon/Icon.vue";
 import itfDropdown from "../dropdown/Dropdown.vue";
-import itfSegmentedControl from '../segmented-control/SegmentedControl.vue';
-import itfButton from '@itfin/components/src/components/button/Button.vue';
 
 export default @Component({
   name: 'itfView',
   components: {
-    itfButton,
-    itfSegmentedControl,
-    itfDropdown,
-    itfIcon,
+    itfDropdown, itfIcon,
     itfPagination,
     itfFilterPanel,
     itfTableBody,
@@ -166,32 +123,24 @@ class itfView extends Vue {
   @ModelSync('value', 'input') selectedIds;
 
   @Prop({ type: Boolean }) loading;
+  @Prop({ type: Boolean }) filtersOnly;
+  @Prop({ type: Boolean }) noFilters;
   @Prop({ type: Array }) filters;
-  @Prop({ type: Object }) schema;
+  @Prop({ type: Object, required: true }) schema;
+  // @Prop({ default: 20 }) size;
+  // @Prop({ default: 1 }) page;
   @Prop(String) defaultSorting;
   @Prop(String) endpoint;
   @Prop(String) filtersEndpoint;
   @Prop(String) itemsKey;
-  @Prop({ type: String, default: null }) groupBy;
-  @Prop({ type: String, default: null }) downloadEndpoint; // префікс апі для завантаження
-  @Prop({ type: String, default: 'totals' }) totalsKey;
   @Prop(String) panelKey;
   @Prop(String) stateName;
   @Prop({ type: String, default: 'checkbox' }) indicatorType;
-  @Prop({ type: String, default: 'list' }) tab;
   @Prop({ type: String, default () { return this.$t('components.table.search'); } }) searchPlaceholder;
   @Prop() panel;
+  @Prop() hardFilter; // встановлює жорсткий фільтр, наприклад, треба завжди показувати лише по контрагенту
   @Prop(Boolean) showActions;
-  @Prop({ type: Boolean, default: true }) showPagination;
-  @Prop(Boolean) listViewEnabled;
-  @Prop(Boolean) kanbanViewEnabled;
-  @Prop(Boolean) calendarViewEnabled;
-  @Prop(Boolean) noSelectAll;
-  @Prop({ type: Boolean, default: true }) tableViewEnabled;
-  @Prop(Boolean) sortAsString;
-  @Prop(Boolean) oldFormat;
-  @Prop({ default: 45 }) indicatorWidth;
-  @Prop({type: Function, default: null }) onSplitSlectedIds  // якщо потрібно розділяти вибрані рядки в таблиці на дві групи
+  @Prop({ type: Array, default: () => [] }) disabledIds;
 
   page = 1;
   total = 0;
@@ -201,74 +150,10 @@ class itfView extends Vue {
   filter = {};
   loadingData = false;
   activeIds = [];
-  tableColumns = null;
-  totals = null;
-
-  @Watch('selectedIds', { deep: true, immediate: true })
-  updateSelectedIds() {
-    if(this.onSplitSlectedIds && this.items.length && this.selectedIds.length) {
-      this.onSplitSlectedIds(this.selectedIds, this.items);
-    }
-  }
-
-  getDownloadLinks() {
-    const state = this.$refs.table ? this.$refs.table.getTableState() : null;
-    const filter = this.filter;
-    const sorting = this.sorting;
-    const filterableColumnsNames = (state?.columns ?? []).filter(column => column.visible).map(column => column.property);
-
-    const filterWithValue = Object.fromEntries(Object.entries(filter).filter(([_, value]) => typeof value !== 'undefined'));
-    const params = {
-      ...filterWithValue,
-      sort: sorting
-    };
-    if (filterableColumnsNames.length) {
-      params.columns = filterableColumnsNames.join(',')
-    }
-    const xlsQueryParams = new URLSearchParams({ ...params, format: 'xlsx' }).toString();
-    const csvQueryParams = new URLSearchParams({ ...params, format: 'csv' }).toString();
-    return [
-      { title: 'Excel (xlsx)', link: `${this.downloadEndpoint}?${xlsQueryParams}` },
-      { title: 'Plain text (csv)', link: `${this.downloadEndpoint}?${csvQueryParams}` },
-    ];
-  }
-
-  get currentTab() {
-    return this.tab;
-  }
 
-  set currentTab(val) {
-    this.$emit('update:tab', val);
-    this.setPanelPayload({ tab: val });
-  }
-
-  get tabs() {
-    const views = [];
-    if (this.listViewEnabled) {
-      views.push({ value: 'list', text: this.$t('list'), icon: 'list-view' });
-    }
-    if (this.kanbanViewEnabled) {
-      views.push({ value: 'board', text: this.$t('board'), icon: 'kanban-view' });
-    }
-    if (this.calendarViewEnabled) {
-      views.push({ value: 'calendar', text: this.$t('calendar'), icon: 'calendar-view' });
-    }
-    if (this.tableViewEnabled) {
-      views.push({ value: 'table', text: this.$t('table'), icon: 'table-view' });
-    }
-    return views;
-  }
-
-  get tableSchema() {
-    if (this.tableColumns) {
-      return {
-        properties: this.tableColumns
-      }
-    } else if (this.schema) {
-      return this.schema
-    } else {
-      return {}
-    }
+  get preparedItems() {
+    const disabledIdsSet = new Set(this.disabledIds);
+    return this.items.map(item => ({ ...item, isDisabled: disabledIdsSet.has(item.id) }));
   }
 
   created() {
@@ -290,42 +175,35 @@ class itfView extends Vue {
     }
   }
 
-  async loadData() {
+  async loadData(reloadFilters = false) {
     if (!this.endpoint) {
       return;
     }
+    if (reloadFilters) {
+      this.loadFilters();
+    }
     this.$emit('load', this.filter);
     this.loadingData = true;
     await this.$try(async () => {
-      let filter = this.filter;
-      if (this.oldFormat) {
-        filter = Object.keys(filter).reduce((acc, key) => {
-          acc[`filter[${key}]`] = filter[key];
-          return acc;
-        }, {})
-      }
-      const { data, headers } = await this.$axios.get(this.endpoint, {
+      const res = await this.$axios.$get(this.endpoint, {
+        preventRaceCondition: true,
         params: {
-          ...filter,
+          ...Object.assign(this.filter ?? {}, this.hardFilter ?? {}),
           page: this.page,
           size: this.size,
           sort: this.sorting
         }
       });
-      if (this.oldFormat) {
-        this.items = data;
-        this.page = Number(headers['x-page'] ?? 1);
-        this.total = Number(headers['x-count'] ?? 0);
-        this.size = Number(headers['x-size'] ?? 20);
-      } else {
-        this.items = data[this.itemsKey];
-        this.totals = data[this.totalsKey];
-        this.page = data.meta.page;
-        this.total = data.meta.total;
-        this.size = data.meta.size;
-      }
+      this.selectedIds = [];
+      this.items = res[this.itemsKey];
+      this.page = res.meta.page;
+      this.total = res.meta.total;
+      this.size = res.meta.size;
+      this.$emit('update:items', this.items);
+      this.loadingData = false;
+    }, () => {
+      this.loadingData = false;
     });
-    this.loadingData = false;
     this.$emit('loaded', this.filter);
   }
 
@@ -348,16 +226,14 @@ class itfView extends Vue {
 
   updatePage (val) {
     this.page = val;
-    this.selectedIds = [];
-    this.setPanelPayload({ page: val });
+    this.setPanelPayload({ page: val === 1 ? null : val });
     this.loadData();
   }
 
   updateSizePerPage (val) {
     this.page = 1;
     this.size = val;
-    this.selectedIds = [];
-    this.setPanelPayload({ page: 1, size: val });
+    this.setPanelPayload({ page: null, size: val });
     this.loadData();
     localStorage.setItem('sizePerPage', val);
   }
@@ -370,7 +246,9 @@ class itfView extends Vue {
       sources.forEach(source => {
         if (source && typeof source === 'object') {
           Object.entries(source).forEach(([key, value]) => {
-            if (value !== undefined) {
+            if (key === 'page' && value === null) {
+              delete target[key];
+            } else if (value !== undefined) {
               target[key] = value;
             }
           });
@@ -380,27 +258,21 @@ class itfView extends Vue {
     }
   }
 
-  onFilterSet(filter) {
-    this.page = 1;
-    this.selectedIds = [];
-    this.setPanelPayload({ ...filter, page: 1 });
+  onFilterSet(filter, keepPage = false) {
+    if (keepPage) {
+      // при завантаженні сторінки не потрібно скидувати сторінку
+      this.setPanelPayload({ ...filter });
+    } else {
+      this.page = 1;
+      this.setPanelPayload({ ...filter, page: null });
+    }
     this.loadData();
   }
 
-  setTableSchema(tableSchema) {
-    this.tableColumns = tableSchema;
-  }
-
-  getSorting() {
-    return this.sorting;
-  }
-
-  getFilter() {
-    return this.filter;
-  }
-
-  getTableState() {
-    return this.$refs.table ? this.$refs.table.getTableState() : null;
+  loadFilters() {
+    if (this.filtersEndpoint) {
+      this.$refs.filters?.loadData();
+    }
   }
 }
 </script>

package/src/directives/appendToBody.js

@@ -30,6 +30,7 @@ export default {
           width: width + 'px',
           left: left + 'px',
           top: (top + height) + 'px',
+          root: rootEl
         });
       }
 

package/src/helpers/validators.js

@@ -8,12 +8,12 @@ const LINKED_IN_REGEXP = /(http(s)?:\/\/)?([\w]+\.)?linkedin\.com\/(pub|in|profi
 const SPECIAL_CHARS_REGEXP = /^[\w_\-+~,/\\:'"().&*|[\]?# ]+$/i;
 const GREETINGS_REGEXP = /\b(dr|mr|mister|mrs|ms|miss|sir|hello|hi)\b/i;
 const PHONE_REGEXP = /(\+?\(?\+?[0-9]{1,3}\)?[-. ]+([0-9]{2,4})[-. ]?([0-9]{3,5}))|\+?[0-9]{7,}/gi;
+const INTEGER_REGEXP = /^-?\d{0,11}$/;
 const DOUBLE_REGEXP = /^-?\d{0,11}(\.\d{0,8}){0,1}$/;
-const EMAIL_REGEXP = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;
+const EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
 const EMAIL_LIST_REGEXP = /^(\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]{2,4}\s*?,?\s*?)+$/g;
 const HEX_REGEXP = /[0-9A-Fa-f]{6}/;
-const PASSWORD_MIN_LENGTH = 8;
-const PASSWORD_MAX_LENGTH = 50;
+const PASSWORD_REGEX = /^(?=.*\p{Lu})(?=.*\p{Ll})(?=.*\d)(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]).{8,}$/u;
 
 const STANDART_DATE_FORMAT = 'yyyy-MM-dd';
 
@@ -67,6 +67,10 @@ export function emptyArrayValidation (message) {
   return (v, $t = (s) => s) => (Array.isArray(v) && v.length > 0) || (message || $t('components.thisFieldIsRequired'));
 }
 
+export function integerValidation (message) {
+  return (v, $t = (s) => s) => !v || !!(v + '').match(INTEGER_REGEXP) || (message || $t('components.thisFieldMustBeANumberFormatZero'));
+}
+
 export function doubleValidation (message) {
   return (v, $t = (s) => s) => !v || !!(v + '').match(DOUBLE_REGEXP) || (message || $t('components.thisFieldMustBeANumberFormatZero'));
 }
@@ -184,38 +188,8 @@ export function dateSameOrBeforeValidation (dateCompare, message) {
   };
 }
 
-export function hasUppercaseValidation(message) {
-  return (v, $t) => {
-    return !isEmpty(v) && /\p{Lu}/u.test(v + '') || (message || $t('components.atLeastOneUppercaseLetterRequired'));
-  };
-}
-
-export function hasLowercaseValidation(message) {
-  return (v, $t) => {
-    return !isEmpty(v) && /\p{Ll}/u.test(v + '') || (message || $t('components.atLeastOneLowercaseLetterRequired'));
-  };
-}
-
-export function hasDigitValidation(message) {
-  return (v, $t) => {
-    return !isEmpty(v) && /\d/.test(v + '') || (message || $t('components.atLeastOneNumberRequired'));
-  };
-}
-
-export function hasSpecialCharValidation(message) {
+export function passwordValidation(message) {
   return (v, $t) => {
-    return !isEmpty(v) && /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/.test(v + '') || (message || $t('components.atLeastOneSpecialCharacterRequired'));
+    return !isEmpty(v) && PASSWORD_REGEX.test(v.trim() + '') || (message || $t('components.passwordValidation'));
   };
 }
-
-export function accountPasswordValidation(message) {
-  return [
-    emptyValidation(message),
-    minLengthValidation(PASSWORD_MIN_LENGTH, message),
-    lengthValidation(PASSWORD_MAX_LENGTH, message),
-    hasUppercaseValidation(message),
-    hasLowercaseValidation(message),
-    hasDigitValidation(message),
-    hasSpecialCharValidation(message),
-  ];
-}

package/src/helpers/validators.spec.js

@@ -7,10 +7,7 @@ import {
   dateAfterValidation,
   dateSameOrAfterValidation,
   dateSameOrBeforeValidation,
-  hasUppercaseValidation,
-  hasLowercaseValidation,
-  hasDigitValidation,
-  hasSpecialCharValidation,
+  passwordValidation,
 } from './validators';
 
 describe('Validators', () => {
@@ -86,50 +83,16 @@ describe('Validators', () => {
     expect(mediumTextValidation()('0'.repeat(16777216), $t)).toEqual('components.mediumTextLength');
   });
 
-  test('hasUppercaseValidation', () => {
-    expect(hasUppercaseValidation()('', $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
-    expect(hasUppercaseValidation()(' ', $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
-    expect(hasUppercaseValidation()(null, $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
-    expect(hasUppercaseValidation()(undefined, $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
-    expect(hasUppercaseValidation()('A', $t)).toEqual(true);
-    expect(hasUppercaseValidation()(' Test ', $t)).toEqual(true);
-    expect(hasUppercaseValidation()(' test ', $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
-    expect(hasUppercaseValidation()(' Тест ', $t)).toEqual(true);
-    expect(hasUppercaseValidation()(' тест ', $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
-    expect(hasUppercaseValidation()(' ТЕСТ ', $t)).toEqual(true);
-  });
-
-  test('hasLowercaseValidation', () => {
-    expect(hasLowercaseValidation()('', $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
-    expect(hasLowercaseValidation()(' ', $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
-    expect(hasLowercaseValidation()(null, $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
-    expect(hasLowercaseValidation()(undefined, $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
-    expect(hasLowercaseValidation()('a', $t)).toEqual(true);
-    expect(hasLowercaseValidation()(' test ', $t)).toEqual(true);
-    expect(hasLowercaseValidation()('A', $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
-    expect(hasLowercaseValidation()(' Test ', $t)).toEqual(true);
-    expect(hasLowercaseValidation()(' Тест ', $t)).toEqual(true);
-    expect(hasLowercaseValidation()(' тест ', $t)).toEqual(true);
-    expect(hasLowercaseValidation()(' ТЕСТ ', $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
-  })
-
-  test('hasDigitValidation', () => {
-    expect(hasDigitValidation()('', $t)).toEqual('components.atLeastOneNumberRequired');
-    expect(hasDigitValidation()(' ', $t)).toEqual('components.atLeastOneNumberRequired');
-    expect(hasDigitValidation()(null, $t)).toEqual('components.atLeastOneNumberRequired');
-    expect(hasDigitValidation()(undefined, $t)).toEqual('components.atLeastOneNumberRequired');
-    expect(hasDigitValidation()('1', $t)).toEqual(true);
-    expect(hasDigitValidation()(' 1 ', $t)).toEqual(true);
-    expect(hasDigitValidation()('a', $t)).toEqual('components.atLeastOneNumberRequired');
-  });
 
-  test('hasSpecialCharValidation', () => {
-    expect(hasSpecialCharValidation()('', $t)).toEqual('components.atLeastOneSpecialCharacterRequired');
-    expect(hasSpecialCharValidation()(' ', $t)).toEqual('components.atLeastOneSpecialCharacterRequired');
-    expect(hasSpecialCharValidation()(null, $t)).toEqual('components.atLeastOneSpecialCharacterRequired');
-    expect(hasSpecialCharValidation()(undefined, $t)).toEqual('components.atLeastOneSpecialCharacterRequired');
-    expect(hasSpecialCharValidation()('@', $t)).toEqual(true);
-    expect(hasSpecialCharValidation()(' @ ', $t)).toEqual(true);
-    expect(hasSpecialCharValidation()('a', $t)).toEqual('components.atLeastOneSpecialCharacterRequired');
+  test('passwordValidation', () => {
+    expect(passwordValidation()('', $t)).toEqual('components.passwordValidation');
+    expect(passwordValidation()(' ', $t)).toEqual('components.passwordValidation');
+    expect(passwordValidation()(null, $t)).toEqual('components.passwordValidation');
+    expect(passwordValidation()(undefined, $t)).toEqual('components.passwordValidation');
+    expect(passwordValidation()(' тесттест ', $t)).toEqual('components.passwordValidation');
+    expect(passwordValidation()(' ТЕСТТЕСТ ', $t)).toEqual('components.passwordValidation');
+    expect(passwordValidation()(' ТестТест ', $t)).toEqual('components.passwordValidation');
+    expect(passwordValidation()(' ТестТест1 ', $t)).toEqual('components.passwordValidation');
+    expect(passwordValidation()(' ТестТест1@ ', $t)).toEqual(true);
   });
 });

package/src/locales/en.js

@@ -56,10 +56,6 @@ module.exports = {
   addMore: 'Add more',
   close: 'Close',
   wholeYear: 'Whole year',
-  atLeastOneUppercaseLetterRequired: 'At least one uppercase letter is required',
-  atLeastOneLowercaseLetterRequired: 'At least one lowercase letter is required',
-  atLeastOneNumberRequired: 'At least one number is required',
-  atLeastOneSpecialCharacterRequired: 'At least one special character is required (e.g. @,$,!,%,*,?,&)',
 
   select: {
     loading: 'Loading...',
@@ -103,7 +99,7 @@ module.exports = {
     copyingToClipboardWasSuccessful: 'Copying to clipboard was successful',
   },
   table: {
-    new: 'New row',
+    new: 'New',
     noResults: 'No items',
     sortAscending: 'Sort ascending',
     sortDescending: 'Sort descending',
@@ -156,5 +152,7 @@ module.exports = {
     from: 'From',
     to: 'To',
     value: 'Value',
-  }
+  },
+  passwordValidation: 'Password should contain at least 8 characters, including uppercase letters, lowercase letters, numbers, and special characters (e.g. @, $, !, %, *, ?, &)',
+  iveGotIt: 'I\'ve got it',
 };