Skip to content

Add PrintQR page and route for PrintQR page #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GilHeller merged 9 commits into from
Jun 9, 2026
Merged

Add PrintQR page and route for PrintQR page #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5959861
Create test to select
rotemergty5 May 25, 2026
50f9bf2
Fix SGLSelect tests
rotemergty5 Jun 1, 2026
6dc6e8a
Add PrintQR page
rotemergty5 Jun 2, 2026
015e5ad
Add PrintQR page and route for PrintQR
rotemergty5 Jun 2, 2026
28f4125
Revert "Fix SGLSelect tests"
rotemergty5 Jun 6, 2026
e660153
Revert "Create test to select"
rotemergty5 Jun 6, 2026
2a7c0e9
Fix PrintQR PR comments
rotemergty5 Jun 8, 2026
fd1b9f0
Use QRGeneration component in PrintQR
rotemergty5 Jun 9, 2026
51d3466
mock variables
rotemergty5 Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@ import { Login } from './pages/login/Login.tsx'
import { ProtectedRoute } from './components/ProtectedRoute/ProtectedRoute.tsx'
import { Navigate } from 'react-router-dom'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { PrintQR } from './pages/QRPrint/PrintQR.tsx'

const queryClient = new QueryClient()

const router = createBrowserRouter([
{ path: '/', element: <Navigate to="/login" replace /> },
{ path: '/login', element: <Login /> },
{ path: '/printQR', element: <PrintQR /> },

@coderabbitai coderabbitai Bot Jun 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

/printQR is publicly accessible.

This route is registered alongside /login, outside the ProtectedRoute block (Lines 26–40), so it is reachable without authentication. Since PrintQR displays a patient number and password, this exposes sensitive data to anonymous users. If this page should require auth, move it under the ProtectedRoute children.

Proposed change 
-  { path: '/printQR', element: <PrintQR /> },
   {
     element: <ProtectedRoute />,
     children: [
       {
         path: '/',
         element: <MainLayout />,
         children: [
           { path: 'home', element: <Home /> },
           { path: 'schedule', element: <Schedule /> },
           { path: 'lifeStyle', element: <LifeStyle /> },
           { path: 'dailyReports', element: <DailyReports /> },
+          { path: 'printQR', element: <PrintQR /> },
         ],
       },
     ],
   },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{ path: '/printQR', element: <PrintQR /> },
{
element: <ProtectedRoute />,
children: [
{
path: '/',
element: <MainLayout />,
children: [
{ path: 'home', element: <Home /> },
{ path: 'schedule', element: <Schedule /> },
{ path: 'lifeStyle', element: <LifeStyle /> },
{ path: 'dailyReports', element: <DailyReports /> },
{ path: 'printQR', element: <PrintQR /> },
],
},
],
},
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/main.tsx` at line 25, The /printQR route is registered publicly (path:
'/printQR', element: <PrintQR />) and exposes sensitive patient credentials;
move this route into the ProtectedRoute children (or wrap its element with the
same authentication guard used by ProtectedRoute) so PrintQR is only reachable
after authentication. Locate the routes array where ProtectedRoute is defined
and add the '/printQR' entry alongside the other protected child routes (or
replace its element with <ProtectedRoute><PrintQR/></ProtectedRoute>) to enforce
auth.

{
element: <ProtectedRoute />,
children: [
Expand Down
32 changes: 32 additions & 0 deletions src/pages/QRPrint/PrintQR.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { SGLCard } from '../../components/UI/Card/SGLCard'
import { SGLButton } from '../../components/UI/Button/SGLButton'
import { SGLTypography } from '../../components/UI/Typography/SGLTypography'
import { QRGeneration } from '../login/QRLogin/QRGeneration.tsx'
import { useTranslation } from 'react-i18next'
import * as styles from './styles'

export const PrintQR = () => {
const { t } = useTranslation()

const MOCK_PATIENT_NUMBER = '123456'
const MOCK_PASSWORD = 'add123'

const MOCK_TOKEN = 'mock-token'

return (
<div style={styles.pageContainer}>
<div style={styles.cardContainer}>
<SGLCard>
<div style={styles.containerStyle}>
<QRGeneration token={MOCK_TOKEN} />
<SGLTypography styles={styles.textStyle}>{MOCK_PATIENT_NUMBER}</SGLTypography>

<SGLTypography styles={styles.textStyle}>{MOCK_PASSWORD}</SGLTypography>

<SGLButton styles={styles.submitButtonContent}>{t('login.login')}</SGLButton>
</div>
</SGLCard>
</div>
</div>
)
}
39 changes: 39 additions & 0 deletions src/pages/QRPrint/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { theme } from '@/theme'
import type { CSSProperties } from '@mui/material'

export const pageContainer: CSSProperties = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '100vh',
width: '100%',
}

export const cardContainer: CSSProperties = {
width: '400px',
}
Comment on lines +12 to +14

@coderabbitai coderabbitai Bot Jun 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Make the card responsive on narrow screens.

width: '400px' can cause horizontal overflow on mobile widths below 400px. Keep the target size but cap it responsively.

Proposed fix 
 export const cardContainer: CSSProperties = {
-  width: '400px',
+  width: '400px',
+  maxWidth: '100%',
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const cardContainer: CSSProperties = {
width: '400px',
}
export const cardContainer: CSSProperties = {
width: '400px',
maxWidth: '100%',
}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/QRPrint/styles.ts` around lines 12 - 14, The cardContainer style
currently forces width: '400px' which overflows on narrow screens; update the
cardContainer CSSProperties (the exported cardContainer object) to use a
responsive sizing pattern such as width: '100%' with maxWidth: '400px' and
include boxSizing: 'border-box' so the element scales down on small viewports
while keeping the 400px target on larger screens.


export const containerStyle: CSSProperties = {
width: '335px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '1rem',
padding: '2rem',
}

export const textStyle: CSSProperties = {
fontSize: '1.3rem',
fontWeight: 'bold',
color: theme.palette.common.white,
}

export const submitButtonContent: CSSProperties = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
fontWeight: 'bold',
fontSize: '1rem',
padding: '0.5rem',
}
Loading