pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-25 12:18:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

[DE mobile] Correct protection and encryption

Browse Source
This commit is contained in:
SergeyEzhin
2023-02-12 21:07:18 +04:00
parent ed8638ec13
commit 08387cfc4c
10 changed files with 109 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/common/mobile/resources/less/comments.less
View File

@ -233,7 +233,7 @@
overflow: auto;
.item-content .item-input-wrap::after {
background-color: @text-normal;
background-color: @brandColor;
}
}

5
apps/common/mobile/resources/less/common.less
View File

@ -1111,7 +1111,10 @@ input[type="number"]::-webkit-inner-spin-button {
line-height: 16px;
}
// Inputs List
.block-title + .list, .block-title + .block, .block-title + .card, .block-title + .timeline, .block-title + .block-header {
margin: 0;
}

12
apps/documenteditor/mobile/src/controller/Main.jsx
View File

@ -800,14 +800,18 @@ class MainController extends Component {
let textWarningDialog;
switch(props.type) {
case Asc.c_oAscEDocProtect.ReadOnly:
textWarningDialog = t('Main.textDialogProtectedOnlyView')
case Asc.c_oAscEDocProtect.ReadOnly:
textWarningDialog = t('Main.textDialogProtectedOnlyView');
break;
case Asc.c_oAscEDocProtect.Comments:
textWarningDialog = t('Main.textDialogProtectedEditComments')
textWarningDialog = t('Main.textDialogProtectedEditComments');
break;
case Asc.c_oAscEDocProtect.TrackedChanges:
textWarningDialog = t('Main.textDialogProtectedChangesTracked')
break;
case Asc.c_oAscEDocProtect.Forms:
textWarningDialog = t('Main.textDialogProtectedFillForms')
textWarningDialog = t('Main.textDialogProtectedFillForms');
break;
}
storeAppOptions.setProtection(isProtected);

1
apps/documenteditor/mobile/src/controller/settings/DocumentProtection.jsx
View File

@ -25,6 +25,7 @@ class ProtectionDocumentController extends React.Component {
const protection = api.asc_getDocumentProtection() || new AscCommonWord.CDocProtect();
appOptions.setProtection(true);
appOptions.setTypeProtection(typeProtection);
if(typeProtection !== Asc.c_oAscEDocProtect.TrackedChanges && !isViewer) {
appOptions.changeViewerMode();

1
apps/documenteditor/mobile/src/controller/settings/Protection.jsx
View File

@ -49,6 +49,7 @@ class ProtectionController extends React.Component {
if (!propsProtection)
propsProtection = new AscCommonWord.CDocProtect();
appOptions.setTypeProtection(null);
propsProtection.asc_setEditType(Asc.c_oAscEDocProtect.None);
api.asc_setDocumentProtection(propsProtection);
}

50
apps/documenteditor/mobile/src/controller/settings/Settings.jsx
View File

@ -3,11 +3,12 @@ import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import { observer, inject } from "mobx-react";
import {Device} from '../../../../../common/mobile/utils/device';
import SettingsView from "../../view/settings/Settings";
import {LocalStorage} from "../../../../../common/mobile/utils/LocalStorage.mjs";
const Settings = props => {
const { t } = useTranslation();
useEffect(() => {
if ( Device.phone ) {
f7.popup.open('.settings-popup');
@ -92,6 +93,52 @@ const Settings = props => {
api.ChangeReaderMode();
};
const onProtectClick = () => {
const api = Common.EditorApi.get();
const appOptions = props.storeAppOptions;
const isProtected = appOptions.isProtected;
let propsProtection = api.asc_getDocumentProtection();
const isPassword = propsProtection?.asc_getIsPassword();
if(isProtected) {
if(propsProtection && isPassword) {
f7.dialog.create({
title: t('Settings.titleDialogUnprotect'),
text: t('Settings.textDialogUnprotect'),
content: Device.ios ?
'<div class="input-field"><input type="password" class="modal-text-input" name="protection-password" placeholder="' + t('Settings.advDRMPassword') + '" id="protection-password"></div>' : '<div class="input-field"><div class="inputs-list list inline-labels"><ul><li><div class="item-content item-input"><div class="item-inner"><div class="item-input-wrap"><input type="password" name="protection-password" id="protection-password" placeholder=' + t('Settings.advDRMPassword') + '></div></div></div></li></ul></div></div>',
cssClass: 'dlg-adv-options',
buttons: [
{
text: t('Settings.textCancel')
},
{
text: t('Settings.textOk'),
onClick: () => {
const passwordValue = document.querySelector('#protection-password')?.value;
if(passwordValue) {
propsProtection.asc_setEditType(Asc.c_oAscEDocProtect.None);
propsProtection.asc_setPassword(passwordValue);
api.asc_setDocumentProtection(propsProtection);
}
}
}
]
}).open();
} else {
if (!propsProtection)
propsProtection = new AscCommonWord.CDocProtect();
appOptions.setTypeProtection(null);
propsProtection.asc_setEditType(Asc.c_oAscEDocProtect.None);
api.asc_setDocumentProtection(propsProtection);
}
} else {
f7.views.current.router.navigate('/protect');
}
}
return <SettingsView usePopover={!Device.phone}
openOptions={props.openOptions}
closeOptions={props.closeOptions}
@ -102,6 +149,7 @@ const Settings = props => {
onOrthographyCheck={onOrthographyCheck}
onDownloadOrigin={onDownloadOrigin}
onChangeMobileView={onChangeMobileView}
onProtectClick={onProtectClick}
/>
};

2
apps/documenteditor/mobile/src/store/appOptions.js
View File

@ -54,7 +54,7 @@ export class storeAppOptions {
this.isProtected = value;
}
typeProtection;
typeProtection = null;
setTypeProtection(type) {
this.typeProtection = type;
}

49
apps/documenteditor/mobile/src/view/settings/DocumentProtection.jsx
View File

@ -10,10 +10,11 @@ const ProtectionDocumentView = inject("storeAppOptions")(observer(props => {
const isIos = Device.ios;
const appOptions = props.storeAppOptions;
const typeProtection = appOptions.typeProtection;
const [isPassword, setPassword] = useState(false);
const [stateTypeProtection, setStateTypeProtection] = useState(typeProtection);
const [isRequirePassword, setRequirePassword] = useState(false);
const [password, changePassword] = useState('');
const [passwordRepeat, repeatPassword] = useState('');
const isDisabledProtection = isPassword && (!password.length || !passwordRepeat.length);
const [passwordRepeat, changeRepeationPassword] = useState('');
const isDisabledProtection = isRequirePassword ? ((!password.length || !passwordRepeat.length) || stateTypeProtection === null) : stateTypeProtection === null;
const showErrorDialog = () => {
f7.dialog.create({
@ -26,29 +27,33 @@ const ProtectionDocumentView = inject("storeAppOptions")(observer(props => {
}).open();
};
const changeHanlder = () => {
if(isRequirePassword && password !== passwordRepeat) {
showErrorDialog();
} else {
props.onProtectDocument(stateTypeProtection, password);
}
}
return (
<Page>
<Navbar title={t('Settings.textProtectDocument')} backLink={_t.textBack}>
<NavRight>
<Link text={isIos && t('Settings.textSave')} className={isDisabledProtection && 'disabled'} onClick={() => {
if(password !== passwordRepeat) {
showErrorDialog();
} else {
props.onProtectDocument(typeProtection, password);
}
}}>
<Link text={isIos && t('Settings.textSave')} className={isDisabledProtection && 'disabled'} onClick={changeHanlder}>
{Device.android && <Icon icon='icon-check'/>}
</Link>
</NavRight>
</Navbar>
<List>
<ListItem title={t('Settings.textSetPassword')}>
<Toggle checked={isPassword} onToggleChange={() => {
setPassword(!isPassword);
<Toggle checked={isRequirePassword} onToggleChange={() => {
setRequirePassword(!isRequirePassword);
changePassword('');
changeRepeationPassword('');
}} />
</ListItem>
</List>
{isPassword &&
{isRequirePassword &&
<>
<List inlineLabels className="inputs-list">
<ListInput
@ -64,7 +69,7 @@ const ProtectionDocumentView = inject("storeAppOptions")(observer(props => {
type="password"
placeholder={t('Settings.textRequired')}
value={passwordRepeat}
onInput={e => repeatPassword(e.target.value)}
onInput={e => changeRepeationPassword(e.target.value)}
className={isIos ? 'list-input-right' : ''}
/>
</List>
@ -75,17 +80,17 @@ const ProtectionDocumentView = inject("storeAppOptions")(observer(props => {
}
<BlockTitle>{t('Settings.textTypeEditing')}</BlockTitle>
<List>
<ListItem radio checked={typeProtection === Asc.c_oAscEDocProtect.ReadOnly} title={t('Settings.textNoChanges')} onClick={() => {
appOptions.setTypeProtection(Asc.c_oAscEDocProtect.ReadOnly);
<ListItem radio checked={stateTypeProtection === Asc.c_oAscEDocProtect.ReadOnly} title={t('Settings.textNoChanges')} onClick={() => {
setStateTypeProtection(Asc.c_oAscEDocProtect.ReadOnly);
}}></ListItem>
<ListItem radio checked={typeProtection === Asc.c_oAscEDocProtect.Forms} title={t('Settings.textFillingForms')} onClick={() => {
appOptions.setTypeProtection(Asc.c_oAscEDocProtect.Forms);
<ListItem radio checked={stateTypeProtection === Asc.c_oAscEDocProtect.Forms} title={t('Settings.textFillingForms')} onClick={() => {
setStateTypeProtection(Asc.c_oAscEDocProtect.Forms);
}}></ListItem>
<ListItem radio checked={typeProtection === Asc.c_oAscEDocProtect.TrackedChanges} title={t('Settings.textTrackedChanges')} onClick={() => {
appOptions.setTypeProtection(Asc.c_oAscEDocProtect.TrackedChanges);
<ListItem radio checked={stateTypeProtection === Asc.c_oAscEDocProtect.TrackedChanges} title={t('Settings.textTrackedChanges')} onClick={() => {
setStateTypeProtection(Asc.c_oAscEDocProtect.TrackedChanges);
}}></ListItem>
<ListItem radio checked={typeProtection === Asc.c_oAscEDocProtect.Comments} title={t('Settings.textComments')} onClick={() => {
appOptions.setTypeProtection(Asc.c_oAscEDocProtect.Comments);
<ListItem radio checked={stateTypeProtection === Asc.c_oAscEDocProtect.Comments} title={t('Settings.textComments')} onClick={() => {
setStateTypeProtection(Asc.c_oAscEDocProtect.Comments);
}}></ListItem>
</List>
<Block>

4
apps/documenteditor/mobile/src/view/settings/FileEncryption.jsx
View File

@ -56,9 +56,11 @@ const EncryptionView = inject("storeAppOptions")(observer(props => {
</List>
</>
}
{isFileEncrypted && isRequiredPassword &&
<BlockTitle>{t('Settings.textChangePassword')}</BlockTitle>
}
{(isFileEncrypted && isRequiredPassword || !isFileEncrypted) &&
<>
<BlockTitle>{t('Settings.textChangePassword')}</BlockTitle>
<List inlineLabels className="inputs-list">
<ListInput
label={t('Settings.textPassword')}

19
apps/documenteditor/mobile/src/view/settings/Settings.jsx
View File

@ -132,6 +132,7 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
// set mode
const isViewer = appOptions.isViewer;
const isMobileView = appOptions.isMobileView;
const isProtected = appOptions.isProtected;
let _isEdit = false,
_canDownload = false,
@ -166,9 +167,16 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
}
<ListItem title={t('Settings.textProtection')} link="#" onClick={onoptionclick.bind(this, '/protection')}>
<Icon slot="media" icon="icon-protection"></Icon>
</ListItem>
{_isEdit && !isViewer &&
<ListItem title={t('Settings.textProtection')} link="#" onClick={onoptionclick.bind(this, '/protection')}>
<Icon slot="media" icon="icon-protection"></Icon>
</ListItem>
}
{_isEdit && isViewer &&
<ListItem title={isProtected ? t('Settings.textUnprotect') : t('Settings.textProtectDocument')} onClick={() => props.onProtectClick()} link="#">
<Icon slot="media" icon="icon-protect-document" />
</ListItem>
}
<ListItem title={t('Settings.textNavigation')} link='#' onClick={() => {
if(Device.phone) {
onOpenNavigation();
@ -257,13 +265,14 @@ class SettingsView extends Component {
render() {
const show_popover = this.props.usePopover;
return (
show_popover ?
<Popover id="settings-popover" closeByOutsideClick={false} className="popover__titled" onPopoverClosed={() => this.props.closeOptions('settings')}>
<SettingsList inPopover={true} onOptionClick={this.onoptionclick} closeOptions={this.props.closeOptions} openOptions={this.props.openOptions} style={{height: '410px'}} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
<SettingsList inPopover={true} onOptionClick={this.onoptionclick} closeOptions={this.props.closeOptions} openOptions={this.props.openOptions} style={{height: '410px'}} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin} onProtectClick={this.props.onProtectClick}/>
</Popover> :
<Popup className="settings-popup" onPopupClosed={() => this.props.closeOptions('settings')}>
<SettingsList onOptionClick={this.onoptionclick} closeOptions={this.props.closeOptions} openOptions={this.props.openOptions} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
<SettingsList onOptionClick={this.onoptionclick} closeOptions={this.props.closeOptions} openOptions={this.props.openOptions} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin} onProtectClick={this.props.onProtectClick}/>
</Popup>
)
}