Chatwoot/app/javascript/dashboard/routes/auth/components/AuthInput.vue
Pranav Raj S 779bcf5e0d
feat: Update Signup screen (#6002)
* feat: Update Signup page designs

* feat: Update the signup page with dynamic testimonials

* Remove the images

* chore: Minor UI fixes

* chore: Form aligned to centre

* Update app/javascript/dashboard/routes/auth/components/Signup/Form.vue

* Design improvements

* Update company name key

* Revert "chore: Minor UI fixes"

This reverts commit 1556f4ca835d9aa0d9620fd6a3d52d259f0d7d65.

* Revert "Design improvements

This reverts commit dfb2364cf2f0cc93123698fde92e5f9e00536cc2.

* Remove footer

* Fix spacing

* Update app/views/installation/onboarding/index.html.erb

Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
2022-12-07 15:55:03 -08:00

93 lines
1.8 KiB
Vue

<template>
<label class="auth-input--wrap">
<div class="label-wrap">
<fluent-icon v-if="iconName" :icon="iconName" size="16" />
<span v-if="label">{{ label }}</span>
</div>
<div class="input--wrap">
<input
class="auth-input"
:value="value"
:type="type"
:placeholder="placeholder"
:readonly="readonly"
@input="onChange"
@blur="onBlur"
/>
<p v-if="helpText" class="help-text" />
<span v-if="error" class="message">
{{ error }}
</span>
</div>
</label>
</template>
<script>
export default {
props: {
label: {
type: String,
default: '',
},
value: {
type: [String, Number],
default: '',
},
type: {
type: String,
default: 'text',
},
placeholder: {
type: String,
default: '',
},
iconName: {
type: String,
default: '',
},
helpText: {
type: String,
default: '',
},
error: {
type: String,
default: '',
},
readonly: {
type: Boolean,
default: false,
},
},
methods: {
onChange(e) {
this.$emit('input', e.target.value);
},
onBlur(e) {
this.$emit('blur', e.target.value);
},
},
};
</script>
<style lang="scss" scoped>
.auth-input--wrap {
.label-wrap {
display: flex;
align-items: center;
color: var(--s-900);
margin-bottom: var(--space-smaller);
span {
margin-left: var(--space-smaller);
font-size: var(--font-size-small);
}
}
.auth-input {
font-size: var(--font-size-small) !important;
height: 4rem !important;
padding: var(--space-small) !important;
width: 100% !important;
background: var(--s-50) !important;
}
}
</style>