Merge pull request #1430 from qdraw/feature/202403-preferences-tooltip

Preferences & Tooltip UI changes

history.md

@@ -60,23 +60,27 @@ Semantic Versioning 2.0.0 is from version 0.1.6+
 - [x] (Removed) _App_ Removed overwrite of open app in desktop (replaced with native open file)
   (PR #1381)
 - [x] (Added) _App_ Add 'App Settings' to the menu (PR #1381)
-- [x] (Added) _Front-end_ Add warning when opening a lot pictures at once: "Do you really want to
+- [x] (Added) _Front-end_ Add warning when opening a lot pictures at one: "Do you really want to
   edit all of the selected photos?" (PR #1381)
-- [x] (Changed) _Front-end_ isRelativeUrl check for redirect (home/login) (PR #1419)
-- [x] (Breaking changes) _App_ System requirements for Windows and Mac OS are changed, see release
+- [x] (Changed) _Front-end_ isRelativeUrl check for redirect (PR #1419)
+- [x] (Breaking changes) _App_ System requirements for Windows and Mac OS are changed see release
   notes (PR #1422)
-- [x] (Fixed) _Front-end_ Add Tooltip to for example: explain that tags are comma separated 
-  (PR #1422) (Issue #1405)
+- [x] (Fixed) _Front-end_ Add Tooltip to explain that tags are comma separated (PR #1422) (Issue
+  #1405)
 - [x] (Fixed) _Docs_ Make getting started more clear (PR #1422) (Issue #1403)
 - [x] (Fixed) _Front-end_ Add link to docs page for storage folder (PR #1422) (Issue #1404)
-- [x] (Changed) _Docs_ Use Google Consent Mode, only for docs, other apps have no Google (PR #1424) 
+- [x] (Security) _Front-end_ spellcheck false on email and password fields (PR #1430)
+- [x] (Fixed) _Front-end_ Tooltip is partly not shown (PR #1430)
+- [x] (Changed) _Front-end_ View user friendly name for Default Desktop user (PR #1430)
+- [x] (Changed) _Docs_ Use Google Consent Mode, only for docs, other apps have no Google (PR #1424)
+
 
 ## version 0.6.0-beta.1 - 2024-02-18 {#v0.6.0-beta.1}
 
 - [x] (Changed) _Back-end_ Upgrade to .NET 8 - SDK 8.0.200 (Runtime: 8.0.2) (PR #1382)
 - [x] (Fixed) _Back-end_ Docker update base package and no recommendations install (PR #1393)
-- [x] (Fixed) _Back-end_ Corrupt images where generated due import 
-  (Issue started with 0.6.0-beta.0 / .NET 8) (PR #1392)
+- [x] (Fixed) _Back-end_ Corrupt images where generated due import (Issue started with .NET 8) (PR
+  #1392)
 - [x] (Fixed) _Back-end_ Flush issue with Upload (PR #1394)
 
 ## version 0.6.0-beta.0 - 2024-02-11 {#v0.6.0-beta.0}

starsky/starsky/clientapp/src/components/organisms/preferences-username/preferences-username.spec.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import * as useFetch from "../../../hooks/use-fetch";
 import { newIConnectionDefault } from "../../../interfaces/IConnectionDefault";
+import localization from "../../../localization/localization.json";
 import PreferencesUsername from "./preferences-username";
 
 describe("PreferencesUsername", () => {
@@ -45,13 +46,32 @@ describe("PreferencesUsername", () => {
         },
         statusCode: 200
       };
+      jest.spyOn(useFetch, "default").mockImplementationOnce(() => testReply);
+
+      const component = render(<PreferencesUsername />);
+      expect(screen.queryByTestId("preferences-username-text")?.textContent).toBe("test");
+
+      component.unmount();
+    });
+
+    it("should get the identifier desktop user", () => {
+      const testReply = {
+        ...newIConnectionDefault(),
+        data: {
+          credentialsIdentifiers: ["mail@localhost"]
+        },
+        statusCode: 200
+      };
       jest
         .spyOn(useFetch, "default")
+        .mockReset()
         .mockImplementationOnce(() => testReply)
         .mockImplementationOnce(() => testReply);
 
       const component = render(<PreferencesUsername />);
-      expect(screen.queryByTestId("preferences-username-text")?.textContent).toBe("test");
+      expect(screen.queryByTestId("preferences-username-text")?.textContent).toBe(
+        localization.MessageDesktopMailLocalhostUsername.en
+      );
 
       component.unmount();
     });

starsky/starsky/clientapp/src/components/organisms/preferences-username/preferences-username.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import useFetch from "../../../hooks/use-fetch";
 import useGlobalSettings from "../../../hooks/use-global-settings";
 import localization from "../../../localization/localization.json";
@@ -8,22 +8,18 @@ import { UrlQuery } from "../../../shared/url/url-query";
 const PreferencesUsername: React.FunctionComponent = () => {
   const settings = useGlobalSettings();
   const language = new Language(settings.language);
-  const MessageUnknownUsername = language.key(localization.MessageUnknownUsername);
   const MessageUsername = language.key(localization.MessageUsername);
   const MessageRole = language.key(localization.MessageRole);
 
   const accountStatus = useFetch(new UrlQuery().UrlAccountStatus(), "get");
-  const [userName, setUserName] = React.useState(MessageUnknownUsername);
+  let userName = language.key(localization.MessageUnknownUsername);
 
-  useEffect(() => {
-    if (
-      accountStatus.statusCode !== 200 ||
-      !accountStatus.data?.credentialsIdentifiers ||
-      accountStatus.data.credentialsIdentifiers.length !== 1
-    )
-      return;
-    setUserName(accountStatus.data.credentialsIdentifiers[0]);
-  }, [accountStatus]);
+  if (accountStatus.statusCode === 200 && accountStatus?.data?.credentialsIdentifiers[0]) {
+    userName = accountStatus?.data?.credentialsIdentifiers[0];
+    if (userName === "mail@localhost") {
+      userName = language.key(localization.MessageDesktopMailLocalhostUsername);
+    }
+  }
 
   return (
     <>

starsky/starsky/clientapp/src/containers/account-register.tsx

@@ -131,10 +131,12 @@ const AccountRegister: FunctionComponent = () => {
             name="email"
             maxLength={80}
             data-test="email"
+            spellCheck={false}
             value={userEmail}
             placeholder={MessageExampleUsername}
             onChange={(e) => setUserEmail(e.target.value)}
           />
+          {/*  why spellCheck false? https://www.bleepingcomputer.com/news/security/google-microsoft-can-get-your-passwords-via-web-browsers-spellcheck/ */}
 
           <label htmlFor="email">{MessagePassword}</label>
           <input
@@ -145,6 +147,7 @@ const AccountRegister: FunctionComponent = () => {
             name="password"
             data-test="password"
             maxLength={80}
+            spellCheck={false}
             placeholder={MessageExamplePassword}
             value={userPassword}
             onChange={(e) => setUserPassword(e.target.value)}
@@ -157,6 +160,7 @@ const AccountRegister: FunctionComponent = () => {
             autoComplete="off"
             type="password"
             maxLength={100}
+            spellCheck={false}
             name="confirm-password"
             data-test="confirm-password"
             value={userConfirmPassword}

starsky/starsky/clientapp/src/containers/login.tsx

@@ -153,6 +153,7 @@ export const Login: React.FC<ILoginProps> = () => {
               data-test="email"
               name="email"
               maxLength={80}
+              spellCheck={false}
               value={userEmail}
               placeholder={MessageExampleUsername}
               onChange={(e) => setUserEmail(e.target.value)}
@@ -164,6 +165,7 @@ export const Login: React.FC<ILoginProps> = () => {
               data-test="password"
               name="password"
               maxLength={80}
+              spellCheck={false}
               value={userPassword}
               placeholder={MessageExamplePassword}
               onChange={(e) => setUserPassword(e.target.value)}

starsky/starsky/clientapp/src/localization/localization.json

@@ -414,6 +414,11 @@
     "nl": "Onbekende gebruikersnaam",
     "de": "Unbekannter Benutzername"
   },
+  "MessageDesktopMailLocalhostUsername": {
+    "en": "Desktop user",
+    "nl": "Desktop gebruiker",
+    "de": "Desktop Benutzer"
+  },
   "MessageUsername": {
     "en": "Username",
     "nl": "Gebruikersnaam",
@@ -1020,8 +1025,8 @@
     "de": "Lesen Sie hier mehr"
   },
   "temp1": {
-    "en": "More",
-    "nl": "Meer",
-    "de": "Mehr"
+    "en": ".",
+    "nl": ".",
+    "de": "."
   }
 }

starsky/starsky/clientapp/src/style/css/40-tooltip.css

@@ -19,8 +19,8 @@
 }
 
 .tooltip-container.left .tooltip {
-  left: 70%;
-  transform: translateX(-30%);
+  left: 74%;
+  transform: translateX(-24%);
 }
 
 .tooltip-container .tooltip::after {
@@ -35,7 +35,7 @@
 }
 
 .tooltip-container.left .tooltip::after {
-  left: 28%;
+  left: 22%;
 }
 
 .tooltip-container:hover .tooltip {