Don't say 'all' if it's qualified with 'other'. (#882)

* Don't say 'all' if it's qualified with 'other'.

* not sure where this one appears?

* Lint

* Lint

* yarn fmt

* Add link (from Eric)

src/auth/token.ts

@@ -167,7 +167,10 @@ export const revokeAllTokens = authApi.post(
       return;
     }
     tunaEvent("revoked-all-tokens");
-    ctx.loader = { message: "Successfully logged out all other sessions!" };
+    ctx.loader = {
+      message:
+        "Successfully logged out of other sessions! You may wish to log out of this session, as well.",
+    };
   },
 );
 
@@ -180,5 +183,5 @@ export function* revokeTokensMdw(ctx: AuthApiCtx, next: Next) {
 
   yield* revokeAllTokens.run();
   const msg = ctx.loader?.message || "Success!";
-  ctx.loader = { message: `${msg} All other sessions have been logged out.` };
+  ctx.loader = { message: `${msg} Other sessions have been logged out.` };
 }

src/ui/pages/logout.tsx

@@ -23,7 +23,7 @@ export const LogoutPage = () => {
         <p className="my-6 text-gray-600">
           Click to log out now or visit{" "}
           <Link to={securitySettingsUrl()}>Security Settings</Link> to log out
-          of all active sessions.
+          of other active sessions, first.
         </p>
       </div>
       <Box>

src/ui/pages/settings-security.tsx

@@ -17,13 +17,15 @@ import {
 } from "@app/react";
 import {
   addSecurityKeyUrl,
+  logoutUrl,
   otpRecoveryCodesUrl,
   otpSetupUrl,
 } from "@app/routes";
 import { schema } from "@app/schema";
 import { selectCurrentUserId, updateEmail } from "@app/users";
 import { emailValidator } from "@app/validator";
 import { useState } from "react";
+import { Link } from "react-router-dom";
 import { useCurrentUser } from "../hooks";
 import {
   Banner,
@@ -361,16 +363,30 @@ const LogOut = () => {
 
   return (
     <Group>
-      <BannerMessages {...loader} />
+      {loader.isSuccess ? (
+        <BannerMessages
+          {...loader}
+          message={
+            <>
+              <span>{loader.message} </span>
+              <Link to={logoutUrl()} className={tokens.type["white link"]}>
+                Logout
+              </Link>
+            </>
+          }
+        />
+      ) : (
+        <BannerMessages {...loader} />
+      )}
 
       <div>
         This action will log out all <strong>other</strong> sessions and cannot
-        be undone.
+        be undone. This session will remain logged in.
       </div>
 
       <div>
         <Button variant="delete" requireConfirm onClick={confirmLogout}>
-          Log out all sessions
+          Log out other sessions
         </Button>
       </div>
     </Group>
@@ -396,7 +412,7 @@ export const SecuritySettingsPage = () => {
       <Section title="Security Keys">
         <SecurityKeys />
       </Section>
-      <Section title="Log out all sessions">
+      <Section title="Log out other sessions">
         <LogOut />
       </Section>
     </BoxGroup>

src/ui/shared/banner.tsx

@@ -117,7 +117,7 @@ export const BannerMessages = ({
   isSuccess: boolean;
   isError: boolean;
   isWarning?: boolean;
-  message: string;
+  message: React.ReactNode;
   className?: string;
 }) => {
   if (!message) return null;

src/ui/shared/tokens.ts

@@ -7,6 +7,7 @@ export const tokens = {
 
     link: "font-medium text-sm text-gray-500 hover:text-indigo",
     "table link": "text-black group-hover:text-indigo hover:text-indigo",
+    "white link": "text-white underline",
 
     "active link": "font-medium text-sm text-gray-700",
     "subdued active link": "font-medium text-sm text-amber-600",