Skip to content

feat(ff): implement admin form editor - #110

Merged
frozencodx merged 34 commits into
mainfrom
feat/admin-form-editor
Mar 17, 2026
Merged

feat(ff): implement admin form editor#110
frozencodx merged 34 commits into
mainfrom
feat/admin-form-editor

Conversation

@frozencodx

@frozencodx frozencodx commented Mar 8, 2026

Copy link
Copy Markdown
Contributor

What does this PR do?

Implements an admin-only form editor for the form frontend.

Admins can:

  • list existing forms
  • create new forms
  • edit form metadata and fields
  • toggle form active state
  • delete forms

The editor includes a visual field builder and a preview mode that reuses the existing FieldRenderer component to match the FormSubmissionPage UI.

All create/update operations produce payloads compliant with the backend FormCreate schema.


Key Features

  • Admin form list page (/admin/forms)
  • Form creation page (/admin/forms/new)
  • Form editing page (/admin/forms/:formId/edit)
  • Field builder with:
    • add / remove fields
    • reorder fields
    • configure field properties
  • Preview mode using the existing FieldRenderer

Related Issue

Closes #103

Checklist

  • Code follows project conventions
  • I tested my changes locally
  • Linting passes
  • I updated/added tests for my changes
  • I added @seberatolmez or @DogukanUrker as reviewers

…dmin authentication hooks

- Implemented FormFieldList component for managing form fields.
- Created useAdminAuth hook for admin authentication with session storage.
- Developed useForms hook to fetch and manage forms with pagination.
- Added AdminFormListPage for displaying and managing forms with delete functionality.
- Created FormEditorPage for creating and editing forms with field management.
- Added `react-globe.gl` dependency for globe visualization.
- Created `GlobeBackground` component to render a globe with decorative points representing the GDG community.
- Introduced `PageWithGlobe` component to wrap the home page content with the globe background.
- Updated `App.tsx` to use `PageWithGlobe` for the home page layout.
- Modified global styles to enhance the appearance of the globe and page content.
- Added new dependencies for 3D rendering: @react-three/drei, @react-three/fiber, @react-three/postprocessing, and three.
- Replaced PageWithGlobe component with CyberGlobe and CyberCard components in App.tsx.
- Created CyberGlobe component for rendering a dynamic 3D globe with various visual effects.
- Created CyberCard component for displaying a styled card with entrance animation and status indicators.
- Updated global styles to change background color.
- Added index file to export CyberGlobe and CyberCard components for easier imports.
- Deleted PageWithGlobe, CyberCard, CyberGlobe, continentOutlines, and index files from cyber-globe component.
- Introduced a new LoginCard component for the home page with a clean UI.
- Updated global styles in index.css for better aesthetics and added fade-in animation.
- Modified vite.config.ts for build optimizations and removed sourcemaps.
…ualization

- Replaced NetworkGlobe with NetworkSphere for enhanced performance and features.
- Implemented mouse interaction and dynamic connection lines between nodes.
- Added 30fps animation limiter and tab visibility detection.
- Improved mobile handling with fallback options.
- Enhanced LoginCard design with gradient glow effects and modern aesthetics.
- Deleted the NetworkBackground and NetworkSphere components to streamline the codebase.
- Removed the PillButton component and its associated styles, as well as the LoginCard component.
- Updated App.tsx to remove references to the deleted components and redirect the home route to the admin panel.
- Cleaned up package.json by removing unnecessary dependencies related to the deleted components.
@vercel

vercel Bot commented Mar 8, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
gdg-yu-form-service Ready Ready Preview, Comment Mar 12, 2026 6:21pm
gdg-yu-forms Ready Ready Preview, Comment Mar 12, 2026 6:21pm
gdg-yu-user-service Ready Ready Preview, Comment Mar 12, 2026 6:21pm

- Added `role` and `aria-label` attributes to icons in DatePicker for better accessibility.
- Refactored FieldEditorCard to improve code readability and maintainability, including restructuring validation fields and toggles.
- Updated FieldTypeSelect component for better prop handling and accessibility.
- Improved PhoneMockup component structure and added aria-hidden attributes for better accessibility.
- Enhanced FormEditorPage layout and accessibility, ensuring proper labeling and structure for form fields.
- Introduced biome.json for Biome configuration.
@seberatolmez

Copy link
Copy Markdown
Member

ci checks are failing

@seberatolmez

Copy link
Copy Markdown
Member

Great progress @frozencodx — most of the previous review items are properly addressed. Two blockers remain before this pr can merge.

❌ Blockers

1. Real API token committed to the repository

services/form/app/config.py:

ADMIN_API_TOKEN: str = "9374c8c7ab72df4d04b904a0e02acb00ec74b84474514fe301d9ccc259bc8eb0"

services/form/.env.example:

ADMIN_API_TOKEN=9374c8c7ab72df4d04b904a0e02acb00ec74b84474514fe301d9ccc259bc8eb0

The token is now publicly visible in the repo history. Two fixes needed:

  • config.py: Remove the default entirely so a missing .env causes a startup error rather than silently using a known-compromised token:
    ADMIN_API_TOKEN: str  # no default — must be set via .env
  • .env.example: Replace the real value with a placeholder:
    ADMIN_API_TOKEN=your-secure-random-token-here
    

Also rotate the token itself — since it's already public, the current value should be considered compromised.

2. CI is failing — Biome schema/version mismatch

biome.json and frontend/biome.json both declare:

"$schema": "https://biomejs.dev/schemas/2.4.6/schema.json"

But package.json installs:

"@biomejs/biome": "^2.3.11"

The installed version doesn't satisfy the 2.4.x schema, which is why linting CI is red. Fix: bump the devDependency to ^2.4.6 and regenerate the lockfile with bun install, or downgrade both schema references back to 2.3.x.


(quick fix, worth doing before merge)

deleteForm in formService.ts duplicates the auth header logic manually instead of going through authenticatedRequest like createForm and updateForm do. Any future auth header change would need to be made in two places. Simple fix:

export async function deleteForm(formId: string): Promise<void> {
  await authenticatedRequest<void>(`/forms/${encodeURIComponent(formId)}`, {
    method: "DELETE",
  });
}

@seberatolmez

seberatolmez commented Mar 12, 2026

Copy link
Copy Markdown
Member

Everything from both previous review rounds has been properly addressed. But a few things before merge this pr.
I mentioned that /views/:formId isn't under /admin/. You've moved the logic correctly but the page still isn't under /admin folder.

@seberatolmez seberatolmez Mar 12, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Why you didn't use tailwind rather than an extra css file

@seberatolmez

Copy link
Copy Markdown
Member

One optional note for a follow-up: AdminPasswordGate currently lets any non-empty string unlock the UI (real auth happens on the first API call). If you want immediate feedback for a wrong token, consider a lightweight preflight request on the "Panele Gir" action. However, this is not a blocker for this PR.

@seberatolmez seberatolmez left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

you've done a great job @frozencodx . Looks fine to me, you can merge after @DogukanUrker 's approval.

@frozencodx
frozencodx merged commit 3ba7be0 into main Mar 17, 2026
8 checks passed
@frozencodx
frozencodx deleted the feat/admin-form-editor branch March 17, 2026 19:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(ff): implement admin form editor

3 participants