storj/web/satellite/src/components/common/HeaderlessInput.vue
Malcolm Bouzi 527b7eb56b web/satellite: ui changes to registration and billing pages to enable user to add promo codes to their account
- add Credit History table to billing acount page and set up ui for a user adding promo codes
- implement promo codes ui in registration form
- add feature flag to handle if coupon code ui should be rendered

Change-Id: I9fdeef7cffc7901958d3f9be335e1115b2471a2e
2021-03-26 11:57:11 -04:00

343 lines
9.1 KiB
Vue

// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="input-wrap">
<div class="label-container">
<ErrorIcon v-if="error"/>
<p class="label-container__label" v-if="isLabelShown" :style="style.labelStyle">{{label}}</p>
<p class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</p>
</div>
<input
class="headerless-input"
:class="{'inputError' : error, 'password': isPassword}"
@input="onInput"
@change="onInput"
v-model="value"
:placeholder="placeholder"
:type="type"
:style="style.inputStyle"
@focus="showPasswordStrength"
@blur="hidePasswordStrength"
@click="showOptions"
:optionsShown="optionsShown"
@optionsList="optionsList"
/>
<!-- Shown if there are input choice options -->
<InputCaret v-if="optionsList.length > 0" class="headerless-input__caret" />
<ul v-click-outside="hideOptions" class="headerless-input__options-wrapper" v-if="optionsShown">
<li
class="headerless-input__option"
@click="chooseOption(option)"
v-for="(option, index) in optionsList"
:key="index"
>
{{option}}
</li>
</ul>
<!-- end of option render logic-->
<!--2 conditions of eye image (crossed or not) -->
<PasswordHiddenIcon
class="input-wrap__image"
v-if="isPasswordHiddenState"
@click="changeVision"
/>
<PasswordShownIcon
class="input-wrap__image"
v-if="isPasswordShownState"
@click="changeVision"
/>
<!-- end of image-->
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import InputCaret from '@/../static/images/common/caret.svg';
import PasswordHiddenIcon from '@/../static/images/common/passwordHidden.svg';
import PasswordShownIcon from '@/../static/images/common/passwordShown.svg';
import ErrorIcon from '@/../static/images/register/ErrorInfo.svg';
// Custom input component for login page
@Component({
components: {
InputCaret,
ErrorIcon,
PasswordHiddenIcon,
PasswordShownIcon,
},
})
export default class HeaderlessInput extends Vue {
private readonly textType: string = 'text';
private readonly passwordType: string = 'password';
private type: string = this.textType;
private isPasswordShown: boolean = false;
protected value: string = '';
@Prop({default: ''})
protected readonly label: string;
@Prop({default: 'default'})
protected readonly placeholder: string;
@Prop({default: false})
protected readonly isPassword: boolean;
@Prop({default: '48px'})
protected readonly height: string;
@Prop({default: '100%'})
protected readonly width: string;
@Prop({default: ''})
protected readonly error: string;
@Prop({default: Number.MAX_SAFE_INTEGER})
protected readonly maxSymbols: number;
@Prop({default: () => []})
protected readonly optionsList: string[];
@Prop({default: false})
protected optionsShown: boolean;
@Prop({default: false})
protected inputClicked: boolean;
@Prop({default: false})
private readonly isWhite: boolean;
@Prop({default: false})
private readonly withIcon: boolean;
public constructor() {
super();
this.type = this.isPassword ? this.passwordType : this.textType;
}
/**
* Used to set default value from parent component.
* @param value
*/
public setValue(value: string): void {
this.value = value;
}
public showPasswordStrength(): void {
this.$emit('showPasswordStrength');
}
public hidePasswordStrength(): void {
this.$emit('hidePasswordStrength');
}
/**
* triggers on input.
*/
public onInput({ target }): void {
if (target.value.length > this.maxSymbols) {
this.value = target.value.slice(0, this.maxSymbols);
} else {
this.value = target.value;
}
this.$emit('setData', this.value);
}
/**
* Triggers input type between text and password to show/hide symbols.
*/
public changeVision(): void {
this.isPasswordShown = !this.isPasswordShown;
this.type = this.isPasswordShown ? this.textType : this.passwordType;
}
/**
* Chose a dropdown option as the input value.
*/
public chooseOption(option: string): void {
this.value = option;
this.$emit('setData', this.value);
this.optionsShown = false;
}
/**
* Show dropdown options when the input is clicked, if they exist.
*/
public showOptions(): void {
if (this.optionsList.length > 0) {
this.optionsShown = true;
this.inputClicked = true;
}
}
/**
* Hide the dropdown options from view when there is a click outside of the dropdown.
*/
public hideOptions(): void {
if (this.optionsList.length > 0 && !this.inputClicked && this.optionsShown) {
this.optionsShown = false;
this.inputClicked = false;
}
this.inputClicked = false;
}
public get isLabelShown(): boolean {
return !!(!this.error && this.label);
}
public get isPasswordHiddenState(): boolean {
return this.isPassword && !this.isPasswordShown;
}
public get isPasswordShownState(): boolean {
return this.isPassword && this.isPasswordShown;
}
/**
* Returns style objects depends on props.
*/
protected get style(): object {
return {
inputStyle: {
width: this.width,
height: this.height,
padding: this.withIcon ? '0 30px 0 50px' : '0 30px 0 0',
},
labelStyle: {
color: this.isWhite ? 'white' : '#354049',
},
errorStyle: {
color: this.isWhite ? 'white' : '#FF5560',
},
};
}
}
</script>
<style scoped lang="scss">
.input-wrap {
position: relative;
width: 100%;
font-family: 'font_regular', sans-serif;
&__image {
position: absolute;
right: 25px;
bottom: 5px;
transform: translateY(-50%);
z-index: 20;
cursor: pointer;
&:hover .input-wrap__image__path {
fill: #2683ff !important;
}
}
.headerless-input {
font-size: 16px;
line-height: 21px;
resize: none;
height: 46px;
padding: 0 30px 0 0;
text-indent: 20px;
border: 1px solid rgba(56, 75, 101, 0.4);
border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&__caret {
position: absolute;
right: 28px;
bottom: 18px;
}
&__options-wrapper {
border: 1px solid rgba(56, 75, 101, 0.4);
position: absolute;
width: calc(100% - 4px);
top: 86px;
padding: 0;
background: #fff;
z-index: 21;
border-radius: 6px;
list-style: none;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-top: none;
height: 176px;
margin-top: 0;
}
&__option {
cursor: pointer;
padding: 20px 22px;
&:hover {
background: #2582ff;
color: #fff;
}
}
}
.headerless-input::placeholder {
color: #384b65;
opacity: 0.4;
}
&:focus-within {
.headerless-input {
position: relative;
z-index: 22;
&__options-wrapper {
border-top: 3px solid #145ecc;
}
&__caret {
z-index: 23;
}
}
}
}
.label-container {
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding-bottom: 8px;
flex-direction: row;
&__label {
font-size: 16px;
line-height: 21px;
color: #354049;
margin-bottom: 0;
}
&__add-label {
margin-left: 5px;
font-size: 16px;
line-height: 21px;
color: rgba(56, 75, 101, 0.4);
}
&__error {
font-size: 16px;
margin: 18px 0 0 10px;
}
}
.inputError::placeholder {
color: #eb5757;
opacity: 0.4;
}
.error {
color: #ff5560;
margin-left: 10px;
}
.password {
padding-right: 75px;
}
</style>