46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import styled from 'styled-components';
|
|
|
|
const Input = styled.input`
|
|
width: auto;
|
|
flex: 1;
|
|
`;
|
|
|
|
export const LoginForm: React.VFC = () => {
|
|
const [host, setHost] = useState('');
|
|
const {t} = useTranslation();
|
|
|
|
const login = () => {
|
|
location.href = `//${location.host}/login?host=${encodeURIComponent(host)}`;
|
|
};
|
|
|
|
return (
|
|
<nav>
|
|
<div>
|
|
<strong>{t('instanceUrl')}</strong>
|
|
</div>
|
|
<div className="hgroup login-form">
|
|
<Input
|
|
className="input-field"
|
|
type="text"
|
|
value={host}
|
|
placeholder={t('instanceUrlPlaceholder')}
|
|
onChange={(e) => setHost(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') login();
|
|
}}
|
|
required
|
|
/>
|
|
<button
|
|
className={!host ? 'btn' : 'btn primary'}
|
|
style={{ width: 128 }}
|
|
disabled={!host}
|
|
onClick={login}
|
|
>
|
|
{t('login')}
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|