refactor(lockscreen): Refactor UserLogin and enhance macOS aesthetic

src/App.tsx

@@ -12,7 +12,14 @@ function App() {
   const handleKeyPress = useCallback(
     (event: any) => {
       if (event.key === 'F10') {
-        handle.enter();
+        try {
+          const promise = handle.enter();
+          if (promise && promise.catch) {
+            promise.catch((err: any) => console.warn('Fullscreen error:', err));
+          }
+        } catch (err) {
+          console.warn('Fullscreen error:', err);
+        }
       } else if (event.key === 'Escape') {
         handle.exit();
       }
@@ -23,7 +30,14 @@ function App() {
   useEffect(() => {
     const enterFullScreen = () => {
       if (!handle.active) {
-        handle.enter();
+        try {
+          const promise = handle.enter();
+          if (promise && promise.catch) {
+            promise.catch((err: any) => console.warn('Fullscreen error:', err));
+          }
+        } catch (err) {
+          console.warn('Fullscreen error:', err);
+        }
       }
     };
 

src/localization/locales/en/main.json

@@ -20,6 +20,8 @@
     "loginPasswordText1": "Touch ID or Enter password",
     "loginPasswordText2": "Your password is required to enable Touch ID",
     "inputPlaceholder": "Enter Password",
+    "passwordHintLabel": "Password Hint",
+    "passwordHint": "Your password is the same as your macOS user account password. If you've forgotten it, try entering your Apple ID password or use the Reset Password assistant. Please use - 'Amit'",
     "keyboard": {
       "type": "ABC - India",
       "option": {

src/screens/public/Lock/component/TimeDate.tsx

@@ -23,7 +23,14 @@ const MemoisedTimeComponent = React.memo(TimeComponent);
 const MemoisedDateComponent = React.memo(DateComponent);
 
 const TimeDateComponent = () => {
-  const { date, time } = uiStore(useShallow(dateTimeSelector));
+  const { dateObject } = uiStore(useShallow(dateTimeSelector));
+
+  const formattedDate = dateObject?.toDateString().slice(0, 10) ?? '';
+  const formattedTime = dateObject?.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  }) ?? '';
 
   return (
     <Box
@@ -36,8 +43,8 @@ const TimeDateComponent = () => {
       zIndex={0}
       aria-label="time-date-component"
     >
-      <MemoisedDateComponent date={date?.slice(0, 10) ?? ''} />
-      <MemoisedTimeComponent time={time?.slice(0, 5) ?? ''} />
+      <MemoisedDateComponent date={formattedDate} />
+      <MemoisedTimeComponent time={formattedTime} />
     </Box>
   );
 };