mirror of
https://github.com/balzack/databag.git
synced 2025-02-12 03:29:16 +00:00
adding profile translation
This commit is contained in:
Roland Osborne
parent
82c8221f2e
commit
bed02f2750
@ -29,6 +29,38 @@ export const en = {
|
||||
default: 'Default',
|
||||
dark: 'Dark',
|
||||
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 = {
|
||||
@ -62,5 +94,37 @@ export const fr = {
|
||||
default: 'Défaut',
|
||||
dark: 'Sombre',
|
||||
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',
|
||||
};
|
||||
|
||||
|
||||
@ -2,13 +2,16 @@ import { AccountWrapper } from './Account.styled';
|
||||
import { RightOutlined } from '@ant-design/icons';
|
||||
import { SettingOutlined } from '@ant-design/icons';
|
||||
import { AccountAccess } from './profile/accountAccess/AccountAccess';
|
||||
import { useAccount } from './useAccount.hook';
|
||||
|
||||
export function Account({ closeAccount, openProfile }) {
|
||||
|
||||
const { state, actions } = useAccount();
|
||||
|
||||
return (
|
||||
<AccountWrapper>
|
||||
<div className="header">
|
||||
<div className="label">Settings</div>
|
||||
<div className="label">{state.strings.settings}</div>
|
||||
<div className="dismiss" onClick={closeAccount}>
|
||||
<RightOutlined />
|
||||
</div>
|
||||
@ -18,7 +21,7 @@ export function Account({ closeAccount, openProfile }) {
|
||||
<div className="bottom">
|
||||
<div className="link" onClick={openProfile}>
|
||||
<SettingOutlined />
|
||||
<div className="label">Update Profile</div>
|
||||
<div className="label">{state.strings.updateProfile}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -89,7 +89,7 @@ export function Profile({ closeProfile }) {
|
||||
{ state.display !== 'xlarge' && (
|
||||
<div className="rightHeader">
|
||||
<div className="title">{ state.handle }</div>
|
||||
<div className="section">Profile</div>
|
||||
<div className="section">{ state.strings.profile }</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={ state.display === 'xlarge' ? 'midContent' : 'rightContent' }>
|
||||
@ -107,7 +107,7 @@ export function Profile({ closeProfile }) {
|
||||
<div className="data">{ state.name }</div>
|
||||
)}
|
||||
{ !state.name && (
|
||||
<div className="data notset">name</div>
|
||||
<div className="data notset">{ state.strings.name }</div>
|
||||
)}
|
||||
<div className="icon">
|
||||
<EditOutlined />
|
||||
@ -119,7 +119,7 @@ export function Profile({ closeProfile }) {
|
||||
<div className="data">{ state.location }</div>
|
||||
)}
|
||||
{ !state.location && (
|
||||
<div className="data notset">location</div>
|
||||
<div className="data notset">{ state.strings.location }</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="description">
|
||||
@ -128,7 +128,7 @@ export function Profile({ closeProfile }) {
|
||||
<div className="data">{ state.description }</div>
|
||||
)}
|
||||
{ !state.description && (
|
||||
<div className="data notset">description</div>
|
||||
<div className="data notset">{ state.strings.description }</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -139,7 +139,7 @@ export function Profile({ closeProfile }) {
|
||||
{ state.display === 'small' && (
|
||||
<div className="logout" onClick={logout}>
|
||||
<LogoutOutlined />
|
||||
<div className="label">Logout</div>
|
||||
<div className="label">{ state.strings.logout }</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="contentFill" />
|
||||
@ -149,7 +149,7 @@ export function Profile({ closeProfile }) {
|
||||
bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditProfileImage}>
|
||||
|
||||
<ProfileImageWrapper>
|
||||
<div className="title">Profile Image</div>
|
||||
<div className="title">{ state.strings.profileImage }</div>
|
||||
<div className="cropper">
|
||||
<Cropper image={state.editImage} crop={state.crop} zoom={state.zoom} aspect={1}
|
||||
onCropChange={actions.setCrop} onCropComplete={onCropComplete} onZoomChange={actions.setZoom} />
|
||||
@ -157,10 +157,10 @@ export function Profile({ closeProfile }) {
|
||||
<div className="controls">
|
||||
<input type='file' id='file' accept="image/*" ref={imageFile} onChange={e => selected(e)} style={{display: 'none'}}/>
|
||||
<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>
|
||||
<Button key="back" onClick={actions.clearEditProfileImage}>Cancel</Button>
|
||||
<Button key="save" type="primary" onClick={saveImage} loading={state.busy}>Save</Button>
|
||||
<Button key="back" onClick={actions.clearEditProfileImage}>{ state.strings.cancel }</Button>
|
||||
<Button key="save" type="primary" onClick={saveImage} loading={state.busy}>{ state.strings.save }</Button>
|
||||
</div>
|
||||
</ProfileImageWrapper>
|
||||
|
||||
@ -169,23 +169,23 @@ export function Profile({ closeProfile }) {
|
||||
bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditProfileDetails}>
|
||||
|
||||
<ProfileDetailsWrapper>
|
||||
<div className="title">Profile Details</div>
|
||||
<div className="title">{ state.strings.profileDetails }</div>
|
||||
<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" />
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<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 }} />
|
||||
</div>
|
||||
|
||||
<div className="controls">
|
||||
<Button key="back" onClick={actions.clearEditProfileDetails}>Cancel</Button>
|
||||
<Button key="save" type="primary" onClick={saveDetails} loading={state.busy}>Save</Button>
|
||||
<Button key="back" onClick={actions.clearEditProfileDetails}>{state.strings.cancel}</Button>
|
||||
<Button key="save" type="primary" onClick={saveDetails} loading={state.busy}>{state.strings.save}</Button>
|
||||
</div>
|
||||
</ProfileDetailsWrapper>
|
||||
|
||||
|
||||
@ -133,6 +133,7 @@ export const ProfileWrapper = styled.div`
|
||||
.notset {
|
||||
font-style: italic;
|
||||
color: ${props => props.theme.hintText};
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.name {
|
||||
|
||||
@ -56,24 +56,24 @@ export function AccountAccess() {
|
||||
<AccountAccessWrapper>
|
||||
{ modalContext }
|
||||
<div className="account">
|
||||
<div className="section">Application</div>
|
||||
<div className="section">{state.strings.application}</div>
|
||||
<div className="controls">
|
||||
<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 style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'12h'}>12h</Radio>
|
||||
<Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'24h'}>24h</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'}>{state.strings.timeEu}</Radio>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<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 style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'mm/dd'}>mm/dd</Radio>
|
||||
<Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'dd/mm'}>dd/mm</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'}>{state.strings.dateEu}</Radio>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<div className="option">
|
||||
<div className="label">Theme</div>
|
||||
<div className="label">{state.strings.theme}</div>
|
||||
<Select
|
||||
defaultValue={null}
|
||||
style={{ width: 128 }}
|
||||
@ -83,7 +83,7 @@ export function AccountAccess() {
|
||||
/>
|
||||
</div>
|
||||
<div className="option">
|
||||
<div className="label">Language</div>
|
||||
<div className="label">{state.strings.language}</div>
|
||||
<Select
|
||||
defaultValue={null}
|
||||
style={{ width: 128 }}
|
||||
@ -95,44 +95,44 @@ export function AccountAccess() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="account">
|
||||
<div className="section">Account</div>
|
||||
<div className="section">{state.strings.account}</div>
|
||||
<div className="controls">
|
||||
<div className="switch">
|
||||
<Switch size="small" checked={state.searchable} onChange={enable => saveSearchable(enable)} />
|
||||
<div className="switchLabel">Visible in Registry </div>
|
||||
<div className="switchLabel">{state.strings.registry}</div>
|
||||
</div>
|
||||
<div className="link" onClick={actions.setEditSeal}>
|
||||
<SettingOutlined />
|
||||
<div className="label">Sealed Topics</div>
|
||||
<div className="label">{state.strings.sealedTopics}</div>
|
||||
</div>
|
||||
<div className="link" onClick={actions.setEditLogin}>
|
||||
<LockOutlined />
|
||||
<div className="label">Change Login</div>
|
||||
<div className="label">{state.strings.changeLogin}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal centered closable={false} visible={state.editSeal} footer={null} onCancel={actions.clearEditSeal} bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }}>
|
||||
<SealModal>
|
||||
<div className="title">Topic Sealing Key</div>
|
||||
<div className="title">{state.strings.sealedTopics}</div>
|
||||
<div className="switch">
|
||||
<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>
|
||||
{ (state.sealMode === 'updating' || state.sealMode === 'enabling') && (
|
||||
<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 />} />
|
||||
</div>
|
||||
)}
|
||||
{ (state.sealMode === 'updating' || state.sealMode === 'enabling') && (
|
||||
<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 />} />
|
||||
</div>
|
||||
)}
|
||||
{ state.sealMode === 'disabling' && (
|
||||
<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 />} />
|
||||
</div>
|
||||
)}
|
||||
@ -144,39 +144,39 @@ export function AccountAccess() {
|
||||
)}
|
||||
{ state.sealMode === 'unlocking' && (
|
||||
<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 />} />
|
||||
</div>
|
||||
)}
|
||||
<div className="controls">
|
||||
<Button key="back" onClick={actions.clearEditSeal}>Cancel</Button>
|
||||
<Button key="back" onClick={actions.clearEditSeal}>{state.strings.cancel}</Button>
|
||||
{ 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' && (
|
||||
<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' && (
|
||||
<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>
|
||||
</SealModal>
|
||||
</Modal>
|
||||
<Modal centered closable={false} footer={null} visible={state.editLogin} bodyStyle={{ borderRadius: 8, padding: 16, ...state.menuStyle }} onCancel={actions.clearEditLogin}>
|
||||
<LoginModal>
|
||||
<div className="title">Change Login</div>
|
||||
<Input className="loginValue" placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)}
|
||||
<div className="title">{state.strings.changeLogin}</div>
|
||||
<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 />} />
|
||||
|
||||
<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 />} />
|
||||
|
||||
<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 />} />
|
||||
<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}
|
||||
disabled={!actions.canSaveLogin()} loading={state.busy}>Save</Button>
|
||||
disabled={!actions.canSaveLogin()} loading={state.busy}>{state.strings.save}</Button>
|
||||
</div>
|
||||
</LoginModal>
|
||||
</Modal>
|
||||
|
||||
@ -32,10 +32,12 @@ export const AccountAccessWrapper = styled.div`
|
||||
|
||||
.label {
|
||||
padding-right: 16px;
|
||||
min-width: 110px;
|
||||
min-width: 130px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -138,6 +140,7 @@ export const SealModal = styled.div`
|
||||
background-color: ${props => props.theme.inputArea};
|
||||
color: ${props => props.theme.mainText};
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
.ant-input-affix-wrapper {
|
||||
background-color: ${props => props.theme.inputArea};
|
||||
|
||||
@ -26,6 +26,7 @@ export function useAccountAccess() {
|
||||
sealDelete: null,
|
||||
sealUnlock: null,
|
||||
|
||||
strings: {},
|
||||
menuStyle: {},
|
||||
timeFormat: '12h',
|
||||
dateFormat: 'mm/dd',
|
||||
@ -58,8 +59,8 @@ export function useAccountAccess() {
|
||||
}, [account.state]);
|
||||
|
||||
useEffect(() => {
|
||||
const { menuStyle, timeFormat, dateFormat, theme, themes, language, languages } = settings.state;
|
||||
updateState({ menuStyle, timeFormat, dateFormat, theme, themes, language, languages });
|
||||
const { strings, menuStyle, timeFormat, dateFormat, theme, themes, language, languages } = settings.state;
|
||||
updateState({ strings, menuStyle, timeFormat, dateFormat, theme, themes, language, languages });
|
||||
}, [settings.state]);
|
||||
|
||||
const sealUnlock = async () => {
|
||||
@ -173,7 +174,7 @@ export function useAccountAccess() {
|
||||
updateState({ sealEnabled: enable, sealMode });
|
||||
},
|
||||
canSaveSeal: () => {
|
||||
if (state.sealMode === 'disabling' && state.sealDelete === 'delete') {
|
||||
if (state.sealMode === 'disabling' && state.sealDelete === state.strings.delete) {
|
||||
return true;
|
||||
}
|
||||
if (state.sealMode === 'enabling' && state.sealPassword && state.sealPassword === state.sealConfirm) {
|
||||
|
||||
26
net/web/src/session/account/useAccount.hook.js
Normal file
26
net/web/src/session/account/useAccount.hook.js
Normal 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 };
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user