frontend template tabs fixed (#2497)
This commit is contained in:
Vitalii Shpital
GitHub
parent
e81e25c271
commit
aefb775061
@ -3,11 +3,11 @@
|
||||
|
||||
<template>
|
||||
<div class="account-area-container">
|
||||
<h1>Account</h1>
|
||||
<TabNavigation
|
||||
class="account-area-container__navigation"
|
||||
:navigation="navigation"/>
|
||||
<router-view />
|
||||
<h1>Account</h1>
|
||||
<TabNavigation
|
||||
class="account-area-container__navigation"
|
||||
:navigation="navigation"/>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,45 +2,45 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="payment-methods-container">
|
||||
<div class="payment-methods-container__card-container">
|
||||
<div class="payment-methods-container__card-container__info-area">
|
||||
<img class="payment-methods-container__card-container__info-area__card-logo" src="../../../static/images/Logo.svg">
|
||||
<div class="payment-methods-container__card-container__info-area__info-container">
|
||||
<h1>xxxx 0000</h1>
|
||||
<h2>Shawn Wilkinson</h2>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__info-area__expire-container">
|
||||
<h2>Expires</h2>
|
||||
<h1>12/2020</h1>
|
||||
</div>
|
||||
<h3 class="payment-methods-container__card-container__info-area__added-text">Added on 29 May 2019</h3>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__default-button" v-if="true">
|
||||
<p class="payment-methods-container__card-container__default-button__label">Default</p>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__button-area" v-if="false">
|
||||
<div class="payment-methods-container__card-container__button-area__make-button">
|
||||
<p class="payment-methods-container__card-container__button-area__make-button__label">Make Default</p>
|
||||
</div>
|
||||
<svg class="payment-methods-container__card-container__button-area__delete-button"
|
||||
width="34"
|
||||
height="34"
|
||||
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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
class="payment-methods-container__add-button"
|
||||
label="Add Card"
|
||||
width="140px"
|
||||
height="48px"
|
||||
isDisabled />
|
||||
</div>
|
||||
<div class="payment-methods-container">
|
||||
<div class="payment-methods-container__card-container">
|
||||
<div class="payment-methods-container__card-container__info-area">
|
||||
<img class="payment-methods-container__card-container__info-area__card-logo" src="../../../static/images/Logo.svg">
|
||||
<div class="payment-methods-container__card-container__info-area__info-container">
|
||||
<h1>xxxx 0000</h1>
|
||||
<h2>Shawn Wilkinson</h2>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__info-area__expire-container">
|
||||
<h2>Expires</h2>
|
||||
<h1>12/2020</h1>
|
||||
</div>
|
||||
<h3 class="payment-methods-container__card-container__info-area__added-text">Added on 29 May 2019</h3>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__default-button" v-if="true">
|
||||
<p class="payment-methods-container__card-container__default-button__label">Default</p>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__button-area" v-if="false">
|
||||
<div class="payment-methods-container__card-container__button-area__make-button">
|
||||
<p class="payment-methods-container__card-container__button-area__make-button__label">Make Default</p>
|
||||
</div>
|
||||
<svg class="payment-methods-container__card-container__button-area__delete-button"
|
||||
width="34"
|
||||
height="34"
|
||||
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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
class="payment-methods-container__add-button"
|
||||
label="Add Card"
|
||||
width="140px"
|
||||
height="48px"
|
||||
isDisabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -2,61 +2,61 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="change-password-popup-container">
|
||||
<div class="change-password-popup">
|
||||
<div class="change-password-popup__form-container">
|
||||
<div class="change-password-row-container">
|
||||
<svg class="change-password-popup__form-container__svg" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#2683FF"/>
|
||||
<path d="M29.5001 34.5196C30.1001 34.5196 30.5865 34.0452 30.5865 33.46C30.5865 32.8748 30.1001 32.4004 29.5001 32.4004C28.9 32.4004 28.4136 32.8748 28.4136 33.46C28.4136 34.0452 28.9 34.5196 29.5001 34.5196Z" fill="#FEFEFF"/>
|
||||
<path d="M39.9405 40.2152C40.1781 40 40.3139 39.6854 40.3139 39.3709V25.5464C40.3139 24.9007 39.7707 24.3709 39.1086 24.3709H35.7473V21.0927C35.7473 17.7318 32.9462 15 29.5 15C26.0538 15 23.2527 17.7318 23.2527 21.0927V24.3709H19.8914C19.2293 24.3709 18.686 24.9007 18.686 25.5464V39.3709C18.686 39.6854 18.8218 40 19.0595 40.2152L23.7959 44.6689C24.0166 44.8841 24.3222 45 24.6278 45H34.3552C34.6608 45 34.9664 44.8841 35.1871 44.6689L39.9405 40.2152ZM30.7053 36.6391V38.1291C30.7053 38.7748 30.1621 39.3046 29.5 39.3046C28.8379 39.3046 28.2947 38.7748 28.2947 38.1291V36.6391C26.9705 36.1589 26.0198 34.9172 26.0198 33.4437C26.0198 31.5728 27.5817 30.0497 29.5 30.0497C31.4183 30.0497 32.9801 31.5728 32.9801 33.4437C32.9801 34.9172 32.0295 36.1589 30.7053 36.6391ZM33.3367 24.3709H25.6464V21.0927C25.6464 19.0232 27.3779 17.351 29.483 17.351C31.5881 17.351 33.3197 19.0397 33.3197 21.0927V24.3709H33.3367Z" fill="#FEFEFF"/>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="21.6279" height="30" fill="#FFFFFF" transform="translate(18.686 15)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<h2 class="change-password-popup__form-container__main-label-text">Change Password</h2>
|
||||
</div>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Old Password"
|
||||
placeholder ="Enter Old Password"
|
||||
width="100%"
|
||||
isPassword
|
||||
ref="oldPasswordInput"
|
||||
:error="oldPasswordError"
|
||||
@setData="setOldPassword" />
|
||||
<HeaderlessInput
|
||||
class="full-input mt"
|
||||
label="New Password"
|
||||
placeholder ="Enter New Password"
|
||||
width="100%"
|
||||
ref="newPasswordInput"
|
||||
isPassword
|
||||
:error="newPasswordError"
|
||||
@setData="setNewPassword" />
|
||||
<HeaderlessInput
|
||||
class="full-input mt"
|
||||
label="Confirm password"
|
||||
placeholder="Confirm password"
|
||||
width="100%"
|
||||
ref="confirmPasswordInput"
|
||||
isPassword
|
||||
:error="confirmationPasswordError"
|
||||
@setData="setPasswordConfirmation" />
|
||||
<div class="change-password-popup__form-container__button-container">
|
||||
<Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite />
|
||||
<Button label="Update" width="205px" height="48px" :onPress="onUpdateClick" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="change-password-popup__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 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="change-password-popup-container">
|
||||
<div class="change-password-popup">
|
||||
<div class="change-password-popup__form-container">
|
||||
<div class="change-password-row-container">
|
||||
<svg class="change-password-popup__form-container__svg" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#2683FF"/>
|
||||
<path d="M29.5001 34.5196C30.1001 34.5196 30.5865 34.0452 30.5865 33.46C30.5865 32.8748 30.1001 32.4004 29.5001 32.4004C28.9 32.4004 28.4136 32.8748 28.4136 33.46C28.4136 34.0452 28.9 34.5196 29.5001 34.5196Z" fill="#FEFEFF"/>
|
||||
<path d="M39.9405 40.2152C40.1781 40 40.3139 39.6854 40.3139 39.3709V25.5464C40.3139 24.9007 39.7707 24.3709 39.1086 24.3709H35.7473V21.0927C35.7473 17.7318 32.9462 15 29.5 15C26.0538 15 23.2527 17.7318 23.2527 21.0927V24.3709H19.8914C19.2293 24.3709 18.686 24.9007 18.686 25.5464V39.3709C18.686 39.6854 18.8218 40 19.0595 40.2152L23.7959 44.6689C24.0166 44.8841 24.3222 45 24.6278 45H34.3552C34.6608 45 34.9664 44.8841 35.1871 44.6689L39.9405 40.2152ZM30.7053 36.6391V38.1291C30.7053 38.7748 30.1621 39.3046 29.5 39.3046C28.8379 39.3046 28.2947 38.7748 28.2947 38.1291V36.6391C26.9705 36.1589 26.0198 34.9172 26.0198 33.4437C26.0198 31.5728 27.5817 30.0497 29.5 30.0497C31.4183 30.0497 32.9801 31.5728 32.9801 33.4437C32.9801 34.9172 32.0295 36.1589 30.7053 36.6391ZM33.3367 24.3709H25.6464V21.0927C25.6464 19.0232 27.3779 17.351 29.483 17.351C31.5881 17.351 33.3197 19.0397 33.3197 21.0927V24.3709H33.3367Z" fill="#FEFEFF"/>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="21.6279" height="30" fill="#FFFFFF" transform="translate(18.686 15)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<h2 class="change-password-popup__form-container__main-label-text">Change Password</h2>
|
||||
</div>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Old Password"
|
||||
placeholder ="Enter Old Password"
|
||||
width="100%"
|
||||
isPassword
|
||||
ref="oldPasswordInput"
|
||||
:error="oldPasswordError"
|
||||
@setData="setOldPassword" />
|
||||
<HeaderlessInput
|
||||
class="full-input mt"
|
||||
label="New Password"
|
||||
placeholder ="Enter New Password"
|
||||
width="100%"
|
||||
ref="newPasswordInput"
|
||||
isPassword
|
||||
:error="newPasswordError"
|
||||
@setData="setNewPassword" />
|
||||
<HeaderlessInput
|
||||
class="full-input mt"
|
||||
label="Confirm password"
|
||||
placeholder="Confirm password"
|
||||
width="100%"
|
||||
ref="confirmPasswordInput"
|
||||
isPassword
|
||||
:error="confirmationPasswordError"
|
||||
@setData="setPasswordConfirmation" />
|
||||
<div class="change-password-popup__form-container__button-container">
|
||||
<Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite />
|
||||
<Button label="Update" width="205px" height="48px" :onPress="onUpdateClick" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="change-password-popup__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 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -2,44 +2,44 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="edit-profile-popup-container">
|
||||
<div class="edit-profile-popup">
|
||||
<div class="edit-profile-popup__form-container">
|
||||
<div class="edit-profile-row-container">
|
||||
<div class="edit-profile-popup__form-container__avatar">
|
||||
<h1>{{avatarLetter}}</h1>
|
||||
</div>
|
||||
<h2 class="edit-profile-popup__form-container__main-label-text">Edit profile</h2>
|
||||
</div>
|
||||
<HeaderedInput
|
||||
class="full-input"
|
||||
label="Full name"
|
||||
placeholder="Enter Full Name"
|
||||
width="100%"
|
||||
ref="fullNameInput"
|
||||
:error="fullNameError"
|
||||
:initValue="originalFullName"
|
||||
@setData="setFullName" />
|
||||
<HeaderedInput
|
||||
class="full-input"
|
||||
label="Short Name"
|
||||
placeholder="Enter Short Name"
|
||||
width="100%"
|
||||
ref="shortNameInput"
|
||||
:initValue="originalShortName"
|
||||
@setData="setShortName"/>
|
||||
<div class="edit-profile-popup__form-container__button-container">
|
||||
<Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite />
|
||||
<Button label="Update" width="205px" height="48px" :onPress="onUpdateClick" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-profile-popup__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 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-profile-popup-container">
|
||||
<div class="edit-profile-popup">
|
||||
<div class="edit-profile-popup__form-container">
|
||||
<div class="edit-profile-row-container">
|
||||
<div class="edit-profile-popup__form-container__avatar">
|
||||
<h1>{{avatarLetter}}</h1>
|
||||
</div>
|
||||
<h2 class="edit-profile-popup__form-container__main-label-text">Edit profile</h2>
|
||||
</div>
|
||||
<HeaderedInput
|
||||
class="full-input"
|
||||
label="Full name"
|
||||
placeholder="Enter Full Name"
|
||||
width="100%"
|
||||
ref="fullNameInput"
|
||||
:error="fullNameError"
|
||||
:initValue="originalFullName"
|
||||
@setData="setFullName" />
|
||||
<HeaderedInput
|
||||
class="full-input"
|
||||
label="Short Name"
|
||||
placeholder="Enter Short Name"
|
||||
width="100%"
|
||||
ref="shortNameInput"
|
||||
:initValue="originalShortName"
|
||||
@setData="setShortName"/>
|
||||
<div class="edit-profile-popup__form-container__button-container">
|
||||
<Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite />
|
||||
<Button label="Update" width="205px" height="48px" :onPress="onUpdateClick" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-profile-popup__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 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -3,68 +3,68 @@
|
||||
|
||||
<template>
|
||||
<div class="profile-container">
|
||||
<div class="profile-container__edit-profile no-margin" >
|
||||
<div class="profile-container__edit-profile__row">
|
||||
<div class="profile-container__edit-profile__avatar">
|
||||
<h1>{{avatarLetter}}</h1>
|
||||
</div>
|
||||
<div class="profile-container__edit-profile__text">
|
||||
<h2>Edit Profile</h2>
|
||||
<h3>This information will be visible to all users</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg class="edit-svg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleEditProfilePopup">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-container__secondary-container">
|
||||
<div class="profile-container__secondary-container__change-password">
|
||||
<div class="profile-container__edit-profile__row">
|
||||
<svg class="profile-container__secondary-container__img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
|
||||
<path d="M29.5001 34.5196C30.1001 34.5196 30.5865 34.0452 30.5865 33.46C30.5865 32.8748 30.1001 32.4004 29.5001 32.4004C28.9 32.4004 28.4136 32.8748 28.4136 33.46C28.4136 34.0452 28.9 34.5196 29.5001 34.5196Z" fill="#354049"/>
|
||||
<path d="M39.9405 40.2152C40.1781 40 40.3139 39.6854 40.3139 39.3709V25.5464C40.3139 24.9007 39.7707 24.3709 39.1086 24.3709H35.7473V21.0927C35.7473 17.7318 32.9462 15 29.5 15C26.0538 15 23.2527 17.7318 23.2527 21.0927V24.3709H19.8914C19.2293 24.3709 18.686 24.9007 18.686 25.5464V39.3709C18.686 39.6854 18.8218 40 19.0595 40.2152L23.7959 44.6689C24.0166 44.8841 24.3222 45 24.6278 45H34.3552C34.6608 45 34.9664 44.8841 35.1871 44.6689L39.9405 40.2152ZM30.7053 36.6391V38.1291C30.7053 38.7748 30.1621 39.3046 29.5 39.3046C28.8379 39.3046 28.2947 38.7748 28.2947 38.1291V36.6391C26.9705 36.1589 26.0198 34.9172 26.0198 33.4437C26.0198 31.5728 27.5817 30.0497 29.5 30.0497C31.4183 30.0497 32.9801 31.5728 32.9801 33.4437C32.9801 34.9172 32.0295 36.1589 30.7053 36.6391ZM33.3367 24.3709H25.6464V21.0927C25.6464 19.0232 27.3779 17.351 29.483 17.351C31.5881 17.351 33.3197 19.0397 33.3197 21.0927V24.3709H33.3367Z" fill="#354049"/>
|
||||
</svg>
|
||||
<div class="profile-container__secondary-container__change-password__text-container">
|
||||
<h2>Change Password</h2>
|
||||
<h3>6 or more characters</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg class="edit-svg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleChangePasswordPopup">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-container__secondary-container__email-container">
|
||||
<div class="profile-container__edit-profile__row">
|
||||
<svg class="profile-container__secondary-container__img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
|
||||
<path d="M29.9998 16.7598C25.7965 16.7641 21.8459 18.7646 19.3534 22.1498C16.8607 25.535 16.1236 29.9013 17.3671 33.9162C18.6096 37.9314 21.6853 41.1186 25.6546 42.5032C29.6238 43.8868 34.014 43.305 37.4846 40.9348L35.9861 38.7538C33.3633 40.552 30.0711 41.0781 27.0174 40.1856C23.9649 39.2931 21.4732 37.077 20.2319 34.1482C18.9905 31.2203 19.1294 27.8888 20.6104 25.0734C22.0924 22.2591 24.7588 20.2577 27.8761 19.6232C30.9922 18.9878 34.2296 19.7862 36.6938 21.7976C39.1581 23.809 40.5898 26.8202 40.592 30.0007V31.0365C40.592 32.8762 39.8001 33.9732 38.4723 33.9732V33.995L38.4734 33.9961C38.3892 33.9819 38.305 33.9743 38.2208 33.9743H37.9408C37.1959 33.9743 36.0868 32.8903 36.0868 32.1597V30.0007C36.0989 28.1019 35.2293 26.3038 33.7331 25.1345C32.2358 23.9653 30.2824 23.5563 28.4417 24.0277C26.602 24.498 25.085 25.7963 24.3335 27.5408C23.5832 29.2854 23.6838 31.2794 24.6069 32.9395C25.529 34.5987 27.1696 35.7373 29.0475 36.0206C30.9254 36.3039 32.8286 35.6991 34.2 34.3855C35.0597 35.6542 36.521 36.6255 37.9386 36.6255V36.6025C38.0228 36.6178 38.1092 36.6255 38.1956 36.6255H38.4756C41.326 36.6255 43.2356 34.3855 43.2356 31.042V30.0007C43.2312 26.4909 41.8356 23.1265 39.3551 20.6448C36.8734 18.1631 33.5101 16.7654 30.0003 16.7598L29.9998 16.7598ZM29.9998 33.4416C28.6075 33.4416 27.353 32.6038 26.8204 31.3176C26.2878 30.0313 26.582 28.5515 27.5664 27.567C28.5508 26.5824 30.0306 26.2884 31.317 26.821C32.6032 27.3537 33.441 28.6082 33.441 30.0004C33.441 31.9014 31.901 33.4413 30.0001 33.4413L29.9998 33.4416Z" fill="#354049"/>
|
||||
</svg>
|
||||
<div class="profile-container__secondary-container__email-container__text-container">
|
||||
<h2>{{user.email}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-container__button-area">
|
||||
<Button
|
||||
class="profile-container__button-area__delete-button"
|
||||
label="Delete account"
|
||||
width="210px"
|
||||
height="56px"
|
||||
:onPress="toggleDeleteAccountPopup"
|
||||
isDeletion/>
|
||||
</div>
|
||||
<ChangePasswordPopup v-if="isChangePasswordPopupShown"/>
|
||||
<EditProfilePopup v-if="isEditProfilePopupShown"/>
|
||||
<DeleteAccountPopup v-if="isDeleteAccountPopupShown" />
|
||||
</div>
|
||||
<div class="profile-container__edit-profile no-margin" >
|
||||
<div class="profile-container__edit-profile__row">
|
||||
<div class="profile-container__edit-profile__avatar">
|
||||
<h1>{{avatarLetter}}</h1>
|
||||
</div>
|
||||
<div class="profile-container__edit-profile__text">
|
||||
<h2>Edit Profile</h2>
|
||||
<h3>This information will be visible to all users</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg class="edit-svg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleEditProfilePopup">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-container__secondary-container">
|
||||
<div class="profile-container__secondary-container__change-password">
|
||||
<div class="profile-container__edit-profile__row">
|
||||
<svg class="profile-container__secondary-container__img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
|
||||
<path d="M29.5001 34.5196C30.1001 34.5196 30.5865 34.0452 30.5865 33.46C30.5865 32.8748 30.1001 32.4004 29.5001 32.4004C28.9 32.4004 28.4136 32.8748 28.4136 33.46C28.4136 34.0452 28.9 34.5196 29.5001 34.5196Z" fill="#354049"/>
|
||||
<path d="M39.9405 40.2152C40.1781 40 40.3139 39.6854 40.3139 39.3709V25.5464C40.3139 24.9007 39.7707 24.3709 39.1086 24.3709H35.7473V21.0927C35.7473 17.7318 32.9462 15 29.5 15C26.0538 15 23.2527 17.7318 23.2527 21.0927V24.3709H19.8914C19.2293 24.3709 18.686 24.9007 18.686 25.5464V39.3709C18.686 39.6854 18.8218 40 19.0595 40.2152L23.7959 44.6689C24.0166 44.8841 24.3222 45 24.6278 45H34.3552C34.6608 45 34.9664 44.8841 35.1871 44.6689L39.9405 40.2152ZM30.7053 36.6391V38.1291C30.7053 38.7748 30.1621 39.3046 29.5 39.3046C28.8379 39.3046 28.2947 38.7748 28.2947 38.1291V36.6391C26.9705 36.1589 26.0198 34.9172 26.0198 33.4437C26.0198 31.5728 27.5817 30.0497 29.5 30.0497C31.4183 30.0497 32.9801 31.5728 32.9801 33.4437C32.9801 34.9172 32.0295 36.1589 30.7053 36.6391ZM33.3367 24.3709H25.6464V21.0927C25.6464 19.0232 27.3779 17.351 29.483 17.351C31.5881 17.351 33.3197 19.0397 33.3197 21.0927V24.3709H33.3367Z" fill="#354049"/>
|
||||
</svg>
|
||||
<div class="profile-container__secondary-container__change-password__text-container">
|
||||
<h2>Change Password</h2>
|
||||
<h3>6 or more characters</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg class="edit-svg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleChangePasswordPopup">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-container__secondary-container__email-container">
|
||||
<div class="profile-container__edit-profile__row">
|
||||
<svg class="profile-container__secondary-container__img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
|
||||
<path d="M29.9998 16.7598C25.7965 16.7641 21.8459 18.7646 19.3534 22.1498C16.8607 25.535 16.1236 29.9013 17.3671 33.9162C18.6096 37.9314 21.6853 41.1186 25.6546 42.5032C29.6238 43.8868 34.014 43.305 37.4846 40.9348L35.9861 38.7538C33.3633 40.552 30.0711 41.0781 27.0174 40.1856C23.9649 39.2931 21.4732 37.077 20.2319 34.1482C18.9905 31.2203 19.1294 27.8888 20.6104 25.0734C22.0924 22.2591 24.7588 20.2577 27.8761 19.6232C30.9922 18.9878 34.2296 19.7862 36.6938 21.7976C39.1581 23.809 40.5898 26.8202 40.592 30.0007V31.0365C40.592 32.8762 39.8001 33.9732 38.4723 33.9732V33.995L38.4734 33.9961C38.3892 33.9819 38.305 33.9743 38.2208 33.9743H37.9408C37.1959 33.9743 36.0868 32.8903 36.0868 32.1597V30.0007C36.0989 28.1019 35.2293 26.3038 33.7331 25.1345C32.2358 23.9653 30.2824 23.5563 28.4417 24.0277C26.602 24.498 25.085 25.7963 24.3335 27.5408C23.5832 29.2854 23.6838 31.2794 24.6069 32.9395C25.529 34.5987 27.1696 35.7373 29.0475 36.0206C30.9254 36.3039 32.8286 35.6991 34.2 34.3855C35.0597 35.6542 36.521 36.6255 37.9386 36.6255V36.6025C38.0228 36.6178 38.1092 36.6255 38.1956 36.6255H38.4756C41.326 36.6255 43.2356 34.3855 43.2356 31.042V30.0007C43.2312 26.4909 41.8356 23.1265 39.3551 20.6448C36.8734 18.1631 33.5101 16.7654 30.0003 16.7598L29.9998 16.7598ZM29.9998 33.4416C28.6075 33.4416 27.353 32.6038 26.8204 31.3176C26.2878 30.0313 26.582 28.5515 27.5664 27.567C28.5508 26.5824 30.0306 26.2884 31.317 26.821C32.6032 27.3537 33.441 28.6082 33.441 30.0004C33.441 31.9014 31.901 33.4413 30.0001 33.4413L29.9998 33.4416Z" fill="#354049"/>
|
||||
</svg>
|
||||
<div class="profile-container__secondary-container__email-container__text-container">
|
||||
<h2>{{user.email}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-container__button-area">
|
||||
<Button
|
||||
class="profile-container__button-area__delete-button"
|
||||
label="Delete account"
|
||||
width="210px"
|
||||
height="56px"
|
||||
:onPress="toggleDeleteAccountPopup"
|
||||
isDeletion/>
|
||||
</div>
|
||||
<ChangePasswordPopup v-if="isChangePasswordPopupShown"/>
|
||||
<EditProfilePopup v-if="isEditProfilePopupShown"/>
|
||||
<DeleteAccountPopup v-if="isDeleteAccountPopupShown" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<SortingHeader />
|
||||
<BillingItem />
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<PaginationArea />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,34 +2,34 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<tr class="container">
|
||||
<td class="container__item bold">test</td>
|
||||
<td class="container__item">test</td>
|
||||
<td class="container__item">test</td>
|
||||
<td class="container__item">
|
||||
<div class="row justify-start">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#2683FF"/>
|
||||
<path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item bold">
|
||||
<div class="row justify-start">
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item">
|
||||
<div class="row">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="background" width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path class="blue" d="M25.6491 19.2809L21.2192 23.5281C20.891 23.8427 20.3988 24 20.0707 24C19.7425 24 19.2503 23.8427 19.0862 23.5281L14.4922 19.2809C13.8359 18.6517 13.8359 17.8652 14.4922 17.236C14.8204 16.9213 15.1485 16.9213 15.6407 16.9213C15.9689 16.9213 16.4611 17.0787 16.6252 17.3933L18.594 19.1236L18.594 11.4157C18.594 10.6292 19.2503 10 20.0707 10C20.891 10 21.5473 10.6292 21.5473 11.4157L21.5473 19.1236L23.5162 17.236C23.6803 16.9213 24.1725 16.9213 24.5006 16.9213C24.8288 16.9213 25.321 17.0787 25.4851 17.3933C26.1414 17.8652 26.1414 18.809 25.6491 19.2809Z" fill="#2683FF"/>
|
||||
<rect class="blue" x="11" y="28" width="18" height="2" rx="1" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="container">
|
||||
<td class="container__item bold">test</td>
|
||||
<td class="container__item">test</td>
|
||||
<td class="container__item">test</td>
|
||||
<td class="container__item">
|
||||
<div class="row justify-start">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#2683FF"/>
|
||||
<path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item bold">
|
||||
<div class="row justify-start">
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item">
|
||||
<div class="row">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="background" width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path class="blue" d="M25.6491 19.2809L21.2192 23.5281C20.891 23.8427 20.3988 24 20.0707 24C19.7425 24 19.2503 23.8427 19.0862 23.5281L14.4922 19.2809C13.8359 18.6517 13.8359 17.8652 14.4922 17.236C14.8204 16.9213 15.1485 16.9213 15.6407 16.9213C15.9689 16.9213 16.4611 17.0787 16.6252 17.3933L18.594 19.1236L18.594 11.4157C18.594 10.6292 19.2503 10 20.0707 10C20.891 10 21.5473 10.6292 21.5473 11.4157L21.5473 19.1236L23.5162 17.236C23.6803 16.9213 24.1725 16.9213 24.5006 16.9213C24.8288 16.9213 25.321 17.0787 25.4851 17.3933C26.1414 17.8652 26.1414 18.809 25.6491 19.2809Z" fill="#2683FF"/>
|
||||
<rect class="blue" x="11" y="28" width="18" height="2" rx="1" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -4,12 +4,12 @@
|
||||
<template>
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-container__pages">
|
||||
<div v-html="arrowLeft" class="pagination-container__button"></div>
|
||||
<div class="pagination-container__items">
|
||||
<span class="selected">1</span>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div v-html="arrowRight" class="pagination-container__button"></div>
|
||||
<div v-html="arrowLeft" class="pagination-container__button"></div>
|
||||
<div class="pagination-container__items">
|
||||
<span class="selected">1</span>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div v-html="arrowRight" class="pagination-container__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2,42 +2,42 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<tr class="sort-header-container">
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>ID</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Date</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Project Name</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Payment method</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Amount</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item no-padding">
|
||||
<div class="row center">
|
||||
<p>Receipt</p>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="sort-header-container">
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>ID</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Date</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Project Name</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Payment method</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Amount</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item no-padding">
|
||||
<div class="row center">
|
||||
<p>Receipt</p>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -16,10 +16,10 @@
|
||||
<PaginationArea />
|
||||
</div>
|
||||
<EmptyState
|
||||
class="empty-container"
|
||||
v-if="pages === 0 && search && search.length > 0"
|
||||
mainTitle="Nothing found :("
|
||||
:imageSource="emptyImage" />
|
||||
class="empty-container"
|
||||
v-if="pages === 0 && search && search.length > 0"
|
||||
mainTitle="Nothing found :("
|
||||
:imageSource="emptyImage" />
|
||||
</div>
|
||||
<NoBucketArea v-if="pages === 0 && !search" />
|
||||
</div>
|
||||
|
||||
@ -2,28 +2,28 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<tr class="sort-header-container">
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Bucket Name</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Storage Used</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Egress Used</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Objects Stored</p>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="sort-header-container">
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Bucket Name</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Storage Used</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Egress Used</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Objects Stored</p>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -3,17 +3,17 @@
|
||||
|
||||
<template>
|
||||
<div class="input-container">
|
||||
<div v-if="!isOptional" class="label-container">
|
||||
<img v-if="error" src="../../../static/images/register/ErrorInfo.svg"/>
|
||||
<h3 v-if="!error">{{label}}</h3>
|
||||
<h3 v-if="!error" class="label-container__add-label">{{additionalLabel}}</h3>
|
||||
<h3 class="label-container__error" v-if="error">{{error}}</h3>
|
||||
</div>
|
||||
<div v-if="isOptional" class="optional-label-container">
|
||||
<h3>{{label}}</h3>
|
||||
<h4>Optional</h4>
|
||||
</div>
|
||||
<textarea
|
||||
<div v-if="!isOptional" class="label-container">
|
||||
<img v-if="error" src="../../../static/images/register/ErrorInfo.svg"/>
|
||||
<h3 v-if="!error">{{label}}</h3>
|
||||
<h3 v-if="!error" class="label-container__add-label">{{additionalLabel}}</h3>
|
||||
<h3 class="label-container__error" v-if="error">{{error}}</h3>
|
||||
</div>
|
||||
<div v-if="isOptional" class="optional-label-container">
|
||||
<h3>{{label}}</h3>
|
||||
<h4>Optional</h4>
|
||||
</div>
|
||||
<textarea
|
||||
v-if="isMultiline"
|
||||
:id="this.$props.label"
|
||||
:placeholder="this.$props.placeholder"
|
||||
@ -21,11 +21,11 @@
|
||||
:rows="5"
|
||||
:cols="40"
|
||||
wrap="hard"
|
||||
v-model.lazy="value"
|
||||
@change="onInput"
|
||||
v-model.lazy="value"
|
||||
@change="onInput"
|
||||
@input="onInput">
|
||||
</textarea>
|
||||
<input
|
||||
</textarea>
|
||||
<input
|
||||
v-if="!isMultiline"
|
||||
:id="this.$props.label"
|
||||
:placeholder="this.$props.placeholder"
|
||||
@ -34,7 +34,7 @@
|
||||
@change="onInput"
|
||||
@input="onInput"
|
||||
:style="style"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
<template>
|
||||
<div class="input-wrap">
|
||||
<div class="label-container">
|
||||
<img v-if="error" src="../../../static/images/register/ErrorInfo.svg"/>
|
||||
<h3 v-if="!error && label" :style="style.labelStyle">{{label}}</h3>
|
||||
<h3 class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</h3>
|
||||
</div>
|
||||
<img v-if="error" src="../../../static/images/register/ErrorInfo.svg"/>
|
||||
<h3 v-if="!error && label" :style="style.labelStyle">{{label}}</h3>
|
||||
<h3 class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</h3>
|
||||
</div>
|
||||
<input
|
||||
:class="{'inputError' : error}"
|
||||
@input="onInput"
|
||||
@ -16,20 +16,20 @@
|
||||
:type="[isPassword ? passwordType : textType]"
|
||||
:style="style.inputStyle"/>
|
||||
<!--2 conditions of eye image (crossed or not) -->
|
||||
<svg v-if="isPassword && !isPasswordShown" v-on:click="changeVision()" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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 v-if="isPassword && isPasswordShown" v-on:click="changeVision()" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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">
|
||||
<svg v-if="isPassword && !isPasswordShown" v-on:click="changeVision()" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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 v-if="isPassword && isPasswordShown" v-on:click="changeVision()" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 16.5L16 1L16.8155 1.57875L5.81551 17.0787L5 16.5Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 16.5L16 1L16.8155 1.57875L5.81551 17.0787L5 16.5Z" fill="white"/>
|
||||
<path d="M16 1L16.5787 0.184493L15.7632 -0.394254L15.1845 0.421253L16 1ZM5 16.5L4.18449 15.9213L3.60575 16.7368L4.42125 17.3155L5 16.5ZM16.8155 1.57875L17.631 2.15749L18.2098 1.34199L17.3943 0.76324L16.8155 1.57875ZM5.81551 17.0787L5.23676 17.8943L6.05227 18.473L6.63101 17.6575L5.81551 17.0787ZM15.1845 0.421253L4.18449 15.9213L5.81551 17.0787L16.8155 1.57875L15.1845 0.421253ZM17.3943 0.76324L16.5787 0.184493L15.4213 1.81551L16.2368 2.39425L17.3943 0.76324ZM6.63101 17.6575L17.631 2.15749L16 1L5 16.5L6.63101 17.6575ZM4.42125 17.3155L5.23676 17.8943L6.39425 16.2632L5.57875 15.6845L4.42125 17.3155Z" fill="white" mask="url(#path-3-inside-1)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.5L16 2L16.8155 2.57875L5.81551 18.0787L5 17.5Z" fill="#AFB7C1"/>
|
||||
</svg>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 16.5L16 1L16.8155 1.57875L5.81551 17.0787L5 16.5Z" fill="white"/>
|
||||
<path d="M16 1L16.5787 0.184493L15.7632 -0.394254L15.1845 0.421253L16 1ZM5 16.5L4.18449 15.9213L3.60575 16.7368L4.42125 17.3155L5 16.5ZM16.8155 1.57875L17.631 2.15749L18.2098 1.34199L17.3943 0.76324L16.8155 1.57875ZM5.81551 17.0787L5.23676 17.8943L6.05227 18.473L6.63101 17.6575L5.81551 17.0787ZM15.1845 0.421253L4.18449 15.9213L5.81551 17.0787L16.8155 1.57875L15.1845 0.421253ZM17.3943 0.76324L16.5787 0.184493L15.4213 1.81551L16.2368 2.39425L17.3943 0.76324ZM6.63101 17.6575L17.631 2.15749L16 1L5 16.5L6.63101 17.6575ZM4.42125 17.3155L5.23676 17.8943L6.39425 16.2632L5.57875 15.6845L4.42125 17.3155Z" fill="white" mask="url(#path-3-inside-1)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.5L16 2L16.8155 2.57875L5.81551 18.0787L5 17.5Z" fill="#AFB7C1"/>
|
||||
</svg>
|
||||
<!-- end of image-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -2,11 +2,11 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="tab-navigation-container">
|
||||
<router-link :to="navLink.path" class="tab-navigation-container__item" v-for="navLink in navigation" :key="navLink.name">
|
||||
<p>{{navLink.name}}</p>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="tab-navigation-container">
|
||||
<router-link :to="navLink.path" class="tab-navigation-container__item" v-for="navLink in navigation" :key="navLink.name">
|
||||
<p>{{navLink.name}}</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -2,44 +2,44 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="add-payment-popup-overflow" v-on:keyup.enter="onDoneClick" v-on:keyup.esc="onCloseClick">
|
||||
<div class="add-payment-popup-container">
|
||||
<h1 class="add-payment-popup-container__title">Add Payment Method</h1>
|
||||
<div class="add-payment-popup-container__chosen-card-container">
|
||||
<Card
|
||||
isChosen
|
||||
lastDigits="0000"
|
||||
fullName="Shawn Wilkinson"
|
||||
expireLabel="Storj Labs"
|
||||
expireDate="12/2020" />
|
||||
<Button
|
||||
label="Default"
|
||||
width="91px"
|
||||
height="36px"
|
||||
isDisabled />
|
||||
</div>
|
||||
<div class="add-payment-popup-container__border"></div>
|
||||
<div class="add-payment-popup-container__expanded-area"></div>
|
||||
<div class="add-payment-popup-container__footer">
|
||||
<div class="add-payment-popup-container__footer__new-card-button" @click="onNewCardClick">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#2683FF"/>
|
||||
<path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
<p class="add-payment-popup-container__footer__new-card-button__label">+ New Card</p>
|
||||
</div>
|
||||
<Button
|
||||
label="Done"
|
||||
width="205px"
|
||||
height="48px" />
|
||||
</div>
|
||||
<div class="cross" @click="onCloseClick">
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-payment-popup-overflow" v-on:keyup.enter="onDoneClick" v-on:keyup.esc="onCloseClick">
|
||||
<div class="add-payment-popup-container">
|
||||
<h1 class="add-payment-popup-container__title">Add Payment Method</h1>
|
||||
<div class="add-payment-popup-container__chosen-card-container">
|
||||
<Card
|
||||
isChosen
|
||||
lastDigits="0000"
|
||||
fullName="Shawn Wilkinson"
|
||||
expireLabel="Storj Labs"
|
||||
expireDate="12/2020" />
|
||||
<Button
|
||||
label="Default"
|
||||
width="91px"
|
||||
height="36px"
|
||||
isDisabled />
|
||||
</div>
|
||||
<div class="add-payment-popup-container__border"></div>
|
||||
<div class="add-payment-popup-container__expanded-area"></div>
|
||||
<div class="add-payment-popup-container__footer">
|
||||
<div class="add-payment-popup-container__footer__new-card-button" @click="onNewCardClick">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#2683FF"/>
|
||||
<path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
<p class="add-payment-popup-container__footer__new-card-button__label">+ New Card</p>
|
||||
</div>
|
||||
<Button
|
||||
label="Done"
|
||||
width="205px"
|
||||
height="48px" />
|
||||
</div>
|
||||
<div class="cross" @click="onCloseClick">
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -22,7 +22,6 @@
|
||||
v-model="projectName"
|
||||
v-on:keyup="resetError" >
|
||||
</div>
|
||||
|
||||
<div class="delete-project-popup__form-container__button-container">
|
||||
<Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite/>
|
||||
<Button
|
||||
|
||||
@ -2,50 +2,50 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div v-if="isPopupShown" class="project-creation-success-popup-container">
|
||||
<div class="project-creation-success-popup" id='successfulProjectCreationPopup'>
|
||||
<div class="project-creation-success-popup__info-panel-container">
|
||||
<svg width="300" height="233" viewBox="0 0 300 233" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M175.712 232.904C239.885 232.904 291.878 180.748 291.878 116.411C291.878 52.0744 239.885 0 175.712 0C111.539 0 59.5459 52.1561 59.5459 116.493C59.5459 180.83 111.539 232.904 175.712 232.904Z" fill="#2683FF"/>
|
||||
<path d="M239.721 179.603H113.173C107.614 179.603 103.036 175.025 103.036 169.466V68.9143C103.036 63.3553 107.614 58.7773 113.173 58.7773H239.639C245.198 58.7773 249.776 63.3553 249.776 68.9143V169.466C249.776 175.025 245.28 179.603 239.721 179.603Z" fill="#499FFC"/>
|
||||
<path d="M233.428 168.897H121.186C118.161 168.897 115.627 166.363 115.627 163.338V77.8285C115.627 74.8038 118.161 72.2695 121.186 72.2695H233.428C236.453 72.2695 238.987 74.8038 238.987 77.8285V163.338C238.987 166.363 236.453 168.897 233.428 168.897Z" fill="white"/>
|
||||
<path d="M162.06 161.538C161.406 161.538 160.834 160.966 160.834 160.312V80.361C160.834 79.707 161.406 79.1348 162.06 79.1348C162.714 79.1348 163.286 79.707 163.286 80.361V160.312C163.286 160.966 162.714 161.538 162.06 161.538Z" fill="black"/>
|
||||
<path d="M191.326 133.416L171.788 119.11L191.326 103.251C191.898 102.76 191.98 101.943 191.49 101.37C190.999 100.798 190.182 100.716 189.609 101.207L168.845 118.129C168.518 118.374 168.354 118.783 168.354 119.192C168.354 119.6 168.6 120.009 168.927 120.254L189.855 135.542C190.1 135.705 190.345 135.787 190.672 135.787C191.081 135.787 191.49 135.623 191.735 135.215C192.062 134.642 191.898 133.825 191.326 133.416Z" fill="#2683FF"/>
|
||||
<path d="M232.772 118.127L211.844 101.123C211.272 100.632 210.454 100.714 209.964 101.286C209.473 101.859 209.555 102.676 210.127 103.167L229.666 119.026L210.127 133.332C209.555 133.741 209.392 134.558 209.882 135.212C210.127 135.539 210.536 135.785 210.945 135.785C211.19 135.785 211.517 135.703 211.762 135.539L232.69 120.252C233.017 120.007 233.181 119.598 233.263 119.189C233.263 118.781 233.099 118.372 232.772 118.127Z" fill="#2683FF"/>
|
||||
<path d="M204.487 97.3635C203.751 97.2 203.097 97.6905 202.934 98.4263L195.249 139.464C195.086 140.2 195.576 140.854 196.312 141.018C196.476 141.018 196.639 141.018 196.803 141.018C197.293 140.936 197.784 140.527 197.865 139.955L205.55 98.9168C205.713 98.2628 205.223 97.527 204.487 97.3635Z" fill="#2683FF"/>
|
||||
<path d="M159.852 69.403H118.242C116.607 69.403 115.217 68.0132 115.217 66.3782C115.217 64.7433 116.607 63.3535 118.242 63.3535H159.852C161.487 63.3535 162.877 64.7433 162.877 66.3782C162.877 68.0132 161.569 69.403 159.852 69.403Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M298.253 150.664C299.806 150.664 300.951 151.89 300.951 153.444C300.215 174.535 291.304 193.583 277.325 207.562C263.346 221.541 244.299 230.451 223.207 231.187C221.654 231.269 220.428 230.043 220.428 228.49V204.537C220.428 203.065 221.572 201.921 223.044 201.839C236.124 201.185 247.896 195.544 256.643 186.879C265.39 178.132 270.949 166.36 271.603 153.28C271.685 151.809 272.829 150.664 274.301 150.664H298.253Z" fill="#DEDEFC"/>
|
||||
<path d="M221.655 225.058C226.892 225.058 231.138 220.812 231.138 215.575C231.138 210.337 226.892 206.092 221.655 206.092C216.418 206.092 212.172 210.337 212.172 215.575C212.172 220.812 216.418 225.058 221.655 225.058Z" fill="#499FFC"/>
|
||||
<path d="M67.3937 30.902C74.3424 30.902 80.0649 25.016 80.0649 17.8221C80.0649 10.6281 74.3424 4.74219 67.3937 4.74219C60.445 4.74219 54.7225 10.6281 54.7225 17.8221C54.6408 25.0978 60.3633 30.902 67.3937 30.902Z" fill="#499FFC"/>
|
||||
<path d="M67.3943 23.5445C70.5008 23.5445 73.1168 21.0103 73.1168 17.8221C73.1168 14.7156 70.5826 12.0996 67.3943 12.0996C64.2879 12.0996 61.6719 14.6338 61.6719 17.8221C61.6719 21.0103 64.2061 23.5445 67.3943 23.5445Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M138.843 36.3769C141.786 36.3769 144.238 33.9244 144.238 30.9814C144.238 28.0384 141.786 25.5859 138.843 25.5859C135.9 25.5859 133.447 28.0384 133.447 30.9814C133.366 33.9244 135.818 36.3769 138.843 36.3769Z" fill="#6CB9FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M102.383 207.398C105.326 207.398 107.778 204.946 107.778 202.003C107.778 199.06 105.326 196.607 102.383 196.607C99.4398 196.607 96.9873 199.06 96.9873 202.003C96.9873 205.028 99.358 207.398 102.383 207.398Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M117.916 207.398C120.859 207.398 123.311 204.946 123.311 202.003C123.311 199.06 120.859 196.607 117.916 196.607C114.973 196.607 112.521 199.06 112.521 202.003C112.439 205.028 114.891 207.398 117.916 207.398Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M133.366 207.398C136.309 207.398 138.762 204.946 138.762 202.003C138.762 199.06 136.309 196.607 133.366 196.607C130.423 196.607 127.971 199.06 127.971 202.003C127.971 205.028 130.423 207.398 133.366 207.398Z" fill="#6CB9FF"/>
|
||||
<path d="M124.781 110.036H140.068C141.622 110.036 142.93 108.81 142.93 107.338C142.93 105.867 141.622 104.641 140.068 104.641H124.781C123.228 104.641 121.92 105.867 121.92 107.338C121.92 108.81 123.228 110.036 124.781 110.036Z" fill="#0F002D"/>
|
||||
<path d="M124.699 99.2448H151.513C153.066 99.2448 154.374 97.855 154.374 96.22C154.374 94.5851 153.066 93.1953 151.513 93.1953H124.781C123.228 93.1953 121.92 94.5851 121.92 96.22C121.92 97.855 123.146 99.2448 124.699 99.2448Z" fill="#0F002D"/>
|
||||
<path d="M126.09 125.405H127.888C129.441 125.405 130.749 124.015 130.749 122.38C130.749 120.663 129.523 119.355 127.888 119.355H126.09C124.537 119.355 123.229 120.745 123.229 122.38C123.31 124.097 124.537 125.405 126.09 125.405Z" fill="#2683FF"/>
|
||||
<path d="M136.881 125.405H138.679C140.232 125.405 141.54 124.015 141.54 122.38C141.54 120.663 140.314 119.355 138.679 119.355H136.881C135.328 119.355 134.02 120.745 134.02 122.38C134.101 124.097 135.328 125.405 136.881 125.405Z" fill="#2683FF"/>
|
||||
<path d="M116.361 136.03C115.952 136.03 115.625 136.03 115.298 136.111C114.644 136.193 113.99 135.784 113.745 135.212C106.061 121.233 91.1824 111.75 74.015 111.75C58.4826 111.75 44.7487 119.516 36.6555 131.37C36.2468 131.942 35.511 132.187 34.857 132.106C32.8133 131.697 30.6878 131.452 28.5623 131.452C12.5395 131.37 -0.376953 144.123 -0.376953 159.982C-0.376953 159.982 -0.376953 159.982 -0.376953 160.064C-0.376953 160.963 0.358791 161.699 1.33978 161.699H138.761C139.66 161.699 140.477 160.963 140.477 160.064V159.982C140.477 146.739 129.686 136.03 116.361 136.03Z" fill="#DEDEFC"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="project-creation-success-popup__form-container">
|
||||
<h2 class="project-creation-success-popup__form-container__main-label-text">Congrats!</h2>
|
||||
<p>You just created your project. Next, we recommend you create your first API Key for this project. API Keys allow developers to manage their projects and build applications on top of the Storj network through our
|
||||
<a href="https://github.com/storj/storj/wiki/Uplink-CLI" target="_blank">Uplink CLI.</a>
|
||||
</p>
|
||||
<div class="project-creation-success-popup__form-container__button-container">
|
||||
<Button label="I will do it later" width="214px" height="50px" :onPress="onCloseClick" isWhite />
|
||||
<Button label="Create first API Key" width="214px" height="50px" :onPress="onCreateAPIKeyClick" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-creation-success-popup__close-cross-container" v-on:click="onCloseClick">
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isPopupShown" class="project-creation-success-popup-container">
|
||||
<div class="project-creation-success-popup" id='successfulProjectCreationPopup'>
|
||||
<div class="project-creation-success-popup__info-panel-container">
|
||||
<svg width="300" height="233" viewBox="0 0 300 233" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M175.712 232.904C239.885 232.904 291.878 180.748 291.878 116.411C291.878 52.0744 239.885 0 175.712 0C111.539 0 59.5459 52.1561 59.5459 116.493C59.5459 180.83 111.539 232.904 175.712 232.904Z" fill="#2683FF"/>
|
||||
<path d="M239.721 179.603H113.173C107.614 179.603 103.036 175.025 103.036 169.466V68.9143C103.036 63.3553 107.614 58.7773 113.173 58.7773H239.639C245.198 58.7773 249.776 63.3553 249.776 68.9143V169.466C249.776 175.025 245.28 179.603 239.721 179.603Z" fill="#499FFC"/>
|
||||
<path d="M233.428 168.897H121.186C118.161 168.897 115.627 166.363 115.627 163.338V77.8285C115.627 74.8038 118.161 72.2695 121.186 72.2695H233.428C236.453 72.2695 238.987 74.8038 238.987 77.8285V163.338C238.987 166.363 236.453 168.897 233.428 168.897Z" fill="white"/>
|
||||
<path d="M162.06 161.538C161.406 161.538 160.834 160.966 160.834 160.312V80.361C160.834 79.707 161.406 79.1348 162.06 79.1348C162.714 79.1348 163.286 79.707 163.286 80.361V160.312C163.286 160.966 162.714 161.538 162.06 161.538Z" fill="black"/>
|
||||
<path d="M191.326 133.416L171.788 119.11L191.326 103.251C191.898 102.76 191.98 101.943 191.49 101.37C190.999 100.798 190.182 100.716 189.609 101.207L168.845 118.129C168.518 118.374 168.354 118.783 168.354 119.192C168.354 119.6 168.6 120.009 168.927 120.254L189.855 135.542C190.1 135.705 190.345 135.787 190.672 135.787C191.081 135.787 191.49 135.623 191.735 135.215C192.062 134.642 191.898 133.825 191.326 133.416Z" fill="#2683FF"/>
|
||||
<path d="M232.772 118.127L211.844 101.123C211.272 100.632 210.454 100.714 209.964 101.286C209.473 101.859 209.555 102.676 210.127 103.167L229.666 119.026L210.127 133.332C209.555 133.741 209.392 134.558 209.882 135.212C210.127 135.539 210.536 135.785 210.945 135.785C211.19 135.785 211.517 135.703 211.762 135.539L232.69 120.252C233.017 120.007 233.181 119.598 233.263 119.189C233.263 118.781 233.099 118.372 232.772 118.127Z" fill="#2683FF"/>
|
||||
<path d="M204.487 97.3635C203.751 97.2 203.097 97.6905 202.934 98.4263L195.249 139.464C195.086 140.2 195.576 140.854 196.312 141.018C196.476 141.018 196.639 141.018 196.803 141.018C197.293 140.936 197.784 140.527 197.865 139.955L205.55 98.9168C205.713 98.2628 205.223 97.527 204.487 97.3635Z" fill="#2683FF"/>
|
||||
<path d="M159.852 69.403H118.242C116.607 69.403 115.217 68.0132 115.217 66.3782C115.217 64.7433 116.607 63.3535 118.242 63.3535H159.852C161.487 63.3535 162.877 64.7433 162.877 66.3782C162.877 68.0132 161.569 69.403 159.852 69.403Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M298.253 150.664C299.806 150.664 300.951 151.89 300.951 153.444C300.215 174.535 291.304 193.583 277.325 207.562C263.346 221.541 244.299 230.451 223.207 231.187C221.654 231.269 220.428 230.043 220.428 228.49V204.537C220.428 203.065 221.572 201.921 223.044 201.839C236.124 201.185 247.896 195.544 256.643 186.879C265.39 178.132 270.949 166.36 271.603 153.28C271.685 151.809 272.829 150.664 274.301 150.664H298.253Z" fill="#DEDEFC"/>
|
||||
<path d="M221.655 225.058C226.892 225.058 231.138 220.812 231.138 215.575C231.138 210.337 226.892 206.092 221.655 206.092C216.418 206.092 212.172 210.337 212.172 215.575C212.172 220.812 216.418 225.058 221.655 225.058Z" fill="#499FFC"/>
|
||||
<path d="M67.3937 30.902C74.3424 30.902 80.0649 25.016 80.0649 17.8221C80.0649 10.6281 74.3424 4.74219 67.3937 4.74219C60.445 4.74219 54.7225 10.6281 54.7225 17.8221C54.6408 25.0978 60.3633 30.902 67.3937 30.902Z" fill="#499FFC"/>
|
||||
<path d="M67.3943 23.5445C70.5008 23.5445 73.1168 21.0103 73.1168 17.8221C73.1168 14.7156 70.5826 12.0996 67.3943 12.0996C64.2879 12.0996 61.6719 14.6338 61.6719 17.8221C61.6719 21.0103 64.2061 23.5445 67.3943 23.5445Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M138.843 36.3769C141.786 36.3769 144.238 33.9244 144.238 30.9814C144.238 28.0384 141.786 25.5859 138.843 25.5859C135.9 25.5859 133.447 28.0384 133.447 30.9814C133.366 33.9244 135.818 36.3769 138.843 36.3769Z" fill="#6CB9FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M102.383 207.398C105.326 207.398 107.778 204.946 107.778 202.003C107.778 199.06 105.326 196.607 102.383 196.607C99.4398 196.607 96.9873 199.06 96.9873 202.003C96.9873 205.028 99.358 207.398 102.383 207.398Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M117.916 207.398C120.859 207.398 123.311 204.946 123.311 202.003C123.311 199.06 120.859 196.607 117.916 196.607C114.973 196.607 112.521 199.06 112.521 202.003C112.439 205.028 114.891 207.398 117.916 207.398Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M133.366 207.398C136.309 207.398 138.762 204.946 138.762 202.003C138.762 199.06 136.309 196.607 133.366 196.607C130.423 196.607 127.971 199.06 127.971 202.003C127.971 205.028 130.423 207.398 133.366 207.398Z" fill="#6CB9FF"/>
|
||||
<path d="M124.781 110.036H140.068C141.622 110.036 142.93 108.81 142.93 107.338C142.93 105.867 141.622 104.641 140.068 104.641H124.781C123.228 104.641 121.92 105.867 121.92 107.338C121.92 108.81 123.228 110.036 124.781 110.036Z" fill="#0F002D"/>
|
||||
<path d="M124.699 99.2448H151.513C153.066 99.2448 154.374 97.855 154.374 96.22C154.374 94.5851 153.066 93.1953 151.513 93.1953H124.781C123.228 93.1953 121.92 94.5851 121.92 96.22C121.92 97.855 123.146 99.2448 124.699 99.2448Z" fill="#0F002D"/>
|
||||
<path d="M126.09 125.405H127.888C129.441 125.405 130.749 124.015 130.749 122.38C130.749 120.663 129.523 119.355 127.888 119.355H126.09C124.537 119.355 123.229 120.745 123.229 122.38C123.31 124.097 124.537 125.405 126.09 125.405Z" fill="#2683FF"/>
|
||||
<path d="M136.881 125.405H138.679C140.232 125.405 141.54 124.015 141.54 122.38C141.54 120.663 140.314 119.355 138.679 119.355H136.881C135.328 119.355 134.02 120.745 134.02 122.38C134.101 124.097 135.328 125.405 136.881 125.405Z" fill="#2683FF"/>
|
||||
<path d="M116.361 136.03C115.952 136.03 115.625 136.03 115.298 136.111C114.644 136.193 113.99 135.784 113.745 135.212C106.061 121.233 91.1824 111.75 74.015 111.75C58.4826 111.75 44.7487 119.516 36.6555 131.37C36.2468 131.942 35.511 132.187 34.857 132.106C32.8133 131.697 30.6878 131.452 28.5623 131.452C12.5395 131.37 -0.376953 144.123 -0.376953 159.982C-0.376953 159.982 -0.376953 159.982 -0.376953 160.064C-0.376953 160.963 0.358791 161.699 1.33978 161.699H138.761C139.66 161.699 140.477 160.963 140.477 160.064V159.982C140.477 146.739 129.686 136.03 116.361 136.03Z" fill="#DEDEFC"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="project-creation-success-popup__form-container">
|
||||
<h2 class="project-creation-success-popup__form-container__main-label-text">Congrats!</h2>
|
||||
<p>You just created your project. Next, we recommend you create your first API Key for this project. API Keys allow developers to manage their projects and build applications on top of the Storj network through our
|
||||
<a href="https://github.com/storj/storj/wiki/Uplink-CLI" target="_blank">Uplink CLI.</a>
|
||||
</p>
|
||||
<div class="project-creation-success-popup__form-container__button-container">
|
||||
<Button label="I will do it later" width="214px" height="50px" :onPress="onCloseClick" isWhite />
|
||||
<Button label="Create first API Key" width="214px" height="50px" :onPress="onCreateAPIKeyClick" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-creation-success-popup__close-cross-container" v-on:click="onCloseClick">
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -2,48 +2,48 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="project-details">
|
||||
<h1>Project Details</h1>
|
||||
<div class="project-details-info-container">
|
||||
<div class="project-details-info-container__name-container">
|
||||
<h2>Project Name</h2>
|
||||
<h3>{{name}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details-info-container">
|
||||
<div class="project-details-info-container__description-container" v-if="!isEditing">
|
||||
<div class="project-details-info-container__description-container__text">
|
||||
<h2>Description</h2>
|
||||
<h3>{{description}}</h3>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleEditing">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details-info-container__description-container--editing" v-if="isEditing">
|
||||
<HeaderedInput
|
||||
label="Description"
|
||||
placeholder ="Enter Description"
|
||||
width="70vw"
|
||||
height="10vh"
|
||||
isMultiline
|
||||
@setData="setNewDescription" />
|
||||
<div class="project-details-info-container__description-container__buttons-area">
|
||||
<Button label="Cancel" width="180px" height="48px" :onPress="toggleEditing" isWhite/>
|
||||
<Button label="Save" width="180px" height="48px" :onPress="onSaveButtonClick"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details__button-area" id="deleteProjectPopupButton">
|
||||
<Button class="delete-project" label="Delete project" width="180px" height="48px" :onPress="toggleDeleteDialog" isDeletion/>
|
||||
</div>
|
||||
</div>
|
||||
<DeleteProjectPopup v-if="isPopupShown" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="project-details">
|
||||
<h1>Project Details</h1>
|
||||
<div class="project-details-info-container">
|
||||
<div class="project-details-info-container__name-container">
|
||||
<h2>Project Name</h2>
|
||||
<h3>{{name}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details-info-container">
|
||||
<div class="project-details-info-container__description-container" v-if="!isEditing">
|
||||
<div class="project-details-info-container__description-container__text">
|
||||
<h2>Description</h2>
|
||||
<h3>{{description}}</h3>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleEditing">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details-info-container__description-container--editing" v-if="isEditing">
|
||||
<HeaderedInput
|
||||
label="Description"
|
||||
placeholder ="Enter Description"
|
||||
width="70vw"
|
||||
height="10vh"
|
||||
isMultiline
|
||||
@setData="setNewDescription" />
|
||||
<div class="project-details-info-container__description-container__buttons-area">
|
||||
<Button label="Cancel" width="180px" height="48px" :onPress="toggleEditing" isWhite/>
|
||||
<Button label="Save" width="180px" height="48px" :onPress="onSaveButtonClick"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details__button-area" id="deleteProjectPopupButton">
|
||||
<Button class="delete-project" label="Delete project" width="180px" height="48px" :onPress="toggleDeleteDialog" isDeletion/>
|
||||
</div>
|
||||
</div>
|
||||
<DeleteProjectPopup v-if="isPopupShown" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -2,46 +2,46 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="payment-methods-container">
|
||||
<p class="payment-methods-container__title">Credit or Debit Cards</p>
|
||||
<div class="payment-methods-container__card-container">
|
||||
<div class="payment-methods-container__card-container__info-area">
|
||||
<img class="payment-methods-container__card-container__info-area__card-logo" src="../../../static/images/Logo.svg">
|
||||
<div class="payment-methods-container__card-container__info-area__info-container">
|
||||
<h1>xxxx 0000</h1>
|
||||
<h2>Shawn Wilkinson</h2>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__info-area__expire-container">
|
||||
<h2>Expires</h2>
|
||||
<h1>12/2020</h1>
|
||||
</div>
|
||||
<h3 class="payment-methods-container__card-container__info-area__added-text">Added on 29 May 2019</h3>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__default-button" v-if="true">
|
||||
<p class="payment-methods-container__card-container__default-button__label">Default</p>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__button-area" v-if="false">
|
||||
<div class="payment-methods-container__card-container__button-area__make-button">
|
||||
<p class="payment-methods-container__card-container__button-area__make-button__label">Make Default</p>
|
||||
</div>
|
||||
<svg class="payment-methods-container__card-container__button-area__delete-button"
|
||||
width="34"
|
||||
height="34"
|
||||
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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
class="payment-methods-container__add-button"
|
||||
label="Add Card"
|
||||
width="140px"
|
||||
height="48px"
|
||||
isDisabled />
|
||||
</div>
|
||||
<div class="payment-methods-container">
|
||||
<p class="payment-methods-container__title">Credit or Debit Cards</p>
|
||||
<div class="payment-methods-container__card-container">
|
||||
<div class="payment-methods-container__card-container__info-area">
|
||||
<img class="payment-methods-container__card-container__info-area__card-logo" src="../../../static/images/Logo.svg">
|
||||
<div class="payment-methods-container__card-container__info-area__info-container">
|
||||
<h1>xxxx 0000</h1>
|
||||
<h2>Shawn Wilkinson</h2>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__info-area__expire-container">
|
||||
<h2>Expires</h2>
|
||||
<h1>12/2020</h1>
|
||||
</div>
|
||||
<h3 class="payment-methods-container__card-container__info-area__added-text">Added on 29 May 2019</h3>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__default-button" v-if="true">
|
||||
<p class="payment-methods-container__card-container__default-button__label">Default</p>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__button-area" v-if="false">
|
||||
<div class="payment-methods-container__card-container__button-area__make-button">
|
||||
<p class="payment-methods-container__card-container__button-area__make-button__label">Make Default</p>
|
||||
</div>
|
||||
<svg class="payment-methods-container__card-container__button-area__delete-button"
|
||||
width="34"
|
||||
height="34"
|
||||
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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
class="payment-methods-container__add-button"
|
||||
label="Add Card"
|
||||
width="140px"
|
||||
height="48px"
|
||||
isDisabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -2,58 +2,58 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="usage-report-container">
|
||||
<div class="usage-report-container__header">
|
||||
<p>Report</p>
|
||||
</div>
|
||||
<div class="usage-report-container__options-area">
|
||||
<div class="usage-report-container__options-area__option active" @click.prevent="onCurrentRollupClick">
|
||||
<p>Current Billing Period</p>
|
||||
</div>
|
||||
<div class="usage-report-container__options-area__option" @click.prevent="onPreviousRollupClick">
|
||||
<p>Previous Billing Period</p>
|
||||
</div>
|
||||
<div class="usage-report-container__options-area__option" @click.prevent.self="onCustomDateClick">
|
||||
<p @click.prevent.self="onCustomDateClick">Custom Date Range</p>
|
||||
<Datepicker ref="datePicker" :date="startTime" @change="getDates"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" @click.prevent.self="onCustomDateClick">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-report-container__main-area">
|
||||
<div class="usage-report-container__main-area__info-area">
|
||||
<div class="usage-report-container__main-area__info-area__item">
|
||||
<h1>Storage, GBh</h1>
|
||||
<h2>{{storage}}</h2>
|
||||
</div>
|
||||
<div class="usage-report-container__main-area__info-area__item">
|
||||
<h1>Egress, GB</h1>
|
||||
<h2>{{egress}}</h2>
|
||||
</div>
|
||||
<div class="usage-report-container__main-area__info-area__item">
|
||||
<h1>Object Hours</h1>
|
||||
<h2>{{objectsCount}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-report-container__main-area__footer">
|
||||
<p>Current Roll Up Period <b>{{toLocaleDateString(startDate)}}</b> to <b>{{toLocaleDateString(endDate)}}</b></p>
|
||||
<div class="usage-report-container__main-area__footer__report-area">
|
||||
<p>Download Advanced Report</p>
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" @click.prevent="onReportClick">
|
||||
<rect class="background" width="40" height="40" rx="4"/>
|
||||
<path class="blue" d="M25.6491 19.2809L21.2192 23.5281C20.891 23.8427 20.3988 24 20.0707 24C19.7425 24 19.2503 23.8427 19.0862 23.5281L14.4922 19.2809C13.8359 18.6517 13.8359 17.8652 14.4922 17.236C14.8204 16.9213 15.1485 16.9213 15.6407 16.9213C15.9689 16.9213 16.4611 17.0787 16.6252 17.3933L18.594 19.1236L18.594 11.4157C18.594 10.6292 19.2503 10 20.0707 10C20.891 10 21.5473 10.6292 21.5473 11.4157L21.5473 19.1236L23.5162 17.236C23.6803 16.9213 24.1725 16.9213 24.5006 16.9213C24.8288 16.9213 25.321 17.0787 25.4851 17.3933C26.1414 17.8652 26.1414 18.809 25.6491 19.2809Z"/>
|
||||
<rect class="blue" x="11" y="28" width="18" height="2" rx="1"/>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="22" height="22" fill="white" transform="translate(10 10)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-report-container">
|
||||
<div class="usage-report-container__header">
|
||||
<p>Report</p>
|
||||
</div>
|
||||
<div class="usage-report-container__options-area">
|
||||
<div class="usage-report-container__options-area__option active" @click.prevent="onCurrentRollupClick">
|
||||
<p>Current Billing Period</p>
|
||||
</div>
|
||||
<div class="usage-report-container__options-area__option" @click.prevent="onPreviousRollupClick">
|
||||
<p>Previous Billing Period</p>
|
||||
</div>
|
||||
<div class="usage-report-container__options-area__option" @click.prevent.self="onCustomDateClick">
|
||||
<p @click.prevent.self="onCustomDateClick">Custom Date Range</p>
|
||||
<Datepicker ref="datePicker" :date="startTime" @change="getDates"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" @click.prevent.self="onCustomDateClick">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-report-container__main-area">
|
||||
<div class="usage-report-container__main-area__info-area">
|
||||
<div class="usage-report-container__main-area__info-area__item">
|
||||
<h1>Storage, GBh</h1>
|
||||
<h2>{{storage}}</h2>
|
||||
</div>
|
||||
<div class="usage-report-container__main-area__info-area__item">
|
||||
<h1>Egress, GB</h1>
|
||||
<h2>{{egress}}</h2>
|
||||
</div>
|
||||
<div class="usage-report-container__main-area__info-area__item">
|
||||
<h1>Object Hours</h1>
|
||||
<h2>{{objectsCount}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-report-container__main-area__footer">
|
||||
<p>Current Roll Up Period <b>{{toLocaleDateString(startDate)}}</b> to <b>{{toLocaleDateString(endDate)}}</b></p>
|
||||
<div class="usage-report-container__main-area__footer__report-area">
|
||||
<p>Download Advanced Report</p>
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" @click.prevent="onReportClick">
|
||||
<rect class="background" width="40" height="40" rx="4"/>
|
||||
<path class="blue" d="M25.6491 19.2809L21.2192 23.5281C20.891 23.8427 20.3988 24 20.0707 24C19.7425 24 19.2503 23.8427 19.0862 23.5281L14.4922 19.2809C13.8359 18.6517 13.8359 17.8652 14.4922 17.236C14.8204 16.9213 15.1485 16.9213 15.6407 16.9213C15.9689 16.9213 16.4611 17.0787 16.6252 17.3933L18.594 19.1236L18.594 11.4157C18.594 10.6292 19.2503 10 20.0707 10C20.891 10 21.5473 10.6292 21.5473 11.4157L21.5473 19.1236L23.5162 17.236C23.6803 16.9213 24.1725 16.9213 24.5006 16.9213C24.8288 16.9213 25.321 17.0787 25.4851 17.3933C26.1414 17.8652 26.1414 18.809 25.6491 19.2809Z"/>
|
||||
<rect class="blue" x="11" y="28" width="18" height="2" rx="1"/>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="22" height="22" fill="white" transform="translate(10 10)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -2,22 +2,22 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="billing > 0" class="billing-overflow">
|
||||
<div class="billing-header">
|
||||
<p>Billing</p>
|
||||
</div>
|
||||
<div class="billing-container">
|
||||
<div class="billing-container__table-holder">
|
||||
<table class="billing-container__table">
|
||||
<SortingHeader />
|
||||
<BillingItem />
|
||||
</table>
|
||||
</div>
|
||||
<PaginationArea />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="billing > 0" class="billing-overflow">
|
||||
<div class="billing-header">
|
||||
<p>Billing</p>
|
||||
</div>
|
||||
<div class="billing-container">
|
||||
<div class="billing-container__table-holder">
|
||||
<table class="billing-container__table">
|
||||
<SortingHeader />
|
||||
<BillingItem />
|
||||
</table>
|
||||
</div>
|
||||
<PaginationArea />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -2,37 +2,37 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<tr class="container">
|
||||
<td class="container__item bold">test</td>
|
||||
<td class="container__item">test</td>
|
||||
<td class="container__item">
|
||||
<div class="row justify-start">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#2683FF"/>
|
||||
<path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item">
|
||||
<div class="row justify-start">
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3333 0H2.66667C1.19418 0 0 1.15147 0 2.57131V9.42869C0 10.8485 1.19418 12 2.66667 12H13.3333C14.8058 12 16 10.8485 16 9.42869V2.57131C16 1.15147 14.8058 0 13.3333 0ZM11.1383 8.1165C11.2642 8.23703 11.335 8.40095 11.335 8.57209C11.335 8.74244 11.265 8.90636 11.14 9.02769C11.0142 9.14822 10.8442 9.21571 10.6675 9.21571C10.49 9.21571 10.32 9.14742 10.195 9.02608L8.00004 6.90876L5.80506 9.02608C5.54422 9.27517 5.12339 9.27437 4.86338 9.02448C4.60423 8.77376 4.60337 8.36799 4.86172 8.11647L7.05756 5.99997L4.86172 3.88348C4.60339 3.63196 4.60422 3.22619 4.86338 2.97547C5.12339 2.72558 5.54422 2.72476 5.80506 2.97387L8.00004 5.09119L10.195 2.97469V2.97389C10.4559 2.7248 10.8767 2.7256 11.1367 2.97549C11.3959 3.22621 11.3967 3.63198 11.1384 3.8835L8.94253 5.99999L11.1383 8.1165Z" fill="#EB001B"/>
|
||||
</svg>
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item bold">
|
||||
<div class="row">
|
||||
<p>test</p>
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="background" width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path class="blue" d="M25.6491 19.2809L21.2192 23.5281C20.891 23.8427 20.3988 24 20.0707 24C19.7425 24 19.2503 23.8427 19.0862 23.5281L14.4922 19.2809C13.8359 18.6517 13.8359 17.8652 14.4922 17.236C14.8204 16.9213 15.1485 16.9213 15.6407 16.9213C15.9689 16.9213 16.4611 17.0787 16.6252 17.3933L18.594 19.1236L18.594 11.4157C18.594 10.6292 19.2503 10 20.0707 10C20.891 10 21.5473 10.6292 21.5473 11.4157L21.5473 19.1236L23.5162 17.236C23.6803 16.9213 24.1725 16.9213 24.5006 16.9213C24.8288 16.9213 25.321 17.0787 25.4851 17.3933C26.1414 17.8652 26.1414 18.809 25.6491 19.2809Z" fill="#2683FF"/>
|
||||
<rect class="blue" x="11" y="28" width="18" height="2" rx="1" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="container">
|
||||
<td class="container__item bold">test</td>
|
||||
<td class="container__item">test</td>
|
||||
<td class="container__item">
|
||||
<div class="row justify-start">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#2683FF"/>
|
||||
<path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item">
|
||||
<div class="row justify-start">
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3333 0H2.66667C1.19418 0 0 1.15147 0 2.57131V9.42869C0 10.8485 1.19418 12 2.66667 12H13.3333C14.8058 12 16 10.8485 16 9.42869V2.57131C16 1.15147 14.8058 0 13.3333 0ZM11.1383 8.1165C11.2642 8.23703 11.335 8.40095 11.335 8.57209C11.335 8.74244 11.265 8.90636 11.14 9.02769C11.0142 9.14822 10.8442 9.21571 10.6675 9.21571C10.49 9.21571 10.32 9.14742 10.195 9.02608L8.00004 6.90876L5.80506 9.02608C5.54422 9.27517 5.12339 9.27437 4.86338 9.02448C4.60423 8.77376 4.60337 8.36799 4.86172 8.11647L7.05756 5.99997L4.86172 3.88348C4.60339 3.63196 4.60422 3.22619 4.86338 2.97547C5.12339 2.72558 5.54422 2.72476 5.80506 2.97387L8.00004 5.09119L10.195 2.97469V2.97389C10.4559 2.7248 10.8767 2.7256 11.1367 2.97549C11.3959 3.22621 11.3967 3.63198 11.1384 3.8835L8.94253 5.99999L11.1383 8.1165Z" fill="#EB001B"/>
|
||||
</svg>
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item bold">
|
||||
<div class="row">
|
||||
<p>test</p>
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="background" width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path class="blue" d="M25.6491 19.2809L21.2192 23.5281C20.891 23.8427 20.3988 24 20.0707 24C19.7425 24 19.2503 23.8427 19.0862 23.5281L14.4922 19.2809C13.8359 18.6517 13.8359 17.8652 14.4922 17.236C14.8204 16.9213 15.1485 16.9213 15.6407 16.9213C15.9689 16.9213 16.4611 17.0787 16.6252 17.3933L18.594 19.1236L18.594 11.4157C18.594 10.6292 19.2503 10 20.0707 10C20.891 10 21.5473 10.6292 21.5473 11.4157L21.5473 19.1236L23.5162 17.236C23.6803 16.9213 24.1725 16.9213 24.5006 16.9213C24.8288 16.9213 25.321 17.0787 25.4851 17.3933C26.1414 17.8652 26.1414 18.809 25.6491 19.2809Z" fill="#2683FF"/>
|
||||
<rect class="blue" x="11" y="28" width="18" height="2" rx="1" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -2,16 +2,16 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-container__pages">
|
||||
<div v-html="arrowLeft" class="pagination-container__button"></div>
|
||||
<div class="pagination-container__items">
|
||||
<span class="selected">1</span>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div v-html="arrowRight" class="pagination-container__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-container__pages">
|
||||
<div v-html="arrowLeft" class="pagination-container__button"></div>
|
||||
<div class="pagination-container__items">
|
||||
<span class="selected">1</span>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div v-html="arrowRight" class="pagination-container__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -2,45 +2,45 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<tr class="sort-header-container">
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Invoice</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span class="selected" v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Billing Period</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Payment method</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Status</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Amount</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="sort-header-container">
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Invoice</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span class="selected" v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Billing Period</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Payment method</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Status</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Amount</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -9,16 +9,15 @@
|
||||
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>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -19,12 +19,12 @@
|
||||
<div v-for="(input, index) in inputs"
|
||||
class="add-user__form-container__inputs-group__item"
|
||||
:key="index" >
|
||||
<input
|
||||
placeholder="test@mail.test"
|
||||
v-model="input.value"
|
||||
:class="[input.error ? 'error' : 'no-error']"
|
||||
@keyup="resetFormErrors(index)" />
|
||||
<span v-html="imageDeleteUser" @click="deleteInput(index)"></span>
|
||||
<input
|
||||
placeholder="test@mail.test"
|
||||
v-model="input.value"
|
||||
:class="[input.error ? 'error' : 'no-error']"
|
||||
@keyup="resetFormErrors(index)" />
|
||||
<span v-html="imageDeleteUser" @click="deleteInput(index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-user-row">
|
||||
|
||||
@ -11,8 +11,7 @@
|
||||
<div v-for="member in projectMembers" v-on:click="onMemberClick(member)" v-bind:key="member.id">
|
||||
<TeamMemberItem
|
||||
:projectMember = "member"
|
||||
v-bind:class = "[member.isSelected ? 'selected' : '']"
|
||||
/>
|
||||
v-bind:class = "[member.isSelected ? 'selected' : '']" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- only when selecting team members -->
|
||||
|
||||
@ -2,37 +2,37 @@
|
||||
<!--See LICENSE for copying information.-->
|
||||
|
||||
<div class="forgot-password-container">
|
||||
<div v-bind:class="loadingClassName">
|
||||
<img src="../../../static/images/register/Loading.gif">
|
||||
</div>
|
||||
<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">
|
||||
<div class="forgot-password-container__login-button" @click="onBackToLoginClick">
|
||||
<p>Back to Login</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="forgot-password-area-wrapper">
|
||||
<div class="forgot-password-area">
|
||||
<div class="forgot-password-area__title-container">
|
||||
<h1>Forgot Password</h1>
|
||||
</div>
|
||||
<p class="forgot-password-area__info-text">Enter your email address below and we'll get you back on track.</p>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
placeholder="Enter Your Email"
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
width="100%"
|
||||
height="46px">
|
||||
</HeaderlessInput>
|
||||
<div class="forgot-password-area__submit-container" @click.prevent="onSendConfigurations">
|
||||
<div class="forgot-password-area__submit-container__send-button" >
|
||||
<p>Send Configurations</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-bind:class="loadingClassName">
|
||||
<img src="../../../static/images/register/Loading.gif">
|
||||
</div>
|
||||
<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">
|
||||
<div class="forgot-password-container__login-button" @click="onBackToLoginClick">
|
||||
<p>Back to Login</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="forgot-password-area-wrapper">
|
||||
<div class="forgot-password-area">
|
||||
<div class="forgot-password-area__title-container">
|
||||
<h1>Forgot Password</h1>
|
||||
</div>
|
||||
<p class="forgot-password-area__info-text">Enter your email address below and we'll get you back on track.</p>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
placeholder="Enter Your Email"
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
width="100%"
|
||||
height="46px">
|
||||
</HeaderlessInput>
|
||||
<div class="forgot-password-area__submit-container" @click.prevent="onSendConfigurations">
|
||||
<div class="forgot-password-area__submit-container__send-button" >
|
||||
<p>Send Configurations</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,52 +2,52 @@
|
||||
<!--See LICENSE for copying information.-->
|
||||
|
||||
<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="" >
|
||||
<div class="login-container__wrapper">
|
||||
<div class="login-container__header">
|
||||
<img class="login-container__logo" src="../../../static/images/Logo.svg" alt="logo" @click="onLogoClick">
|
||||
<div class="login-container__register-button" @click.prevent="onSignUpClick">
|
||||
<p>Create Account</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-area-wrapper">
|
||||
<div class="login-area">
|
||||
<div class="login-area__title-container">
|
||||
<h1>Login to Storj</h1>
|
||||
</div>
|
||||
<HeaderlessInput
|
||||
class="login-area__email-input"
|
||||
placeholder="Email"
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
height="46px"
|
||||
width="100%">
|
||||
</HeaderlessInput>
|
||||
<HeaderlessInput
|
||||
class="login-area__password-input"
|
||||
placeholder="Password"
|
||||
:error="passwordError"
|
||||
@setData="setPassword"
|
||||
width="100%"
|
||||
height="46px"
|
||||
isPassword>
|
||||
</HeaderlessInput>
|
||||
<div class="login-area__submit-area">
|
||||
<router-link :to="forgotPasswordRouterPath" class="login-area__navigation-area__nav-link" exact>
|
||||
<h3><strong>Forgot password?</strong></h3>
|
||||
</router-link>
|
||||
<div class="login-area__submit-area__login-button" @click.prevent="onLogin">
|
||||
<p>Log In</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-area__info-area">
|
||||
<p class="login-area__info-area__signature">Storj Labs Inc 2019.</p>
|
||||
<a class="login-area__info-area__terms" href="https://tardigrade.io/terms-of-use/" target="_blank">Terms & Conditions</a>
|
||||
<a class="login-area__info-area__help" href="mailto:support@storj.io" target="_blank">Support</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="loadingClassName"></div>
|
||||
<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">
|
||||
<div class="login-container__register-button" @click.prevent="onSignUpClick">
|
||||
<p>Create Account</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-area-wrapper">
|
||||
<div class="login-area">
|
||||
<div class="login-area__title-container">
|
||||
<h1>Login to Storj</h1>
|
||||
</div>
|
||||
<HeaderlessInput
|
||||
class="login-area__email-input"
|
||||
placeholder="Email"
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
height="46px"
|
||||
width="100%">
|
||||
</HeaderlessInput>
|
||||
<HeaderlessInput
|
||||
class="login-area__password-input"
|
||||
placeholder="Password"
|
||||
:error="passwordError"
|
||||
@setData="setPassword"
|
||||
width="100%"
|
||||
height="46px"
|
||||
isPassword>
|
||||
</HeaderlessInput>
|
||||
<div class="login-area__submit-area">
|
||||
<router-link :to="forgotPasswordRouterPath" class="login-area__navigation-area__nav-link" exact>
|
||||
<h3><strong>Forgot password?</strong></h3>
|
||||
</router-link>
|
||||
<div class="login-area__submit-area__login-button" @click.prevent="onLogin">
|
||||
<p>Log In</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-area__info-area">
|
||||
<p class="login-area__info-area__signature">Storj Labs Inc 2019.</p>
|
||||
<a class="login-area__info-area__terms" href="https://tardigrade.io/terms-of-use/" target="_blank">Terms & Conditions</a>
|
||||
<a class="login-area__info-area__help" href="mailto:support@storj.io" target="_blank">Support</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,91 +2,93 @@
|
||||
<!--See LICENSE for copying information.-->
|
||||
|
||||
<div class="register-container" @keyup.enter="onCreateClick">
|
||||
<div :class="loadingClassName">
|
||||
<img src="../../../static/images/register/Loading.gif">
|
||||
</div>
|
||||
<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">
|
||||
<div class="register-container__register-button" @click.prevent="onLoginClick">
|
||||
<p>Login</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="register-area-wrapper">
|
||||
<div class="register-area">
|
||||
<div class="register-area__title-container">
|
||||
<h1>Sign Up to Storj</h1>
|
||||
</div>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Full Name"
|
||||
placeholder="Enter Full Name"
|
||||
:error="fullNameError"
|
||||
@setData="setFullName"
|
||||
width="100%"
|
||||
height="46px">
|
||||
</HeaderlessInput>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Short Name"
|
||||
placeholder="Enter Short Name"
|
||||
@setData="setShortName"
|
||||
width="100%"
|
||||
height="46px">
|
||||
</HeaderlessInput>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Email"
|
||||
placeholder="Enter Email"
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
width="100%"
|
||||
height="46px">
|
||||
</HeaderlessInput>
|
||||
<div class="register-input">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Password"
|
||||
placeholder="Enter Password"
|
||||
:error="passwordError"
|
||||
@setData="setPassword"
|
||||
width="100%"
|
||||
height="46px"
|
||||
isPassword>
|
||||
</HeaderlessInput>
|
||||
<span
|
||||
v-html="infoImage"
|
||||
title="Use 6 or more characters"></span>
|
||||
</div>
|
||||
<div class="register-input">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Confirm Password"
|
||||
placeholder="Confirm Password"
|
||||
:error="repeatedPasswordError"
|
||||
@setData="setRepeatedPassword"
|
||||
width="100%"
|
||||
height="46px"
|
||||
isPassword>
|
||||
</HeaderlessInput>
|
||||
<span v-html="infoImage"
|
||||
title="Use 6 or more characters"></span>
|
||||
</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>
|
||||
</label>
|
||||
<h2>I agree to the <a href="https://tardigrade.io/terms-of-use/" target="_blank">Terms & Conditions</a></h2>
|
||||
</div>
|
||||
<div id="createAccountButton" class="register-area__submit-container__create-button" @click.prevent="onCreateClick">
|
||||
<p>Create Account</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RegistrationSuccessPopup ref="register_success_popup"/>
|
||||
<div :class="loadingClassName">
|
||||
<img src="../../../static/images/register/Loading.gif">
|
||||
</div>
|
||||
<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">
|
||||
<div class="register-container__register-button" @click.prevent="onLoginClick">
|
||||
<p>Login</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="register-area-wrapper">
|
||||
<div class="register-area">
|
||||
<div class="register-area__title-container">
|
||||
<h1>Sign Up to Storj</h1>
|
||||
</div>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Full Name"
|
||||
placeholder="Enter Full Name"
|
||||
:error="fullNameError"
|
||||
@setData="setFullName"
|
||||
width="100%"
|
||||
height="46px">
|
||||
</HeaderlessInput>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Short Name"
|
||||
placeholder="Enter Short Name"
|
||||
@setData="setShortName"
|
||||
width="100%"
|
||||
height="46px">
|
||||
</HeaderlessInput>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Email"
|
||||
placeholder="Enter Email"
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
width="100%"
|
||||
height="46px">
|
||||
</HeaderlessInput>
|
||||
<div class="register-input">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Password"
|
||||
placeholder="Enter Password"
|
||||
:error="passwordError"
|
||||
@setData="setPassword"
|
||||
width="100%"
|
||||
height="46px"
|
||||
isPassword>
|
||||
</HeaderlessInput>
|
||||
<span
|
||||
v-html="infoImage"
|
||||
title="Use 6 or more characters">
|
||||
</span>
|
||||
</div>
|
||||
<div class="register-input">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Confirm Password"
|
||||
placeholder="Confirm Password"
|
||||
:error="repeatedPasswordError"
|
||||
@setData="setRepeatedPassword"
|
||||
width="100%"
|
||||
height="46px"
|
||||
isPassword>
|
||||
</HeaderlessInput>
|
||||
<span v-html="infoImage"
|
||||
title="Use 6 or more characters">
|
||||
</span>
|
||||
</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>
|
||||
</label>
|
||||
<h2>I agree to the <a href="https://tardigrade.io/terms-of-use/" target="_blank">Terms & Conditions</a></h2>
|
||||
</div>
|
||||
<div id="createAccountButton" class="register-area__submit-container__create-button" @click.prevent="onCreateClick">
|
||||
<p>Create Account</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RegistrationSuccessPopup ref="register_success_popup"/>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user