diff --git a/src/components/Common/ConfirmModal.tsx b/src/components/Common/ConfirmModal.tsx
index 6db3b214d..3219149d2 100644
--- a/src/components/Common/ConfirmModal.tsx
+++ b/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 {
/>
)}
+
+ {props.mainText ? props.mainText : null}
+
component={CustomInput}
diff --git a/src/components/Common/CopyToClipboardButton.tsx b/src/components/Common/CopyToClipboardButton.tsx
new file mode 100644
index 000000000..d4bad16c0
--- /dev/null
+++ b/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 (
+
+ {tooltipCopied ? (
+
+ ) : (
+
+ )}
+
+ );
+});
diff --git a/src/components/Common/PasswordInput.tsx b/src/components/Common/PasswordInput.tsx
index ea9bd4a6b..6e0e878e2 100644
--- a/src/components/Common/PasswordInput.tsx
+++ b/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}
/>
-
+
);
}
diff --git a/src/components/Common/Security.tsx b/src/components/Common/Security.tsx
index fa832bb10..2f1c51e50 100644
--- a/src/components/Common/Security.tsx
+++ b/src/components/Common/Security.tsx
@@ -251,6 +251,14 @@ export function Security(): React.ReactElement | null {
defaultMessage="Add a name for your security key"
/>
}
+ mainText={
+
+
+
+ }
placeholder={placeholder}
showModal={showSecurityKeyNameModal}
closeModal={handleStopAskingWebauthnDescription}
diff --git a/src/components/Dashboard/AccountId.tsx b/src/components/Dashboard/AccountId.tsx
index 96f502ff6..845c35b1c 100644
--- a/src/components/Dashboard/AccountId.tsx
+++ b/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 {
-
+
diff --git a/src/components/Dashboard/ChangePasswordSuggested.tsx b/src/components/Dashboard/ChangePasswordSuggested.tsx
index 4e23cd686..cea19a028 100644
--- a/src/components/Dashboard/ChangePasswordSuggested.tsx
+++ b/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,6 +13,7 @@ export default function ChangePasswordSuggestedForm(props: ChangePasswordChildFo
+
-
+
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",
+ })}
>
)}
diff --git a/src/components/IndexMain.tsx b/src/components/IndexMain.tsx
index d41f093ed..8f7c5b042 100644
--- a/src/components/IndexMain.tsx
+++ b/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 {
+
} />
{/* Signup */}
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 000000000..d1adaa132
--- /dev/null
+++ b/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;
+}
diff --git a/src/styles/_ResetPassword.scss b/src/styles/_ResetPassword.scss
index 0b6082e37..e99d5d035 100644
--- a/src/styles/_ResetPassword.scss
+++ b/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 {
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
index 621ca182f..664c21b13 100644
--- a/src/styles/_buttons.scss
+++ b/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;
}
diff --git a/src/styles/_label.scss b/src/styles/_label.scss
index 1c18b802c..840cb7906 100644
--- a/src/styles/_label.scss
+++ b/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;
}
diff --git a/src/translation/extractedMessages.json b/src/translation/extractedMessages.json
index bed557187..7205b977a 100644
--- a/src/translation/extractedMessages.json
+++ b/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"