adding profile translation

This commit is contained in:
Roland Osborne 2024-02-24 09:21:41 -08:00
parent 82c8221f2e
commit bed02f2750
8 changed files with 148 additions and 50 deletions

View File

@ -29,6 +29,38 @@ export const en = {
default: 'Default', default: 'Default',
dark: 'Dark', dark: 'Dark',
light: 'Light', light: 'Light',
save: 'Save',
forget: 'Forget',
unlock: 'Unlock',
profile: 'Profile',
application: 'Application',
account: 'Account',
name: 'Name',
location: 'Location',
description: 'Description',
timeFormat: 'Time Format',
dateFormat: 'Date Format',
theme: 'Theme',
language: 'Language',
timeUs: '12h',
timeEu: '24h',
dateUs: 'mm/dd',
dateEu: 'dd/mm',
registry: 'Visible in Registry',
sealedTopics: 'Sealed Topics',
changeLogin: 'Change Login',
selectImage: 'Select Image',
profileImage: 'Profile Image',
profileDetails: 'Profile Details',
enableSealed: 'Enabled Sealed Topics',
password: 'Password',
newPassword: 'New Password',
confirmPassword: 'Confirm Password',
deleteKey: 'Type \'delete\' to remove key',
delete: 'delete',
username: 'Username',
updateProfile: 'Update Profile',
}; };
export const fr = { export const fr = {
@ -62,5 +94,37 @@ export const fr = {
default: 'Défaut', default: 'Défaut',
dark: 'Sombre', dark: 'Sombre',
light: 'Lumineux', light: 'Lumineux',
save: 'Enregistrer',
forget: 'Oublier',
unlock: 'Déverrouiller',
profile: 'Profil',
application: 'Application',
account: 'Compte',
name: 'Nom',
location: 'Emplacement',
description: 'Description',
timeFormat: 'Format de l\'heure',
dateFormat: 'Format de la date',
theme: 'Thème',
language: 'Langue',
timeUs: '12h',
timeEu: '24h',
dateUs: 'mm/jj',
dateEu: 'jj/mm',
registry: 'Visible dans le Registre',
sealedTopics: 'Sujets Sécurisé',
changeLogin: 'Changer Identifiants',
selectImage: 'Sélectionner une Image',
profileImage: 'Image de Profil',
profileDetails: 'Détails du Profil',
enableSealed: 'Activer les Sujets Sécurisé',
password: 'Mot de Passe',
newPassword: 'Nouveau Mot de Passe',
confirmPassword: 'Confirmer le Mot de Passe',
deleteKey: 'Tapez \'supprimer\' pour supprimer la clé',
delete: 'supprimer',
username: 'Nom d\'Utilisateur',
updateProfile: 'Mettre à Jour le Profil',
}; };

View File

@ -2,13 +2,16 @@ import { AccountWrapper } from './Account.styled';
import { RightOutlined } from '@ant-design/icons'; import { RightOutlined } from '@ant-design/icons';
import { SettingOutlined } from '@ant-design/icons'; import { SettingOutlined } from '@ant-design/icons';
import { AccountAccess } from './profile/accountAccess/AccountAccess'; import { AccountAccess } from './profile/accountAccess/AccountAccess';
import { useAccount } from './useAccount.hook';
export function Account({ closeAccount, openProfile }) { export function Account({ closeAccount, openProfile }) {
const { state, actions } = useAccount();
return ( return (
<AccountWrapper> <AccountWrapper>
<div className="header"> <div className="header">
<div className="label">Settings</div> <div className="label">{state.strings.settings}</div>
<div className="dismiss" onClick={closeAccount}> <div className="dismiss" onClick={closeAccount}>
<RightOutlined /> <RightOutlined />
</div> </div>
@ -18,7 +21,7 @@ export function Account({ closeAccount, openProfile }) {
<div className="bottom"> <div className="bottom">
<div className="link" onClick={openProfile}> <div className="link" onClick={openProfile}>
<SettingOutlined /> <SettingOutlined />
<div className="label">Update Profile</div> <div className="label">{state.strings.updateProfile}</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -89,7 +89,7 @@ export function Profile({ closeProfile }) {
{ state.display !== 'xlarge' && ( { state.display !== 'xlarge' && (
<div className="rightHeader"> <div className="rightHeader">
<div className="title">{ state.handle }</div> <div className="title">{ state.handle }</div>
<div className="section">Profile</div> <div className="section">{ state.strings.profile }</div>
</div> </div>
)} )}
<div className={ state.display === 'xlarge' ? 'midContent' : 'rightContent' }> <div className={ state.display === 'xlarge' ? 'midContent' : 'rightContent' }>
@ -107,7 +107,7 @@ export function Profile({ closeProfile }) {
<div className="data">{ state.name }</div> <div className="data">{ state.name }</div>
)} )}
{ !state.name && ( { !state.name && (
<div className="data notset">name</div> <div className="data notset">{ state.strings.name }</div>
)} )}
<div className="icon"> <div className="icon">
<EditOutlined /> <EditOutlined />
@ -119,7 +119,7 @@ export function Profile({ closeProfile }) {
<div className="data">{ state.location }</div> <div className="data">{ state.location }</div>
)} )}
{ !state.location && ( { !state.location && (
<div className="data notset">location</div> <div className="data notset">{ state.strings.location }</div>
)} )}
</div> </div>
<div className="description"> <div className="description">
@ -128,7 +128,7 @@ export function Profile({ closeProfile }) {
<div className="data">{ state.description }</div> <div className="data">{ state.description }</div>
)} )}
{ !state.description && ( { !state.description && (
<div className="data notset">description</div> <div className="data notset">{ state.strings.description }</div>
)} )}
</div> </div>
</div> </div>
@ -139,7 +139,7 @@ export function Profile({ closeProfile }) {
{ state.display === 'small' && ( { state.display === 'small' && (
<div className="logout" onClick={logout}> <div className="logout" onClick={logout}>
<LogoutOutlined /> <LogoutOutlined />
<div className="label">Logout</div> <div className="label">{ state.strings.logout }</div>
</div> </div>
)} )}
<div className="contentFill" /> <div className="contentFill" />
@ -149,7 +149,7 @@ export function Profile({ closeProfile }) {
bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditProfileImage}> bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditProfileImage}>
<ProfileImageWrapper> <ProfileImageWrapper>
<div className="title">Profile Image</div> <div className="title">{ state.strings.profileImage }</div>
<div className="cropper"> <div className="cropper">
<Cropper image={state.editImage} crop={state.crop} zoom={state.zoom} aspect={1} <Cropper image={state.editImage} crop={state.crop} zoom={state.zoom} aspect={1}
onCropChange={actions.setCrop} onCropComplete={onCropComplete} onZoomChange={actions.setZoom} /> onCropChange={actions.setCrop} onCropComplete={onCropComplete} onZoomChange={actions.setZoom} />
@ -157,10 +157,10 @@ export function Profile({ closeProfile }) {
<div className="controls"> <div className="controls">
<input type='file' id='file' accept="image/*" ref={imageFile} onChange={e => selected(e)} style={{display: 'none'}}/> <input type='file' id='file' accept="image/*" ref={imageFile} onChange={e => selected(e)} style={{display: 'none'}}/>
<div className="select"> <div className="select">
<Button key="select" className="pic" onClick={() => imageFile.current.click()}>Select Image</Button> <Button key="select" className="pic" onClick={() => imageFile.current.click()}>{ state.strings.selectImage }</Button>
</div> </div>
<Button key="back" onClick={actions.clearEditProfileImage}>Cancel</Button> <Button key="back" onClick={actions.clearEditProfileImage}>{ state.strings.cancel }</Button>
<Button key="save" type="primary" onClick={saveImage} loading={state.busy}>Save</Button> <Button key="save" type="primary" onClick={saveImage} loading={state.busy}>{ state.strings.save }</Button>
</div> </div>
</ProfileImageWrapper> </ProfileImageWrapper>
@ -169,23 +169,23 @@ export function Profile({ closeProfile }) {
bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditProfileDetails}> bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditProfileDetails}>
<ProfileDetailsWrapper> <ProfileDetailsWrapper>
<div className="title">Profile Details</div> <div className="title">{ state.strings.profileDetails }</div>
<div class="info"> <div class="info">
<Input placeholder="Name" spellCheck="false" onChange={(e) => actions.setEditName(e.target.value)} <Input placeholder={state.strings.name} spellCheck="false" onChange={(e) => actions.setEditName(e.target.value)}
defaultValue={state.editName} autocapitalize="word" /> defaultValue={state.editName} autocapitalize="word" />
</div> </div>
<div class="info"> <div class="info">
<Input placeholder="Location" spellCheck="false" onChange={(e) => actions.setEditLocation(e.target.value)} <Input placeholder={state.strings.location} spellCheck="false" onChange={(e) => actions.setEditLocation(e.target.value)}
defaultValue={state.editLocation} autocapitalize="word" /> defaultValue={state.editLocation} autocapitalize="word" />
</div> </div>
<div class="info"> <div class="info">
<Input.TextArea placeholder="Description" onChange={(e) => actions.setEditDescription(e.target.value)} <Input.TextArea placeholder={state.strings.description} onChange={(e) => actions.setEditDescription(e.target.value)}
spellCheck="false" defaultValue={state.editDescription} autoSize={{ minRows: 2, maxRows: 6 }} /> spellCheck="false" defaultValue={state.editDescription} autoSize={{ minRows: 2, maxRows: 6 }} />
</div> </div>
<div className="controls"> <div className="controls">
<Button key="back" onClick={actions.clearEditProfileDetails}>Cancel</Button> <Button key="back" onClick={actions.clearEditProfileDetails}>{state.strings.cancel}</Button>
<Button key="save" type="primary" onClick={saveDetails} loading={state.busy}>Save</Button> <Button key="save" type="primary" onClick={saveDetails} loading={state.busy}>{state.strings.save}</Button>
</div> </div>
</ProfileDetailsWrapper> </ProfileDetailsWrapper>

View File

@ -133,6 +133,7 @@ export const ProfileWrapper = styled.div`
.notset { .notset {
font-style: italic; font-style: italic;
color: ${props => props.theme.hintText}; color: ${props => props.theme.hintText};
padding-top: 4px;
} }
.name { .name {

View File

@ -56,24 +56,24 @@ export function AccountAccess() {
<AccountAccessWrapper> <AccountAccessWrapper>
{ modalContext } { modalContext }
<div className="account"> <div className="account">
<div className="section">Application</div> <div className="section">{state.strings.application}</div>
<div className="controls"> <div className="controls">
<div className="option"> <div className="option">
<div className="label">Time Format</div> <div className="label">{state.strings.timeFormat}</div>
<Radio.Group onChange={actions.setTimeFormat} value={state.timeFormat}> <Radio.Group onChange={actions.setTimeFormat} value={state.timeFormat}>
<Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'12h'}>12h</Radio> <Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'12h'}>{state.strings.timeUs}</Radio>
<Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'24h'}>24h</Radio> <Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'24h'}>{state.strings.timeEu}</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
<div className="option"> <div className="option">
<div className="label">Date Format</div> <div className="label">{state.strings.dateFormat}</div>
<Radio.Group onChange={actions.setDateFormat} value={state.dateFormat}> <Radio.Group onChange={actions.setDateFormat} value={state.dateFormat}>
<Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'mm/dd'}>mm/dd</Radio> <Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'mm/dd'}>{state.strings.dateUs}</Radio>
<Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'dd/mm'}>dd/mm</Radio> <Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'dd/mm'}>{state.strings.dateEu}</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
<div className="option"> <div className="option">
<div className="label">Theme</div> <div className="label">{state.strings.theme}</div>
<Select <Select
defaultValue={null} defaultValue={null}
style={{ width: 128 }} style={{ width: 128 }}
@ -83,7 +83,7 @@ export function AccountAccess() {
/> />
</div> </div>
<div className="option"> <div className="option">
<div className="label">Language</div> <div className="label">{state.strings.language}</div>
<Select <Select
defaultValue={null} defaultValue={null}
style={{ width: 128 }} style={{ width: 128 }}
@ -95,44 +95,44 @@ export function AccountAccess() {
</div> </div>
</div> </div>
<div className="account"> <div className="account">
<div className="section">Account</div> <div className="section">{state.strings.account}</div>
<div className="controls"> <div className="controls">
<div className="switch"> <div className="switch">
<Switch size="small" checked={state.searchable} onChange={enable => saveSearchable(enable)} /> <Switch size="small" checked={state.searchable} onChange={enable => saveSearchable(enable)} />
<div className="switchLabel">Visible in Registry &nbsp;&nbsp;</div> <div className="switchLabel">{state.strings.registry}</div>
</div> </div>
<div className="link" onClick={actions.setEditSeal}> <div className="link" onClick={actions.setEditSeal}>
<SettingOutlined /> <SettingOutlined />
<div className="label">Sealed Topics</div> <div className="label">{state.strings.sealedTopics}</div>
</div> </div>
<div className="link" onClick={actions.setEditLogin}> <div className="link" onClick={actions.setEditLogin}>
<LockOutlined /> <LockOutlined />
<div className="label">Change Login</div> <div className="label">{state.strings.changeLogin}</div>
</div> </div>
</div> </div>
</div> </div>
<Modal centered closable={false} visible={state.editSeal} footer={null} onCancel={actions.clearEditSeal} bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }}> <Modal centered closable={false} visible={state.editSeal} footer={null} onCancel={actions.clearEditSeal} bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }}>
<SealModal> <SealModal>
<div className="title">Topic Sealing Key</div> <div className="title">{state.strings.sealedTopics}</div>
<div className="switch"> <div className="switch">
<Switch size="small" checked={state.sealEnabled} onChange={enable => actions.enableSeal(enable)} /> <Switch size="small" checked={state.sealEnabled} onChange={enable => actions.enableSeal(enable)} />
<div className="switchLabel">Enable Sealed Topics</div> <div className="switchLabel">{state.strings.enableSealed}</div>
</div> </div>
{ (state.sealMode === 'updating' || state.sealMode === 'enabling') && ( { (state.sealMode === 'updating' || state.sealMode === 'enabling') && (
<div className="sealChange"> <div className="sealChange">
<Input.Password placeholder="New Password" spellCheck="false" onChange={(e) => actions.setSealPassword(e.target.value)} <Input.Password placeholder={state.strings.newPassword} spellCheck="false" onChange={(e) => actions.setSealPassword(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} /> autocomplete="new-password" prefix={<LockOutlined />} />
</div> </div>
)} )}
{ (state.sealMode === 'updating' || state.sealMode === 'enabling') && ( { (state.sealMode === 'updating' || state.sealMode === 'enabling') && (
<div className="sealChange"> <div className="sealChange">
<Input.Password placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setSealConfirm(e.target.value)} <Input.Password placeholder={state.strings.confirmPassword} spellCheck="false" onChange={(e) => actions.setSealConfirm(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} /> autocomplete="new-password" prefix={<LockOutlined />} />
</div> </div>
)} )}
{ state.sealMode === 'disabling' && ( { state.sealMode === 'disabling' && (
<div className="sealChange"> <div className="sealChange">
<Input placeholder="Type 'delete' to remove key" spellCheck="false" onChange={(e) => actions.setSealDelete(e.target.value)} <Input placeholder={state.strings.deleteKey} spellCheck="false" onChange={(e) => actions.setSealDelete(e.target.value)}
prefix={<ExclamationCircleOutlined />} /> prefix={<ExclamationCircleOutlined />} />
</div> </div>
)} )}
@ -144,39 +144,39 @@ export function AccountAccess() {
)} )}
{ state.sealMode === 'unlocking' && ( { state.sealMode === 'unlocking' && (
<div className="sealChange"> <div className="sealChange">
<Input.Password placeholder="Password" spellCheck="false" onChange={(e) => actions.setSealUnlock(e.target.value)} <Input.Password placeholder={state.strings.password} spellCheck="false" onChange={(e) => actions.setSealUnlock(e.target.value)}
prefix={<LockOutlined />} /> prefix={<LockOutlined />} />
</div> </div>
)} )}
<div className="controls"> <div className="controls">
<Button key="back" onClick={actions.clearEditSeal}>Cancel</Button> <Button key="back" onClick={actions.clearEditSeal}>{state.strings.cancel}</Button>
{ state.sealMode === 'enabled' && ( { state.sealMode === 'enabled' && (
<Button key="save" type="primary" onClick={saveSeal} loading={state.busy}>Forget</Button> <Button key="save" type="primary" onClick={saveSeal} loading={state.busy}>{state.strings.forget}</Button>
)} )}
{ state.sealMode === 'unlocking' && ( { state.sealMode === 'unlocking' && (
<Button key="save" type="primary" onClick={saveSeal} className={actions.canSaveSeal() ? 'saveEnabled' : 'saveDisabled'} disabled={!actions.canSaveSeal()} loading={state.busy}>Unlock</Button> <Button key="save" type="primary" onClick={saveSeal} className={actions.canSaveSeal() ? 'saveEnabled' : 'saveDisabled'} disabled={!actions.canSaveSeal()} loading={state.busy}>{state.strings.unlock}</Button>
)} )}
{ state.sealMode !== 'unlocking' && state.sealMode !== 'enabled' && ( { state.sealMode !== 'unlocking' && state.sealMode !== 'enabled' && (
<Button key="save" type="primary" onClick={saveSeal} className={actions.canSaveSeal() ? 'saveEnabled' : 'saveDisabled'} disabled={!actions.canSaveSeal()} loading={state.busy}>Save</Button> <Button key="save" type="primary" onClick={saveSeal} className={actions.canSaveSeal() ? 'saveEnabled' : 'saveDisabled'} disabled={!actions.canSaveSeal()} loading={state.busy}>{state.strings.save}</Button>
)} )}
</div> </div>
</SealModal> </SealModal>
</Modal> </Modal>
<Modal centered closable={false} footer={null} visible={state.editLogin} bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditLogin}> <Modal centered closable={false} footer={null} visible={state.editLogin} bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditLogin}>
<LoginModal> <LoginModal>
<div className="title">Change Login</div> <div className="title">{state.strings.changeLogin}</div>
<Input className="loginValue" placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)} <Input className="loginValue" placeholder={state.strings.username} spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)}
defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} /> defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} />
<Input.Password className="loginValue" placeholder="Password" spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)} <Input.Password className="loginValue" placeholder={state.strings.newPassword} spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} /> autocomplete="new-password" prefix={<LockOutlined />} />
<Input.Password className="loginValue" placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setEditConfirm(e.target.value)} <Input.Password className="loginValue" placeholder={state.strings.confirmPassword} spellCheck="false" onChange={(e) => actions.setEditConfirm(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} /> autocomplete="new-password" prefix={<LockOutlined />} />
<div className="controls"> <div className="controls">
<Button key="back" onClick={actions.clearEditLogin}>Cancel</Button> <Button key="back" onClick={actions.clearEditLogin}>{state.strings.cancel}</Button>
<Button key="save" type="primary" className={actions.canSaveLogin() ? 'saveEnabled' : 'saveDisabled'} onClick={saveLogin} <Button key="save" type="primary" className={actions.canSaveLogin() ? 'saveEnabled' : 'saveDisabled'} onClick={saveLogin}
disabled={!actions.canSaveLogin()} loading={state.busy}>Save</Button> disabled={!actions.canSaveLogin()} loading={state.busy}>{state.strings.save}</Button>
</div> </div>
</LoginModal> </LoginModal>
</Modal> </Modal>

View File

@ -32,10 +32,12 @@ export const AccountAccessWrapper = styled.div`
.label { .label {
padding-right: 16px; padding-right: 16px;
min-width: 110px; min-width: 130px;
height: 28px; height: 28px;
display: flex; display: flex;
align-items: center; align-items: center;
display: flex;
justify-content: flex-end;
} }
} }
} }
@ -138,6 +140,7 @@ export const SealModal = styled.div`
background-color: ${props => props.theme.inputArea}; background-color: ${props => props.theme.inputArea};
color: ${props => props.theme.mainText}; color: ${props => props.theme.mainText};
border-radius: 8px; border-radius: 8px;
position: relative;
.ant-input-affix-wrapper { .ant-input-affix-wrapper {
background-color: ${props => props.theme.inputArea}; background-color: ${props => props.theme.inputArea};

View File

@ -26,6 +26,7 @@ export function useAccountAccess() {
sealDelete: null, sealDelete: null,
sealUnlock: null, sealUnlock: null,
strings: {},
menuStyle: {}, menuStyle: {},
timeFormat: '12h', timeFormat: '12h',
dateFormat: 'mm/dd', dateFormat: 'mm/dd',
@ -58,8 +59,8 @@ export function useAccountAccess() {
}, [account.state]); }, [account.state]);
useEffect(() => { useEffect(() => {
const { menuStyle, timeFormat, dateFormat, theme, themes, language, languages } = settings.state; const { strings, menuStyle, timeFormat, dateFormat, theme, themes, language, languages } = settings.state;
updateState({ menuStyle, timeFormat, dateFormat, theme, themes, language, languages }); updateState({ strings, menuStyle, timeFormat, dateFormat, theme, themes, language, languages });
}, [settings.state]); }, [settings.state]);
const sealUnlock = async () => { const sealUnlock = async () => {
@ -173,7 +174,7 @@ export function useAccountAccess() {
updateState({ sealEnabled: enable, sealMode }); updateState({ sealEnabled: enable, sealMode });
}, },
canSaveSeal: () => { canSaveSeal: () => {
if (state.sealMode === 'disabling' && state.sealDelete === 'delete') { if (state.sealMode === 'disabling' && state.sealDelete === state.strings.delete) {
return true; return true;
} }
if (state.sealMode === 'enabling' && state.sealPassword && state.sealPassword === state.sealConfirm) { if (state.sealMode === 'enabling' && state.sealPassword && state.sealPassword === state.sealConfirm) {

View File

@ -0,0 +1,26 @@
import { useState, useEffect, useContext } from 'react';
import { SettingsContext } from 'context/SettingsContext';
export function useAccount() {
const [state, setState] = useState({
strings: {},
});
const settings = useContext(SettingsContext);
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
}
useEffect(() => {
const { strings } = settings.state;
updateState({ strings });
}, [settings.state]);
const actions = {
};
return { state, actions };
}