michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Added translation to templates

Browse source 
Added to Auth.jsx and Client.jsx
This commit is contained in:
Dylan 2022-08-06 17:09:14 +09:30
parent ef31851554
commit 62c92d5497
3 changed files with 157 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
public/locales/en/translation.json
View file

@ -759,6 +759,78 @@
"SSOButtons": { "SSOButtons": {
"login_with": "Login with {{idp_name}}" "login_with": "Login with {{idp_name}}"
} }
},
"Templates": {
"Auth": {
"loading_homeserver_list": "Loading homeserver list...",
"looking_for_homeserver": "Looking for homeserver...",
"connecting_to_homeserver": "Connecting to {{homeserver}}...",
"unable_to_connect": "Unable to connect. Please check your input",
"username_taken": "Username is already taken",
"registration_in_progress": "Registration in progress...",
"link_about": "About",
"link_twitter": "Twitter",
"link_matrix": "Powered by Matrix",
"dont_have_an_account": "Dont have an account?",
"already_have_an_account": "Already have an account?",
"register_link": "Register",
"login_link": "Login",
"redirecting": "Redirecting...",
"login_in_progress": "Login in progress...",
"bad_localpart_error": "Username can only contain characters a-z, 0-9, or '=_-./'",
"user_id_too_long_error": "Your user ID, including the hostname, can't be more than 255 characters long.",
"bad_password_error": "Password must contain at least 1 lowercase, 1 uppercase, 1 number, 1 non-alphanumeric character, 8-127 characters with no space.",
"confirm_password_error": "Passwords don't match.",
"bad_email_error": "Invalid email address",
"invalid_password": "Invalid password",
"check_credentials": "Please check your credentials",
"login_types": {
"username": "Username",
"email": "Email"
},
"homeserver_form": {
"title": "Homeserver",
"header": "Homeserver list"
},
"login_form": {
"title": "Login",
"prompt_email": "Email",
"prompt_username": "Username",
"prompt_password": "Password",
"login_button": "Login"
},
"register_form": {
"title": "Register",
"prompt_email_required": "Email (Required)",
"prompt_email_optional": "Email",
"prompt_username": "Username",
"prompt_password": "Password",
"prompt_confirm_password": "Confirm password",
"register_button": "Register"
},
"terms_and_conditions": {
"title": "Agree with terms",
"description": "In order to complete registration, you need to agree to the terms and conditions.",
"accept": "I accept <a>Terms and Conditions</a>",
"submit_button": "Submit"
},
"validate_email": {
"title": "Verify email",
"continue_button": "Continue",
"message": "Please check your email <bold>{{email_address}}</bold> and validate before continuing further"
},
"captcha": {
"message": "Pleace check the box below to proceed"
}
},
"Client": {
"loading_messages": {
"default": "Heating up",
"message_one": "Almost there...",
"message_two": "Looks like you have a lot of stuff to heat up!"
},
"logout_prompt": "Logout"
}
} }
} }
} }

131
src/app/templates/auth/Auth.jsx
View file

@ -5,6 +5,7 @@ import './Auth.scss';
import ReCAPTCHA from 'react-google-recaptcha'; import ReCAPTCHA from 'react-google-recaptcha';
import { Formik } from 'formik'; import { Formik } from 'formik';
import { useTranslation, Trans } from 'react-i18next';
import * as auth from '../../../client/action/auth'; import * as auth from '../../../client/action/auth';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import { Debounce, getUrlPrams } from '../../../util/common'; import { Debounce, getUrlPrams } from '../../../util/common';
@ -26,16 +27,13 @@ import EyeBlindIC from '../../../../public/res/ic/outlined/eye-blind.svg';
import CinnySvg from '../../../../public/res/svg/cinny.svg'; import CinnySvg from '../../../../public/res/svg/cinny.svg';
import SSOButtons from '../../molecules/sso-buttons/SSOButtons'; import SSOButtons from '../../molecules/sso-buttons/SSOButtons';
import '../../i18n';
const LOCALPART_SIGNUP_REGEX = /^[a-z0-9_\-.=/]+$/; const LOCALPART_SIGNUP_REGEX = /^[a-z0-9_\-.=/]+$/;
const BAD_LOCALPART_ERROR = 'Username can only contain characters a-z, 0-9, or \'=_-./\'';
const USER_ID_TOO_LONG_ERROR = 'Your user ID, including the hostname, can\'t be more than 255 characters long.';
const PASSWORD_STRENGHT_REGEX = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,127}$/; const PASSWORD_STRENGHT_REGEX = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,127}$/;
const BAD_PASSWORD_ERROR = 'Password must contain at least 1 lowercase, 1 uppercase, 1 number, 1 non-alphanumeric character, 8-127 characters with no space.';
const CONFIRM_PASSWORD_ERROR = 'Passwords don\'t match.';
const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i; const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
const BAD_EMAIL_ERROR = 'Invalid email address';
function isValidInput(value, regex) { function isValidInput(value, regex) {
if (typeof regex === 'string') return regex === value; if (typeof regex === 'string') return regex === value;
@ -50,16 +48,19 @@ let searchingHs = null;
function Homeserver({ onChange }) { function Homeserver({ onChange }) {
const [hs, setHs] = useState(null); const [hs, setHs] = useState(null);
const [debounce] = useState(new Debounce()); const [debounce] = useState(new Debounce());
const [process, setProcess] = useState({ isLoading: true, message: 'Loading homeserver list...' });
const { t } = useTranslation();
const [process, setProcess] = useState({ isLoading: true, message: t('Templates.Auth.loading_homeserver_list') });
const hsRef = useRef(); const hsRef = useRef();
const setupHsConfig = async (servername) => { const setupHsConfig = async (servername) => {
setProcess({ isLoading: true, message: 'Looking for homeserver...' }); setProcess({ isLoading: true, message: t('Templates.Auth.looking_for_homeserver') });
let baseUrl = null; let baseUrl = null;
baseUrl = await getBaseUrl(servername); baseUrl = await getBaseUrl(servername);
if (searchingHs !== servername) return; if (searchingHs !== servername) return;
setProcess({ isLoading: true, message: `Connecting to ${baseUrl}...` }); setProcess({ isLoading: true, message: t('Templates.Auth.connecting_to_homeserver', { homeserver: baseUrl }) });
const tempClient = auth.createTemporaryClient(baseUrl); const tempClient = auth.createTemporaryClient(baseUrl);
Promise.allSettled([tempClient.loginFlows(), tempClient.register()]) Promise.allSettled([tempClient.loginFlows(), tempClient.register()])
@ -74,7 +75,7 @@ function Homeserver({ onChange }) {
}).catch(() => { }).catch(() => {
if (searchingHs !== servername) return; if (searchingHs !== servername) return;
onChange(null); onChange(null);
setProcess({ isLoading: false, error: 'Unable to connect. Please check your input.' }); setProcess({ isLoading: false, error: t('Templates.Auth.unable_to_connect') });
}); });
}; };
@ -118,14 +119,14 @@ function Homeserver({ onChange }) {
onChange={handleHsInput} onChange={handleHsInput}
value={hs?.selected} value={hs?.selected}
forwardRef={hsRef} forwardRef={hsRef}
label="Homeserver" label={t('Templates.Auth.homeserver_form.title')}
disabled={hs === null || !hs.allowCustom} disabled={hs === null || !hs.allowCustom}
/> />
<ContextMenu <ContextMenu
placement="right" placement="right"
content={(hideMenu) => ( content={(hideMenu) => (
<> <>
<MenuHeader>Homeserver list</MenuHeader> <MenuHeader>{t('Templates.Auth.homeserver_form.header')}</MenuHeader>
{ {
hs?.list.map((hsName) => ( hs?.list.map((hsName) => (
<MenuItem <MenuItem
@ -160,9 +161,10 @@ Homeserver.propTypes = {
}; };
function Login({ loginFlow, baseUrl }) { function Login({ loginFlow, baseUrl }) {
const { t } = useTranslation();
const [typeIndex, setTypeIndex] = useState(0); const [typeIndex, setTypeIndex] = useState(0);
const [passVisible, setPassVisible] = useState(false); const [passVisible, setPassVisible] = useState(false);
const loginTypes = ['Username', 'Email']; const loginTypes = [t('Templates.Auth.login_types.username'), t('Templates.Auth.login_types.email')];
const isPassword = loginFlow?.filter((flow) => flow.type === 'm.login.password')[0]; const isPassword = loginFlow?.filter((flow) => flow.type === 'm.login.password')[0];
const ssoProviders = loginFlow?.filter((flow) => flow.type === 'm.login.sso')[0]; const ssoProviders = loginFlow?.filter((flow) => flow.type === 'm.login.sso')[0];
@ -173,7 +175,7 @@ function Login({ loginFlow, baseUrl }) {
const validator = (values) => { const validator = (values) => {
const errors = {}; const errors = {};
if (typeIndex === 1 && values.email.length > 0 && !isValidInput(values.email, EMAIL_REGEX)) { if (typeIndex === 1 && values.email.length > 0 && !isValidInput(values.email, EMAIL_REGEX)) {
errors.email = BAD_EMAIL_ERROR; errors.email = t('Templates.Auth.bad_email_error');
} }
return errors; return errors;
}; };
@ -196,7 +198,7 @@ function Login({ loginFlow, baseUrl }) {
window.location.reload(); window.location.reload();
}).catch((error) => { }).catch((error) => {
let msg = error.message; let msg = error.message;
if (msg === 'Unknown message') msg = 'Please check your credentials'; if (msg === 'Unknown message') msg = t('Templates.Auth.check_credentials');
actions.setErrors({ actions.setErrors({
password: msg === 'Invalid password' ? msg : undefined, password: msg === 'Invalid password' ? msg : undefined,
other: msg !== 'Invalid password' ? msg : undefined, other: msg !== 'Invalid password' ? msg : undefined,
@ -208,7 +210,7 @@ function Login({ loginFlow, baseUrl }) {
return ( return (
<> <>
<div className="auth-form__heading"> <div className="auth-form__heading">
<Text variant="h2" weight="medium">Login</Text> <Text variant="h2" weight="medium">{t('Templates.Auth.login_form.title')}</Text>
{isPassword && ( {isPassword && (
<ContextMenu <ContextMenu
placement="right" placement="right"
@ -243,27 +245,27 @@ function Login({ loginFlow, baseUrl }) {
values, errors, handleChange, handleSubmit, isSubmitting, values, errors, handleChange, handleSubmit, isSubmitting,
}) => ( }) => (
<> <>
{isSubmitting && <LoadingScreen message="Login in progress..." />} {isSubmitting && <LoadingScreen message={t('Templates.Auth.login_in_progress')} />}
<form className="auth-form" onSubmit={handleSubmit}> <form className="auth-form" onSubmit={handleSubmit}>
{typeIndex === 0 && <Input values={values.username} name="username" onChange={handleChange} label="Username" type="username" required />} {typeIndex === 0 && <Input values={values.username} name="username" onChange={handleChange} label={t('Templates.Auth.login_form.prompt_username')} type="username" required />}
{errors.username && <Text className="auth-form__error" variant="b3">{errors.username}</Text>} {errors.username && <Text className="auth-form__error" variant="b3">{errors.username}</Text>}
{typeIndex === 1 && <Input values={values.email} name="email" onChange={handleChange} label="Email" type="email" required />} {typeIndex === 1 && <Input values={values.email} name="email" onChange={handleChange} label={t('Templates.Auth.login_form.prompt_email')} type="email" required />}
{errors.email && <Text className="auth-form__error" variant="b3">{errors.email}</Text>} {errors.email && <Text className="auth-form__error" variant="b3">{errors.email}</Text>}
<div className="auth-form__pass-eye-wrapper"> <div className="auth-form__pass-eye-wrapper">
<Input values={values.password} name="password" onChange={handleChange} label="Password" type={passVisible ? 'text' : 'password'} required /> <Input values={values.password} name="password" onChange={handleChange} label={t('Templates.Auth.login_form.prompt_password')} type={passVisible ? 'text' : 'password'} required />
<IconButton onClick={() => setPassVisible(!passVisible)} src={passVisible ? EyeIC : EyeBlindIC} size="extra-small" /> <IconButton onClick={() => setPassVisible(!passVisible)} src={passVisible ? EyeIC : EyeBlindIC} size="extra-small" />
</div> </div>
{errors.password && <Text className="auth-form__error" variant="b3">{errors.password}</Text>} {errors.password && <Text className="auth-form__error" variant="b3">{errors.password}</Text>}
{errors.other && <Text className="auth-form__error" variant="b3">{errors.other}</Text>} {errors.other && <Text className="auth-form__error" variant="b3">{errors.other}</Text>}
<div className="auth-form__btns"> <div className="auth-form__btns">
<Button variant="primary" type="submit" disabled={isSubmitting}>Login</Button> <Button variant="primary" type="submit" disabled={isSubmitting}>{t('Templates.Auth.login_form.login_button')}</Button>
</div> </div>
</form> </form>
</> </>
)} )}
</Formik> </Formik>
)} )}
{ssoProviders && isPassword && <Text className="sso__divider">OR</Text>} {ssoProviders && isPassword && <Text className="sso__divider">{t('common.or')}</Text>}
{ssoProviders && ( {ssoProviders && (
<SSOButtons <SSOButtons
type="sso" type="sso"
@ -293,6 +295,8 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
const isDisabled = registerInfo.errcode !== undefined; const isDisabled = registerInfo.errcode !== undefined;
const { flows, params, session } = registerInfo; const { flows, params, session } = registerInfo;
const { t } = useTranslation();
let isEmail = false; let isEmail = false;
let isEmailRequired = true; let isEmailRequired = true;
let isRecaptcha = false; let isRecaptcha = false;
@ -313,19 +317,19 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
const validator = (values) => { const validator = (values) => {
const errors = {}; const errors = {};
if (values.username.list > 255) errors.username = USER_ID_TOO_LONG_ERROR; if (values.username.list > 255) errors.username = t('Templates.Auth.user_id_too_long_error');
if (values.username.length > 0 && !isValidInput(values.username, LOCALPART_SIGNUP_REGEX)) { if (values.username.length > 0 && !isValidInput(values.username, LOCALPART_SIGNUP_REGEX)) {
errors.username = BAD_LOCALPART_ERROR; errors.username = t('Templates.Auth.bad_localpart_error');
} }
if (values.password.length > 0 && !isValidInput(values.password, PASSWORD_STRENGHT_REGEX)) { if (values.password.length > 0 && !isValidInput(values.password, PASSWORD_STRENGHT_REGEX)) {
errors.password = BAD_PASSWORD_ERROR; errors.password = t('Templates.Auth.bad_password_error');
} }
if (values.confirmPassword.length > 0 if (values.confirmPassword.length > 0
&& !isValidInput(values.confirmPassword, values.password)) { && !isValidInput(values.confirmPassword, values.password)) {
errors.confirmPassword = CONFIRM_PASSWORD_ERROR; errors.confirmPassword = t('Templates.Auth.confirm_password_error');
} }
if (values.email.length > 0 && !isValidInput(values.email, EMAIL_REGEX)) { if (values.email.length > 0 && !isValidInput(values.email, EMAIL_REGEX)) {
errors.email = BAD_EMAIL_ERROR; errors.email = t('Templates.Auth.bad_email_error');
} }
return errors; return errors;
}; };
@ -335,7 +339,7 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
return tempClient.isUsernameAvailable(values.username) return tempClient.isUsernameAvailable(values.username)
.then(async (isAvail) => { .then(async (isAvail) => {
if (!isAvail) { if (!isAvail) {
actions.setErrors({ username: 'Username is already taken' }); actions.setErrors({ username: t('Templates.Auth.username_taken') });
actions.setSubmitting(false); actions.setSubmitting(false);
return; return;
} }
@ -349,12 +353,12 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
} }
sid = result.sid; sid = result.sid;
} }
setProcess({ type: 'processing', message: 'Registration in progress....' }); setProcess({ type: 'processing', message: t('Templates.Auth.registration_in_progress') });
actions.setSubmitting(false); actions.setSubmitting(false);
}).catch((err) => { }).catch((err) => {
const msg = err.message || err.error; const msg = err.message || err.error;
if (['M_USER_IN_USE', 'M_INVALID_USERNAME', 'M_EXCLUSIVE'].indexOf(err.errcode) > -1) { if (['M_USER_IN_USE', 'M_INVALID_USERNAME', 'M_EXCLUSIVE'].indexOf(err.errcode) > -1) {
actions.setErrors({ username: err.errcode === 'M_USER_IN_USE' ? 'Username is already taken' : msg }); actions.setErrors({ username: err.errcode === 'M_USER_IN_USE' ? t('Templates.Auth.username_taken') : msg });
} else if (msg) actions.setErrors({ other: msg }); } else if (msg) actions.setErrors({ other: msg });
actions.setSubmitting(false); actions.setSubmitting(false);
@ -409,7 +413,7 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
session, session,
}); });
if (d.done) refreshWindow(); if (d.done) refreshWindow();
else setProcess({ type: 'processing', message: 'Registration in progress...' }); else setProcess({ type: 'processing', message: t('Templates.Auth.registration_in_progress') });
}; };
const handleTerms = async () => { const handleTerms = async () => {
const [username, password] = getInputs(); const [username, password] = getInputs();
@ -418,7 +422,7 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
session, session,
}); });
if (d.done) refreshWindow(); if (d.done) refreshWindow();
else setProcess({ type: 'processing', message: 'Registration in progress...' }); else setProcess({ type: 'processing', message: t('Templates.Auth.registration_in_progress') });
}; };
const handleEmailVerify = async () => { const handleEmailVerify = async () => {
const [username, password] = getInputs(); const [username, password] = getInputs();
@ -429,17 +433,17 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
session, session,
}); });
if (d.done) refreshWindow(); if (d.done) refreshWindow();
else setProcess({ type: 'processing', message: 'Registration in progress...' }); else setProcess({ type: 'processing', message: t('Templates.Auth.registration_in_progress') });
}; };
return ( return (
<> <>
{process.type === 'processing' && <LoadingScreen message={process.message} />} {process.type === 'processing' && <LoadingScreen message={process.message} />}
{process.type === 'm.login.recaptcha' && <Recaptcha message="Please check the box below to proceed." sitekey={process.sitekey} onChange={handleRecaptcha} />} {process.type === 'm.login.recaptcha' && <Recaptcha message={t('Templates.Auth.captcha.message')} sitekey={process.sitekey} onChange={handleRecaptcha} />}
{process.type === 'm.login.terms' && <Terms url={process.url} onSubmit={handleTerms} />} {process.type === 'm.login.terms' && <Terms url={process.url} onSubmit={handleTerms} />}
{process.type === 'm.login.email.identity' && <EmailVerify email={process.email} onContinue={handleEmailVerify} />} {process.type === 'm.login.email.identity' && <EmailVerify email={process.email} onContinue={handleEmailVerify} />}
<div className="auth-form__heading"> <div className="auth-form__heading">
{!isDisabled && <Text variant="h2" weight="medium">Register</Text>} {!isDisabled && <Text variant="h2" weight="medium">{t('Templates.Auth.register_form.title')}</Text>}
{isDisabled && <Text className="auth-form__error">{registerInfo.error}</Text>} {isDisabled && <Text className="auth-form__error">{registerInfo.error}</Text>}
</div> </div>
{!isDisabled && ( {!isDisabled && (
@ -452,25 +456,25 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
values, errors, handleChange, handleSubmit, isSubmitting, values, errors, handleChange, handleSubmit, isSubmitting,
}) => ( }) => (
<> <>
{process.type === undefined && isSubmitting && <LoadingScreen message="Registration in progress..." />} {process.type === undefined && isSubmitting && <LoadingScreen message={t('Templates.Auth.registration_in_progress')} />}
<form className="auth-form" ref={formRef} onSubmit={handleSubmit}> <form className="auth-form" ref={formRef} onSubmit={handleSubmit}>
<Input values={values.username} name="username" onChange={handleChange} label="Username" type="username" required /> <Input values={values.username} name="username" onChange={handleChange} label={t('Templates.Auth.register_form.prompt_username')} type="username" required />
{errors.username && <Text className="auth-form__error" variant="b3">{errors.username}</Text>} {errors.username && <Text className="auth-form__error" variant="b3">{errors.username}</Text>}
<div className="auth-form__pass-eye-wrapper"> <div className="auth-form__pass-eye-wrapper">
<Input values={values.password} name="password" onChange={handleChange} label="Password" type={passVisible ? 'text' : 'password'} required /> <Input values={values.password} name="password" onChange={handleChange} label={t('Templates.Auth.register_form.prompt_password')} type={passVisible ? 'text' : 'password'} required />
<IconButton onClick={() => setPassVisible(!passVisible)} src={passVisible ? EyeIC : EyeBlindIC} size="extra-small" /> <IconButton onClick={() => setPassVisible(!passVisible)} src={passVisible ? EyeIC : EyeBlindIC} size="extra-small" />
</div> </div>
{errors.password && <Text className="auth-form__error" variant="b3">{errors.password}</Text>} {errors.password && <Text className="auth-form__error" variant="b3">{errors.password}</Text>}
<div className="auth-form__pass-eye-wrapper"> <div className="auth-form__pass-eye-wrapper">
<Input values={values.confirmPassword} name="confirmPassword" onChange={handleChange} label="Confirm password" type={cPassVisible ? 'text' : 'password'} required /> <Input values={values.confirmPassword} name="confirmPassword" onChange={handleChange} label={t('Templates.Auth.register_form.prompt_confirm_password')} type={cPassVisible ? 'text' : 'password'} required />
<IconButton onClick={() => setCPassVisible(!cPassVisible)} src={cPassVisible ? EyeIC : EyeBlindIC} size="extra-small" /> <IconButton onClick={() => setCPassVisible(!cPassVisible)} src={cPassVisible ? EyeIC : EyeBlindIC} size="extra-small" />
</div> </div>
{errors.confirmPassword && <Text className="auth-form__error" variant="b3">{errors.confirmPassword}</Text>} {errors.confirmPassword && <Text className="auth-form__error" variant="b3">{errors.confirmPassword}</Text>}
{isEmail && <Input values={values.email} name="email" onChange={handleChange} label={`Email${isEmailRequired ? '' : ' (optional)'}`} type="email" required={isEmailRequired} />} {isEmail && <Input values={values.email} name="email" onChange={handleChange} label={isEmailRequired ? t('Templates.Auth.register_form.prompt_email_required') : t('Templates.Auth.register_form.prompt_email_optional')} type="email" required={isEmailRequired} />}
{errors.email && <Text className="auth-form__error" variant="b3">{errors.email}</Text>} {errors.email && <Text className="auth-form__error" variant="b3">{errors.email}</Text>}
{errors.other && <Text className="auth-form__error" variant="b3">{errors.other}</Text>} {errors.other && <Text className="auth-form__error" variant="b3">{errors.other}</Text>}
<div className="auth-form__btns"> <div className="auth-form__btns">
<Button variant="primary" type="submit" disabled={isSubmitting}>Register</Button> <Button variant="primary" type="submit" disabled={isSubmitting}>{t('Templates.Auth.register_form.register_button')}</Button>
</div> </div>
</form> </form>
</> </>
@ -499,6 +503,8 @@ function AuthCard() {
const [hsConfig, setHsConfig] = useState(null); const [hsConfig, setHsConfig] = useState(null);
const [type, setType] = useState('login'); const [type, setType] = useState('login');
const { t } = useTranslation();
const handleHsChange = (info) => { const handleHsChange = (info) => {
console.log(info); console.log(info);
setHsConfig(info); setHsConfig(info);
@ -520,13 +526,13 @@ function AuthCard() {
)} )}
{ hsConfig !== null && ( { hsConfig !== null && (
<Text variant="b2" className="auth-card__switch flex--center"> <Text variant="b2" className="auth-card__switch flex--center">
{`${(type === 'login' ? 'Don\'t have' : 'Already have')} an account?`} {(type === 'login' ? t('Templates.Auth.dont_have_an_account') : t('Templates.Auth.already_have_an_account'))}
<button <button
type="button" type="button"
style={{ color: 'var(--tc-link)', cursor: 'pointer', margin: '0 var(--sp-ultra-tight)' }} style={{ color: 'var(--tc-link)', cursor: 'pointer', margin: '0 var(--sp-ultra-tight)' }}
onClick={() => setType((type === 'login') ? 'register' : 'login')} onClick={() => setType((type === 'login') ? 'register' : 'login')}
> >
{ type === 'login' ? ' Register' : ' Login' } { (type === 'login' ? t('Templates.Auth.register_link') : t('Templates.Auth.login_link')) }
</button> </button>
</Text> </Text>
)} )}
@ -537,6 +543,8 @@ function AuthCard() {
function Auth() { function Auth() {
const [loginToken, setLoginToken] = useState(getUrlPrams('loginToken')); const [loginToken, setLoginToken] = useState(getUrlPrams('loginToken'));
const { t } = useTranslation();
useEffect(async () => { useEffect(async () => {
if (!loginToken) return; if (!loginToken) return;
if (localStorage.getItem(cons.secretKey.BASE_URL) === undefined) { if (localStorage.getItem(cons.secretKey.BASE_URL) === undefined) {
@ -558,13 +566,13 @@ function Auth() {
<ScrollView invisible> <ScrollView invisible>
<div className="auth__base"> <div className="auth__base">
<div className="auth__wrapper"> <div className="auth__wrapper">
{loginToken && <LoadingScreen message="Redirecting..." />} {loginToken && <LoadingScreen message={t('Templates.Auth.redirecting')} />}
{!loginToken && ( {!loginToken && (
<div className="auth-card"> <div className="auth-card">
<Header> <Header>
<Avatar size="extra-small" imageSrc={CinnySvg} /> <Avatar size="extra-small" imageSrc={CinnySvg} />
<TitleWrapper> <TitleWrapper>
<Text variant="h2" weight="medium">Cinny</Text> <Text variant="h2" weight="medium">{t('common.cinny')}</Text>
</TitleWrapper> </TitleWrapper>
</Header> </Header>
<div className="auth-card__content"> <div className="auth-card__content">
@ -576,16 +584,16 @@ function Auth() {
<div className="auth-footer"> <div className="auth-footer">
<Text variant="b2"> <Text variant="b2">
<a href="https://cinny.in" target="_blank" rel="noreferrer">About</a> <a href="https://cinny.in" target="_blank" rel="noreferrer">{t('Templates.Auth.link_about')}</a>
</Text> </Text>
<Text variant="b2"> <Text variant="b2">
<a href="https://github.com/ajbura/cinny/releases" target="_blank" rel="noreferrer">{`v${cons.version}`}</a> <a href="https://github.com/ajbura/cinny/releases" target="_blank" rel="noreferrer">{`v${cons.version}`}</a>
</Text> </Text>
<Text variant="b2"> <Text variant="b2">
<a href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">Twitter</a> <a href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">{t('Templates.Auth.link_twitter')}</a>
</Text> </Text>
<Text variant="b2"> <Text variant="b2">
<a href="https://matrix.org" target="_blank" rel="noreferrer">Powered by Matrix</a> <a href="https://matrix.org" target="_blank" rel="noreferrer">{t('Templates.Auth.link_matrix')}</a>
</Text> </Text>
</div> </div>
</div> </div>
@ -624,21 +632,26 @@ Recaptcha.propTypes = {
}; };
function Terms({ url, onSubmit }) { function Terms({ url, onSubmit }) {
const { t } = useTranslation();
return ( return (
<ProcessWrapper> <ProcessWrapper>
<form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}> <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
<div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}> <div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
<Text variant="h2" weight="medium">Agree with terms</Text> <Text variant="h2" weight="medium">{t('Templates.Auth.terms_and_conditions.title')}</Text>
<div style={{ marginBottom: 'var(--sp-normal)' }} /> <div style={{ marginBottom: 'var(--sp-normal)' }} />
<Text variant="b1">In order to complete registration, you need to agree to the terms and conditions.</Text> <Text variant="b1">{t('Templates.Auth.terms_and_conditions.description')}</Text>
<div style={{ display: 'flex', alignItems: 'center', margin: 'var(--sp-normal) 0' }}> <div style={{ display: 'flex', alignItems: 'center', margin: 'var(--sp-normal) 0' }}>
<input style={{ marginRight: '8px' }} id="termsCheckbox" type="checkbox" required /> <input style={{ marginRight: '8px' }} id="termsCheckbox" type="checkbox" required />
<Text variant="b1"> <Text variant="b1">
{'I accept '} <Trans
<a style={{ cursor: 'pointer' }} href={url} rel="noreferrer" target="_blank">Terms and Conditions</a> i18nKey="Templates.Auth.terms_and_conditions.accept"
// eslint-disable-next-line jsx-a11y/anchor-has-content,jsx-a11y/control-has-associated-label
components={{ a: <a style={{ cursor: 'pointer' }} href={url} rel="noreferrer" target="_blank" /> }}
/>
</Text> </Text>
</div> </div>
<Button id="termsBtn" type="submit" variant="primary">Submit</Button> <Button id="termsBtn" type="submit" variant="primary">{t('Templates.Auth.terms_and_conditions.submit_button')}</Button>
</div> </div>
</form> </form>
</ProcessWrapper> </ProcessWrapper>
@ -650,18 +663,22 @@ Terms.propTypes = {
}; };
function EmailVerify({ email, onContinue }) { function EmailVerify({ email, onContinue }) {
const { t } = useTranslation();
return ( return (
<ProcessWrapper> <ProcessWrapper>
<div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}> <div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
<Text variant="h2" weight="medium">Verify email</Text> <Text variant="h2" weight="medium">{t('Templates.Auth.validate_email.title')}</Text>
<div style={{ margin: 'var(--sp-normal) 0' }}> <div style={{ margin: 'var(--sp-normal) 0' }}>
<Text variant="b1"> <Text variant="b1">
{'Please check your email '} <Trans
<b>{`(${email})`}</b> i18nKey="Templates.Auth.validate_email.message"
{' and validate before continuing further.'} values={{ email_address: email }}
// eslint-disable-next-line jsx-a11y/anchor-has-content,jsx-a11y/control-has-associated-label
components={{ bold: <b /> }}
/>
</Text> </Text>
</div> </div>
<Button variant="primary" onClick={onContinue}>Continue</Button> <Button variant="primary" onClick={onContinue}>{t('Templates.Auth.validate_email.continue_button')}</Button>
</div> </div>
</ProcessWrapper> </ProcessWrapper>
); );

17
src/app/templates/client/Client.jsx
View file

@ -1,6 +1,7 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import './Client.scss'; import './Client.scss';
import { useTranslation } from 'react-i18next';
import { initHotkeys } from '../../../client/event/hotkeys'; import { initHotkeys } from '../../../client/event/hotkeys';
import { initRoomListListener } from '../../../client/event/roomList'; import { initRoomListListener } from '../../../client/event/roomList';
@ -19,9 +20,11 @@ import navigation from '../../../client/state/navigation';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import DragDrop from '../../organisms/drag-drop/DragDrop'; import DragDrop from '../../organisms/drag-drop/DragDrop';
import '../../i18n';
function Client() { function Client() {
const [isLoading, changeLoading] = useState(true); const [isLoading, changeLoading] = useState(true);
const [loadingMsg, setLoadingMsg] = useState('Heating up'); const [loadingMsg, setLoadingMsg] = useState('Templates.Client.loading_messages.default');
const [dragCounter, setDragCounter] = useState(0); const [dragCounter, setDragCounter] = useState(0);
const classNameHidden = 'client__item-hidden'; const classNameHidden = 'client__item-hidden';
@ -37,6 +40,8 @@ function Client() {
roomWrapperRef.current?.classList.add(classNameHidden); roomWrapperRef.current?.classList.add(classNameHidden);
} }
const { t } = useTranslation();
useEffect(() => { useEffect(() => {
navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected); navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected); navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
@ -51,8 +56,8 @@ function Client() {
let counter = 0; let counter = 0;
const iId = setInterval(() => { const iId = setInterval(() => {
const msgList = [ const msgList = [
'Almost there...', 'Templates.Client.loading_messages.message_one',
'Looks like you have a lot of stuff to heat up!', 'Templates.Client.loading_messages.message_two',
]; ];
if (counter === msgList.length - 1) { if (counter === msgList.length - 1) {
setLoadingMsg(msgList[msgList.length - 1]); setLoadingMsg(msgList[msgList.length - 1]);
@ -75,13 +80,13 @@ function Client() {
return ( return (
<div className="loading-display"> <div className="loading-display">
<button className="loading__logout" onClick={logout} type="button"> <button className="loading__logout" onClick={logout} type="button">
<Text variant="b3">Logout</Text> <Text variant="b3">{t('Templates.Client.logout_prompt')}</Text>
</button> </button>
<Spinner /> <Spinner />
<Text className="loading__message" variant="b2">{loadingMsg}</Text> <Text className="loading__message" variant="b2">{t(loadingMsg)}</Text>
<div className="loading__appname"> <div className="loading__appname">
<Text variant="h2" weight="medium">Cinny</Text> <Text variant="h2" weight="medium">{t('common.cinny')}</Text>
</div> </div>
</div> </div>
); );