mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Refine the clear all data experience

Browse source
This commit is contained in:
Josh Perez 2021-08-24 16:57:34 -04:00 committed by GitHub
parent 488ac22860
commit 8045a83374
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 127 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
background.html
View file

@ -170,41 +170,6 @@
</div>
</script>
<script type="text/x-tmpl-mustache" id="clear-data">
{{#isStep1}}
<div class='step'>
<div class='inner'>
<div class='step-body'>
<span class='banner-icon alert-outline-red'></span>
<div class='header'>{{ header }}</div>
<div class='body-text-wide'>{{ body }}</div>
</div>
<div class='nav'>
<div>
<a class='button neutral cancel'>{{ cancelButton }}</a>
<a class='button destructive delete-all-data'>{{ deleteButton }}</a>
</div>
</div>
</div>
</div>
{{/isStep1}}
{{#isStep2}}
<div id='step2' class='step'>
<div class='inner'>
<div class='step-body'>
<span class='banner-icon delete'></span>
<div class='header'>{{ deleting }}</div>
</div>
<div class='progress'>
<div class='bar-container'>
<div class='bar progress-bar progress-bar-striped active'></div>
</div>
</div>
</div>
</div>
{{/isStep2}}
</script>
<script type="text/x-tmpl-mustache" id="link-flow-template">
<div class='module-title-bar-drag-area'></div>

77
js/views/clear_data_view.js
View file

@ -1,77 +0,0 @@
// Copyright 2018-2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
/* global i18n, Whisper, $ */
// eslint-disable-next-line func-names
(function () {
window.Whisper = window.Whisper || {};
const { Logs } = window.Signal;
const CLEAR_DATA_STEPS = {
CHOICE: 1,
DELETING: 2,
};
window.Whisper.ClearDataView = Whisper.View.extend({
template: () => $('#clear-data').html(),
className: 'full-screen-flow overlay',
events: {
'click .cancel': 'onCancel',
'click .delete-all-data': 'onDeleteAllData',
},
initialize() {
this.step = CLEAR_DATA_STEPS.CHOICE;
},
onCancel() {
this.remove();
},
async onDeleteAllData() {
window.log.info('Deleting everything!');
this.step = CLEAR_DATA_STEPS.DELETING;
this.render();
await this.clearAllData();
},
async clearAllData() {
try {
await Logs.deleteAll();
window.log.info('clearAllData: deleted all logs');
await window.Signal.Data.removeAll();
window.log.info('clearAllData: emptied database');
await window.Signal.Data.close();
window.log.info('clearAllData: closed database');
await window.Signal.Data.removeDB();
window.log.info('clearAllData: removed database');
await window.Signal.Data.removeOtherData();
window.log.info('clearAllData: removed all other data');
} catch (error) {
window.log.error(
'Something went wrong deleting all data:',
error && error.stack ? error.stack : error
);
}
window.restart();
},
render_attributes() {
return {
isStep1: this.step === CLEAR_DATA_STEPS.CHOICE,
header: i18n('deleteAllDataHeader'),
body: i18n('deleteAllDataBody'),
cancelButton: i18n('cancel'),
deleteButton: i18n('deleteAllDataButton'),
isStep2: this.step === CLEAR_DATA_STEPS.DELETING,
deleting: i18n('deleteAllDataProgress'),
};
},
});
})();

3
main.js
View file

@ -1681,6 +1681,9 @@ ipc.on('close-settings', () => {
});
ipc.on('delete-all-data', () => {
if (settingsWindow) {
settingsWindow.close();
}
if (mainWindow && mainWindow.webContents) {
mainWindow.webContents.send('delete-all-data');
}

35
test/index.html
View file

@ -152,41 +152,6 @@
</div>
</script>
<script type="text/x-tmpl-mustache" id="clear-data">
{{#isStep1}}
<div class='step'>
<div class='inner'>
<div class='step-body'>
<span class='banner-icon alert-outline-red'></span>
<div class='header'>{{ header }}</div>
<div class='body-text-wide'>{{ body }}</div>
</div>
<div class='nav'>
<div>
<a class='button neutral cancel'>{{ cancelButton }}</a>
<a class='button destructive delete-all-data'>{{ deleteButton }}</a>
</div>
</div>
</div>
</div>
{{/isStep1}}
{{#isStep2}}
<div id='step2' class='step'>
<div class='inner'>
<div class='step-body'>
<span class='banner-icon delete'></span>
<div class='header'>{{ deleting }}</div>
</div>
<div class='progress'>
<div class='bar-container'>
<div class='bar progress-bar progress-bar-striped active'></div>
</div>
</div>
</div>
</div>
{{/isStep2}}
</script>
<script type="text/x-tmpl-mustache" id="link-flow-template">
<div class='module-title-bar-drag-area'></div>

19
ts/components/ClearingData.stories.tsx Normal file
View file

@ -0,0 +1,19 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { setup as setupI18n } from '../../js/modules/i18n';
import enMessages from '../../_locales/en/messages.json';
import { ClearingData } from './ClearingData';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/ClearingData', module);
story.add('Clearing data', () => (
<ClearingData deleteAllData={action('deleteAllData')} i18n={i18n} />
));

34
ts/components/ClearingData.tsx Normal file
View file

@ -0,0 +1,34 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useEffect } from 'react';
import { LocalizerType } from '../types/Util';
export type PropsType = {
deleteAllData: () => void;
i18n: LocalizerType;
};
export function ClearingData({ deleteAllData, i18n }: PropsType): JSX.Element {
useEffect(() => {
deleteAllData();
}, [deleteAllData]);
return (
<div className="full-screen-flow overlay">
<div className="step">
<div className="inner">
<div className="step-body">
<span className="banner-icon delete" />
<div className="header">{i18n('deleteAllDataProgress')}</div>
</div>
<div className="progress">
<div className="bar-container">
<div className="bar progress-bar progress-bar-striped active" />
</div>
</div>
</div>
</div>
</div>
);
}

22
ts/components/Preferences.tsx
View file

@ -14,6 +14,7 @@ import {
import { Button, ButtonVariant } from './Button';
import { ChatColorPicker } from './ChatColorPicker';
import { Checkbox } from './Checkbox';
import { ConfirmationDialog } from './ConfirmationDialog';
import { ConversationType } from '../state/ducks/conversations';
import {
ConversationColorType,
@ -234,6 +235,7 @@ export const Preferences = ({
whoCanSeeMe,
zoomFactor,
}: PropsType): JSX.Element => {
const [confirmDelete, setConfirmDelete] = useState(false);
const [page, setPage] = useState<Page>(Page.General);
const [showSyncFailed, setShowSyncFailed] = useState(false);
const [nowSyncing, setNowSyncing] = useState(false);
@ -912,7 +914,7 @@ export const Preferences = ({
right={
<div className="Preferences__right-button">
<Button
onClick={doDeleteAllData}
onClick={() => setConfirmDelete(true)}
variant={ButtonVariant.SecondaryDestructive}
>
{i18n('clearDataButton')}
@ -921,6 +923,24 @@ export const Preferences = ({
}
/>
</SettingsRow>
{confirmDelete ? (
<ConfirmationDialog
actions={[
{
action: doDeleteAllData,
style: 'negative',
text: i18n('clearDataButton'),
},
]}
i18n={i18n}
onClose={() => {
setConfirmDelete(false);
}}
title={i18n('deleteAllDataHeader')}
>
{i18n('deleteAllDataBody')}
</ConfirmationDialog>
) : null}
</>
);
} else if (page === Page.ChatColor) {

32
ts/shims/deleteAllData.ts Normal file
View file

@ -0,0 +1,32 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
export async function deleteAllData(): Promise<void> {
try {
await window.Signal.Logs.deleteAll();
window.log.info('deleteAllData: deleted all logs');
await window.Signal.Data.removeAll();
window.log.info('deleteAllData: emptied database');
await window.Signal.Data.close();
window.log.info('deleteAllData: closed database');
await window.Signal.Data.removeDB();
window.log.info('deleteAllData: removed database');
await window.Signal.Data.removeOtherData();
window.log.info('deleteAllData: removed all other data');
} catch (error) {
window.log.error(
'Something went wrong deleting all data:',
error && error.stack ? error.stack : error
);
}
window.restart();
}

15
ts/shims/renderClearingDataView.tsx Normal file
View file

@ -0,0 +1,15 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { render } from 'react-dom';
import { ClearingData } from '../components/ClearingData';
import { deleteAllData } from './deleteAllData';
export function renderClearingDataView(): void {
render(
<ClearingData deleteAllData={deleteAllData} i18n={window.i18n} />,
document.getElementById('app-container')
);
}

4
ts/util/createIPCEvents.ts
View file

@ -22,6 +22,7 @@ import { calling } from '../services/calling';
import { getConversationsWithCustomColorSelector } from '../state/selectors/conversations';
import { getCustomColors } from '../state/selectors/items';
import { themeChanged } from '../shims/themeChanged';
import { renderClearingDataView } from '../shims/renderClearingDataView';
import * as universalExpireTimer from './universalExpireTimer';
import { PhoneNumberDiscoverability } from './phoneNumberDiscoverability';
@ -376,8 +377,7 @@ export function createIPCEvents(
deleteAllData: async () => {
await window.sqlInitializer.goBackToMainProcess();
const clearDataView = new window.Whisper.ClearDataView().render();
$('body').append(clearDataView.el);
renderClearingDataView();
},
showStickerPack: (packId, key) => {

50
ts/util/lint/exceptions.json
View file

@ -200,22 +200,6 @@
"updated": "2018-09-19T21:59:32.770Z",
"reasonDetail": "Protected from arbitrary input"
},
{
"rule": "jQuery-$(",
"path": "js/views/clear_data_view.js",
"line": " template: () => $('#clear-data').html(),",
"reasonCategory": "usageTrusted",
"updated": "2021-02-26T18:44:56.450Z",
"reasonDetail": "Static selector, read-only access"
},
{
"rule": "jQuery-html(",
"path": "js/views/clear_data_view.js",
"line": " template: () => $('#clear-data').html(),",
"reasonCategory": "usageTrusted",
"updated": "2021-02-26T18:44:56.450Z",
"reasonDetail": "Static selector, read-only access"
},
{
"rule": "jQuery-$(",
"path": "js/views/debug_log_view.js",
@ -14191,22 +14175,6 @@
"updated": "2021-08-18T18:22:55.307Z",
"reasonDetail": "Legacy code"
},
{
"rule": "jQuery-$(",
"path": "ts/util/createIPCEvents.js",
"line": " $('body').append(clearDataView.el);",
"reasonCategory": "usageTrusted",
"updated": "2021-08-18T18:22:55.307Z",
"reasonDetail": "Legacy code"
},
{
"rule": "jQuery-append(",
"path": "ts/util/createIPCEvents.js",
"line": " $('body').append(clearDataView.el);",
"reasonCategory": "usageTrusted",
"updated": "2021-08-18T18:22:55.307Z",
"reasonDetail": "Legacy code"
},
{
"rule": "jQuery-prepend(",
"path": "ts/util/createIPCEvents.js",
@ -14247,22 +14215,6 @@
"updated": "2021-08-18T18:22:55.307Z",
"reasonDetail": "Legacy code"
},
{
"rule": "jQuery-$(",
"path": "ts/util/createIPCEvents.ts",
"line": " $('body').append(clearDataView.el);",
"reasonCategory": "usageTrusted",
"updated": "2021-08-18T18:22:55.307Z",
"reasonDetail": "Legacy code"
},
{
"rule": "jQuery-append(",
"path": "ts/util/createIPCEvents.ts",
"line": " $('body').append(clearDataView.el);",
"reasonCategory": "usageTrusted",
"updated": "2021-08-18T18:22:55.307Z",
"reasonDetail": "Legacy code"
},
{
"rule": "jQuery-prepend(",
"path": "ts/util/createIPCEvents.ts",
@ -14359,4 +14311,4 @@
"reasonCategory": "usageTrusted",
"updated": "2021-07-22T03:00:34.561Z"
}
]
]