Merge pull request #1887 from SUNET/cat-post-obs-fixes

Cat post obs fixes

src/components/Common/ConfirmModal.tsx

@@ -9,6 +9,7 @@ import EduIDButton from "./EduIDButton";
 interface ConfirmModalProps {
   readonly id: string;
   readonly title: React.ReactNode;
+  readonly mainText?: React.ReactNode;
   readonly placeholder: string;
   readonly showModal: boolean;
   readonly closeModal: () => void;
@@ -71,6 +72,9 @@ function ConfirmModal(props: ConfirmModalProps): JSX.Element {
                     />
                   </React.Fragment>
                 )}
+
+                {props.mainText ? props.mainText : null}
+
                 <div id="confirmation-code-area">
                   <FinalField<string>
                     component={CustomInput}

src/components/Common/CopyToClipboardButton.tsx

@@ -0,0 +1,29 @@
+import EduIDButton from "components/Common/EduIDButton";
+import { forwardRef, useState } from "react";
+import { FormattedMessage } from "react-intl";
+
+export const CopyToClipboardButton = forwardRef((props, ref: any) => {
+  const [tooltipCopied, setTooltipCopied] = useState(false); // say "Copy to clipboard" or "Copied!" in tooltip
+
+  function copyToClipboard() {
+    if (ref && ref.current) {
+      ref.current.select();
+      document.execCommand("copy");
+      setTooltipCopied(true);
+
+      setTimeout(() => {
+        setTooltipCopied(false);
+      }, 10000);
+    }
+  }
+
+  return (
+    <EduIDButton className="txt-toggle-btn" buttonstyle="link" size="sm" onClick={copyToClipboard}>
+      {tooltipCopied ? (
+        <FormattedMessage defaultMessage="COPIED" description="copied button label" />
+      ) : (
+        <FormattedMessage defaultMessage="COPY" description="copy button label" />
+      )}
+    </EduIDButton>
+  );
+});

src/components/Common/PasswordInput.tsx

@@ -1,3 +1,4 @@
+import EduIDButton from "components/Common/EduIDButton";
 import React, { useState } from "react";
 import { FieldRenderProps, Field as FinalField } from "react-final-form";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -68,10 +69,11 @@ export function PasswordInputElement(props: InputProps): JSX.Element {
         autoFocus={props.autoFocus}
       />
 
-      <button
-        type="button"
+      <EduIDButton
+        className="txt-toggle-btn"
+        buttonstyle="link"
+        size="sm"
         aria-label={showPassword ? "hide password" : "show password"}
-        className="show-hide-button"
         onClick={toggleShowPassword}
         tabIndex={-1}
       >
@@ -80,7 +82,7 @@ export function PasswordInputElement(props: InputProps): JSX.Element {
         ) : (
           <FormattedMessage defaultMessage="SHOW" description="nin/password button label" />
         )}
-      </button>
+      </EduIDButton>
     </div>
   );
 }

src/components/Common/Security.tsx

@@ -251,6 +251,14 @@ export function Security(): React.ReactElement | null {
             defaultMessage="Add a name for your security key"
           />
         }
+        mainText={
+          <p>
+            <FormattedMessage
+              description="security webauthn describe paragraph"
+              defaultMessage={`Note: this is only for your own use to be able to distinguish between your added keys.`}
+            />
+          </p>
+        }
         placeholder={placeholder}
         showModal={showSecurityKeyNameModal}
         closeModal={handleStopAskingWebauthnDescription}

src/components/Dashboard/AccountId.tsx

@@ -1,4 +1,4 @@
-import { CopyToClipboard } from "components/Common/CopyToClipboard";
+import { CopyToClipboardButton } from "components/Common/CopyToClipboardButton";
 import { useAppSelector } from "eduid-hooks";
 import { useRef } from "react";
 import { FormattedMessage } from "react-intl";
@@ -30,7 +30,7 @@ export function AccountId(): JSX.Element {
         </span>
         <div className="display-data">
           <input readOnly={true} name={eppn} id={idUserEppn} ref={ref} defaultValue={eppn} />
-          <CopyToClipboard ref={ref} />
+          <CopyToClipboardButton ref={ref} />
         </div>
       </div>
     </article>

src/components/Dashboard/ChangePasswordSuggested.tsx

@@ -1,4 +1,4 @@
-import { CopyToClipboard } from "components/Common/CopyToClipboard";
+import { CopyToClipboardButton } from "components/Common/CopyToClipboardButton";
 import { NewPasswordForm } from "components/Common/NewPasswordForm";
 import React, { useRef } from "react";
 import { FormattedMessage } from "react-intl";
@@ -13,14 +13,15 @@ export default function ChangePasswordSuggestedForm(props: ChangePasswordChildFo
         <label htmlFor="copy-new-password">
           <FormattedMessage defaultMessage="New password" description="new password" />
         </label>
+
         <input
           name="copy-new-password"
           id="copy-new-password"
           ref={ref}
           defaultValue={props.suggestedPassword}
           readOnly={true}
         />
-        <CopyToClipboard ref={ref} />
+        <CopyToClipboardButton ref={ref} />
       </div>
       <NewPasswordForm
         suggested_password={props.suggestedPassword}

src/components/Dashboard/VerifyIdentity.tsx

@@ -157,6 +157,8 @@ function VerifiedIdentitiesTable(): JSX.Element {
   const frontend_action = useAppSelector((state) => state.authn.response?.frontend_action);
   const [showConfirmRemoveIdentityVerificationModal, setShowConfirmRemoveIdentityVerificationModal] = useState(false);
 
+  const intl = useIntl();
+
   useEffect(() => {
     if (frontend_action) {
       if (frontend_action === "removeIdentity") {
@@ -209,6 +211,10 @@ function VerifiedIdentitiesTable(): JSX.Element {
             buttonstyle="close"
             size="sm"
             onClick={() => handleConfirmDeleteModal()}
+            title={intl.formatMessage({
+              id: "verified identity delete button",
+              defaultMessage: "Delete this verified identity",
+            })}
           ></EduIDButton>
         </figure>
       )}

src/components/IndexMain.tsx

@@ -23,6 +23,7 @@ import Login from "./Login/Login";
 import { LoginExternalReturnHandler } from "./Login/LoginExternalReturnHandler";
 import UseOtherDevice2 from "./Login/UseOtherDevice2";
 import { ResetPasswordApp } from "./ResetPassword/ResetPasswordApp";
+import ScrollToTop from "./ScrollToTop";
 import { SignupApp } from "./Signup/SignupApp";
 import { Errors } from "./SwamidErrors/Errors";
 
@@ -50,6 +51,7 @@ export function IndexMain(): JSX.Element {
         <ErrorBoundary FallbackComponent={GenericError}>
           <Splash showChildren={isLoaded}>
             <section id="content" className="horizontal-content-margin content">
+              <ScrollToTop />
               <Routes>
                 <Route path="/" element={<Index />} />
                 {/* Signup */}

src/components/ScrollToTop.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}

src/styles/_ResetPassword.scss

@@ -101,8 +101,8 @@ a#resend-phone:not(.button-active) {
 
 .copybutton {
   position: absolute;
-  right: 1rem;
   width: auto !important;
+  right: 1rem;
 
   svg {
     color: $txt-black;
@@ -129,7 +129,8 @@ a#resend-phone:not(.button-active) {
     margin-left: -75px;
     opacity: 0;
     transition: opacity 0.3s;
-    text-transform: capitalize;
+    text-transform: none;
+    line-height: 1.2;
   }
 
   .tool-tip-text::after {

src/styles/_buttons.scss

@@ -252,10 +252,8 @@ button.btn-icon {
   }
 }
 
-// login username-pw / reset-password set-new-password
-.show-hide-button {
-  @extend #{".btn", ".btn-link", ".btn-sm"};
-
+//textual toggle control, eg. copy/show
+.txt-toggle-btn {
   position: absolute;
   right: 1rem;
 }

src/styles/_label.scss

@@ -10,10 +10,10 @@ label,
 }
 
 .border-toggle-area {
-	flex-basis: 100%;
-	border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
-	border-width: 1px;
-	border-style: solid;
-	border-radius: 10px;
-	padding: 16px;
+  flex-basis: 100%;
+  border-color: $border-gray;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 10px;
+  padding: 16px;
 }

src/translation/extractedMessages.json

@@ -752,6 +752,10 @@
     "developer_comment": "security key status",
     "string": "Verify"
   },
+  "HgfPrt": {
+    "developer_comment": "security webauthn describe paragraph",
+    "string": "Note: this is only for your own use to be able to distinguish between your added keys."
+  },
   "HgjRtU": {
     "developer_comment": "button add more",
     "string": "+ add more"
@@ -1336,6 +1340,10 @@
     "developer_comment": "eidas proofing help text",
     "string": "To use this option you will need to first create a digital ID-card in the {freja_eid_link} app."
   },
+  "YhOtY3": {
+    "developer_comment": "copied button label",
+    "string": "COPIED"
+  },
   "Z4yZ3N": {
     "developer_comment": "Use another device, finished",
     "string": "After using the code on the other device, please close this browser window."
@@ -1986,6 +1994,10 @@
     "developer_comment": "Account recovery cancel information",
     "string": "If you decide to cancel, simply click the Go Back button to return to the login page."
   },
+  "kKMiD/": {
+    "developer_comment": "copy button label",
+    "string": "COPY"
+  },
   "kN1GC+": {
     "developer_comment": "Make primary button",
     "string": "make primary"
@@ -2913,6 +2925,9 @@
     "developer_comment": "verification status sub text",
     "string": "Your eduID is ready to use."
   },
+  "verified identity delete button": {
+    "string": "Delete this verified identity"
+  },
   "vmreyb": {
     "developer_comment": "accordion item Adding name",
     "string": "Add your name"