reusable eduidbutton format for show or copy toggle

src/components/Common/CopyToClipboardButton.tsx

@@ -1,3 +1,4 @@
+import EduIDButton from "components/Common/EduIDButton";
 import { forwardRef, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -17,16 +18,12 @@ export const CopyToClipboardButton = forwardRef((props, ref: any) => {
   }
 
   return (
-    <button
-      className="show-hide-button"
-      onClick={copyToClipboard}
-      aria-label={tooltipCopied ? "Copied!" : "Copy to clipboard"}
-    >
+    <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" />
       )}
-    </button>
+    </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/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/translation/extractedMessages.json

@@ -1340,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."
@@ -1990,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"