web/satellite: logic removed from template (#3136)
This commit is contained in:
Vitalii Shpital
Nikolay Yurchenko
parent
4f2f8ae11b
commit
6a1203ea46
@ -6,8 +6,9 @@
|
||||
<h1 class="account-area-container__title">Account</h1>
|
||||
<TabNavigation
|
||||
class="account-area-container__navigation"
|
||||
:navigation="navigation"/>
|
||||
<router-view />
|
||||
:navigation="navigation"
|
||||
/>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -29,8 +29,8 @@
|
||||
viewBox="0 0 34 34"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="34" height="34" rx="17" fill="#EB5757"/>
|
||||
<path d="M19.7834 11.9727V11.409C19.7834 10.6576 19.1215 10 18.2706 10H16.0014C15.1504 10 14.4886 10.6576 14.4886 11.409V11.9727H10.7065V13.1938H12.0302V22.3057C12.0302 23.5269 12.9758 24.4662 14.0158 24.4662H20.1616C21.2962 24.4662 22.1471 23.5269 22.1471 22.3057V13.1938H23.4709V11.9727H19.7834ZM16.6632 22.3057H15.3395V14.2271H16.6632V22.3057ZM18.9324 22.3057H17.6087V14.2271H18.9324V22.3057Z" fill="white"/>
|
||||
<rect width="34" height="34" rx="17" fill="#EB5757"/>
|
||||
<path d="M19.7834 11.9727V11.409C19.7834 10.6576 19.1215 10 18.2706 10H16.0014C15.1504 10 14.4886 10.6576 14.4886 11.409V11.9727H10.7065V13.1938H12.0302V22.3057C12.0302 23.5269 12.9758 24.4662 14.0158 24.4662H20.1616C21.2962 24.4662 22.1471 23.5269 22.1471 22.3057V13.1938H23.4709V11.9727H19.7834ZM16.6632 22.3057H15.3395V14.2271H16.6632V22.3057ZM18.9324 22.3057H17.6087V14.2271H18.9324V22.3057Z" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,7 +39,8 @@
|
||||
label="Add Card"
|
||||
width="140px"
|
||||
height="48px"
|
||||
is-disabled="true"/>
|
||||
is-disabled="true"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -21,7 +21,8 @@
|
||||
is-password="true"
|
||||
ref="oldPasswordInput"
|
||||
:error="oldPasswordError"
|
||||
@setData="setOldPassword" />
|
||||
@setData="setOldPassword"
|
||||
/>
|
||||
<HeaderlessInput
|
||||
class="full-input mt"
|
||||
label="New Password"
|
||||
@ -30,7 +31,8 @@
|
||||
ref="newPasswordInput"
|
||||
is-password="true"
|
||||
:error="newPasswordError"
|
||||
@setData="setNewPassword" />
|
||||
@setData="setNewPassword"
|
||||
/>
|
||||
<HeaderlessInput
|
||||
class="full-input mt"
|
||||
label="Confirm password"
|
||||
@ -39,19 +41,22 @@
|
||||
ref="confirmPasswordInput"
|
||||
is-password="true"
|
||||
:error="confirmationPasswordError"
|
||||
@setData="setPasswordConfirmation" />
|
||||
@setData="setPasswordConfirmation"
|
||||
/>
|
||||
<div class="change-password-popup__form-container__button-container">
|
||||
<VButton
|
||||
label="Cancel"
|
||||
width="205px"
|
||||
height="48px"
|
||||
:on-press="onCloseClick"
|
||||
is-white="true" />
|
||||
is-white="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Update"
|
||||
width="205px"
|
||||
height="48px"
|
||||
:on-press="onUpdateClick" />
|
||||
:on-press="onUpdateClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="change-password-popup__close-cross-container" @click="onCloseClick">
|
||||
|
||||
@ -46,20 +46,22 @@
|
||||
width='100%'
|
||||
is-password="true"
|
||||
:error='passwordError'
|
||||
@setData='setPassword'>
|
||||
</HeaderedInput>
|
||||
@setData='setPassword'
|
||||
/>
|
||||
<div class='delete-account__form-container__button-container'>
|
||||
<VButton
|
||||
label='Cancel'
|
||||
width='205px' height='48px'
|
||||
:on-press='onCloseClick'
|
||||
is-white="true"/>
|
||||
is-white="true"
|
||||
/>
|
||||
<VButton
|
||||
label='Delete'
|
||||
width='205px'
|
||||
height='48px'
|
||||
class='red'
|
||||
:on-press='onDeleteAccountClick'/>
|
||||
:on-press='onDeleteAccountClick'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class='delete-account__close-cross-container' @click='onCloseClick'>
|
||||
|
||||
@ -19,7 +19,8 @@
|
||||
ref="fullNameInput"
|
||||
:error="fullNameError"
|
||||
:init-value="userInfo.fullName"
|
||||
@setData="setFullName" />
|
||||
@setData="setFullName"
|
||||
/>
|
||||
<HeaderedInput
|
||||
class="full-input"
|
||||
label="Nickname"
|
||||
@ -27,19 +28,22 @@
|
||||
width="100%"
|
||||
ref="shortNameInput"
|
||||
:init-value="userInfo.shortName"
|
||||
@setData="setShortName"/>
|
||||
@setData="setShortName"
|
||||
/>
|
||||
<div class="edit-profile-popup__form-container__button-container">
|
||||
<VButton
|
||||
label="Cancel"
|
||||
width="205px"
|
||||
height="48px"
|
||||
:on-press="onCloseClick"
|
||||
is-white="true" />
|
||||
is-white="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Update"
|
||||
width="205px"
|
||||
height="48px"
|
||||
:on-press="onUpdateClick" />
|
||||
:on-press="onUpdateClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-profile-popup__close-cross-container" @click="onCloseClick">
|
||||
|
||||
@ -59,11 +59,12 @@
|
||||
width="210px"
|
||||
height="56px"
|
||||
:on-press="toggleDeleteAccountPopup"
|
||||
is-deletion="true"/>
|
||||
is-deletion="true"
|
||||
/>
|
||||
</div>
|
||||
<ChangePasswordPopup v-if="isChangePasswordPopupShown"/>
|
||||
<EditProfilePopup v-if="isEditProfilePopupShown"/>
|
||||
<DeleteAccountPopup v-if="isDeleteAccountPopupShown" />
|
||||
<DeleteAccountPopup v-if="isDeleteAccountPopupShown"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
<VInfo
|
||||
class="account-balance-area__title-area__info-button"
|
||||
bold-text="Prepaid STORJ token amount and any additional credits, minus current usage">
|
||||
<svg class="account-balance-area__title-area__info-button__image" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="account-balance-svg-rect" x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#AFB7C1"/>
|
||||
<path class="account-balance-svg-path" d="M7 7.25177C7.00959 6.23527 7.28777 5.44177 7.83453 4.87129C8.38129 4.29043 9.1199 4 10.0504 4C10.952 4 11.6667 4.22819 12.1942 4.68458C12.7314 5.14097 13 5.79444 13 6.64498C13 7.03913 12.9376 7.38661 12.8129 7.68741C12.6882 7.98821 12.5396 8.24234 12.3669 8.44979C12.1942 8.65724 11.9592 8.90099 11.6619 9.18105C11.2686 9.54408 10.9712 9.876 10.7698 10.1768C10.5779 10.4672 10.482 10.8303 10.482 11.2659H9.04317C9.04317 10.851 9.10072 10.488 9.21583 10.1768C9.33094 9.86563 9.46523 9.6115 9.61871 9.41443C9.78177 9.20698 10.0024 8.96841 10.2806 8.69873C10.6067 8.37718 10.8465 8.09712 11 7.85856C11.1535 7.61999 11.2302 7.31919 11.2302 6.95615C11.2302 6.55163 11.1103 6.25082 10.8705 6.05375C10.6403 5.8463 10.3141 5.74257 9.89209 5.74257C9.45084 5.74257 9.10552 5.87223 8.85611 6.13154C8.60671 6.38048 8.47242 6.75389 8.45324 7.25177H7ZM9.73381 12.7595C10.0216 12.7595 10.2566 12.8633 10.4388 13.0707C10.6307 13.2782 10.7266 13.5427 10.7266 13.8642C10.7266 14.1961 10.6307 14.471 10.4388 14.6888C10.2566 14.8963 10.0216 15 9.73381 15C9.45564 15 9.22062 14.8911 9.02878 14.6733C8.84652 14.4554 8.7554 14.1858 8.7554 13.8642C8.7554 13.5427 8.84652 13.2782 9.02878 13.0707C9.22062 12.8633 9.45564 12.7595 9.73381 12.7595Z" fill="#354049"/>
|
||||
</svg>
|
||||
<svg class="account-balance-area__title-area__info-button__image" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="account-balance-svg-rect" x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#AFB7C1"/>
|
||||
<path class="account-balance-svg-path" d="M7 7.25177C7.00959 6.23527 7.28777 5.44177 7.83453 4.87129C8.38129 4.29043 9.1199 4 10.0504 4C10.952 4 11.6667 4.22819 12.1942 4.68458C12.7314 5.14097 13 5.79444 13 6.64498C13 7.03913 12.9376 7.38661 12.8129 7.68741C12.6882 7.98821 12.5396 8.24234 12.3669 8.44979C12.1942 8.65724 11.9592 8.90099 11.6619 9.18105C11.2686 9.54408 10.9712 9.876 10.7698 10.1768C10.5779 10.4672 10.482 10.8303 10.482 11.2659H9.04317C9.04317 10.851 9.10072 10.488 9.21583 10.1768C9.33094 9.86563 9.46523 9.6115 9.61871 9.41443C9.78177 9.20698 10.0024 8.96841 10.2806 8.69873C10.6067 8.37718 10.8465 8.09712 11 7.85856C11.1535 7.61999 11.2302 7.31919 11.2302 6.95615C11.2302 6.55163 11.1103 6.25082 10.8705 6.05375C10.6403 5.8463 10.3141 5.74257 9.89209 5.74257C9.45084 5.74257 9.10552 5.87223 8.85611 6.13154C8.60671 6.38048 8.47242 6.75389 8.45324 7.25177H7ZM9.73381 12.7595C10.0216 12.7595 10.2566 12.8633 10.4388 13.0707C10.6307 13.2782 10.7266 13.5427 10.7266 13.8642C10.7266 14.1961 10.6307 14.471 10.4388 14.6888C10.2566 14.8963 10.0216 15 9.73381 15C9.45564 15 9.22062 14.8911 9.02878 14.6733C8.84652 14.4554 8.7554 14.1858 8.7554 13.8642C8.7554 13.5427 8.84652 13.2782 9.02878 13.0707C9.22062 12.8633 9.45564 12.7595 9.73381 12.7595Z" fill="#354049"/>
|
||||
</svg>
|
||||
</VInfo>
|
||||
</div>
|
||||
<div class="account-balance-area__balance-area">
|
||||
@ -21,7 +21,8 @@
|
||||
label="Earn Credits"
|
||||
width="153px"
|
||||
height="48px"
|
||||
:on-press="onEarnCredits"/>
|
||||
:on-press="onEarnCredits"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -7,10 +7,10 @@
|
||||
<h1 class="deposit-and-billing-area__header__title">Deposit & Billing History</h1>
|
||||
<div class="button" @click="onViewAllClick">View All</div>
|
||||
</div>
|
||||
<SortingHeader />
|
||||
<BillingItem />
|
||||
<BillingItem />
|
||||
<BillingItem />
|
||||
<SortingHeader/>
|
||||
<BillingItem/>
|
||||
<BillingItem/>
|
||||
<BillingItem/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -13,7 +13,8 @@
|
||||
<VButton
|
||||
label="Earn Credits"
|
||||
width="153px"
|
||||
height="48px"/>
|
||||
height="48px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="current-month-area__content">
|
||||
|
||||
@ -8,57 +8,64 @@
|
||||
<ApiKeysCreationPopup
|
||||
@closePopup="closeNewApiKeyPopup"
|
||||
@showCopyPopup="showCopyApiKeyPopup"
|
||||
:is-popup-shown="isNewApiKeyPopupShown"/>
|
||||
:is-popup-shown="isNewApiKeyPopupShown"
|
||||
/>
|
||||
<ApiKeysCopyPopup
|
||||
:is-popup-shown="isCopyApiKeyPopupShown"
|
||||
:api-key-secret="apiKeySecret"
|
||||
@closePopup="closeCopyNewApiKeyPopup"/>
|
||||
<div v-if="!isEmpty || hasSearchQuery" class="api-keys-header">
|
||||
@closePopup="closeCopyNewApiKeyPopup"
|
||||
/>
|
||||
<div v-if="isHeaderShown" class="api-keys-header">
|
||||
<VHeader
|
||||
ref="headerComponent"
|
||||
placeholder="API Key"
|
||||
:search="onSearchQueryCallback">
|
||||
<div class="header-default-state" v-if="headerState === 0">
|
||||
<VButton
|
||||
class="button"
|
||||
label="+Create API Key"
|
||||
width="180px"
|
||||
height="48px"
|
||||
:on-press="onCreateApiKeyClick"/>
|
||||
</div>
|
||||
<div class="header-selected-api-keys" v-if="headerState === 1 && !isDeleteClicked">
|
||||
<div class="header-default-state" v-if="isDefaultHeaderState">
|
||||
<VButton
|
||||
class="button"
|
||||
label="+Create API Key"
|
||||
width="180px"
|
||||
height="48px"
|
||||
:on-press="onCreateApiKeyClick"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-selected-api-keys" v-if="areApiKeysSelected">
|
||||
<VButton
|
||||
class="button deletion"
|
||||
label="Delete"
|
||||
width="122px"
|
||||
height="48px"
|
||||
:on-press="onFirstDeleteClick"
|
||||
/>
|
||||
<VButton
|
||||
class="button"
|
||||
label="Cancel"
|
||||
width="122px"
|
||||
height="48px"
|
||||
is-white="true"
|
||||
:on-press="onClearSelection"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-after-delete-click" v-if="areSelectedApiKeysBeingDeleted">
|
||||
<span class="header-after-delete-click__confirmation-label">Are you sure you want to delete {{selectedAPIKeysCount}} {{apiKeyCountTitle}} ?</span>
|
||||
<div class="header-after-delete-click__button-area">
|
||||
<VButton
|
||||
class="button deletion"
|
||||
label="Delete"
|
||||
width="122px"
|
||||
height="48px"
|
||||
:on-press="onFirstDeleteClick"/>
|
||||
:on-press="onDelete"
|
||||
/>
|
||||
<VButton
|
||||
class="button"
|
||||
label="Cancel"
|
||||
width="122px"
|
||||
height="48px"
|
||||
is-white="true"
|
||||
:on-press="onClearSelection"/>
|
||||
</div>
|
||||
<div class="header-after-delete-click" v-if="headerState === 1 && isDeleteClicked">
|
||||
<span class="header-after-delete-click__confirmation-label">Are you sure you want to delete {{selectedAPIKeysCount}} {{apiKeyCountTitle}} ?</span>
|
||||
<div class="header-after-delete-click__button-area">
|
||||
<VButton
|
||||
class="button deletion"
|
||||
label="Delete"
|
||||
width="122px"
|
||||
height="48px"
|
||||
:on-press="onDelete"/>
|
||||
<VButton
|
||||
class="button"
|
||||
label="Cancel"
|
||||
width="122px"
|
||||
height="48px"
|
||||
is-white="true"
|
||||
:on-press="onClearSelection"/>
|
||||
</div>
|
||||
:on-press="onClearSelection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VHeader>
|
||||
<div class="blur-content" v-if="isDeleteClicked"></div>
|
||||
<div class="blur-search" v-if="isDeleteClicked"></div>
|
||||
@ -69,17 +76,19 @@
|
||||
<VList
|
||||
:data-set="apiKeyList"
|
||||
:item-component="itemComponent"
|
||||
:on-item-click="toggleSelection"/>
|
||||
:on-item-click="toggleSelection"
|
||||
/>
|
||||
</div>
|
||||
<VPagination
|
||||
v-if="totalPageCount > 1"
|
||||
class="pagination-area"
|
||||
ref="pagination"
|
||||
:total-page-count="totalPageCount"
|
||||
:on-page-click-callback="onPageClick"/>
|
||||
:on-page-click-callback="onPageClick"
|
||||
/>
|
||||
<p class="api-keys-items__additional-info">Want to give limited access? <b>Use API Keys.</b></p>
|
||||
</div>
|
||||
<div class="empty-search-result-area" v-if="(isEmpty && hasSearchQuery)">
|
||||
<div class="empty-search-result-area" v-if="isEmptySearchResultShown">
|
||||
<h1 class="empty-search-result-area__title">No results found</h1>
|
||||
<svg class="empty-search-result-area__image" width="254" height="195" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"/>
|
||||
@ -114,12 +123,13 @@
|
||||
</div>
|
||||
<EmptyState
|
||||
:on-button-click="onCreateApiKeyClick"
|
||||
v-if="isEmpty && !isNewApiKeyPopupShown && !hasSearchQuery"
|
||||
v-if="isEmptyStateShown"
|
||||
main-title="Let's create your first API Key"
|
||||
additional-text="<p>API keys give access to the project allowing you to create buckets, upload files, and read them. Once you’ve created an API key, you’re ready to interact with the network through our Uplink CLI.</p>"
|
||||
:image-source="emptyImage"
|
||||
button-label="Create an API Key"
|
||||
is-button-shown="true" />
|
||||
is-button-shown="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -162,6 +172,10 @@ const {
|
||||
SET_SORT_DIRECTION,
|
||||
} = API_KEYS_ACTIONS;
|
||||
|
||||
declare interface ResetPagination {
|
||||
resetPageIndex(): void;
|
||||
}
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
VList,
|
||||
@ -183,17 +197,16 @@ export default class ApiKeysArea extends Vue {
|
||||
private isCopyApiKeyPopupShown: boolean = false;
|
||||
private apiKeySecret: string = '';
|
||||
|
||||
public $refs!: {
|
||||
pagination: HTMLElement & ResetPagination;
|
||||
};
|
||||
|
||||
public mounted(): void {
|
||||
this.$store.dispatch(FETCH, this.FIRST_PAGE);
|
||||
}
|
||||
|
||||
public async beforeDestroy(): Promise<void> {
|
||||
await this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
|
||||
try {
|
||||
await this.$store.dispatch(API_KEYS_ACTIONS.FETCH, this.FIRST_PAGE);
|
||||
} catch (error) {
|
||||
await this.notifyFetchError(error);
|
||||
}
|
||||
}
|
||||
|
||||
public async toggleSelection(apiKey: ApiKey): Promise<void> {
|
||||
@ -244,6 +257,10 @@ export default class ApiKeysArea extends Vue {
|
||||
}
|
||||
|
||||
this.isDeleteClicked = false;
|
||||
|
||||
if (this.totalPageCount > 1) {
|
||||
this.$refs.pagination.resetPageIndex();
|
||||
}
|
||||
}
|
||||
|
||||
public get itemComponent() {
|
||||
@ -290,6 +307,30 @@ export default class ApiKeysArea extends Vue {
|
||||
return HeaderState.DEFAULT;
|
||||
}
|
||||
|
||||
public get isHeaderShown(): boolean {
|
||||
return !this.isEmpty || this.hasSearchQuery;
|
||||
}
|
||||
|
||||
public get isDefaultHeaderState(): boolean {
|
||||
return this.headerState === 0;
|
||||
}
|
||||
|
||||
public get areApiKeysSelected(): boolean {
|
||||
return this.headerState === 1 && !this.isDeleteClicked;
|
||||
}
|
||||
|
||||
public get areSelectedApiKeysBeingDeleted(): boolean {
|
||||
return this.headerState === 1 && this.isDeleteClicked;
|
||||
}
|
||||
|
||||
public get isEmptySearchResultShown(): boolean {
|
||||
return this.isEmpty && this.hasSearchQuery;
|
||||
}
|
||||
|
||||
public get isEmptyStateShown(): boolean {
|
||||
return this.isEmpty && !this.isNewApiKeyPopupShown && !this.hasSearchQuery;
|
||||
}
|
||||
|
||||
public async onPageClick(index: number): Promise<void> {
|
||||
try {
|
||||
await this.$store.dispatch(FETCH, index);
|
||||
@ -307,7 +348,9 @@ export default class ApiKeysArea extends Vue {
|
||||
await this.notifyFetchError(error);
|
||||
}
|
||||
|
||||
(this.$refs.pagination as VPagination).resetPageIndex();
|
||||
if (this.totalPageCount > 1) {
|
||||
this.$refs.pagination.resetPageIndex();
|
||||
}
|
||||
}
|
||||
|
||||
public async onSearchQueryCallback(query: string): Promise<void> {
|
||||
@ -318,7 +361,9 @@ export default class ApiKeysArea extends Vue {
|
||||
await this.notifyFetchError(error);
|
||||
}
|
||||
|
||||
(this.$refs.pagination as VPagination).resetPageIndex();
|
||||
if (this.totalPageCount > 1) {
|
||||
this.$refs.pagination.resetPageIndex();
|
||||
}
|
||||
}
|
||||
|
||||
public async notifyFetchError(error: Error): Promise<void> {
|
||||
|
||||
@ -54,7 +54,7 @@ export default class ApiKeysCopyPopup extends Vue {
|
||||
@Prop({default: ''})
|
||||
private readonly apiKeySecret: string;
|
||||
|
||||
private isCopiedButtonShown: boolean = false;
|
||||
public isCopiedButtonShown: boolean = false;
|
||||
|
||||
public onCloseClick(): void {
|
||||
this.isCopiedButtonShown = false;
|
||||
|
||||
@ -9,13 +9,15 @@
|
||||
:error="errorMessage"
|
||||
placeholder="Enter API Key Name"
|
||||
class="full-input"
|
||||
width="100%" />
|
||||
width="100%"
|
||||
/>
|
||||
<VButton
|
||||
class="next-button"
|
||||
label="Next >"
|
||||
width="128px"
|
||||
height="48px"
|
||||
:on-press="onNextClick" />
|
||||
:on-press="onNextClick"
|
||||
/>
|
||||
<div class="new-api-key__close-cross-container" @click="onCloseClick">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
|
||||
|
||||
@ -17,9 +17,9 @@
|
||||
<path d="M10.7756 14.334C10.4108 14.334 10.1226 14.6283 10.1226 15.0007C10.1226 15.3731 10.4108 15.6673 10.7756 15.6673C11.1404 15.6673 11.4287 15.3731 11.4287 15.0007C11.4287 14.6283 11.1404 14.334 10.7756 14.334Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="name">{{ itemData.formattedName() }}</p>
|
||||
<p class="name">{{getItemName}}</p>
|
||||
</div>
|
||||
<p class="date">{{ itemData.getDate() }}</p>
|
||||
<p class="date">{{getItemDate}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,6 +32,14 @@ import { ApiKey } from '@/types/apiKeys';
|
||||
export default class ApiKeysItem extends Vue {
|
||||
@Prop({default: () => new ApiKey('', '', '', '')})
|
||||
private readonly itemData: ApiKey;
|
||||
|
||||
public get getItemName(): string {
|
||||
return this.itemData.formattedName();
|
||||
}
|
||||
|
||||
public get getItemDate(): string {
|
||||
return this.itemData.getDate();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -6,14 +6,16 @@
|
||||
<div class="sort-header-container__name-item" @click="onHeaderItemClick(ApiKeyOrderBy.NAME)">
|
||||
<p class="sort-header-container__name-item__title">Key Name</p>
|
||||
<VerticalArrows
|
||||
:isActive="getSortBy === ApiKeyOrderBy.NAME"
|
||||
:direction="getSortDirection"></VerticalArrows>
|
||||
:isActive="areApiKeysSortedByName"
|
||||
:direction="getSortDirection"
|
||||
/>
|
||||
</div>
|
||||
<div class="sort-header-container__date-item" @click="onHeaderItemClick(ApiKeyOrderBy.CREATED_AT)">
|
||||
<p class="sort-header-container__date-item__title">Created</p>
|
||||
<VerticalArrows
|
||||
:isActive="getSortBy === ApiKeyOrderBy.CREATED_AT"
|
||||
:direction="getSortDirection"></VerticalArrows>
|
||||
:isActive="areApiKeysSortedByDate"
|
||||
:direction="getSortDirection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -48,8 +50,12 @@ export default class SortApiKeysHeader extends Vue {
|
||||
return SortDirection.DESCENDING;
|
||||
}
|
||||
|
||||
public get getSortBy(): ApiKeyOrderBy {
|
||||
return this.sortBy;
|
||||
public get areApiKeysSortedByName(): boolean {
|
||||
return this.sortBy === ApiKeyOrderBy.NAME;
|
||||
}
|
||||
|
||||
public get areApiKeysSortedByDate(): boolean {
|
||||
return this.sortBy === ApiKeyOrderBy.CREATED_AT;
|
||||
}
|
||||
|
||||
public async onHeaderItemClick(sortBy: ApiKeyOrderBy): Promise<void> {
|
||||
|
||||
@ -3,14 +3,15 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<NoBucketArea v-if="!totalCount && !search" />
|
||||
<NoBucketArea v-if="isNoBucketAreaShown"/>
|
||||
<div class="buckets-overflow" v-else>
|
||||
<div class="buckets-header">
|
||||
<p class="buckets-header__title">Buckets</p>
|
||||
<VHeader
|
||||
class="buckets-header-component"
|
||||
placeholder="Buckets"
|
||||
:search="fetch"/>
|
||||
:search="fetch"
|
||||
/>
|
||||
</div>
|
||||
<div class="buckets-notification-container">
|
||||
<div class="buckets-notification">
|
||||
@ -22,21 +23,24 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="buckets.length" class="buckets-container">
|
||||
<SortingHeader />
|
||||
<SortingHeader/>
|
||||
<VList
|
||||
:data-set="buckets"
|
||||
:item-component="itemComponent"
|
||||
:on-item-click="doNothing"/>
|
||||
:on-item-click="doNothing"
|
||||
/>
|
||||
<VPagination
|
||||
v-if="totalPageCount > 1"
|
||||
v-if="isPaginationShown"
|
||||
:total-page-count="totalPageCount"
|
||||
:on-page-click-callback="onPageClick" />
|
||||
:on-page-click-callback="onPageClick"
|
||||
/>
|
||||
</div>
|
||||
<EmptyState
|
||||
class="empty-container"
|
||||
v-if="!totalPageCount && search"
|
||||
v-if="isEmptySearchResultShown"
|
||||
main-title="Nothing found :("
|
||||
:image-source="emptyImage" />
|
||||
:image-source="emptyImage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -104,6 +108,18 @@ export default class BucketArea extends Vue {
|
||||
return this.$store.getters.cursor.search;
|
||||
}
|
||||
|
||||
public get isNoBucketAreaShown(): boolean {
|
||||
return !this.totalCount && !this.search;
|
||||
}
|
||||
|
||||
public get isPaginationShown(): boolean {
|
||||
return this.totalPageCount > 1;
|
||||
}
|
||||
|
||||
public get isEmptySearchResultShown(): boolean {
|
||||
return !!(!this.totalPageCount && this.search);
|
||||
}
|
||||
|
||||
public async fetch(searchQuery: string): Promise<void> {
|
||||
await this.$store.dispatch(SET_SEARCH, searchQuery);
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<img src="../../../static/images/buckets/uplink.svg">
|
||||
<img src="@/../static/images/buckets/uplink.svg">
|
||||
</div>
|
||||
<p class="no-buckets-area__s3-link">Familiar with AWS S3? <a class="s3-gateway-link" href="https://github.com/storj/storj/wiki/S3-Gateway" target="_blank">Try our S3 Gateway</a></p>
|
||||
<div class="no-buckets-area__next-step-area">
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
:on-press="onButtonClick"
|
||||
:label="buttonLabel"
|
||||
width="190px"
|
||||
height="50px"/>
|
||||
height="50px"
|
||||
/>
|
||||
</div>
|
||||
<div class="empty-state__wrap__img" v-html="imageSource"></div>
|
||||
</div>
|
||||
|
||||
@ -35,7 +35,8 @@
|
||||
@input="onInput"
|
||||
@change="onInput"
|
||||
v-model="value"
|
||||
:style="style.inputStyle"/>
|
||||
:style="style.inputStyle"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
<template>
|
||||
<div class="input-wrap">
|
||||
<div class="label-container">
|
||||
<img v-if="error" src="../../../static/images/register/ErrorInfo.svg"/>
|
||||
<h3 class="label-container__label" v-if="!error && label" :style="style.labelStyle">{{label}}</h3>
|
||||
<img v-if="error" src="@/../static/images/register/ErrorInfo.svg"/>
|
||||
<h3 class="label-container__label" v-if="isLabelShown" :style="style.labelStyle">{{label}}</h3>
|
||||
<h3 class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</h3>
|
||||
</div>
|
||||
<input
|
||||
@ -16,13 +16,14 @@
|
||||
v-model="value"
|
||||
:placeholder="placeholder"
|
||||
:type="type"
|
||||
:style="style.inputStyle"/>
|
||||
:style="style.inputStyle"
|
||||
/>
|
||||
<!--2 conditions of eye image (crossed or not) -->
|
||||
<svg class="input-wrap__image" v-if="isPassword && !isPasswordShown" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg class="input-wrap__image" v-if="isPasswordHiddenState" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
|
||||
<path d="M11.6116 9.96328C11.6116 10.8473 10.8956 11.5633 10.0116 11.5633C9.12763 11.5633 8.41162 10.8473 8.41162 9.96328C8.41162 9.07929 9.12763 8.36328 10.0116 8.36328C10.8956 8.36328 11.6116 9.07929 11.6116 9.96328Z" fill="#AFB7C1"/>
|
||||
</svg>
|
||||
<svg class="input-wrap__image" v-if="isPassword && isPasswordShown" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg class="input-wrap__image" v-if="isPasswordShownState" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
|
||||
<path d="M11.6121 9.96328C11.6121 10.8473 10.8961 11.5633 10.0121 11.5633C9.12812 11.5633 8.41211 10.8473 8.41211 9.96328C8.41211 9.07929 9.12812 8.36328 10.0121 8.36328C10.8961 8.36328 11.6121 9.07929 11.6121 9.96328Z" fill="#AFB7C1"/>
|
||||
<mask id="path-3-inside-1" fill="white">
|
||||
@ -101,6 +102,18 @@ export default class HeaderlessInput extends Vue {
|
||||
this.type = this.passwordType;
|
||||
}
|
||||
|
||||
public get isLabelShown(): boolean {
|
||||
return !!(!this.error && this.label);
|
||||
}
|
||||
|
||||
public get isPasswordHiddenState(): boolean {
|
||||
return this.isPassword && !this.isPasswordShown;
|
||||
}
|
||||
|
||||
public get isPasswordShownState(): boolean {
|
||||
return this.isPassword && this.isPasswordShown;
|
||||
}
|
||||
|
||||
protected get style(): object {
|
||||
return {
|
||||
inputStyle: {
|
||||
@ -123,7 +136,7 @@ export default class HeaderlessInput extends Vue {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-family: 'font_regular';
|
||||
|
||||
|
||||
&__image {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
@ -131,7 +144,7 @@ export default class HeaderlessInput extends Vue {
|
||||
transform: translateY(-50%);
|
||||
z-index: 20;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover .input-wrap__image__path {
|
||||
fill: #2683FF !important;
|
||||
}
|
||||
|
||||
@ -9,7 +9,8 @@
|
||||
<VSearch
|
||||
ref="search"
|
||||
:placeholder="placeholder"
|
||||
:search="search"/>
|
||||
:search="search"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -18,13 +18,13 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class VInfo extends Vue {
|
||||
private isVisible: boolean = false;
|
||||
|
||||
@Prop({default: ''})
|
||||
private readonly text: String;
|
||||
@Prop({default: ''})
|
||||
private readonly boldText: String;
|
||||
|
||||
private isVisible: boolean = false;
|
||||
|
||||
public toggleVisibility(): void {
|
||||
this.isVisible = !this.isVisible;
|
||||
}
|
||||
|
||||
@ -4,13 +4,14 @@
|
||||
<template>
|
||||
<div class="item-component">
|
||||
<component
|
||||
v-for="item in dataSet"
|
||||
v-for="(item, key) in dataSet"
|
||||
class="item-component__item"
|
||||
:is="itemComponent"
|
||||
:item-data="item"
|
||||
@click.native="onItemClick(item)"
|
||||
:class="{ selected: item.isSelected }"
|
||||
:key="item.name"/>
|
||||
:key="key"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -12,15 +12,18 @@
|
||||
<div class="pagination-container__items">
|
||||
<PagesBlock
|
||||
:pages="firstBlockPages"
|
||||
:is-selected="isSelected"/>
|
||||
:is-selected="isSelected"
|
||||
/>
|
||||
<span class="pages-divider" v-if="isFirstDotsShown">...</span>
|
||||
<PagesBlock
|
||||
:pages="middleBlockPages"
|
||||
:is-selected="isSelected"/>
|
||||
:is-selected="isSelected"
|
||||
/>
|
||||
<span class="pages-divider" v-if="isSecondDotsShown">...</span>
|
||||
<PagesBlock
|
||||
:pages="lastBlockPages"
|
||||
:is-selected="isSelected"/>
|
||||
:is-selected="isSelected"
|
||||
/>
|
||||
</div>
|
||||
<div class="pagination-container__button" @click="nextPage">
|
||||
<svg class="pagination-container__button__image" width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
@ -37,7 +40,6 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
import PagesBlock from '@/components/common/PagesBlock.vue';
|
||||
|
||||
import { Page } from '@/types/pagination';
|
||||
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
:placeholder="`Search ${placeholder}`"
|
||||
:style="style"
|
||||
type="text"
|
||||
autocomplete="off">
|
||||
autocomplete="off"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
<div class="container">
|
||||
<svg :class="{ active: isActive && isTop }"
|
||||
width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="arrow-svg-path" d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049"/>
|
||||
<path class="arrow-svg-path" d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049"/>
|
||||
</svg>
|
||||
<svg :class="{ active: isActive && isBottom }"
|
||||
width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="arrow-svg-path" d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"/>
|
||||
<path class="arrow-svg-path" d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -24,7 +24,8 @@
|
||||
width="450px"
|
||||
height="50px"
|
||||
:on-press="onResendEmailButtonClick"
|
||||
:is-disabled="isResendEmailButtonDisabled"/>
|
||||
:is-disabled="isResendEmailButtonDisabled"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="register-success-popup__close-cross-container" @click="onCloseClick">
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
<VList
|
||||
:data-set="dataSetItems"
|
||||
:item-component="getItemComponent"
|
||||
:on-item-click="onItemClick"/>
|
||||
:on-item-click="onItemClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
<div>
|
||||
<EmptyState
|
||||
main-title="Create your first new project"
|
||||
:image-source="emptyImage" />
|
||||
:image-source="emptyImage"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
<template>
|
||||
<div class="account-button-container" id="accountDropdownButton">
|
||||
<div class="account-button-toggle-container" @click="toggleSelection" >
|
||||
<div class="account-button-toggle-container" @click="toggleSelection">
|
||||
<!-- background of this div generated and stores in store -->
|
||||
<div class="account-button-toggle-container__avatar">
|
||||
<!-- First digit of firstName after Registration -->
|
||||
@ -12,11 +12,11 @@
|
||||
</div>
|
||||
<h1 class="account-button-toggle-container__user-name">{{userName}}</h1>
|
||||
<div class="account-button-toggle-container__expander-area">
|
||||
<img v-if="!isDropdownShown" src="../../../static/images/register/BlueExpand.svg" alt="expand settings" />
|
||||
<img v-if="isDropdownShown" src="../../../static/images/register/BlueHide.svg" alt="hide settings" />
|
||||
<img v-if="!isDropdownShown" src="@/../static/images/register/BlueExpand.svg" alt="expand settings"/>
|
||||
<img v-if="isDropdownShown" src="@/../static/images/register/BlueHide.svg" alt="hide settings"/>
|
||||
</div>
|
||||
</div>
|
||||
<AccountDropdown v-if="isDropdownShown" />
|
||||
<AccountDropdown v-if="isDropdownShown"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="account-dropdown-choice-container" id="accountDropdown">
|
||||
<div class="account-dropdown-overflow-container">
|
||||
<!-- TODO: add selection logic onclick -->
|
||||
<div class="account-dropdown-item-container settings" @click="onAccountSettingsClick" >
|
||||
<div class="account-dropdown-item-container settings" @click="onAccountSettingsClick">
|
||||
<div class="account-dropdown-item-container__image-container">
|
||||
<svg class="account-dropdown-item-container__image-container__image" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="account-dropdown-svg-path" d="M20 8.72549C20 9.60784 20 10.4902 20 11.2745C19.9024 11.5686 19.7073 11.6667 19.4146 11.7647C18.7317 11.9608 18.1463 12.0588 17.4634 12.2549C17.3659 12.2549 17.2683 12.3529 17.2683 12.451C17.1707 12.7451 16.9756 13.0392 16.878 13.4314C16.878 13.5294 16.878 13.6275 16.878 13.7255C17.1707 14.2157 17.4634 14.7059 17.7561 15.2941C17.9512 15.6863 17.9512 15.8824 17.6585 16.1765C17.1707 16.6667 16.6829 17.1569 16.1951 17.6471C15.9024 17.9412 15.6098 17.9412 15.3171 17.7451C14.8293 17.451 14.3415 17.1569 13.8537 16.8627C13.7561 16.7647 13.6585 16.7647 13.561 16.8627C13.2683 17.0588 12.878 17.1569 12.5854 17.2549C12.4878 17.2549 12.3902 17.3529 12.3902 17.451C12.1951 18.1373 12.0976 18.7255 11.9024 19.4118C11.8049 19.7059 11.7073 19.902 11.4146 20C10.5366 20 9.65854 20 8.87805 20C8.58537 19.902 8.48781 19.7059 8.39024 19.4118C8.19512 18.7255 8.09756 18.1373 7.90244 17.451C7.90244 17.3529 7.80488 17.2549 7.70732 17.2549C7.41463 17.1569 7.02439 16.9608 6.73171 16.8627C6.63415 16.7647 6.53659 16.8627 6.43902 16.8627C5.95122 17.1569 5.46341 17.451 4.97561 17.7451C4.58537 17.9412 4.39024 17.9412 4.09756 17.6471C3.60976 17.1569 3.12195 16.6667 2.63415 16.1765C2.34146 15.8824 2.34146 15.5882 2.53659 15.2941C2.82927 14.8039 3.12195 14.3137 3.41463 13.8235C3.5122 13.7255 3.5122 13.6275 3.41463 13.5294C3.21951 13.2353 3.12195 12.8431 3.02439 12.549C3.02439 12.451 2.92683 12.3529 2.82927 12.3529C2.14634 12.1569 1.46341 12.0588 0.780488 11.8627C0.195122 11.7647 0 11.5686 0 11.1765C0 10.4902 0 9.70588 0 9.01961C0 8.62745 0.195122 8.43137 0.585366 8.33333C1.26829 8.13725 1.95122 7.94118 2.53659 7.7451C2.63415 7.7451 2.73171 7.64706 2.73171 7.54902C2.92683 7.35294 3.02439 7.05882 3.12195 6.76471C3.12195 6.66667 3.12195 6.56863 3.12195 6.47059C2.82927 5.88235 2.43902 5.39216 2.14634 4.80392C1.95122 4.41176 1.95122 4.21569 2.2439 3.92157C2.73171 3.43137 3.21951 2.94118 3.70732 2.45098C4 2.15686 4.29268 2.15686 4.58537 2.35294C5.17073 2.64706 5.65854 3.03922 6.2439 3.33333C6.34146 3.33333 6.43902 3.33333 6.53659 3.33333C6.82927 3.13725 7.21951 2.94118 7.5122 2.84314C7.60976 2.84314 7.70732 2.7451 7.70732 2.64706C7.90244 1.96078 8 1.27451 8.19512 0.588235C8.39024 0.196078 8.58537 0 8.97561 0C9.65854 0 10.439 0 11.122 0C11.5122 0 11.7073 0.196078 11.8049 0.588235C12 1.27451 12.0976 1.96078 12.2927 2.64706C12.2927 2.7451 12.3902 2.84314 12.4878 2.84314C12.7805 2.94118 13.1707 3.13725 13.4634 3.23529C13.561 3.33333 13.6585 3.23529 13.7561 3.23529C14.2439 2.94118 14.7317 2.64706 15.2195 2.35294C15.6098 2.15686 15.8049 2.15686 16.1951 2.45098C16.6829 2.94118 17.1707 3.43137 17.6585 3.92157C17.9512 4.21569 18.0488 4.5098 17.7561 4.90196C17.4634 5.39216 17.1707 5.88235 16.878 6.47059C16.878 6.56863 16.878 6.66667 16.878 6.76471C16.9756 7.05882 17.1707 7.45098 17.2683 7.7451C17.2683 7.84314 17.3659 7.94118 17.4634 7.94118C18.1463 8.13726 18.7317 8.23529 19.4146 8.43137C19.7073 8.33333 19.9024 8.52941 20 8.72549ZM10.0488 5.98039C7.80488 5.98039 5.95122 7.84314 5.95122 10.098C5.95122 12.3529 7.80488 14.2157 10.0488 14.2157C12.2927 14.2157 14.1463 12.3529 14.1463 10.098C14.1463 7.7451 12.2927 5.98039 10.0488 5.98039Z" fill="#354049"/>
|
||||
|
||||
@ -30,12 +30,13 @@
|
||||
<path d="M72.5888 3.64524V1.82842C72.5888 1.06344 73.2162 0.441895 73.9884 0.441895H81.3607V11.3309C81.3607 13.327 80.8419 14.8091 79.8042 15.8012C78.7665 16.7933 77.4393 17.2834 75.8104 17.2834C74.5193 17.2834 73.3248 16.9726 72.2389 16.3391C71.2012 15.7415 70.9357 14.3788 71.6356 13.4107L72.456 12.2871C73.4696 13.3748 74.5314 13.9127 75.6415 13.9127C76.1724 13.9127 76.6309 13.7095 77.0049 13.3031C77.379 12.8967 77.572 12.2871 77.572 11.4743V3.64524H72.5888Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
<div class="dashboard-header-container__right-area">
|
||||
<NewProjectArea class="dashboard-header-container__right-area__new-project" />
|
||||
<AccountButton class="dashboard-header-container__right-area__account-button" />
|
||||
<NewProjectArea class="dashboard-header-container__right-area__new-project"/>
|
||||
<AccountButton class="dashboard-header-container__right-area__account-button"/>
|
||||
</div>
|
||||
<ProjectCreationSuccessPopup/>
|
||||
<NavigationArea
|
||||
class="adapted-navigation"
|
||||
v-if="isNavigationVisible" />
|
||||
v-if="isNavigationVisible"
|
||||
/>
|
||||
<div class="navigation-blur" v-if="isNavigationVisible"></div>
|
||||
</div>
|
||||
@ -7,8 +7,8 @@
|
||||
<div class="project-selection-toggle-container" @click="toggleSelection" v-if="hasProjects">
|
||||
<h1 class="project-selection-toggle-container__name">{{name}}</h1>
|
||||
<div class="project-selection-toggle-container__expander-area">
|
||||
<img v-if="!isDropdownShown" src="../../../../static/images/register/BlueExpand.svg" alt="expand project list" />
|
||||
<img v-if="isDropdownShown" src="../../../../static/images/register/BlueHide.svg" alt="hide project list" />
|
||||
<img v-if="!isDropdownShown" src="@/../static/images/register/BlueExpand.svg" alt="expand project list"/>
|
||||
<img v-if="isDropdownShown" src="@/../static/images/register/BlueHide.svg" alt="hide project list"/>
|
||||
</div>
|
||||
</div>
|
||||
<ProjectSelectionDropdown v-if="isDropdownShown"/>
|
||||
|
||||
@ -78,6 +78,22 @@ export default class NavigationArea extends Vue {
|
||||
public get isProjectNotSelected(): boolean {
|
||||
return this.$store.state.projectsModule.selectedProject.id === '';
|
||||
}
|
||||
|
||||
public get isResourcesDisplayingButtonShown(): boolean {
|
||||
return !this.areResourceItemsShown && this.isResourceButtonShown;
|
||||
}
|
||||
|
||||
public get isResourcesHidingButtonShown(): boolean {
|
||||
return this.areResourceItemsShown && this.isResourceButtonShown;
|
||||
}
|
||||
|
||||
public get isAccountItemsDisplayingButtonShown(): boolean {
|
||||
return !this.areAccountItemsShown && this.isAccountButtonShown;
|
||||
}
|
||||
|
||||
public get isAccountItemsHidingButtonShown(): boolean {
|
||||
return this.areAccountItemsShown && this.isAccountButtonShown;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
class="tab-navigation-container__item"
|
||||
v-for="navLink in navigation"
|
||||
:key="navLink.name">
|
||||
<p class="tab-navigation-container__item__name">{{navLink.name}}</p>
|
||||
<p class="tab-navigation-container__item__name">{{navLink.name}}</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,8 +32,8 @@
|
||||
</router-link>
|
||||
<div class="navigation-area__resources-title" :class="{ custom: areResourceItemsShown }" @mouseenter="toggleResourceButtonVisibility" @mouseleave="toggleResourceButtonVisibility">
|
||||
<p class="navigation-area__resources-title__title">RESOURCES</p>
|
||||
<p v-if="!areResourceItemsShown && isResourceButtonShown" @click="toggleResourceItemsVisibility" class="navigation-area__resources-title__button">Show</p>
|
||||
<p v-if="areResourceItemsShown && isResourceButtonShown" @click="toggleResourceItemsVisibility" class="navigation-area__resources-title__button">Hide</p>
|
||||
<p v-if="isResourcesDisplayingButtonShown" @click="toggleResourceItemsVisibility" class="navigation-area__resources-title__button">Show</p>
|
||||
<p v-if="isResourcesHidingButtonShown" @click="toggleResourceItemsVisibility" class="navigation-area__resources-title__button">Hide</p>
|
||||
</div>
|
||||
<a v-if="areResourceItemsShown" class="navigation-area__item-container" href="https://github.com/storj/docs/blob/master/Vanguard-Release-Setup-Instructions.md" target="_blank">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
@ -57,14 +57,16 @@
|
||||
</a>
|
||||
<div class="navigation-area__account-title" :class="{custom: areAccountItemsShown}" @mouseenter="toggleAccountButtonVisibility" @mouseleave="toggleAccountButtonVisibility">
|
||||
<p class="navigation-area__account-title__title">ACCOUNT</p>
|
||||
<p v-if="!areAccountItemsShown && isAccountButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Show</p>
|
||||
<p v-if="areAccountItemsShown && isAccountButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Hide</p>
|
||||
<p v-if="isAccountItemsDisplayingButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Show</p>
|
||||
<p v-if="isAccountItemsHidingButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Hide</p>
|
||||
</div>
|
||||
<div v-if="areAccountItemsShown" class="navigation-area__account-area">
|
||||
<router-link class="navigation-area__item-container account-item" v-for="navItem in accountNavigation" :key="navItem.name" :to="navItem.path">
|
||||
<div class="navigation-area__item-container__link-container" >
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">{{navItem.name}}</h1>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<router-link v-if="areAccountItemsShown" class="navigation-area__item-container account-item" v-for="navItem in accountNavigation" :key="navItem.name" :to="navItem.path">
|
||||
<div class="navigation-area__item-container__link-container" >
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">{{navItem.name}}</h1>
|
||||
</div>
|
||||
</router-link>
|
||||
<div class="divider" :class="{'custom-divider': areAccountItemsShown}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,11 +2,12 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div id="notificationArea" class="notification-container" v-if="notifications.length > 0" >
|
||||
<div id="notificationArea" class="notification-container" v-if="doNotificationsExist">
|
||||
<NotificationItem
|
||||
v-for="notification in notifications"
|
||||
:notification="notification"
|
||||
:key="notification.id" />
|
||||
:key="notification.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -26,6 +27,10 @@ export default class NotificationArea extends Vue {
|
||||
public get notifications(): DelayedNotification[] {
|
||||
return this.$store.state.notificationsModule.notificationQueue;
|
||||
}
|
||||
|
||||
public get doNotificationsExist(): boolean {
|
||||
return this.notifications.length > 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -46,13 +46,14 @@
|
||||
<!--Stripe card input here-->
|
||||
</div>
|
||||
<div class="add-stripe-card-popup-container__checkbox-container">
|
||||
<VCheckbox />
|
||||
<VCheckbox/>
|
||||
<h2 class="add-stripe-card-popup-container__checkbox-container__title">Make this card default payment method</h2>
|
||||
</div>
|
||||
<VButton
|
||||
label="Save Card"
|
||||
height="48px"
|
||||
width="100%"/>
|
||||
width="100%"
|
||||
/>
|
||||
<div class="add-stripe-card-popup-container__close-cross-container">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" >
|
||||
<path d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
|
||||
|
||||
@ -57,7 +57,8 @@
|
||||
type="text"
|
||||
placeholder="Enter Project Name"
|
||||
v-model="projectName"
|
||||
@keyup="resetError" >
|
||||
@keyup="resetError"
|
||||
/>
|
||||
</div>
|
||||
<div class="delete-project-popup__form-container__button-container">
|
||||
<VButton
|
||||
@ -65,14 +66,16 @@
|
||||
width="205px"
|
||||
height="48px"
|
||||
:on-press="onCloseClick"
|
||||
is-white="true"/>
|
||||
is-white="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Delete"
|
||||
width="205px"
|
||||
height="48px"
|
||||
class="red"
|
||||
:on-press="onDeleteProjectClick"
|
||||
:is-disabled="isDeleteButtonDisabled" />
|
||||
:is-disabled="isDeleteButtonDisabled"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delete-project-popup__close-cross-container" @click="onCloseClick">
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
width="100%"
|
||||
max-symbols="20"
|
||||
:error="nameError"
|
||||
@setData="setProjectName">
|
||||
</HeaderedInput>
|
||||
@setData="setProjectName"
|
||||
/>
|
||||
<HeaderedInput
|
||||
label="Description"
|
||||
placeholder="Enter Project Description"
|
||||
@ -27,20 +27,22 @@
|
||||
is-multiline="true"
|
||||
height="100px"
|
||||
width="100%"
|
||||
@setData="setProjectDescription">
|
||||
</HeaderedInput>
|
||||
@setData="setProjectDescription"
|
||||
/>
|
||||
<div class="new-project-popup__form-container__button-container">
|
||||
<VButton
|
||||
label="Cancel"
|
||||
width="205px"
|
||||
height="48px"
|
||||
:on-press="onCloseClick"
|
||||
is-white="true"/>
|
||||
is-white="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Next"
|
||||
width="205px"
|
||||
height="48px"
|
||||
:on-press="createProjectClick"/>
|
||||
:on-press="createProjectClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="new-project-popup__close-cross-container" @click="onCloseClick">
|
||||
|
||||
@ -40,12 +40,14 @@
|
||||
width="214px"
|
||||
height="50px"
|
||||
:on-press="onCloseClick"
|
||||
is-white="true" />
|
||||
is-white="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Create first API Key"
|
||||
width="214px"
|
||||
height="50px"
|
||||
:on-press="onCreateAPIKeyClick" />
|
||||
:on-press="onCreateAPIKeyClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-creation-success-popup__close-cross-container" @click="onCloseClick">
|
||||
@ -71,7 +73,7 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
|
||||
},
|
||||
})
|
||||
export default class ProjectCreationSuccessPopup extends Vue {
|
||||
private onCloseClick(): void {
|
||||
public onCloseClick(): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_PROJECT_CREATION_POPUP);
|
||||
}
|
||||
|
||||
|
||||
@ -32,19 +32,22 @@
|
||||
height="10vh"
|
||||
is-multiline="true"
|
||||
:init-value="storedDescription"
|
||||
@setData="setNewDescription" />
|
||||
@setData="setNewDescription"
|
||||
/>
|
||||
<div class="project-details-info-container__description-container__buttons-area">
|
||||
<VButton
|
||||
label="Cancel"
|
||||
width="180px"
|
||||
height="48px"
|
||||
:on-press="toggleEditing"
|
||||
is-white="true"/>
|
||||
is-white="true"
|
||||
/>
|
||||
<VButton
|
||||
label="Save"
|
||||
width="180px"
|
||||
height="48px"
|
||||
:on-press="onSaveButtonClick"/>
|
||||
:on-press="onSaveButtonClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -55,10 +58,11 @@
|
||||
width="180px"
|
||||
height="48px"
|
||||
:on-press="toggleDeleteDialog"
|
||||
is-deletion="true"/>
|
||||
is-deletion="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DeleteProjectPopup v-if="isPopupShown" />
|
||||
<DeleteProjectPopup v-if="isPopupShown"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -6,13 +6,15 @@
|
||||
<TabNavigation
|
||||
v-if="isProjectSelected"
|
||||
class="project-overview__navigation"
|
||||
:navigation="navigation"/>
|
||||
:navigation="navigation"
|
||||
/>
|
||||
<router-view v-if="isProjectSelected"/>
|
||||
<EmptyState
|
||||
v-if="!isProjectSelected"
|
||||
main-title="Create your first project"
|
||||
additional-text='<p>Please click the button <b>"New Project"</b> in the right corner</p>'
|
||||
:image-source="emptyImage" />
|
||||
:image-source="emptyImage"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -18,7 +18,8 @@
|
||||
<Datepicker
|
||||
ref="datePicker"
|
||||
:date="startTime"
|
||||
@change="getDates"/>
|
||||
@change="getDates"
|
||||
/>
|
||||
<svg class="usage-report-container__options-area__option__image" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" @click.prevent.self="onCustomDateClick">
|
||||
<path class="usage-report-svg-path" d="M16.3213 2.28026H14.8009V1.50058C14.8009 1.10058 14.4806 0.760742 14.0611 0.760742C13.6611 0.760742 13.3213 1.08106 13.3213 1.50058V2.28026H6.66106V1.50058C6.66106 1.10058 6.34074 0.760742 5.92122 0.760742C5.5009 0.760742 5.2009 1.10058 5.2009 1.50058V2.28026H3.68058C1.92042 2.28026 0.500977 3.70058 0.500977 5.45986V16.0599C0.500977 17.82 1.9213 19.2395 3.68058 19.2395H16.3204C18.0805 19.2395 19.5 17.8191 19.5 16.0599V5.45986C19.5008 3.70048 18.0804 2.28026 16.321 2.28026H16.3213ZM3.68066 3.74042H5.20098V4.5201C5.20098 4.9201 5.5213 5.25994 5.94082 5.25994C6.36114 5.25994 6.68066 4.93962 6.68066 4.5201V3.74042H13.3603V4.5201C13.3603 4.9201 13.6806 5.25994 14.1001 5.25994C14.5001 5.25994 14.8399 4.93962 14.8399 4.5201V3.74042H16.3603C17.3001 3.74042 18.0806 4.50058 18.0806 5.46074V7.06074H1.96098V5.46074C1.96098 4.5209 2.74066 3.74042 3.68052 3.74042H3.68066ZM9.62126 14.2006H10.4009C11.0213 14.2006 11.5213 14.7006 11.5213 15.3209C11.5213 15.9413 11.0213 16.4413 10.4009 16.4413H9.62126C9.00094 16.4413 8.50094 15.9413 8.50094 15.3209C8.50094 14.7006 9.00094 14.2006 9.62126 14.2006ZM8.50094 10.8404C8.50094 10.2201 9.00094 9.7201 9.62126 9.7201L10.4009 9.72088C11.0213 9.72088 11.5213 10.2209 11.5213 10.8412C11.5213 11.4615 11.0213 11.9615 10.4009 11.9615H9.62126C9.00094 11.9607 8.50094 11.4607 8.50094 10.8404V10.8404ZM14.8407 14.2006H15.6204C16.2407 14.2006 16.7407 14.7006 16.7407 15.3209C16.7407 15.9413 16.2407 16.4413 15.6204 16.4413H14.8407C14.2204 16.4413 13.7204 15.9413 13.7204 15.3209C13.7212 14.7006 14.2212 14.2006 14.8407 14.2006ZM13.7212 10.8404C13.7212 10.2201 14.2212 9.7201 14.8415 9.7201H15.6212C16.2415 9.7201 16.7415 10.2201 16.7415 10.8404C16.7415 11.4607 16.2415 11.9607 15.6212 11.9607H14.8415C14.2212 11.9607 13.7212 11.4607 13.7212 10.8404ZM6.2806 10.8404C6.2806 11.4607 5.7806 11.9607 5.16028 11.9607H4.3806C3.76028 11.9607 3.26028 11.4607 3.26028 10.8404C3.26028 10.2201 3.76028 9.7201 4.3806 9.7201H5.16028C5.7806 9.72088 6.2806 10.2209 6.2806 10.8404ZM4.3806 14.2006H5.16028C5.7806 14.2006 6.2806 14.7006 6.2806 15.3209C6.2806 15.9413 5.7806 16.4413 5.16028 16.4413H4.3806C3.76028 16.4413 3.26028 15.9413 3.26028 15.3209C3.26106 14.7006 3.76106 14.2006 4.3806 14.2006Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
@ -74,6 +75,7 @@ export default class UsageReport extends Vue {
|
||||
public startTime: any = {
|
||||
time: '',
|
||||
};
|
||||
|
||||
private readonly dateRange: any;
|
||||
|
||||
public constructor() {
|
||||
|
||||
@ -9,12 +9,12 @@
|
||||
v-for="(stat, key) in stats"
|
||||
:key="key"
|
||||
:style="stat.background">
|
||||
<span class="referral-stats__card-text">
|
||||
<span class="referral-stats__card-title">{{ stat.title }}</span>
|
||||
<span class="referral-stats__card-description">{{ stat.description }}</span>
|
||||
</span>
|
||||
<br>
|
||||
<span class="referral-stats__card-number">{{ stat.symbol + usage[key] }}</span>
|
||||
<span class="referral-stats__card-text">
|
||||
<span class="referral-stats__card-title">{{ stat.title }}</span>
|
||||
<span class="referral-stats__card-description">{{ stat.description }}</span>
|
||||
</span>
|
||||
<br>
|
||||
<span class="referral-stats__card-number">{{ stat.symbol + usage[key] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,19 +15,20 @@
|
||||
<img src="../../../static/images/register/ErrorInfo.svg"/>
|
||||
<p class="add-user__form-container__label__error">{{formError}}</p>
|
||||
</div>
|
||||
<div class="add-user__form-container__inputs-group" :class="{ 'scrollable': inputs.length > 4 }">
|
||||
<div class="add-user__form-container__inputs-group" :class="{ 'scrollable': isInputsGroupScrollable }">
|
||||
<div v-for="(input, index) in inputs"
|
||||
class="add-user__form-container__inputs-group__item"
|
||||
:key="index" >
|
||||
<input
|
||||
placeholder="email@example.com"
|
||||
v-model="input.value"
|
||||
class="no-error-input"
|
||||
:class="{ 'error-input': input.error }"
|
||||
@keyup="resetFormErrors(index)" />
|
||||
<svg class="add-user__form-container__inputs-group__item__image" @click="deleteInput(index)" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="delete-input-svg-path" d="M11.7803 1.28033C12.0732 0.987437 12.0732 0.512563 11.7803 0.21967C11.4874 -0.0732233 11.0126 -0.0732233 10.7197 0.21967L11.7803 1.28033ZM0.21967 10.7197C-0.0732233 11.0126 -0.0732233 11.4874 0.21967 11.7803C0.512563 12.0732 0.987437 12.0732 1.28033 11.7803L0.21967 10.7197ZM1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L1.28033 0.21967ZM10.7197 11.7803C11.0126 12.0732 11.4874 12.0732 11.7803 11.7803C12.0732 11.4874 12.0732 11.0126 11.7803 10.7197L10.7197 11.7803ZM10.7197 0.21967L0.21967 10.7197L1.28033 11.7803L11.7803 1.28033L10.7197 0.21967ZM0.21967 1.28033L10.7197 11.7803L11.7803 10.7197L1.28033 0.21967L0.21967 1.28033Z" fill="#AFB7C1"/>
|
||||
</svg>
|
||||
<input
|
||||
placeholder="email@example.com"
|
||||
v-model="input.value"
|
||||
class="no-error-input"
|
||||
:class="{ 'error-input': input.error }"
|
||||
@keyup="resetFormErrors(index)"
|
||||
/>
|
||||
<svg class="add-user__form-container__inputs-group__item__image" @click="deleteInput(index)" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="delete-input-svg-path" d="M11.7803 1.28033C12.0732 0.987437 12.0732 0.512563 11.7803 0.21967C11.4874 -0.0732233 11.0126 -0.0732233 10.7197 0.21967L11.7803 1.28033ZM0.21967 10.7197C-0.0732233 11.0126 -0.0732233 11.4874 0.21967 11.7803C0.512563 12.0732 0.987437 12.0732 1.28033 11.7803L0.21967 10.7197ZM1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L1.28033 0.21967ZM10.7197 11.7803C11.0126 12.0732 11.4874 12.0732 11.7803 11.7803C12.0732 11.4874 12.0732 11.0126 11.7803 10.7197L10.7197 11.7803ZM10.7197 0.21967L0.21967 10.7197L1.28033 11.7803L11.7803 1.28033L10.7197 0.21967ZM0.21967 1.28033L10.7197 11.7803L11.7803 10.7197L1.28033 0.21967L0.21967 1.28033Z" fill="#AFB7C1"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-user-row">
|
||||
@ -47,13 +48,15 @@
|
||||
width='205px'
|
||||
height='48px'
|
||||
:on-press="onClose"
|
||||
is-white="true"/>
|
||||
is-white="true"
|
||||
/>
|
||||
<VButton
|
||||
label='Add Team Members'
|
||||
width='205px'
|
||||
height='48px'
|
||||
:on-press="onAddUsersClick"
|
||||
:is-disabled="!isButtonActive"/>
|
||||
:is-disabled="!isButtonActive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class='add-user__close-cross-container' @click='onClose'>
|
||||
@ -159,8 +162,8 @@ export default class AddUserPopup extends Vue {
|
||||
|
||||
try {
|
||||
await this.$store.dispatch(PM_ACTIONS.ADD, emailArray);
|
||||
} catch (err) {
|
||||
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Error during adding project members. ${err.message}`);
|
||||
} catch (error) {
|
||||
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Error during adding project members. ${error.message}`);
|
||||
this.isLoading = false;
|
||||
|
||||
return;
|
||||
@ -219,6 +222,10 @@ export default class AddUserPopup extends Vue {
|
||||
return location.host + RouteConfig.Register.path;
|
||||
}
|
||||
|
||||
public get isInputsGroupScrollable(): boolean {
|
||||
return this.inputs.length > 4;
|
||||
}
|
||||
|
||||
private resetFormErrors(index): void {
|
||||
this.inputs[index].setError(false);
|
||||
if (!this.hasInputError()) {
|
||||
|
||||
@ -9,48 +9,53 @@
|
||||
ref="headerComponent"
|
||||
placeholder="Team Members"
|
||||
:search="processSearchQuery">
|
||||
<div class="header-default-state" v-if="headerState === 0">
|
||||
<span class="header-default-state__info-text">The only project role currently available is Admin, which gives <b>full access</b> to the project.</span>
|
||||
<VButton
|
||||
class="button"
|
||||
label="+Add"
|
||||
width="122px"
|
||||
height="48px"
|
||||
:on-press="onAddUsersClick"/>
|
||||
</div>
|
||||
<div class="header-selected-members" v-if="headerState === 1 && !isDeleteClicked">
|
||||
<div class="header-default-state" v-if="isDefaultState">
|
||||
<span class="header-default-state__info-text">The only project role currently available is Admin, which gives <b>full access</b> to the project.</span>
|
||||
<VButton
|
||||
class="button"
|
||||
label="+Add"
|
||||
width="122px"
|
||||
height="48px"
|
||||
:on-press="onAddUsersClick"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-selected-members" v-if="areProjectMembersSelected">
|
||||
<VButton
|
||||
class="button deletion"
|
||||
label="Delete"
|
||||
width="122px"
|
||||
height="48px"
|
||||
:on-press="onFirstDeleteClick"
|
||||
/>
|
||||
<VButton
|
||||
class="button"
|
||||
label="Cancel"
|
||||
width="122px"
|
||||
height="48px"
|
||||
is-white="true"
|
||||
:on-press="onClearSelection"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-after-delete-click" v-if="areSelectedProjectMembersBeingDeleted">
|
||||
<span class="header-after-delete-click__delete-confirmation">Are you sure you want to delete {{selectedProjectMembersCount}} {{userCountTitle}}?</span>
|
||||
<div class="header-after-delete-click__button-area">
|
||||
<VButton
|
||||
class="button deletion"
|
||||
label="Delete"
|
||||
width="122px"
|
||||
height="48px"
|
||||
:on-press="onFirstDeleteClick"/>
|
||||
:on-press="onDelete"
|
||||
/>
|
||||
<VButton
|
||||
class="button"
|
||||
label="Cancel"
|
||||
width="122px"
|
||||
height="48px"
|
||||
is-white="true"
|
||||
:on-press="onClearSelection"/>
|
||||
</div>
|
||||
<div class="header-after-delete-click" v-if="headerState === 1 && isDeleteClicked">
|
||||
<span class="header-after-delete-click__delete-confirmation">Are you sure you want to delete {{selectedProjectMembersCount}} {{userCountTitle}}?</span>
|
||||
<div class="header-after-delete-click__button-area">
|
||||
<VButton
|
||||
class="button deletion"
|
||||
label="Delete"
|
||||
width="122px"
|
||||
height="48px"
|
||||
:on-press="onDelete"/>
|
||||
<VButton
|
||||
class="button"
|
||||
label="Cancel"
|
||||
width="122px"
|
||||
height="48px"
|
||||
is-white="true"
|
||||
:on-press="onClearSelection"/>
|
||||
</div>
|
||||
:on-press="onClearSelection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VHeader>
|
||||
<div class="blur-content" v-if="isDeleteClicked"></div>
|
||||
<div class="blur-search" v-if="isDeleteClicked"></div>
|
||||
@ -124,8 +129,8 @@ export default class HeaderArea extends Vue {
|
||||
|
||||
try {
|
||||
await this.$store.dispatch(PM_ACTIONS.DELETE, projectMemberEmails);
|
||||
} catch (err) {
|
||||
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Error while deleting users from projectMembers. ${err.message}`);
|
||||
} catch (error) {
|
||||
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Error while deleting users from projectMembers. ${error.message}`);
|
||||
|
||||
return;
|
||||
}
|
||||
@ -140,14 +145,26 @@ export default class HeaderArea extends Vue {
|
||||
this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, search);
|
||||
try {
|
||||
await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
|
||||
} catch (err) {
|
||||
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch project members. ${err.message}`);
|
||||
} catch (error) {
|
||||
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch project members. ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
public get isAddTeamMembersPopupShown(): boolean {
|
||||
return this.$store.state.appStateModule.appState.isAddTeamMembersPopupShown;
|
||||
}
|
||||
|
||||
public get isDefaultState(): boolean {
|
||||
return this.headerState === 0;
|
||||
}
|
||||
|
||||
public get areProjectMembersSelected(): boolean {
|
||||
return this.headerState === 1 && !this.isDeleteClicked;
|
||||
}
|
||||
|
||||
public get areSelectedProjectMembersBeingDeleted(): boolean {
|
||||
return this.headerState === 1 && this.isDeleteClicked;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
<div class="user-container__base-info__avatar" :style="avatarData.style">
|
||||
<h1 class="user-container__base-info__avatar__letter">{{avatarData.letter}}</h1>
|
||||
</div>
|
||||
<p class="user-container__base-info__user-name">{{this.itemData.formattedFullName()}}</p>
|
||||
<p class="user-container__base-info__user-name">{{itemName}}</p>
|
||||
</div>
|
||||
<p class="user-container__date">{{this.itemData.joinedAtLocal()}}</p>
|
||||
<p class="user-container__user-email">{{this.itemData.formattedEmail()}}</p>
|
||||
<p class="user-container__date">{{itemDate}}</p>
|
||||
<p class="user-container__user-email">{{itemEmail}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -40,6 +40,18 @@ export default class ProjectMemberListItem extends Vue {
|
||||
style,
|
||||
};
|
||||
}
|
||||
|
||||
public get itemName(): string {
|
||||
return this.itemData.formattedFullName();
|
||||
}
|
||||
|
||||
public get itemDate(): string {
|
||||
return this.itemData.joinedAtLocal();
|
||||
}
|
||||
|
||||
public get itemEmail(): string {
|
||||
return this.itemData.formattedEmail();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -6,24 +6,27 @@
|
||||
<div class="team-area__header">
|
||||
<HeaderArea
|
||||
:header-state="headerState"
|
||||
:selected-project-members-count="selectedProjectMembers.length"/>
|
||||
:selected-project-members-count="selectedProjectMembers.length"
|
||||
/>
|
||||
</div>
|
||||
<div class="team-area__container" id="team-container" v-if="projectMembersCount > 0 || projectMembersTotalCount > 0">
|
||||
<div class="team-area__container" id="team-container" v-if="isTeamAreaShown">
|
||||
<SortingListHeader :on-header-click-callback="onHeaderSectionClickCallback"/>
|
||||
<div class="team-area__container__content">
|
||||
<VList
|
||||
:data-set="projectMembers"
|
||||
:item-component="getItemComponent"
|
||||
:on-item-click="onMemberClick"/>
|
||||
:on-item-click="onMemberClick"
|
||||
/>
|
||||
</div>
|
||||
<VPagination
|
||||
v-if="totalPageCount > 1"
|
||||
class="pagination-area"
|
||||
ref="pagination"
|
||||
:total-page-count="totalPageCount"
|
||||
:on-page-click-callback="onPageClick"/>
|
||||
:on-page-click-callback="onPageClick"
|
||||
/>
|
||||
</div>
|
||||
<div class="team-area__empty-search-result-area" v-if="(projectMembersCount === 0 && projectMembersTotalCount === 0)">
|
||||
<div class="team-area__empty-search-result-area" v-if="isEmptySearchResultShown">
|
||||
<h1 class="team-area__empty-search-result-area__title">No results found</h1>
|
||||
<svg class="team-area__empty-search-result-area__image" width="380" height="295" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"/>
|
||||
@ -72,6 +75,10 @@ import { SortDirection } from '@/types/common';
|
||||
import { ProjectMember, ProjectMemberHeaderState, ProjectMemberOrderBy } from '@/types/projectMembers';
|
||||
import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
|
||||
|
||||
declare interface ResetPagination {
|
||||
resetPageIndex(): void;
|
||||
}
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
HeaderArea,
|
||||
@ -83,6 +90,10 @@ import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames'
|
||||
export default class ProjectMembersArea extends Vue {
|
||||
private FIRST_PAGE = 1;
|
||||
|
||||
public $refs!: {
|
||||
pagination: HTMLElement & ResetPagination;
|
||||
};
|
||||
|
||||
public async beforeDestroy(): Promise<void> {
|
||||
await this.$store.dispatch(PM_ACTIONS.CLEAR_SELECTION);
|
||||
}
|
||||
@ -123,6 +134,14 @@ export default class ProjectMembersArea extends Vue {
|
||||
return ProjectMemberHeaderState.DEFAULT;
|
||||
}
|
||||
|
||||
public get isTeamAreaShown(): boolean {
|
||||
return this.projectMembersCount > 0 || this.projectMembersTotalCount > 0;
|
||||
}
|
||||
|
||||
public get isEmptySearchResultShown(): boolean {
|
||||
return this.projectMembersCount === 0 && this.projectMembersTotalCount === 0;
|
||||
}
|
||||
|
||||
public async onPageClick(index: number): Promise<void> {
|
||||
try {
|
||||
await this.$store.dispatch(PM_ACTIONS.FETCH, index);
|
||||
@ -140,7 +159,9 @@ export default class ProjectMembersArea extends Vue {
|
||||
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch project members. ${error.message}`);
|
||||
}
|
||||
|
||||
(this.$refs.pagination as VPagination).resetPageIndex();
|
||||
if (this.totalPageCount > 1) {
|
||||
this.$refs.pagination.resetPageIndex();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -6,20 +6,23 @@
|
||||
<div class="sort-header-container__name-container" @click="onHeaderItemClick(ProjectMemberOrderBy.NAME)">
|
||||
<p class="sort-header-container__name-container__title">Name</p>
|
||||
<VerticalArrows
|
||||
:is-active="getSortBy === ProjectMemberOrderBy.NAME"
|
||||
:direction="getSortDirection"/>
|
||||
:is-active="areProjectMembersSortedByName"
|
||||
:direction="getSortDirection"
|
||||
/>
|
||||
</div>
|
||||
<div class="sort-header-container__added-container" @click="onHeaderItemClick(ProjectMemberOrderBy.CREATED_AT)">
|
||||
<p class="sort-header-container__added-container__title">Added</p>
|
||||
<VerticalArrows
|
||||
:is-active="getSortBy === ProjectMemberOrderBy.CREATED_AT"
|
||||
:direction="getSortDirection"/>
|
||||
:is-active="areProjectMembersSortedByDate"
|
||||
:direction="getSortDirection"
|
||||
/>
|
||||
</div>
|
||||
<div class="sort-header-container__email-container" @click="onHeaderItemClick(ProjectMemberOrderBy.EMAIL)">
|
||||
<p class="sort-header-container__email-container__title">Email</p>
|
||||
<VerticalArrows
|
||||
:is-active="getSortBy === ProjectMemberOrderBy.EMAIL"
|
||||
:direction="getSortDirection"/>
|
||||
:is-active="areProjectMembersSortedByEmail"
|
||||
:direction="getSortDirection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -54,8 +57,16 @@ export default class SortingListHeader extends Vue {
|
||||
return SortDirection.DESCENDING;
|
||||
}
|
||||
|
||||
public get getSortBy() {
|
||||
return this.sortBy;
|
||||
public areProjectMembersSortedByName(): boolean {
|
||||
return this.sortBy === ProjectMemberOrderBy.NAME;
|
||||
}
|
||||
|
||||
public areProjectMembersSortedByDate(): boolean {
|
||||
return this.sortBy === ProjectMemberOrderBy.CREATED_AT;
|
||||
}
|
||||
|
||||
public areProjectMembersSortedByEmail(): boolean {
|
||||
return this.sortBy === ProjectMemberOrderBy.EMAIL;
|
||||
}
|
||||
|
||||
public async onHeaderItemClick(sortBy: ProjectMemberOrderBy): Promise<void> {
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div v-if="isLoading" class="loading-overlay active">
|
||||
<img class="loading-image" src="../../static/images/register/Loading.gif">
|
||||
<img class="loading-image" src="@/../static/images/register/Loading.gif">
|
||||
</div>
|
||||
<div v-if="!isLoading" class="dashboard-container__wrap">
|
||||
<NavigationArea class="regular-navigation" />
|
||||
<NavigationArea class="regular-navigation"/>
|
||||
<div class="dashboard-container__wrap__column">
|
||||
<DashboardHeader />
|
||||
<DashboardHeader/>
|
||||
<div class="dashboard-container__main-area">
|
||||
<router-view />
|
||||
<router-view/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
|
||||
<div class="forgot-password-container">
|
||||
<div :class="loadingClassName">
|
||||
<img class="loading-image" src="../../../static/images/register/Loading.gif">
|
||||
<img class="loading-image" src="@/../static/images/register/Loading.gif">
|
||||
</div>
|
||||
<img class="image" src="../../../static/images/AuthImage.svg" alt="" >
|
||||
<img class="image" src="@/../static/images/AuthImage.svg" alt="">
|
||||
<div class="forgot-password-container__wrapper">
|
||||
<div class="forgot-password-container__header">
|
||||
<img @click="onLogoClick" class="forgot-password-container__logo" src="../../../static/images/Logo.svg" alt="logo">
|
||||
<img @click="onLogoClick" class="forgot-password-container__logo" src="@/../static/images/Logo.svg" alt="logo">
|
||||
<div class="forgot-password-container__login-button" @click="onBackToLoginClick">
|
||||
<p class="forgot-password-container__login-button__label">Back to Login</p>
|
||||
</div>
|
||||
@ -25,7 +25,8 @@
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
width="100%"
|
||||
height="46px" />
|
||||
height="46px"
|
||||
/>
|
||||
<div class="forgot-password-area__submit-container" @click.prevent="onSendConfigurations">
|
||||
<div class="forgot-password-area__submit-container__send-button">
|
||||
<p class="forgot-password-area__submit-container__send-button__label">Reset Password</p>
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
|
||||
<div class="login-container" @keyup.enter="onLogin">
|
||||
<div :class="loadingClassName"></div>
|
||||
<img :class="loadingLogoClassName" src="../../../static/images/LogoWhite.svg" alt="loading-logo">
|
||||
<img class="image" src="../../../static/images/AuthImage.svg" alt="" >
|
||||
<img :class="loadingLogoClassName" src="@/../static/images/LogoWhite.svg" alt="loading-logo">
|
||||
<img class="image" src="@/../static/images/AuthImage.svg" alt="" >
|
||||
<div class="login-container__wrapper">
|
||||
<div class="login-container__header">
|
||||
<img class="login-container__logo" src="../../../static/images/Logo.svg" alt="logo" @click="onLogoClick">
|
||||
<img class="login-container__logo" src="@/../static/images/Logo.svg" alt="logo" @click="onLogoClick">
|
||||
<div class="login-container__register-button" @click.prevent="onSignUpClick">
|
||||
<p class="login-container__register-button__label">Create Account</p>
|
||||
</div>
|
||||
@ -23,7 +23,8 @@
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
height="46px"
|
||||
width="100%" />
|
||||
width="100%"
|
||||
/>
|
||||
<HeaderlessInput
|
||||
class="login-area__password-input"
|
||||
placeholder="Password"
|
||||
@ -31,7 +32,8 @@
|
||||
@setData="setPassword"
|
||||
width="100%"
|
||||
height="46px"
|
||||
is-password="true" />
|
||||
is-password="true"
|
||||
/>
|
||||
<div class="login-area__submit-area">
|
||||
<router-link :to="forgotPasswordPath" class="login-area__navigation-area__nav-link" exact>
|
||||
<h3 class="login-area__navigation-area__nav-link__link"><strong>Forgot password?</strong></h3>
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
|
||||
<div class="register-container" @keyup.enter="onCreateClick">
|
||||
<div :class="loadingClassName">
|
||||
<img class="loading-image" src="../../../static/images/register/Loading.gif">
|
||||
<img class="loading-image" src="@/../static/images/register/Loading.gif">
|
||||
</div>
|
||||
<img class="image" src="../../../static/images/AuthImage.svg" alt="" >
|
||||
<img class="image" src="@/../static/images/AuthImage.svg" alt="" >
|
||||
<div class="register-container__wrapper">
|
||||
<div class="register-container__header">
|
||||
<img class="register-container__logo" src="../../../static/images/Logo.svg" alt="logo" @click="onLogoClick">
|
||||
<img class="register-container__logo" src="@/../static/images/Logo.svg" alt="logo" @click="onLogoClick">
|
||||
<div class="register-container__register-button" @click.prevent="onLoginClick">
|
||||
<p class="register-container__register-button__label">Login</p>
|
||||
</div>
|
||||
@ -25,14 +25,16 @@
|
||||
:error="fullNameError"
|
||||
@setData="setFullName"
|
||||
width="100%"
|
||||
height="46px" />
|
||||
height="46px"
|
||||
/>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Nickname"
|
||||
placeholder="Enter Nickname"
|
||||
@setData="setShortName"
|
||||
width="100%"
|
||||
height="46px" />
|
||||
height="46px"
|
||||
/>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Email"
|
||||
@ -40,7 +42,8 @@
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
width="100%"
|
||||
height="46px" />
|
||||
height="46px"
|
||||
/>
|
||||
<div class="register-input">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
@ -50,15 +53,16 @@
|
||||
@setData="setPassword"
|
||||
width="100%"
|
||||
height="46px"
|
||||
is-password="true" />
|
||||
is-password="true"
|
||||
/>
|
||||
<VInfo
|
||||
class="register-input__info-button"
|
||||
bold-text="Use 6 or more characters with a mix of letters, numbers & symbols" >
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="18" height="18" rx="9" fill="#007AFF"/>
|
||||
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
|
||||
<path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
|
||||
</svg>
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="18" height="18" rx="9" fill="#007AFF"/>
|
||||
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
|
||||
<path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
|
||||
</svg>
|
||||
</VInfo>
|
||||
</div>
|
||||
<div class="register-input">
|
||||
@ -70,22 +74,23 @@
|
||||
@setData="setRepeatedPassword"
|
||||
width="100%"
|
||||
height="46px"
|
||||
is-password="true" />
|
||||
is-password="true"
|
||||
/>
|
||||
<VInfo
|
||||
class="register-input__info-button"
|
||||
bold-text="Use 6 or more characters with a mix of letters, numbers & symbols">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="18" height="18" rx="9" fill="#007AFF"/>
|
||||
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
|
||||
<path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
|
||||
</svg>
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="18" height="18" rx="9" fill="#007AFF"/>
|
||||
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
|
||||
<path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
|
||||
</svg>
|
||||
</VInfo>
|
||||
</div>
|
||||
<div class="register-area__submit-container">
|
||||
<div class="register-area__submit-container__terms-area">
|
||||
<label class="container">
|
||||
<input type="checkbox" v-model="isTermsAccepted">
|
||||
<span :class="[isTermsAcceptedError ? 'checkmark error': 'checkmark']"></span>
|
||||
<span class="checkmark" :class="{'error': isTermsAcceptedError}"></span>
|
||||
</label>
|
||||
<h2 class="register-area__submit-container__terms-area__terms-confirmation">I agree to the <a class="register-area__submit-container__terms-area__link" href="https://tardigrade.io/terms-of-use/" target="_blank">Terms & Conditions</a></h2>
|
||||
</div>
|
||||
|
||||
@ -86,21 +86,23 @@ exports[`NavigationArea snapshot not changed with project 1`] = `
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<router-link-stub to="/account/profile" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Profile</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
<router-link-stub to="/account/billing" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Billing</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
<router-link-stub to="/account/payment-methods" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Payment Methods</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
<div class="navigation-area__account-area">
|
||||
<router-link-stub to="/account/profile" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Profile</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
<router-link-stub to="/account/billing" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Billing</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
<router-link-stub to="/account/payment-methods" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Payment Methods</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
</div>
|
||||
<div class="divider custom-divider"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -192,21 +194,23 @@ exports[`NavigationArea snapshot not changed without project 1`] = `
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<router-link-stub to="/account/profile" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Profile</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
<router-link-stub to="/account/billing" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Billing</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
<router-link-stub to="/account/payment-methods" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Payment Methods</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
<div class="navigation-area__account-area">
|
||||
<router-link-stub to="/account/profile" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Profile</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
<router-link-stub to="/account/billing" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Billing</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
<router-link-stub to="/account/payment-methods" tag="a" event="click" class="navigation-area__item-container account-item">
|
||||
<div class="navigation-area__item-container__link-container">
|
||||
<h1 class="navigation-area__item-container__link-container__title account-item">Payment Methods</h1>
|
||||
</div>
|
||||
</router-link-stub>
|
||||
</div>
|
||||
<div class="divider custom-divider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@ exports[`SortingListHeader.vue should render correctly 1`] = `
|
||||
<p class="sort-header-container__added-container__title">Added</p>
|
||||
<div class="container"><svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
|
||||
<path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049" class="arrow-svg-path"></path>
|
||||
</svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
|
||||
</svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="active">
|
||||
<path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049" class="arrow-svg-path"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
@ -22,7 +22,7 @@ exports[`SortingListHeader.vue should render correctly 1`] = `
|
||||
<p class="sort-header-container__email-container__title">Email</p>
|
||||
<div class="container"><svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
|
||||
<path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049" class="arrow-svg-path"></path>
|
||||
</svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
|
||||
</svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="active">
|
||||
<path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049" class="arrow-svg-path"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
|
||||
@ -17,7 +17,7 @@ exports[`Dashboard renders correctly when data is loaded 1`] = `
|
||||
|
||||
exports[`Dashboard renders correctly when data is loading 1`] = `
|
||||
<div class="dashboard-container">
|
||||
<div class="loading-overlay active"><img src="../../static/images/register/Loading.gif" class="loading-image"></div>
|
||||
<div class="loading-overlay active"><img src="@/../static/images/register/Loading.gif" class="loading-image"></div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user