Dress up the soft logout page to look like the design

Fixes https://github.com/vector-im/riot-web/issues/10262

Also fixes showing the user ID twice. We might have a User object which helpfully sets the display name to the user ID, so check for that.

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,
@@ -216,33 +218,40 @@ export default class SoftLogout extends React.Component {
                     </h2>
                     <div>
                         {_t(
-                            "Your homeserver (%(domainName)s) admin has signed you out of your " +
+                            "Your homeserver (<strong1>%(domainName)s</strong1>) admin has signed you out of your " +
-                            "account %(displayName)s (%(userId)s).",
+                            "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>
-                    <div>
-                        {_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.",
-                        )}
-                    </div>
-                    <div>
-                        <AccessibleButton onClick={this.onClearAll} kind="primary">
-                            {_t("Clear all data")}
-                        </AccessibleButton>
-                    </div>
-
                     <h3>{_t("Sign in")}</h3>
                     <div>
                         {this._renderSignInSection()}
                     </div>
+
+                    <h3>{_t("Clear personal data")}</h3>
+                    <p>
+                        {_t(
+                            "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.",
+                        )}
+                    </p>
+                    <div>
+                        <AccessibleButton onClick={this.onClearAll} kind="danger">
+                            {_t("Clear all data")}
+                        </AccessibleButton>
+                    </div>
                 </AuthBody>
             </AuthPage>
         );

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}
                 />

src/i18n/strings/en_EN.json

@@ -1129,8 +1129,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.",
+    "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.",
-    "Delete everything": "Delete everything",
+    "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",
@@ -1591,10 +1591,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).",
+    "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>.",
-    "I don't want to sign in": "I don't want to sign in",
+    "Clear personal data": "Clear personal data",
-    "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.",
+    "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.",
-    "Clear all data": "Clear all data",
     "Commands": "Commands",
     "Results from DuckDuckGo": "Results from DuckDuckGo",
     "Emoji": "Emoji",