forked from Kieran/snort
submit signup forms with enter, nsec/npub input handling
This commit is contained in:
parent
fb29d330fc
commit
236b9b780e
@ -12,6 +12,8 @@ import { NotEncrypted } from "@snort/system";
|
|||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { trackEvent } from "@/SnortUtils";
|
import { trackEvent } from "@/SnortUtils";
|
||||||
|
|
||||||
|
const NSEC_NPUB_REGEX = /(nsec1|npub1)[a-zA-Z0-9]{20,65}/gi;
|
||||||
|
|
||||||
export function SignIn() {
|
export function SignIn() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
@ -30,7 +32,12 @@ export function SignIn() {
|
|||||||
navigate("/");
|
navigate("/");
|
||||||
}
|
}
|
||||||
|
|
||||||
async function doLogin() {
|
async function onSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
doLogin(key);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function doLogin(key: string) {
|
||||||
setError("");
|
setError("");
|
||||||
try {
|
try {
|
||||||
await loginHandler.doLogin(key, key => Promise.resolve(new NotEncrypted(key)));
|
await loginHandler.doLogin(key, key => Promise.resolve(new NotEncrypted(key)));
|
||||||
@ -52,6 +59,15 @@ export function SignIn() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const val = e.target.value;
|
||||||
|
if (val.match(NSEC_NPUB_REGEX)) {
|
||||||
|
doLogin(val);
|
||||||
|
} else {
|
||||||
|
setKey(val);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const nip7Login = hasNip7 && !useKey;
|
const nip7Login = hasNip7 && !useKey;
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col g24">
|
<div className="flex flex-col g24">
|
||||||
@ -80,7 +96,7 @@ export function SignIn() {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{(!hasNip7 || useKey) && (
|
{(!hasNip7 || useKey) && (
|
||||||
<>
|
<form onSubmit={onSubmit} className="flex flex-col gap-4">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder={formatMessage({
|
placeholder={formatMessage({
|
||||||
@ -88,18 +104,22 @@ export function SignIn() {
|
|||||||
id: "X7xU8J",
|
id: "X7xU8J",
|
||||||
})}
|
})}
|
||||||
value={key}
|
value={key}
|
||||||
onChange={e => setKey(e.target.value)}
|
onChange={onChange} // TODO should log in directly if nsec or npub is pasted
|
||||||
className="new-username"
|
className="new-username"
|
||||||
/>
|
/>
|
||||||
{error && <b className="error">{error}</b>}
|
{error && <b className="error">{error}</b>}
|
||||||
<AsyncButton onClick={doLogin} className="primary">
|
<div className="flex justify-center">
|
||||||
|
<AsyncButton onClick={onSubmit} className="primary">
|
||||||
<FormattedMessage defaultMessage="Login" id="AyGauy" />
|
<FormattedMessage defaultMessage="Login" id="AyGauy" />
|
||||||
</AsyncButton>
|
</AsyncButton>
|
||||||
</>
|
</div>
|
||||||
|
</form>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col g16 items-center">
|
<div className="flex flex-col g16 items-center">
|
||||||
|
<Link to={"/login/sign-up"}>
|
||||||
<FormattedMessage defaultMessage="Don't have an account?" id="25WwxF" />
|
<FormattedMessage defaultMessage="Don't have an account?" id="25WwxF" />
|
||||||
|
</Link>
|
||||||
<AsyncButton className="secondary" onClick={() => navigate("/login/sign-up")}>
|
<AsyncButton className="secondary" onClick={() => navigate("/login/sign-up")}>
|
||||||
<FormattedMessage defaultMessage="Sign Up" id="39AHJm" />
|
<FormattedMessage defaultMessage="Sign Up" id="39AHJm" />
|
||||||
</AsyncButton>
|
</AsyncButton>
|
||||||
@ -113,6 +133,23 @@ export function SignUp() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
|
|
||||||
|
const onSubmit = () => {
|
||||||
|
navigate("/login/sign-up/profile", {
|
||||||
|
state: {
|
||||||
|
name: name,
|
||||||
|
} as NewUserState,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const val = e.target.value;
|
||||||
|
if (val.match(NSEC_NPUB_REGEX)) {
|
||||||
|
e.preventDefault();
|
||||||
|
} else {
|
||||||
|
setName(val);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col g24">
|
<div className="flex flex-col g24">
|
||||||
<img src={CONFIG.appleTouchIconUrl} width={48} height={48} className="br mr-auto ml-auto" />
|
<img src={CONFIG.appleTouchIconUrl} width={48} height={48} className="br mr-auto ml-auto" />
|
||||||
@ -122,7 +159,7 @@ export function SignUp() {
|
|||||||
</h1>
|
</h1>
|
||||||
<FormattedMessage defaultMessage="What should we call you?" id="SmuYUd" />
|
<FormattedMessage defaultMessage="What should we call you?" id="SmuYUd" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col g16">
|
<form onSubmit={onSubmit} className="flex flex-col g16">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
autoFocus={true}
|
autoFocus={true}
|
||||||
@ -131,24 +168,17 @@ export function SignUp() {
|
|||||||
id: "aHje0o",
|
id: "aHje0o",
|
||||||
})}
|
})}
|
||||||
value={name}
|
value={name}
|
||||||
onChange={e => setName(e.target.value)}
|
onChange={onChange}
|
||||||
className="new-username"
|
className="new-username"
|
||||||
/>
|
/>
|
||||||
<AsyncButton
|
<AsyncButton className="primary" disabled={name.length === 0} onClick={onSubmit}>
|
||||||
className="primary"
|
|
||||||
disabled={name.length === 0}
|
|
||||||
onClick={() =>
|
|
||||||
navigate("/login/sign-up/profile", {
|
|
||||||
state: {
|
|
||||||
name: name,
|
|
||||||
} as NewUserState,
|
|
||||||
})
|
|
||||||
}>
|
|
||||||
<FormattedMessage defaultMessage="Next" id="9+Ddtu" />
|
<FormattedMessage defaultMessage="Next" id="9+Ddtu" />
|
||||||
</AsyncButton>
|
</AsyncButton>
|
||||||
</div>
|
</form>
|
||||||
<div className="flex flex-col g16 items-center">
|
<div className="flex flex-col g16 items-center">
|
||||||
|
<Link to={"/login"}>
|
||||||
<FormattedMessage defaultMessage="Already have an account?" id="uCk8r+" />
|
<FormattedMessage defaultMessage="Already have an account?" id="uCk8r+" />
|
||||||
|
</Link>
|
||||||
<AsyncButton className="secondary" onClick={() => navigate("/login")}>
|
<AsyncButton className="secondary" onClick={() => navigate("/login")}>
|
||||||
<FormattedMessage defaultMessage="Sign In" id="Ub+AGc" />
|
<FormattedMessage defaultMessage="Sign In" id="Ub+AGc" />
|
||||||
</AsyncButton>
|
</AsyncButton>
|
||||||
|
Loading…
Reference in New Issue
Block a user