Ved at klikke ”Log in” accepterer du truckwash.io terms of service og privacy policy
+
+
+
+
{{ $t('auth.driver_entry_intro') }}
+
+
+ {{ $t('auth.driver_login_button') }}
+
+
@@ -66,6 +81,45 @@ const { hasPendingStoredSession } = useStoredSessionGuestRedirect();
}
/* end hero*/
+/* Driver entry: secondary block below the customer login form, with a distinct
+ background tint so it doesn't compete with the primary customer login but
+ remains clearly reachable from any viewport. */
+.driver-entry {
+ margin-top: 28px;
+ padding: 18px 22px;
+ background-color: #F2F8FC;
+ border: 1px solid #BFE0EF;
+ border-radius: 12px;
+ max-width: 420px;
+ width: 100%;
+ text-align: center;
+}
+.driver-entry__intro {
+ color: #13324C;
+ font-size: 14px;
+ margin: 0 0 10px 0;
+}
+.driver-entry .driver-login-link {
+ background-color: #1584BC;
+ color: #fff;
+ border: 0;
+ border-radius: 30px;
+ min-height: 43px;
+ font-size: 16px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 0 20px;
+ text-decoration: none;
+}
+.driver-entry .driver-login-link:hover { background-color: #1a99d6; color: #fff; }
+
+@media (max-width: 768px) {
+ .driver-entry { padding: 14px 16px; }
+ .driver-entry .driver-login-link { width: 100%; }
+}
+
/* stary hero*/
.text-image-section{
padding: 70px 0;
diff --git a/tests/e2e/driverAuth.spec.ts b/tests/e2e/driverAuth.spec.ts
new file mode 100644
index 00000000..3fe48d0f
--- /dev/null
+++ b/tests/e2e/driverAuth.spec.ts
@@ -0,0 +1,70 @@
+import { expect, test } from "@playwright/test";
+
+/**
+ * E2E coverage for sub-user (driver) authentication discoverability.
+ *
+ * Background: drivers could only reach /login/driver via the direct URL. This
+ * suite verifies that:
+ * - /login shows a clearly-clickable driver login entry on every viewport.
+ * - / (landing) shows a driver login entry as a secondary block.
+ * - Clicking either entry navigates to /login/driver and the form is usable
+ * on mobile (form inputs reachable, submit button visible).
+ */
+
+test.describe("[AUTH][Driver] discoverability", () => {
+ test("/login surfaces the driver login button on desktop and mobile", async ({ page }, testInfo) => {
+ await page.goto("/login");
+
+ // The driver entry point is mounted by LoginForm.vue.
+ const driverLink = page.getByTestId("driver-login-link");
+ await expect(driverLink).toBeVisible();
+
+ // Sanity: it points at the driver login route.
+ await expect(driverLink).toHaveAttribute("href", /\/login\/driver/);
+
+ // Mobile viewport: the button is still in the viewport (no horizontal scroll,
+ // tappable height >= 36px).
+ if (testInfo.project.name.includes("mobile")) {
+ const box = await driverLink.boundingBox();
+ expect(box).not.toBeNull();
+ expect(box!.height).toBeGreaterThanOrEqual(36);
+ const viewport = page.viewportSize()!;
+ expect(box!.x + box!.width).toBeLessThanOrEqual(viewport.width);
+ }
+ });
+
+ test("/ surfaces the driver entry block with a working button", async ({ page }) => {
+ await page.goto("/");
+
+ const entry = page.getByTestId("landing-driver-entry");
+ await expect(entry).toBeVisible();
+
+ const link = page.getByTestId("landing-driver-login-link");
+ await expect(link).toBeVisible();
+ await expect(link).toHaveAttribute("href", /\/login\/driver/);
+ });
+
+ test("clicking the driver login entry navigates to /login/driver and the form is usable", async ({
+ page,
+ }, testInfo) => {
+ await page.goto("/login");
+ await page.getByTestId("driver-login-link").click();
+
+ await expect(page).toHaveURL(/\/login\/driver/);
+
+ // The driver form mounts the phone + username method selector; both inputs
+ // and the login button should be reachable in the viewport.
+ await expect(page.locator("#subuser_login_method_phone_button")).toBeVisible();
+ await expect(page.locator("#subuser_login_method_username_button")).toBeVisible();
+ await expect(page.locator("#subuser-login-button")).toBeVisible();
+
+ if (testInfo.project.name.includes("mobile")) {
+ // The login button must be in the viewport on mobile so a driver with one
+ // hand can tap it without scrolling.
+ const box = await page.locator("#subuser-login-button").boundingBox();
+ expect(box).not.toBeNull();
+ const viewport = page.viewportSize()!;
+ expect(box!.y + box!.height).toBeLessThanOrEqual(viewport.height);
+ }
+ });
+});