feat: authentication with OAuth

features/page-title.feature

@@ -0,0 +1,57 @@
+Feature: Page Title Management
+  As a user navigating the Tímmál application
+  I want page titles to update based on the current page
+  So that I can identify which page I'm on from the browser tab
+
+  Background:
+    Given the page title system is initialized
+
+  Scenario: Default page title on application load
+    When I first load the application
+    Then the page title should be "Tímmál"
+
+  Scenario: Setting a page name updates the title
+    When I navigate to the "Dashboard" page
+    Then the page title should be "Dashboard - Tímmál"
+
+  Scenario: Changing between different pages
+    When I navigate to the "Dashboard" page
+    Then the page title should be "Dashboard - Tímmál"
+    When I navigate to the "Projects" page
+    Then the page title should be "Projects - Tímmál"
+    When I navigate to the "Reports" page
+    Then the page title should be "Reports - Tímmál"
+
+  Scenario: Clearing page name returns to default
+    Given I am on the "Settings" page
+    And the page title is "Settings - Tímmál"
+    When I clear the page name
+    Then the page title should be "Tímmál"
+
+  Scenario: Page title with special characters
+    When I navigate to the "Reports & Analytics" page
+    Then the page title should be "Reports & Analytics - Tímmál"
+
+  Scenario: Page title with unicode characters
+    When I navigate to the "Paramètres" page
+    Then the page title should be "Paramètres - Tímmál"
+
+  Scenario: Multiple users share the same page title state
+    Given user "Alice" sets the page name to "Dashboard"
+    When user "Bob" checks the page title
+    Then user "Bob" should see "Dashboard - Tímmál"
+
+  Scenario Outline: Various page names
+    When I navigate to the "<page_name>" page
+    Then the page title should be "<expected_title>"
+
+    Examples:
+      | page_name           | expected_title                    |
+      | Dashboard           | Dashboard - Tímmál                |
+      | Projects            | Projects - Tímmál                 |
+      | Tasks               | Tasks - Tímmál                    |
+      | Reports             | Reports - Tímmál                  |
+      | Settings            | Settings - Tímmál                 |
+      | Profile             | Profile - Tímmál                  |
+      | Time Tracking       | Time Tracking - Tímmál            |
+      | User Management     | User Management - Tímmál          |

features/step_definitions/page-title.steps.mjs

@@ -0,0 +1,98 @@
+import { Given, When, Then, Before } from '@cucumber/cucumber';
+import { expect } from 'chai';
+
+// Shared state (simulating useState behavior)
+const sharedState = { pageName: '' };
+
+// Simple mock of usePageTitle behavior for Cucumber tests
+// This simulates the useState() sharing behavior
+const createPageTitleMock = () => {
+  return {
+    get title() {
+      return {
+        get value() {
+          return sharedState.pageName.length > 0 ? `${sharedState.pageName} - Tímmál` : 'Tímmál';
+        },
+      };
+    },
+    get pageName() {
+      return {
+        get value() {
+          return sharedState.pageName;
+        },
+      };
+    },
+    setPageName(newName) {
+      sharedState.pageName = newName;
+    },
+  };
+};
+
+// Instance for step definitions
+let pageTitleInstance;
+const userInstances = new Map();
+
+Before(function () {
+  // Reset shared state before each scenario
+  sharedState.pageName = '';
+  userInstances.clear();
+  pageTitleInstance = null;
+});
+
+Given('the page title system is initialized', function () {
+  pageTitleInstance = createPageTitleMock();
+  pageTitleInstance.setPageName('');
+});
+
+When('I first load the application', function () {
+  pageTitleInstance = createPageTitleMock();
+});
+
+When('I navigate to the {string} page', function (pageName) {
+  if (!pageTitleInstance) {
+    pageTitleInstance = createPageTitleMock();
+  }
+  pageTitleInstance.setPageName(pageName);
+});
+
+When('I clear the page name', function () {
+  pageTitleInstance.setPageName('');
+});
+
+Given('I am on the {string} page', function (pageName) {
+  if (!pageTitleInstance) {
+    pageTitleInstance = createPageTitleMock();
+  }
+  pageTitleInstance.setPageName(pageName);
+});
+
+Given('the page title is {string}', function (expectedTitle) {
+  expect(pageTitleInstance.title.value).to.equal(expectedTitle);
+});
+
+Given('user {string} sets the page name to {string}', function (userName, pageName) {
+  let userInstance = userInstances.get(userName);
+  if (!userInstance) {
+    userInstance = createPageTitleMock();
+    userInstances.set(userName, userInstance);
+  }
+  userInstance.setPageName(pageName);
+});
+
+When('user {string} checks the page title', function (userName) {
+  let userInstance = userInstances.get(userName);
+  if (!userInstance) {
+    userInstance = createPageTitleMock();
+    userInstances.set(userName, userInstance);
+  }
+});
+
+Then('the page title should be {string}', function (expectedTitle) {
+  expect(pageTitleInstance.title.value).to.equal(expectedTitle);
+});
+
+Then('user {string} should see {string}', function (userName, expectedTitle) {
+  const userInstance = userInstances.get(userName);
+  expect(userInstance).to.not.be.undefined;
+  expect(userInstance.title.value).to.equal(expectedTitle);
+});

features/step_definitions/page-title.steps.ts

@@ -0,0 +1,72 @@
+import { Given, When, Then, Before } from '@cucumber/cucumber';
+import { expect } from 'vitest';
+import { usePageTitle } from '../../app/composables/usePageTitle';
+
+// Store the composable instance
+let pageTitleInstance: ReturnType<typeof usePageTitle>;
+let userInstances: Map<string, ReturnType<typeof usePageTitle>>;
+
+Before(function () {
+  // Reset before each scenario
+  userInstances = new Map();
+});
+
+Given('the page title system is initialized', function () {
+  pageTitleInstance = usePageTitle();
+  // Reset to default state
+  pageTitleInstance.setPageName('');
+});
+
+When('I first load the application', function () {
+  pageTitleInstance = usePageTitle();
+});
+
+When('I navigate to the {string} page', function (pageName: string) {
+  if (!pageTitleInstance) {
+    pageTitleInstance = usePageTitle();
+  }
+  pageTitleInstance.setPageName(pageName);
+});
+
+When('I clear the page name', function () {
+  pageTitleInstance.setPageName('');
+});
+
+Given('I am on the {string} page', function (pageName: string) {
+  if (!pageTitleInstance) {
+    pageTitleInstance = usePageTitle();
+  }
+  pageTitleInstance.setPageName(pageName);
+});
+
+Given('the page title is {string}', function (expectedTitle: string) {
+  expect(pageTitleInstance.title.value).toBe(expectedTitle);
+});
+
+Given('user {string} sets the page name to {string}', function (userName: string, pageName: string) {
+  let userInstance = userInstances.get(userName);
+  if (!userInstance) {
+    userInstance = usePageTitle();
+    userInstances.set(userName, userInstance);
+  }
+  userInstance.setPageName(pageName);
+});
+
+When('user {string} checks the page title', function (userName: string) {
+  let userInstance = userInstances.get(userName);
+  if (!userInstance) {
+    userInstance = usePageTitle();
+    userInstances.set(userName, userInstance);
+  }
+  // Just store the instance, we'll check in Then step
+});
+
+Then('the page title should be {string}', function (expectedTitle: string) {
+  expect(pageTitleInstance.title.value).toBe(expectedTitle);
+});
+
+Then('user {string} should see {string}', function (userName: string, expectedTitle: string) {
+  const userInstance = userInstances.get(userName);
+  expect(userInstance).toBeDefined();
+  expect(userInstance!.title.value).toBe(expectedTitle);
+});