Remove homeserver input

This commit is contained in:
Robert Long 2021-12-15 10:54:01 -08:00
parent 81144a7421
commit 382ca2baa4
4 changed files with 14 additions and 13 deletions

View file

@ -22,14 +22,16 @@ export function Field({ children, className, ...rest }) {
} }
export const InputField = forwardRef( export const InputField = forwardRef(
({ id, label, className, type, checked, ...rest }, ref) => { ({ id, label, className, type, checked, prefix, suffix, ...rest }, ref) => {
return ( return (
<Field <Field
className={classNames( className={classNames(
type === "checkbox" ? styles.checkboxField : styles.inputField, type === "checkbox" ? styles.checkboxField : styles.inputField,
{ [styles.prefix]: !!prefix },
className className
)} )}
> >
{prefix && <span>{prefix}</span>}
<input id={id} {...rest} ref={ref} type={type} checked={checked} /> <input id={id} {...rest} ref={ref} type={type} checked={checked} />
<label htmlFor={id}> <label htmlFor={id}>
{type === "checkbox" && ( {type === "checkbox" && (
@ -39,6 +41,7 @@ export const InputField = forwardRef(
)} )}
{label} {label}
</label> </label>
{suffix && <span>{suffix}</span>}
</Field> </Field>
); );
} }

View file

@ -40,6 +40,10 @@
min-width: 0; min-width: 0;
} }
.inputField span {
padding: 11px 9px;
}
.inputField input::placeholder { .inputField input::placeholder {
transition: color 0.25s ease-in 0s; transition: color 0.25s ease-in 0s;
color: transparent; color: transparent;
@ -77,7 +81,8 @@
} }
.inputField input:focus + label, .inputField input:focus + label,
.inputField input:not(:placeholder-shown) + label { .inputField input:not(:placeholder-shown) + label,
.inputField.prefix input + label {
background-color: var(--bgColor2); background-color: var(--bgColor2);
transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s, transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
top 0.25s ease-out 0s, background-color 0.25s ease-out 0s; top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;

View file

@ -67,17 +67,6 @@ export function LoginPage() {
<h2>Log In</h2> <h2>Log In</h2>
<h4>To continue to Element</h4> <h4>To continue to Element</h4>
<form onSubmit={onSubmitLoginForm}> <form onSubmit={onSubmitLoginForm}>
<FieldRow>
<InputField
type="text"
value={homeserver}
onChange={(e) => setHomeServer(e.target.value)}
placeholder="Homeserver"
label="Homeserver"
autoCorrect="off"
autoCapitalize="none"
/>
</FieldRow>
<FieldRow> <FieldRow>
<InputField <InputField
type="text" type="text"
@ -86,6 +75,8 @@ export function LoginPage() {
label="Username" label="Username"
autoCorrect="off" autoCorrect="off"
autoCapitalize="none" autoCapitalize="none"
prefix="@"
suffix={`:${window.location.host}`}
/> />
</FieldRow> </FieldRow>
<FieldRow> <FieldRow>

View file

@ -71,6 +71,8 @@ export function RegisterPage() {
label="Username" label="Username"
autoCorrect="off" autoCorrect="off"
autoCapitalize="none" autoCapitalize="none"
prefix="@"
suffix={`:${window.location.host}`}
/> />
</FieldRow> </FieldRow>
<FieldRow> <FieldRow>