Merge pull request #3190 from matrix-org/travis/soft-logout-design

Dress up the soft logout page to look like the design
matrix-org · Jul 9, 2019 · 6cb148a · 6cb148a
2 parents 4c5a7d4 + 4b1d78e
commit 6cb148a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/src/components/structures/auth/SoftLogout.js b/src/components/structures/auth/SoftLogout.js
@@ -57,7 +57,9 @@ export default class SoftLogout extends React.Component {
         const userId = MatrixClientPeg.get().getUserId();
         const user = MatrixClientPeg.get().getUser(userId);
 
-        const displayName = user ? user.displayName : userId.substring(1).split(':')[0];
+        const displayName = user && user.displayName !== userId
+            ? user.displayName
+            : userId.substring(1).split(':')[0];
 
         this.state = {
             domainName,
@@ -230,33 +232,40 @@ export default class SoftLogout extends React.Component {
                     </h2>
                     <div>
                         {_t(
-                            "Your homeserver (%(domainName)s) admin has signed you out of your " +
-                            "account %(displayName)s (%(userId)s).",
+                            "Your homeserver (<strong1>%(domainName)s</strong1>) admin has signed you out of your " +
+                            "account <strong2>%(displayName)s (%(userId)s)</strong2>.",
                             {
                                 domainName: this.state.domainName,
                                 displayName: this.state.displayName,
                                 userId: this.state.userId,
                             },
+                            {
+                                // XXX: It's annoying that we can't just map <strong> to two things.
+                                // https://github.com/vector-im/riot-web/issues/9086
+                                'strong1': (val) => <strong>{val}</strong>,
+                                'strong2': (val) => <strong>{val}</strong>,
+                            },
                         )}
                     </div>
 
-                    <h3>{_t("I don't want to sign in")}</h3>
+                    <h3>{_t("Sign in")}</h3>
                     <div>
+                        {this._renderSignInSection()}
+                    </div>
+
+                    <h3>{_t("Clear personal data")}</h3>
+                    <p>
                         {_t(
-                            "If this is a shared device, or you don't want to access your account " +
-                            "again from it, clear all data stored locally on this device.",
+                            "Warning: Your personal data (including encryption keys) is still stored " +
+                            "on this device. Clear it if you're finished using this device, or want to sign " +
+                            "in to another account.",
                         )}
-                    </div>
+                    </p>
                     <div>
-                        <AccessibleButton onClick={this.onClearAll} kind="primary">
+                        <AccessibleButton onClick={this.onClearAll} kind="danger">
                             {_t("Clear all data")}
                         </AccessibleButton>
                     </div>
-
-                    <h3>{_t("Sign in")}</h3>
-                    <div>
-                        {this._renderSignInSection()}
-                    </div>
                 </AuthBody>
             </AuthPage>
         );

diff --git a/src/components/views/dialogs/ConfirmWipeDeviceDialog.js b/src/components/views/dialogs/ConfirmWipeDeviceDialog.js
@@ -43,14 +43,15 @@ export default class ConfirmWipeDeviceDialog extends React.Component {
                 <div className='mx_ConfirmWipeDeviceDialog_content'>
                     <p>
                         {_t(
-                            "Deleting all data from this device is permanent. Encrypted messages will be lost " +
+                            "Clearing all data from this device is permanent. Encrypted messages will be lost " +
                             "unless their keys have been backed up.",
                         )}
                     </p>
                 </div>
                 <DialogButtons
-                    primaryButton={_t("Delete everything")}
+                    primaryButton={_t("Clear all data")}
                     onPrimaryButtonClick={this._onConfirm}
+                    primaryButtonClass="danger"
                     cancelButton={_t("Cancel")}
                     onCancel={this._onDecline}
                 />

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -1131,8 +1131,8 @@
     "Confirm Removal": "Confirm Removal",
     "Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.": "Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.",
     "Clear all data on this device?": "Clear all data on this device?",
-    "Deleting all data from this device is permanent. Encrypted messages will be lost unless their keys have been backed up.": "Deleting all data from this device is permanent. Encrypted messages will be lost unless their keys have been backed up.",
-    "Delete everything": "Delete everything",
+    "Clearing all data from this device is permanent. Encrypted messages will be lost unless their keys have been backed up.": "Clearing all data from this device is permanent. Encrypted messages will be lost unless their keys have been backed up.",
+    "Clear all data": "Clear all data",
     "Community IDs cannot be empty.": "Community IDs cannot be empty.",
     "Community IDs may only contain characters a-z, 0-9, or '=_-./'": "Community IDs may only contain characters a-z, 0-9, or '=_-./'",
     "Something went wrong whilst creating your community": "Something went wrong whilst creating your community",
@@ -1594,10 +1594,9 @@
     "Forgotten your password?": "Forgotten your password?",
     "Cannot re-authenticate with your account. Please contact your homeserver admin for more information.": "Cannot re-authenticate with your account. Please contact your homeserver admin for more information.",
     "You're signed out": "You're signed out",
-    "Your homeserver (%(domainName)s) admin has signed you out of your account %(displayName)s (%(userId)s).": "Your homeserver (%(domainName)s) admin has signed you out of your account %(displayName)s (%(userId)s).",
-    "I don't want to sign in": "I don't want to sign in",
-    "If this is a shared device, or you don't want to access your account again from it, clear all data stored locally on this device.": "If this is a shared device, or you don't want to access your account again from it, clear all data stored locally on this device.",
-    "Clear all data": "Clear all data",
+    "Your homeserver (<strong1>%(domainName)s</strong1>) admin has signed you out of your account <strong2>%(displayName)s (%(userId)s)</strong2>.": "Your homeserver (<strong1>%(domainName)s</strong1>) admin has signed you out of your account <strong2>%(displayName)s (%(userId)s)</strong2>.",
+    "Clear personal data": "Clear personal data",
+    "Warning: Your personal data (including encryption keys) is still stored on this device. Clear it if you're finished using this device, or want to sign in to another account.": "Warning: Your personal data (including encryption keys) is still stored on this device. Clear it if you're finished using this device, or want to sign in to another account.",
     "Commands": "Commands",
     "Results from DuckDuckGo": "Results from DuckDuckGo",
     "Emoji": "Emoji",