JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

V3-2076 Do not allow users to type more than the allowed number of ch… (#2600)

Browse Source 
* V3-2076 Do not allow users to type more than the allowed number of characters in the create project name field
This commit is contained in:
Yehor Butko 2019-07-19 16:32:01 +03:00 committed by GitHub
parent a7cc940776
commit af93366fb0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/satellite/src/components/apiKeys/AddApiKeyPopup.vue
View File

@ -35,7 +35,6 @@
@setData="onChangeName"
label="Name"
:error="errorMessage"
additionalLabel="Up To 20 Characters"
placeholder="Enter API Key Name"
class="full-input"
width="100%" />

44
web/satellite/src/components/common/HeaderedInput.vue
View File

@ -17,75 +17,47 @@
v-if="isMultiline"
:id="this.$props.label"
:placeholder="this.$props.placeholder"
:style="style"
:style="style.inputStyle"
:rows="5"
:cols="40"
wrap="hard"
v-model.lazy="value"
@input="onInput"
@change="onInput"
@input="onInput">
v-model="value">
</textarea>
<input
v-if="!isMultiline"
:id="this.$props.label"
:placeholder="this.$props.placeholder"
v-bind:type="[isPassword ? 'password': 'text']"
v-model.lazy="value"
@change="onInput"
@input="onInput"
:style="style"/>
@change="onInput"
v-model="value"
:style="style.inputStyle"/>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import HeaderlessInput from './HeaderlessInput.vue';
// Custom input component with labeled header
@Component
export default class HeaderedInput extends Vue {
export default class HeaderedInput extends HeaderlessInput {
@Prop({default: ''})
private readonly initValue: string;
@Prop({default: ''})
private readonly label: string;
@Prop({default: ''})
private readonly additionalLabel: string;
@Prop({default: 'default'})
private readonly placeholder: string;
@Prop({default: ''})
private readonly error: string;
@Prop({default: false})
private readonly isOptional: boolean;
@Prop({default: false})
private readonly isMultiline: boolean;
@Prop({default: false})
private readonly isPassword: boolean;
@Prop({default: '48px'})
private readonly height: string;
@Prop({default: '100%'})
private readonly width: string;
private value: string = '';
public constructor() {
super();
this.value = this.initValue;
}
public get style(): object {
return {
width: this.width,
height: this.height,
};
}
public onInput(): void {
this.$emit('setData', this.$data.value);
}
public setValue(value: string): void {
this.value = value;
}
}
</script>

65
web/satellite/src/components/common/HeaderlessInput.vue
View File

@ -11,9 +11,10 @@
<input
:class="{'inputError' : error}"
@input="onInput"
:placeholder="placeholder"
@change="onInput"
v-model="value"
:type="[isPassword ? passwordType : textType]"
:placeholder="placeholder"
:type="type"
: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">
@ -40,40 +41,62 @@
// Custom input component for login page
@Component
export default class HeaderlessInput extends Vue {
public textType: string = 'text';
private value: string = '';
private passwordType: string = 'password';
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'})
private readonly placeholder: string;
protected readonly placeholder: string;
@Prop({default: false})
private readonly isPassword: boolean;
protected readonly isPassword: boolean;
@Prop({default: '48px'})
private readonly height: string;
protected readonly height: string;
@Prop({default: '100%'})
private readonly width: string;
protected readonly width: string;
@Prop({default: ''})
protected readonly error: string;
@Prop({default: Number.MAX_SAFE_INTEGER})
protected readonly maxSymbols: number;
@Prop({default: false})
private readonly isWhite: boolean;
@Prop({default: ''})
private readonly label: string;
@Prop({default: ''})
private readonly error: string;
public onInput(): void {
this.$emit('setData', this.value);
}
public changeVision(): void {
this.isPasswordShown = !this.isPasswordShown;
if (this.isPassword) this.passwordType = this.passwordType == 'password' ? 'text' : 'password';
public constructor() {
super();
this.type = this.isPassword ? this.passwordType : this.textType;
}
// Used to set default value from parent component
public setValue(value: string): void {
this.value = value;
}
public get style(): object {
// 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);
}
private changeVision(): void {
this.isPasswordShown = !this.isPasswordShown;
if (this.isPasswordShown) {
this.type = this.type == this.passwordType ? this.textType : this.passwordType;
}
}
protected get style(): object {
return {
inputStyle: {
width: this.width,

1
web/satellite/src/components/project/NewProjectPopup.vue
View File

@ -15,6 +15,7 @@
placeholder="Enter Project Name"
class="full-input"
width="100%"
maxSymbols="20"
:error="nameError"
@setData="setProjectName">
</HeaderedInput>