diff --git a/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss b/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss index 86a3fea3..ca4d99ca 100644 --- a/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss +++ b/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss @@ -5,11 +5,19 @@ flex-wrap: nowrap; } -.auth-panel-email-login-form__input { - width: 15em; +.auth-panel-email-login-form__input, +.auth-panel-email-login-form__token-input { + width: 12rem; margin: 0.1em; } +.auth-panel-email-login-form__token-input { + resize: vertical; + font: inherit; + font-weight: normal; + font-size: 0.8em; +} + .auth-panel-email-login-form__submit { background: none; border: none; diff --git a/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.tsx b/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.tsx index 6c33a858..ed4cbad7 100644 --- a/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.tsx +++ b/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.tsx @@ -7,6 +7,7 @@ import { extractErrorMessageFromResponse } from '@app/utils/errorUtils'; import { connect } from 'preact-redux'; import { getHandleClickProps } from '@app/common/accessibility'; import { sleep } from '@app/utils/sleep'; +import TextareaAutosize from '@app/components/input/textarea-autosize'; const mapStateToProps = () => ({ sendEmailVerification: sendEmailVerificationRequest, @@ -33,7 +34,7 @@ export class EmailLoginForm extends Component { static emailRegex = /[^@]+@[^.]+\..+/; inputRef?: HTMLInputElement; - tokenRef?: HTMLInputElement; + tokenRef?: TextareaAutosize; constructor(props: Props) { super(props); @@ -62,7 +63,7 @@ export class EmailLoginForm extends Component { this.inputRef.focus(); return; } - this.tokenRef && this.tokenRef.select(); + this.tokenRef && this.tokenRef.textareaRef && this.tokenRef.textareaRef.select(); } async onVerificationSubmit(e: Event) { @@ -203,13 +204,15 @@ export class EmailLoginForm extends Component { {'< Back'} - (this.tokenRef = ref)} - type="text" placeholder="Token" value={this.state.tokenValue} onInput={this.onTokenChange} + spellcheck={false} + autocomplete="off" />