(fix) O3-2703: Fix login card error message position (#900)

* (fix) O3-2703: Fix login card error message position * Commit diff from prettier and extract-translations tasks * Apply class to parent div instead
openmrs · Jan 23, 2024 · 4b2de5e · 4b2de5e
1 parent d6e7110
commit 4b2de5e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 32 deletions.
diff --git a/packages/apps/esm-login-app/src/login/login.component.tsx b/packages/apps/esm-login-app/src/login/login.component.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import classNames from 'classnames';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Button, InlineLoading, InlineNotification, PasswordInput, TextInput, Tile } from '@carbon/react';
 import { ArrowLeft, ArrowRight } from '@carbon/react/icons';
@@ -159,21 +158,22 @@ const Login: React.FC<LoginProps> = () => {
 
   if (config.provider.type === 'basic') {
     return (
-      <div className={classNames('canvas', styles['container'])}>
-        {errorMessage && (
-          <InlineNotification
-            className={styles.errorMessage}
-            kind="error"
-            /**
-             * This comment tells i18n to still keep the following translation keys (used as value for: errorMessage):
-             * t('invalidCredentials')
-             */
-            subtitle={t(errorMessage)}
-            title={t('error', 'Error')}
-            onClick={() => setErrorMessage('')}
-          />
-        )}
+      <div className={styles.container}>
         <Tile className={styles['login-card']}>
+          {errorMessage && (
+            <div className={styles.errorMessage}>
+              <InlineNotification
+                kind="error"
+                /**
+                 * This comment tells i18n to still keep the following translation keys (used as value for: errorMessage):
+                 * t('invalidCredentials')
+                 */
+                subtitle={t(errorMessage)}
+                title={t('error', 'Error')}
+                onClick={() => setErrorMessage('')}
+              />
+            </div>
+          )}
           {showPasswordOnSeparateScreen && showPassword ? (
             <div className={styles['back-button-div']}>
               <Button

diff --git a/packages/apps/esm-login-app/src/login/login.scss b/packages/apps/esm-login-app/src/login/login.scss
@@ -138,9 +138,9 @@
 }
 
 .errorMessage {
-  position: absolute;
-  top: 0;
-  margin-top: 0.25rem;
-  margin-bottom: 3rem;
   width: 23rem;
+  margin-bottom: 1rem;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
 }
diff --git a/packages/apps/esm-login-app/translations/zh.json b/packages/apps/esm-login-app/translations/zh.json
@@ -2,25 +2,26 @@
   "back": "返回",
   "change": "更改",
   "confirm": "确认",
-  "contactAdmin": "联系管理员",
   "continue": "继续",
   "error": "错误",
-  "found": "已找到",
+  "errorLoadingLoginLocations": "Error loading login locations",
   "invalidCredentials": "用户名或密码无效",
   "loading": "加载中",
-  "locationNotFound": "对不起，未找到匹配的地点。",
-  "locations": "地点",
+  "locationPreferenceAdded": "Selected location will be used for your next logins",
+  "locationPreferenceRemoved": "Login location preference removed",
+  "locationPreferenceUpdated": "Login location preference updated",
+  "loggingIn": "Logging in",
   "login": "登录",
   "Logout": "退出",
-  "match": "匹配",
-  "matches": "匹配",
-  "needHelp": "需要帮助？",
-  "of": "of",
+  "noResultsToDisplay": "No results to display",
   "password": "密码",
   "poweredBy": "Powered by",
+  "rememberLocationForFutureLogins": "Remember my location for future logins",
+  "removedLoginLocationPreference": "The login location preference has been removed.",
   "searchForLocation": "搜索一个地点",
+  "selectedLocationPreferenceSetMessage": "You can change your preference from the user menu",
   "selectYourLocation": "选择您的地点。使用搜索栏搜索。",
-  "showing": "显示",
+  "submitting": "Submitting",
   "username": "用户名",
   "validValueRequired": "需要一个有效的值",
   "welcome": "欢迎"

diff --git a/packages/shell/esm-app-shell/src/service-worker/noop.ts b/packages/shell/esm-app-shell/src/service-worker/noop.ts
@@ -1,23 +1,23 @@
 self.__WB_DISABLE_DEV_LOGS = true;
 const wbManifest = self.__WB_MANIFEST;
 
-self.addEventListener("message", () => {});
+self.addEventListener('message', () => {});
 
-self.addEventListener("install", () => {
+self.addEventListener('install', () => {
   // Skip over the "waiting" lifecycle state, to ensure that our
   // new service worker is activated immediately, even if there's
   // another tab open controlled by our older service worker code.
   self.skipWaiting();
 });
 
-self.addEventListener("activate", () => {
+self.addEventListener('activate', () => {
   // Optional: Get a list of all the current open windows/tabs under
   // our service worker's control, and force them to reload.
   // This can "unbreak" any open windows/tabs as soon as the new
   // service worker activates, rather than users having to manually reload.
   self.clients
     .matchAll({
-      type: "window",
+      type: 'window',
     })
     .then((windowClients) => {
       windowClients.forEach((windowClient) => {