Update Read Me & Bugs Fix on WindowPopup

package.json

@@ -1,5 +1,6 @@
 {
   "name": "lara",
+  "version": "0.0.0",
   "private": true,
   "license": "MIT",
   "workspaces": {

packages/backend/.eslintrc.js

@@ -3,5 +3,11 @@ module.exports = {
   rules: {
     '@typescript-eslint/explicit-function-return-type': 'off',
     'react/prop-types': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
   },
 }

packages/components/src/text-time-input.tsx

@@ -9,6 +9,7 @@ interface WrapperProps extends FlexProps {
   readonly focused: boolean
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const StyledTextTimeInputWrapper = styled(({ focused, ...rest }: WrapperProps) => (
   <StyledEntryValueWrapper {...rest} />
 ))<WrapperProps>`

packages/frontend/src/components/ms-sign-in-button.tsx

@@ -1,11 +1,12 @@
-import React, { ButtonHTMLAttributes } from 'react'
+import React, { ButtonHTMLAttributes, useState } from 'react'
 import AppHistory from '../app-history'
 import { PrimaryButton } from './button'
 import { useMsal } from '@azure/msal-react'
 import { loginRequest } from '../hooks/ms-auth'
 import { useAuthentication } from '../hooks/use-authentication'
 import { useLoginPageLoginMutation } from '../graphql'
 import { useIsAuthenticated } from '@azure/msal-react'
+import { EventMessage, EventType, PopupEvent } from '@azure/msal-browser'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   fullsize?: boolean
@@ -17,9 +18,26 @@ export const SignInButton: React.FunctionComponent<ButtonProps> = () => {
   const [mutate] = useLoginPageLoginMutation()
   const isAuthenticated = useIsAuthenticated()
 
+  const [popupWindow, setPopupWindow] = useState<Window | null>(null)
+
   const handleLogin = async () => {
-    const loginResponse = await instance.loginPopup(loginRequest)
     if (isAuthenticated) {
+      AppHistory.getInstance().push('/')
+    }
+
+    if (popupWindow) {
+      popupWindow.focus()
+      return
+    }
+
+    instance.addEventCallback((message: EventMessage) => {
+      if (message.eventType === EventType.POPUP_OPENED) {
+        setPopupWindow((message.payload as PopupEvent).popupWindow)
+      }
+    })
+
+    try {
+      const loginResponse = await instance.loginPopup(loginRequest)
       const email = loginResponse.account?.username
       if (email) {
         mutate({ variables: { email } })
@@ -34,6 +52,10 @@ export const SignInButton: React.FunctionComponent<ButtonProps> = () => {
             console.log(err)
           })
       }
+    } catch (error) {
+      console.log(error)
+    } finally {
+      setPopupWindow(null)
     }
   }
   return <PrimaryButton onClick={() => handleLogin()}>Sign in with Microsoft</PrimaryButton>

readme.md

@@ -8,7 +8,19 @@ Lara is a tool for writing your "Berichtsheft" digitally. In Germany all trainee
 
 ### Prerequisites
 
-In order to run the project we need `node=18` installed.
+To run the project, ensure the following are installed:
+
+1. Node.js (version 18)
+2. Yarn
+   - Install Yarn globally using
+   ```bash
+   npm install --global yarn
+   ```
+3. Java
+   - Install Java using Homebrew
+   ```bash
+   brew install --cask temurin
+   ```
 
 ## 🛠 Under the hood
 
@@ -184,6 +196,11 @@ The following variables can be added to your cloned version of Lara.
 - TEST_TRAINER_ID
   - ID of test trainer on the staging environment for e2e tests. If not provided e2e tests are skipped.
 
+### For local Environment variables (add these extra two lines)
+
+- AWS_ACCESS_KEY_ID=S3RVER
+- AWS_SECRET_ACCESS_KEY=S3RVER
+
 ### NEW AWS SETUP
 
 #### IAM User

serverless.yml

@@ -17,7 +17,7 @@ plugins:
   - serverless-jetpack
   - serverless-iam-roles-per-function
   - serverless-dynamodb
-  - serverless-s3-sync
+  # - serverless-s3-sync
   - serverless-s3-local
   - serverless-offline