Skip to content

feat: add ex-register-box component and Account API endpoint #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Ross-s merged 4 commits into from
Apr 27, 2026
Merged

feat: add ex-register-box component and Account API endpoint #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
18896eb
feat: add ExRegisterBox UI component for user registration
Ross-s Apr 27, 2026
cd09667
fix: Make confirm password input functional in ExRegisterBox
Ross-s Apr 27, 2026
f49e261
feat: add register box, account controller, and dev CORS
Ross-s Apr 27, 2026
3c5ad1d
style: fix Biome formatting in ex-register-box and stencil.config
Ross-s Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions apps/api/Controllers/AccountController.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
using Microsoft.AspNetCore.Authorization;
Copy link

Copilot AI Apr 27, 2026

Choose a reason for hiding this comment

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

using Microsoft.AspNetCore.Authorization; is unused in this controller (there’s no [Authorize]/[AllowAnonymous] usage). Please remove the unused using to keep the file clean, or add the intended attribute if authorization behavior was meant to be explicit.

Suggested change
using Microsoft.AspNetCore.Authorization;

Copilot uses AI. Check for mistakes.
using Microsoft.AspNetCore.Mvc;

namespace Api.Controllers;

public record CreateAccountRequest(string Email, string Password);

public record CreateAccountResponse(int Id, string Email);


[ApiController]
[Route("api/[controller]")]
public class AccountController : ControllerBase
{
[HttpPost]
public ActionResult<CreateAccountResponse> Register(CreateAccountRequest request)
{
return this.Ok(new CreateAccountResponse(1, request.Email));
}
}
14 changes: 14 additions & 0 deletions apps/api/Program.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,15 @@
builder.WebHost.UseUrls($"http://0.0.0.0:{port}");

builder.Services.AddControllers();

if (builder.Environment.IsDevelopment())
{
builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(policy =>
policy.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
});
Comment on lines +16 to +20
Copy link

Copilot AI Apr 27, 2026

Choose a reason for hiding this comment

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

The PR description says CORS is added “to allow requests from the local Vite/Next dev servers”, but the implementation uses AllowAnyOrigin() which allows any origin in development. If the intent is to only allow local dev UIs, configure explicit WithOrigins(...) entries (and add AllowCredentials() if you expect cookie-based auth).

Copilot uses AI. Check for mistakes.
}
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen(options =>
{
Expand Down Expand Up @@ -61,6 +70,11 @@ [new OpenApiSecuritySchemeReference("Bearer", doc)] = [],
c.RoutePrefix = "api/docs";
});

if (app.Environment.IsDevelopment())
{
app.UseCors();
}

app.MapControllers();

Console.WriteLine($"Starting ExpressThat Auth API on port {port}..., http://localhost:{port}/api/docs");
Expand Down
16 changes: 6 additions & 10 deletions apps/web/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
"use client";

import { Button } from "@expressthat-auth/internal-components/button";
import { ExLoginBox, ExTestButton } from "@expressthat-auth/ui-react";
import { ExLoginBox, ExRegisterBox, ExTestButton } from "@expressthat-auth/ui-react/next";

export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
<h1 className="text-4xl font-bold text-gray-900">ExpressThat Auth</h1>
<p className="text-lg text-gray-600">Welcome to the authentication portal.</p>
<Button>Get Started</Button>
<ExTestButton
label="Click Me"
variant="outline"
onExTestClick={() => {
alert("test");
}}
/>
<ExTestButton label="Click Me" variant="outline" />

<ExLoginBox>
<p slot="social-logins">test</p>
</ExLoginBox>

<ExRegisterBox>
<p slot="social-logins">test</p>
</ExRegisterBox>
</main>
);
}
3 changes: 3 additions & 0 deletions packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"private": true,
"description": "StencilJS web component library for ExpressThat Auth",
"type": "module",
"main": "dist/index.cjs.js",
"module": "dist/components/index.js",
"collection": "dist/collection/collection-manifest.json",
Comment on lines 6 to 9
Copy link

Copilot AI Apr 27, 2026

Choose a reason for hiding this comment

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

main points to dist/index.cjs.js, but this package is "type": "module" and your exports["."] doesn’t provide a require condition. If dist/index.cjs.js is actually CommonJS output, Node/tooling may treat it as ESM (because the extension is still .js) and/or ignore it due to exports, leading to confusing resolution behavior. Consider either removing main, renaming the CJS entry to a real .cjs file, and/or adding an explicit exports["."].require/default mapping to the correct artifact.

Copilot uses AI. Check for mistakes.
"types": "dist/types/index.d.ts",
Expand Down Expand Up @@ -50,11 +51,13 @@
"check-types": "tsc --noEmit"
},
"devDependencies": {
"@expressthat-auth/api-client": "workspace:*",
"@expressthat-auth/typescript-config": "workspace:*",
"@stencil/angular-output-target": "^0.10.0",
"@stencil/core": "^4.30.0",
"@stencil/react-output-target": "^1.2.0",
"@stencil/vue-output-target": "^0.13.1",
"esbuild": "^0.28.0",
"typescript": "6.0.3"
}
}
119 changes: 119 additions & 0 deletions packages/ui/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { EXLoginBoxSubmitDetail } from "./components/ex-login-box/ex-login-box";
import { EXRegisterBoxSubmitDetail } from "./components/ex-register-box/ex-register-box";
export { EXLoginBoxSubmitDetail } from "./components/ex-login-box/ex-login-box";
export { EXRegisterBoxSubmitDetail } from "./components/ex-register-box/ex-register-box";
export namespace Components {
interface ExButton {
"colorBackground"?: string;
Expand Down Expand Up @@ -152,6 +154,34 @@ export namespace Components {
"radiusSm"?: string;
"radiusXl"?: string;
}
interface ExRegisterBox {
"colorBackground"?: string;
"colorDivider"?: string;
"colorError"?: string;
"colorInputBackground"?: string;
"colorInputBorder"?: string;
"colorInputBorderFocus"?: string;
"colorLink"?: string;
"colorPrimary"?: string;
"colorPrimaryForeground"?: string;
"colorPrimaryHover"?: string;
"colorSurface"?: string;
"colorText"?: string;
"colorTextMuted"?: string;
"fontFamily"?: string;
"fontSizeLg"?: string;
"fontSizeMd"?: string;
"fontSizeSm"?: string;
"fontSizeXl"?: string;
"fontSizeXs"?: string;
"fontWeightMedium"?: string;
"fontWeightNormal"?: string;
"fontWeightSemibold"?: string;
"radiusLg"?: string;
"radiusMd"?: string;
"radiusSm"?: string;
"radiusXl"?: string;
}
interface ExTestButton {
/**
* Whether the button is disabled.
Expand Down Expand Up @@ -182,6 +212,10 @@ export interface ExLoginBoxCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLExLoginBoxElement;
}
export interface ExRegisterBoxCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLExRegisterBoxElement;
}
export interface ExTestButtonCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLExTestButtonElement;
Expand Down Expand Up @@ -240,6 +274,24 @@ declare global {
prototype: HTMLExLoginBoxElement;
new (): HTMLExLoginBoxElement;
};
interface HTMLExRegisterBoxElementEventMap {
"exSubmit": EXRegisterBoxSubmitDetail;
"exSignIn": void;
}
interface HTMLExRegisterBoxElement extends Components.ExRegisterBox, HTMLStencilElement {
addEventListener<K extends keyof HTMLExRegisterBoxElementEventMap>(type: K, listener: (this: HTMLExRegisterBoxElement, ev: ExRegisterBoxCustomEvent<HTMLExRegisterBoxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLExRegisterBoxElementEventMap>(type: K, listener: (this: HTMLExRegisterBoxElement, ev: ExRegisterBoxCustomEvent<HTMLExRegisterBoxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLExRegisterBoxElement: {
prototype: HTMLExRegisterBoxElement;
new (): HTMLExRegisterBoxElement;
};
interface HTMLExTestButtonElementEventMap {
"exTestClick": void;
}
Expand All @@ -261,6 +313,7 @@ declare global {
"ex-button": HTMLExButtonElement;
"ex-input": HTMLExInputElement;
"ex-login-box": HTMLExLoginBoxElement;
"ex-register-box": HTMLExRegisterBoxElement;
"ex-test-button": HTMLExTestButtonElement;
}
}
Expand Down Expand Up @@ -429,6 +482,42 @@ declare namespace LocalJSX {
"radiusSm"?: string;
"radiusXl"?: string;
}
interface ExRegisterBox {
"colorBackground"?: string;
"colorDivider"?: string;
"colorError"?: string;
"colorInputBackground"?: string;
"colorInputBorder"?: string;
"colorInputBorderFocus"?: string;
"colorLink"?: string;
"colorPrimary"?: string;
"colorPrimaryForeground"?: string;
"colorPrimaryHover"?: string;
"colorSurface"?: string;
"colorText"?: string;
"colorTextMuted"?: string;
"fontFamily"?: string;
"fontSizeLg"?: string;
"fontSizeMd"?: string;
"fontSizeSm"?: string;
"fontSizeXl"?: string;
"fontSizeXs"?: string;
"fontWeightMedium"?: string;
"fontWeightNormal"?: string;
"fontWeightSemibold"?: string;
/**
* Fired when the "Sign in" link is clicked.
*/
"onExSignIn"?: (event: ExRegisterBoxCustomEvent<void>) => void;
/**
* Fired when the form is submitted; detail contains email + password.
*/
"onExSubmit"?: (event: ExRegisterBoxCustomEvent<EXRegisterBoxSubmitDetail>) => void;
"radiusLg"?: string;
"radiusMd"?: string;
"radiusSm"?: string;
"radiusXl"?: string;
}
interface ExTestButton {
/**
* Whether the button is disabled.
Expand Down Expand Up @@ -548,6 +637,34 @@ declare namespace LocalJSX {
"radiusLg": string;
"radiusXl": string;
}
interface ExRegisterBoxAttributes {
"colorBackground": string;
"colorSurface": string;
"colorPrimary": string;
"colorPrimaryHover": string;
"colorPrimaryForeground": string;
"colorText": string;
"colorTextMuted": string;
"colorInputBackground": string;
"colorInputBorder": string;
"colorInputBorderFocus": string;
"colorError": string;
"colorDivider": string;
"colorLink": string;
"fontFamily": string;
"fontSizeXs": string;
"fontSizeSm": string;
"fontSizeMd": string;
"fontSizeLg": string;
"fontSizeXl": string;
"fontWeightNormal": string;
"fontWeightMedium": string;
"fontWeightSemibold": string;
"radiusSm": string;
"radiusMd": string;
"radiusLg": string;
"radiusXl": string;
}
interface ExTestButtonAttributes {
"label": string;
"variant": "primary" | "secondary" | "outline";
Expand All @@ -558,6 +675,7 @@ declare namespace LocalJSX {
"ex-button": Omit<ExButton, keyof ExButtonAttributes> & { [K in keyof ExButton & keyof ExButtonAttributes]?: ExButton[K] } & { [K in keyof ExButton & keyof ExButtonAttributes as `attr:${K}`]?: ExButtonAttributes[K] } & { [K in keyof ExButton & keyof ExButtonAttributes as `prop:${K}`]?: ExButton[K] };
"ex-input": Omit<ExInput, keyof ExInputAttributes> & { [K in keyof ExInput & keyof ExInputAttributes]?: ExInput[K] } & { [K in keyof ExInput & keyof ExInputAttributes as `attr:${K}`]?: ExInputAttributes[K] } & { [K in keyof ExInput & keyof ExInputAttributes as `prop:${K}`]?: ExInput[K] };
"ex-login-box": Omit<ExLoginBox, keyof ExLoginBoxAttributes> & { [K in keyof ExLoginBox & keyof ExLoginBoxAttributes]?: ExLoginBox[K] } & { [K in keyof ExLoginBox & keyof ExLoginBoxAttributes as `attr:${K}`]?: ExLoginBoxAttributes[K] } & { [K in keyof ExLoginBox & keyof ExLoginBoxAttributes as `prop:${K}`]?: ExLoginBox[K] };
"ex-register-box": Omit<ExRegisterBox, keyof ExRegisterBoxAttributes> & { [K in keyof ExRegisterBox & keyof ExRegisterBoxAttributes]?: ExRegisterBox[K] } & { [K in keyof ExRegisterBox & keyof ExRegisterBoxAttributes as `attr:${K}`]?: ExRegisterBoxAttributes[K] } & { [K in keyof ExRegisterBox & keyof ExRegisterBoxAttributes as `prop:${K}`]?: ExRegisterBox[K] };
"ex-test-button": Omit<ExTestButton, keyof ExTestButtonAttributes> & { [K in keyof ExTestButton & keyof ExTestButtonAttributes]?: ExTestButton[K] } & { [K in keyof ExTestButton & keyof ExTestButtonAttributes as `attr:${K}`]?: ExTestButtonAttributes[K] } & { [K in keyof ExTestButton & keyof ExTestButtonAttributes as `prop:${K}`]?: ExTestButton[K] };
}
}
Expand All @@ -568,6 +686,7 @@ declare module "@stencil/core" {
"ex-button": LocalJSX.IntrinsicElements["ex-button"] & JSXBase.HTMLAttributes<HTMLExButtonElement>;
"ex-input": LocalJSX.IntrinsicElements["ex-input"] & JSXBase.HTMLAttributes<HTMLExInputElement>;
"ex-login-box": LocalJSX.IntrinsicElements["ex-login-box"] & JSXBase.HTMLAttributes<HTMLExLoginBoxElement>;
"ex-register-box": LocalJSX.IntrinsicElements["ex-register-box"] & JSXBase.HTMLAttributes<HTMLExRegisterBoxElement>;
"ex-test-button": LocalJSX.IntrinsicElements["ex-test-button"] & JSXBase.HTMLAttributes<HTMLExTestButtonElement>;
}
}
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/components/ex-button/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,13 @@
### Used by

- [ex-login-box](../ex-login-box)
- [ex-register-box](../ex-register-box)

### Graph
```mermaid
graph TD;
ex-login-box --> ex-button
ex-register-box --> ex-button
style ex-button fill:#f9f,stroke:#333,stroke-width:4px
```

Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/components/ex-input/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,13 @@
### Used by

- [ex-login-box](../ex-login-box)
- [ex-register-box](../ex-register-box)

### Graph
```mermaid
graph TD;
ex-login-box --> ex-input
ex-register-box --> ex-input
style ex-input fill:#f9f,stroke:#333,stroke-width:4px
```

Expand Down
3 changes: 3 additions & 0 deletions packages/ui/src/components/ex-register-box/ex-register-box.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
:host {
display: block;
}
Loading
Loading