Merge pull request #236 from aroskanalen/feature/969-added-helptext

Feature/969 added helptext
os2display · Mar 25, 2024 · d6a0f30 · d6a0f30
2 parents 2e81aa7 + 70de5d2
commit d6a0f30
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#236](https://github.com/os2display/display-admin-client/pull/236)
+  - Add help text to activation code form.
+  - Fixed warnings raised when compiling.
 - [#234](https://github.com/os2display/display-admin-client/pull/234)
   - Cleaned up code flow in playlist saving.
   - Changed to chaining relations puts.

diff --git a/src/components/activation-code/activation-code-form.jsx b/src/components/activation-code/activation-code-form.jsx
@@ -44,29 +44,41 @@ function ActivationCodeForm({
     },
   ];
 
+  // 123
+
   return (
     <>
       <LoadingComponent isLoading={isLoading} loadingMessage={loadingMessage} />
       <Form>
         <h1 id="h1UserDisplayName">{headerText}</h1>
         <ContentBody>
-          <FormInput
-            title="display-name"
-            type="text"
-            label={t("display-name-label")}
-            placeholder={t("display-name-placeholder")}
-            value={activationCode.displayName}
-            onChange={handleInput}
-            name="displayName"
-            required
-          />
-          <RadioButtons
-            radioGroupName="role"
-            handleChange={handleInput}
-            options={roles}
-            label={t("role-label")}
-            selected={activationCode.role}
-          />
+          <div className="mb-2">
+            <FormInput
+              title="display-name"
+              type="text"
+              label={t("display-name-label")}
+              placeholder={t("display-name-placeholder")}
+              value={activationCode.displayName}
+              onChange={handleInput}
+              name="displayName"
+              required
+            />
+          </div>
+          <div className="mb-2">
+            <RadioButtons
+              radioGroupName="role"
+              handleChange={handleInput}
+              options={roles}
+              label={t("role-label")}
+              selected={activationCode.role}
+            />
+            <div>
+              <small>{t("role-external-user-helptext")}</small>
+            </div>
+            <div>
+              <small>{t("role-external-user-admin-helptext")}</small>
+            </div>
+          </div>
         </ContentBody>
         <ContentFooter>
           <Button

diff --git a/src/components/activation-code/activation-code-list.jsx b/src/components/activation-code/activation-code-list.jsx
@@ -128,15 +128,17 @@ function ActivationCodeList() {
   const dispatch = useDispatch();
 
   const refreshCallback = (id) => {
-    const item = items.filter((e) => e['@id'] === id);
+    const item = items.filter((e) => e["@id"] === id);
 
     if (item.length !== 1) {
       return;
     }
 
     dispatch(
       api.endpoints.postV1UserActivationCodesRefresh.initiate({
-        userActivationCodeActivationCode: JSON.stringify({ activationCode: item[0].code }),
+        userActivationCodeActivationCode: JSON.stringify({
+          activationCode: item[0].code,
+        }),
       })
     )
       .then((response) => {

diff --git a/src/components/slide/content/media-selector-list.jsx b/src/components/slide/content/media-selector-list.jsx
@@ -91,10 +91,11 @@ function MediaSelectorList({ multiple, selectedMediaIds, onItemClick }) {
               const selected = selectedMediaIds.includes(data["@id"]);
               return (
                 <div key={data["@id"]} className="col mb-3">
-                  <div
+                  <button
                     className={`card bg-light h-100 media-item ${
                       selected ? " selected" : ""
                     }`}
+                    type="button"
                     onClick={() => onItemClick(data)}
                   >
                     <FilePreview fileEntry={data} />
@@ -106,6 +107,7 @@ function MediaSelectorList({ multiple, selectedMediaIds, onItemClick }) {
                         aria-label={t("checkbox-form-aria-label", {
                           this: data.title,
                         })}
+                        onChange={() => {}}
                       />
                     )}
 
@@ -121,7 +123,7 @@ function MediaSelectorList({ multiple, selectedMediaIds, onItemClick }) {
                         </div>
                       </div>
                     </div>
-                  </div>
+                  </button>
                 </div>
               );
             })}

diff --git a/src/components/user/oidc-login.jsx b/src/components/user/oidc-login.jsx
@@ -1,5 +1,5 @@
-import { React, useEffect, useState } from "react";
-import { Alert, Spinner } from "react-bootstrap";
+import { React, useState } from "react";
+import { Alert } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import "./login.scss";
 import PropTypes from "prop-types";
@@ -22,7 +22,6 @@ function OIDCLogin({ config }) {
   const { provider, label, icon } = config;
 
   // State
-  const [oidcAuthUrl, setOidcAuthUrl] = useState("");
   const [oidcAuthLoadingError, setOidcAuthLoadingError] = useState("");
 
   let labelText = label;
@@ -79,16 +78,17 @@ function OIDCLogin({ config }) {
 
   return (
     <>
-      <div
+      <button
         onClick={onClick}
         className="margin-right-button btn btn-primary btn-lg d-flex justify-content-center align-items-center"
         style={{ minWidth: "160px" }}
+        type="button"
         aria-label={t("login-with-oidc-aria-label")}
         aria-describedby="ad-explanation"
       >
         {iconRender}
         {labelText}
-      </div>
+      </button>
       {oidcAuthLoadingError !== "" && (
         <Alert variant="danger mt-2">{oidcAuthLoadingError}</Alert>
       )}

diff --git a/src/translations/da/common.json b/src/translations/da/common.json
@@ -962,7 +962,9 @@
     "save-button": "Gem aktiveringskode",
     "role-external-user-admin": "Ekstern brugeradministrator",
     "role-external-user": "Ekstern bruger",
-    "role-label": "Brugerens rolle"
+    "role-label": "Brugerens rolle",
+    "role-external-user-helptext": "Hvis brugeren kun skal oprette indhold, vælg \"Ekstern bruger\".",
+    "role-external-user-admin-helptext": "Hvis brugeren skal kunne tilføje andre eksterne brugere til området, så vælg \"Ekstern brugeradministrator\"."
   },
   "activation-code-create": {
     "header": "Tilkobling til nyt område",