SUPPORT RTL/LTR ON LOGIN PAGE

This commit is contained in:
Ahmed Rowaihi 2023-02-13 19:57:51 +03:00
parent dfcc963fa5
commit df08c1f64b
1 changed files with 11 additions and 10 deletions

View File

@ -154,14 +154,15 @@ export default function LoginPage() {
<div className="logo" onClick={() => navigate("/")}> <div className="logo" onClick={() => navigate("/")}>
Snort Snort
</div> </div>
<h1> <h1 dir="auto">
<FormattedMessage defaultMessage="Login" description="Login header" /> <FormattedMessage defaultMessage="Login" description="Login header" />
</h1> </h1>
<p> <p dir="auto">
<FormattedMessage defaultMessage="Your key" description="Label for key input" /> <FormattedMessage defaultMessage="Your key" description="Label for key input" />
</p> </p>
<div className="flex"> <div dir="auto" className="flex">
<input <input
dir="auto"
type="text" type="text"
placeholder="nsec / npub / nip-05 / hex private key..." placeholder="nsec / npub / nip-05 / hex private key..."
className="f-grow" className="f-grow"
@ -169,7 +170,7 @@ export default function LoginPage() {
/> />
</div> </div>
{error.length > 0 ? <b className="error">{error}</b> : null} {error.length > 0 ? <b className="error">{error}</b> : null}
<p className="login-note"> <p dir="auto" className="login-note">
<FormattedMessage <FormattedMessage
defaultMessage="Only the secret key can be used to publish (sign events), everything else logs you in read-only mode." defaultMessage="Only the secret key can be used to publish (sign events), everything else logs you in read-only mode."
description="Explanation for public key only login is read-only" description="Explanation for public key only login is read-only"
@ -181,28 +182,28 @@ export default function LoginPage() {
description="Link to why your private key is your password" description="Link to why your private key is your password"
/> />
</a>*/} </a>*/}
<div className="login-actions"> <div dir="auto" className="login-actions">
<button type="button" onClick={doLogin}> <button type="button" onClick={doLogin}>
<FormattedMessage defaultMessage="Login" description="Login button" /> <FormattedMessage defaultMessage="Login" description="Login button" />
</button> </button>
{altLogins()} {altLogins()}
</div> </div>
<div className="flex login-or"> <div dir="auto" className="flex login-or">
<div className="login-note"> <div className="login-note">
<FormattedMessage defaultMessage="OR" description="Seperator text for Login / Generate Key" /> <FormattedMessage defaultMessage="OR" description="Seperator text for Login / Generate Key" />
</div> </div>
<div className="divider w-max"></div> <div className="divider w-max"></div>
</div> </div>
<h1> <h1 dir="auto">
<FormattedMessage defaultMessage="Create an Account" description="Heading for generate key flow" /> <FormattedMessage defaultMessage="Create an Account" description="Heading for generate key flow" />
</h1> </h1>
<p className="login-note"> <p dir="auto" className="login-note">
<FormattedMessage <FormattedMessage
defaultMessage="Generate a public / private key pair. Do not share your private key with anyone, this acts as your password. Once lost, it cannot be “reset” or recovered. Keep safe!" defaultMessage="Generate a public / private key pair. Do not share your private key with anyone, this acts as your password. Once lost, it cannot be “reset” or recovered. Keep safe!"
description="Note about key security before generating a new key" description="Note about key security before generating a new key"
/> />
</p> </p>
<div className="tabs"> <div dir="auto" className="tabs">
<button type="button" onClick={() => makeRandomKey()}> <button type="button" onClick={() => makeRandomKey()}>
<FormattedMessage defaultMessage="Generate Key" description="Button: Generate a new key" /> <FormattedMessage defaultMessage="Generate Key" description="Button: Generate a new key" />
</button> </button>
@ -210,7 +211,7 @@ export default function LoginPage() {
</div> </div>
</div> </div>
<div> <div>
<div className="artwork" style={{ ["--img-src"]: `url('${art?.link}')` } as CSSProperties}> <div dir="auto" className="artwork" style={{ ["--img-src"]: `url('${art?.link}')` } as CSSProperties}>
<div> <div>
<FormattedMessage <FormattedMessage
defaultMessage="Art by {name}" defaultMessage="Art by {name}"