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:
parent
82c8221f2e
commit
bed02f2750
@ -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',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
@ -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 </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>
|
||||||
|
@ -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};
|
||||||
|
@ -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) {
|
||||||
|
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