rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: ttag setup and authentication flow localization (#2987)

Browse Source 
* chore: add ttag dependency

* chore: wrap strings for authentication flows

* chore: fix lint errors
This commit is contained in:
Antonella Sgarlatta
2026-03-05 23:46:58 -03:00
committed by GitHub
parent 92b7be4221
commit 7f3d2d0c72
12 changed files with 111 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/web/src/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
View File

@@ -9,6 +9,7 @@ import { BlueDotIcon, CircleIcon, DiamondIcon, CreateAccountIllustration } from
import { useCaptcha } from '@/Hooks/useCaptcha'
import { AccountMenuPane } from '../../AccountMenu/AccountMenuPane'
import { isErrorResponse } from '@standardnotes/snjs'
import { c } from 'ttag'
type Props = {
application: WebApplication
@@ -150,19 +151,19 @@ const CreateAccount: FunctionComponent<Props> = ({ application }) => {
className={`min-w-auto md:min-w-90 ${isEmailInvalid ? 'mb-2' : 'mb-4'}`}
id="purchase-sign-in-email"
type="email"
label="Email"
label={c('Label').t`Email`}
value={email}
onChange={handleEmailChange}
ref={emailInputRef}
disabled={isCreatingAccount}
isInvalid={isEmailInvalid}
/>
{isEmailInvalid ? <div className="mb-4 text-danger">Please provide a valid email.</div> : null}
{isEmailInvalid ? <div className="mb-4 text-danger">{c('Error').t`Please provide a valid email.`}</div> : null}
<FloatingLabelInput
className="min-w-auto mb-4 md:min-w-90"
id="purchase-create-account-password"
type="password"
label="Password"
label={c('Label').t`Password`}
value={password}
onChange={handlePasswordChange}
ref={passwordInputRef}
@@ -172,7 +173,7 @@ const CreateAccount: FunctionComponent<Props> = ({ application }) => {
className={`min-w-auto md:min-w-90 ${isPasswordNotMatching ? 'mb-2' : 'mb-4'}`}
id="create-account-confirm"
type="password"
label="Repeat password"
label={c('Label').t`Repeat password`}
value={confirmPassword}
onChange={handleConfirmPasswordChange}
ref={confirmPasswordInputRef}
@@ -180,7 +181,7 @@ const CreateAccount: FunctionComponent<Props> = ({ application }) => {
isInvalid={isPasswordNotMatching}
/>
{isPasswordNotMatching ? (
<div className="mb-4 text-danger">Passwords don't match. Please try again.</div>
<div className="mb-4 text-danger">{c('Error').t`Passwords don't match. Please try again.`}</div>
) : null}
</div>
</form>
@@ -197,8 +198,10 @@ const CreateAccount: FunctionComponent<Props> = ({ application }) => {
<DiamondIcon className="absolute -right-2 top-0 -z-[1] h-18 w-18 translate-x-1/2" />
<div className="mr-0 lg:mr-12">
<h1 className="mb-2 mt-0 text-2xl font-bold">Create your free account</h1>
<div className="mb-4 text-sm font-medium">to continue to Standard Notes.</div>
// translator: Full sentence: "Create your free account"
<h1 className="mb-2 mt-0 text-2xl font-bold">{c('Title').t`Create your free account`}</h1>
// translator: Full sentence: "Create your free account to continue to Standard Notes."
<div className="mb-4 text-sm font-medium">{c('Info').t`to continue to Standard Notes.`}</div>
{captchaURL ? captchaIframe : CreateAccountForm}
<div className="flex flex-col-reverse items-start justify-between md:flex-row md:items-center">
<div className="flex flex-col">
@@ -207,7 +210,8 @@ const CreateAccount: FunctionComponent<Props> = ({ application }) => {
disabled={isCreatingAccount}
className="mb-2 flex cursor-pointer items-start border-0 bg-default p-0 font-medium text-info hover:underline"
>
Sign in instead
// translator: "Instead" here refers to "instead of creating an account"
{c('Action').t`Sign in instead`}
</button>
{!application.isNativeIOS() && (
<button
@@ -215,14 +219,14 @@ const CreateAccount: FunctionComponent<Props> = ({ application }) => {
disabled={isCreatingAccount}
className="flex cursor-pointer items-start border-0 bg-default p-0 font-medium text-info hover:underline"
>
Subscribe without account
{c('Action').t`Subscribe without account`}
</button>
)}
</div>
<Button
className="mb-4 py-2.5 md:mb-0"
primary
label={isCreatingAccount ? 'Creating account...' : 'Create account'}
label={isCreatingAccount ? c('Action').t`Creating account...` : c('Action').t`Create account`}
onClick={handleCreateAccount}
disabled={isCreatingAccount}
/>