testeranto 0.200.0 → 0.202.0

package/src/components/pure/Settings.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Settings } from './Settings';
+
+// Mock the tutorial mode context
+jest.mock('../../App', () => ({
+  useTutorialMode: () => ({
+    tutorialMode: false,
+    setTutorialMode: jest.fn()
+  })
+}));
+
+test('renders settings page', () => {
+  render(<Settings />);
+  const themeLabel = screen.getByText(/Theme/i);
+  expect(themeLabel).toBeInTheDocument();
+});
+
+test('renders theme options', () => {
+  render(<Settings />);
+  const lightModeOption = screen.getByLabelText(/Light Mode/i);
+  const darkModeOption = screen.getByLabelText(/Dark Mode/i);
+  const autoModeOption = screen.getByLabelText(/Auto/i);
+  
+  expect(lightModeOption).toBeInTheDocument();
+  expect(darkModeOption).toBeInTheDocument();
+  expect(autoModeOption).toBeInTheDocument();
+});
+
+test('renders tutorial mode switch', () => {
+  render(<Settings />);
+  const tutorialModeSwitch = screen.getByLabelText(/Tutorial Mode: OFF/i);
+  expect(tutorialModeSwitch).toBeInTheDocument();
+});

package/src/components/pure/Settings.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from "react";
+import { Form, Container, Row, Col, Card, Button } from "react-bootstrap";
+import { useTutorialMode, useAuth } from "../../App";
+import { GitHubLoginButton } from "./GitHubLoginButton";
+import { githubAuthService } from "../../services/GitHubAuthService";
+
+export const Settings = () => {
+  const [theme, setTheme] = useState<"light" | "dark" | "auto">("auto");
+  const { tutorialMode, setTutorialMode } = useTutorialMode();
+  const { isAuthenticated, logout } = useAuth();
+
+  useEffect(() => {
+    // Load saved theme from localStorage
+    const savedTheme = localStorage.getItem("theme") as
+      | "light"
+      | "dark"
+      | "auto"
+      | null;
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Apply theme when it changes
+    applyTheme(theme);
+    // Save to localStorage
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const applyTheme = (selectedTheme: "light" | "dark" | "auto") => {
+    const root = document.documentElement;
+
+    if (selectedTheme === "auto") {
+      // Use system preference
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        root.setAttribute("data-bs-theme", "dark");
+      } else {
+        root.setAttribute("data-bs-theme", "light");
+      }
+    } else {
+      root.setAttribute("data-bs-theme", selectedTheme);
+    }
+  };
+
+  const handleThemeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTheme(event.target.value as "light" | "dark" | "auto");
+  };
+
+  const handleTutorialModeChange = () => {
+    const newTutorialMode = !tutorialMode;
+    setTutorialMode(newTutorialMode);
+    // Save to localStorage
+    localStorage.setItem("tutorialMode", newTutorialMode.toString());
+  };
+
+
+  return (
+    <Container>
+      <Row>
+        <Col md={8} lg={6}>
+          <Card>
+            <Card.Header>
+              <h5 className="mb-0">Appearance</h5>
+            </Card.Header>
+            <Card.Body>
+              <Form>
+                <Form.Group className="mb-4">
+                  <div>
+                    <Form.Check
+                      type="radio"
+                      id="theme-light"
+                      name="theme"
+                      value="light"
+                      label="Light mode"
+                      checked={theme === "light"}
+                      onChange={handleThemeChange}
+                    />
+                    <Form.Check
+                      type="radio"
+                      id="theme-dark"
+                      name="theme"
+                      value="dark"
+                      label="Dark mode"
+                      checked={theme === "dark"}
+                      onChange={handleThemeChange}
+                    />
+                    <Form.Check
+                      type="radio"
+                      id="theme-auto"
+                      name="theme"
+                      value="auto"
+                      label="Auto mode. Use system setting"
+                      checked={theme === "auto"}
+                      onChange={handleThemeChange}
+                    />
+                  </div>
+                </Form.Group>
+
+                <Form.Group className="mb-4">
+                  <Form.Check
+                    type="switch"
+                    id="tutorial-mode"
+                    label={
+                      tutorialMode ? "Tutorial Mode: ON" : "Tutorial Mode: OFF"
+                    }
+                    checked={tutorialMode}
+                    onChange={handleTutorialModeChange}
+                  />
+                  <Form.Text className="text-muted">
+                    When enabled, helpful tooltips will appear throughout the
+                    app to guide you.
+                  </Form.Text>
+                </Form.Group>
+              </Form>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+
+      {/* GitHub Authentication Section */}
+      <Row className="mt-4">
+        <Col md={8} lg={6}>
+          <Card>
+            <Card.Header>
+              <h5 className="mb-0">GitHub Integration</h5>
+            </Card.Header>
+            <Card.Body>
+              {githubAuthService.isConfigured() ? (
+                isAuthenticated ? (
+                  <div>
+                    <p>Connected to GitHub</p>
+                    <div className="d-grid gap-2">
+                      <Button variant="danger" onClick={logout}>
+                        Sign Out from GitHub
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <div>
+                    <p>Connect your GitHub account to enable Git operations:</p>
+                    <GitHubLoginButton />
+                  </div>
+                )
+              ) : (
+                <div>
+                  <p className="text-danger">GitHub integration is not configured.</p>
+                  <p>To enable GitHub authentication:</p>
+                  <ol className="small">
+                    <li>Create a GitHub OAuth App at https://github.com/settings/developers</li>
+                    <li>Set Authorization callback URL to: {window.location.origin}/auth/github/callback</li>
+                    <li>Update the clientId in testeranto.config.ts</li>
+                    <li>Restart the development server</li>
+                  </ol>
+                </div>
+              )}
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  );
+};

package/src/components/pure/SignIn.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Container, Row, Col, Card } from 'react-bootstrap';
+
+import { githubAuthService } from '../../services/GitHubAuthService';
+
+import { GitHubLoginButton } from './GitHubLoginButton';
+
+
+export const SignIn = () => {
+  return (
+    <Container className="d-flex align-items-center justify-content-center min-vh-100">
+      <Row>
+        <Col md={12}>
+          <Card>
+            <Card.Header className="text-center">
+              <h3 className="mb-0">Sign In</h3>
+            </Card.Header>
+            <Card.Body className="text-center">
+              {githubAuthService.isConfigured() ? (
+                <GitHubLoginButton />
+              ) : (
+                <div>
+                  <p className="text-danger">GitHub authentication is not configured</p>
+                  <p>Please contact the administrator</p>
+                </div>
+              )}
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  );
+};