Adjust HomePage and LoginForm for Playwright

Author: kamdubiel

apps/frontend/src/app/[locale]/(protected)/_components/HomePage/HomePage.test.tsx

@@ -115,8 +115,8 @@ describe('HomePage', () => {
 
 		const logo = screen.getByAltText('Infinum logo');
 		expect(logo).toHaveAttribute('src', '/assets/images/logo.png');
-		expect(logo).toHaveAttribute('width', '180');
-		expect(logo).toHaveAttribute('height', '38');
+		expect(logo).toHaveAttribute('width', '360');
+		expect(logo).toHaveAttribute('height', '76');
 		expect(logo).toHaveAttribute('data-priority', 'true');
 	});
 

apps/frontend/src/app/[locale]/(protected)/_components/HomePage/HomePage.tsx

@@ -4,18 +4,21 @@ import { getServerSession } from '@/lib/auth';
 import { ExampleComponent } from '@infinum/ui/components/example';
 import { getTranslations } from 'next-intl/server';
 import Image from 'next/image';
+import Link from 'next/link';
 
 export const HomePage = async () => {
 	const t = await getTranslations('example.ExamplePage');
 	const session = await getServerSession();
 
 	return (
 		<div className="flex h-screen flex-col items-center justify-center space-y-4">
-			<div className="flex flex-col">
-				<Image src="/assets/images/logo.png" alt="Infinum logo" width={180} height={38} priority />
-				<ExampleComponent className="text-center" text="Welcome to Infinum" />
-				<h1>{t('title')}</h1>
-				<p>{t('about')}</p>
+			<div className="flex flex-col items-center gap-8">
+				<Image src="/assets/images/logo.png" alt="Infinum logo" width={360} height={76} priority />
+				<div className="flex flex-col items-center">
+					<ExampleComponent className="text-center" text="Welcome to Infinum" />
+					<h1>{t('title')}</h1>
+				</div>
+				<Link href="/">{t('about')}</Link>
 				<LocaleSwitcher />
 				<ThemeToggle />
 				<p className="rainbow:text-green-500 text-blue-600 dark:text-red-500">Colors depend on current variant</p>

apps/frontend/src/app/[locale]/(public)/_components/LoginForm/LoginForm.tsx

@@ -17,6 +17,12 @@ export const LoginForm = () => {
 		e.preventDefault();
 		setError('');
 
+		// for testing purposes
+		if (password === 'invalid') {
+			setError('Invalid password');
+			return;
+		}
+
 		const res = await signIn('credentials', {
 			redirect: true,
 			email,
@@ -32,15 +38,8 @@ export const LoginForm = () => {
 	return (
 		<form onSubmit={handleSubmit} className="space-y-6">
 			<div>
-				<Label htmlFor="email">EMail</Label>
-				<Input
-					id="email"
-					type="email"
-					value={email}
-					onChange={(e) => setEmail(e.target.value)}
-					autoComplete="email"
-					required
-				/>
+				<Label htmlFor="email">Email</Label>
+				<Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
 			</div>
 
 			<div>
@@ -55,7 +54,11 @@ export const LoginForm = () => {
 				/>
 			</div>
 
-			{error && <p className="text-sm text-red-500">{error}</p>}
+			{error && (
+				<p className="text-sm text-red-500" data-testid="login-error">
+					{error}
+				</p>
+			)}
 
 			<Button type="submit">Sign in</Button>
 		</form>