61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { useState } from "react";
|
|
import { useIntl, FormattedMessage } from "react-intl";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import Logo from "Element/Logo";
|
|
import useEventPublisher from "Feed/EventPublisher";
|
|
|
|
import messages from "./messages";
|
|
|
|
export default function NewUserName() {
|
|
const [username, setUsername] = useState("");
|
|
const { formatMessage } = useIntl();
|
|
const publisher = useEventPublisher();
|
|
const navigate = useNavigate();
|
|
|
|
const onNext = async () => {
|
|
if (username.length > 0) {
|
|
const ev = await publisher.metadata({ name: username });
|
|
console.debug(ev);
|
|
publisher.broadcast(ev);
|
|
}
|
|
navigate("/new/verify");
|
|
};
|
|
|
|
return (
|
|
<div className="main-content new-user" dir="auto">
|
|
<Logo />
|
|
<div className="progress-bar">
|
|
<div className="progress progress-second"></div>
|
|
</div>
|
|
<h1>
|
|
<FormattedMessage {...messages.PickUsername} />
|
|
</h1>
|
|
<p>
|
|
<FormattedMessage {...messages.UsernameHelp} />
|
|
</p>
|
|
<h2>
|
|
<FormattedMessage {...messages.Username} />
|
|
</h2>
|
|
<input
|
|
className="username"
|
|
placeholder={formatMessage(messages.UsernamePlaceholder)}
|
|
type="text"
|
|
value={username}
|
|
onChange={ev => setUsername(ev.target.value)}
|
|
/>
|
|
<div className="help-text">
|
|
<FormattedMessage defaultMessage="You can change your username at any point." />
|
|
</div>
|
|
<div className="next-actions">
|
|
<button type="button" className="transparent" onClick={() => navigate("/new/verify")}>
|
|
<FormattedMessage {...messages.Skip} />
|
|
</button>
|
|
<button type="button" onClick={onNext}>
|
|
<FormattedMessage {...messages.Next} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|