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"