commit 6789cc46898c1249b1d1ba807857fc162477cc61 · dunkirk.sh/thistle

+26 -3

src/components/admin-classes.ts

···

       465
        
       

     

       466
        
       	override async connectedCallback() {

     

       467
        
       		super.connectedCallback();

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       468
        
       		await this.loadData();

     

       469
        
       	}

     

       470
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       471
        
       	private async loadData() {

     

       472
        
       		this.isLoading = true;

     

       473
        
       		this.error = "";

     
···

       664
        
               <button

     

       665
        
                 class="tab ${this.activeTab === "classes" ? "active" : ""}"

     

       666
        
                 @click=${() => {

     

       667
       -
       						this.activeTab = "classes";

     

       668
        
       					}}

     

       669
        
               >

     

       670
        
                 Classes

     
···

       672
        
               <button

     

       673
        
                 class="tab ${this.activeTab === "waitlist" ? "active" : ""}"

     

       674
        
                 @click=${() => {

     

       675
       -
       						this.activeTab = "waitlist";

     

       676
        
       					}}

     

       677
        
               >

     

       678
        
                 Waitlist

     
···

       892
        
       

     

       893
        
       			await this.loadData();

     

       894
        
       

     

       895
       -
       			this.activeTab = "classes";

     

       896
        
       			this.showModal = false;

     

       897
        
       			this.approvingEntry = null;

     

       898
        
       			this.meetingTimes = [];

···

       465
        
       

     

       466
        
       	override async connectedCallback() {

     

       467
        
       		super.connectedCallback();

     

       468
       +
       		

     

       469
       +
       		// Check for subtab query parameter

     

       470
       +
       		const params = new URLSearchParams(window.location.search);

     

       471
       +
       		const subtab = params.get("subtab");

     

       472
       +
       		if (subtab && this.isValidSubtab(subtab)) {

     

       473
       +
       			this.activeTab = subtab as "classes" | "waitlist";

     

       474
       +
       		} else {

     

       475
       +
       			// Set default subtab in URL if on classes tab

     

       476
       +
       			this.setActiveTab(this.activeTab);

     

       477
       +
       		}

     

       478
       +
       		

     

       479
        
       		await this.loadData();

     

       480
        
       	}

     

       481
        
       

     

       482
       +
       	private isValidSubtab(subtab: string): boolean {

     

       483
       +
       		return ["classes", "waitlist"].includes(subtab);

     

       484
       +
       	}

     

       485
       +
       

     

       486
       +
       	private setActiveTab(tab: "classes" | "waitlist") {

     

       487
       +
       		this.activeTab = tab;

     

       488
       +
       		// Update URL without reloading page

     

       489
       +
       		const url = new URL(window.location.href);

     

       490
       +
       		url.searchParams.set("subtab", tab);

     

       491
       +
       		window.history.pushState({}, "", url);

     

       492
       +
       	}

     

       493
       +
       

     

       494
        
       	private async loadData() {

     

       495
        
       		this.isLoading = true;

     

       496
        
       		this.error = "";

     
···

       687
        
               <button

     

       688
        
                 class="tab ${this.activeTab === "classes" ? "active" : ""}"

     

       689
        
                 @click=${() => {

     

       690
       +
       						this.setActiveTab("classes");

     

       691
        
       					}}

     

       692
        
               >

     

       693
        
                 Classes

     
···

       695
        
               <button

     

       696
        
                 class="tab ${this.activeTab === "waitlist" ? "active" : ""}"

     

       697
        
                 @click=${() => {

     

       698
       +
       						this.setActiveTab("waitlist");

     

       699
        
       					}}

     

       700
        
               >

     

       701
        
                 Waitlist

     
···

       915
        
       

     

       916
        
       			await this.loadData();

     

       917
        
       

     

       918
       +
       			this.setActiveTab("classes");

     

       919
        
       			this.showModal = false;

     

       920
        
       			this.approvingEntry = null;

     

       921
        
       			this.meetingTimes = [];

+129

src/components/auth.ts

···

       32
        
       	@state() passkeySupported = false;

     

       33
        
       	@state() needsEmailVerification = false;

     

       34
        
       	@state() verificationCode = "";

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       35
        
       

     

       36
        
       	static override styles = css`

     

       37
        
       		:host {

     
···

       283
        
       			font-family: 'Monaco', 'Courier New', monospace;

     

       284
        
       		}

     

       285
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       286
        
       		.btn-secondary {

     

       287
        
       			background: transparent;

     

       288
        
       			color: var(--text);

     
···

       413
        
       					this.needsEmailVerification = true;

     

       414
        
       					this.password = "";

     

       415
        
       					this.error = "";

     

       0
        
       
     

       416
        
       					return;

     

       417
        
       				}

     

       418
        
       

     
···

       450
        
       					this.needsEmailVerification = true;

     

       451
        
       					this.password = "";

     

       452
        
       					this.error = "";

     

       0
        
       
     

       453
        
       					return;

     

       454
        
       				}

     

       455
        
       

     
···

       571
        
       		}

     

       572
        
       	}

     

       573
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       574
        
       	override render() {

     

       575
        
       		if (this.loading) {

     

       576
        
       			return html`<div class="loading">Loading...</div>`;

     
···

       659
        
       														? html`<div class="error-message">${this.error}</div>`

     

       660
        
       														: ""

     

       661
        
       												}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       662
        
       

     

       663
        
       												<div class="modal-actions">

     

       664
        
       													<button

···

       32
        
       	@state() passkeySupported = false;

     

       33
        
       	@state() needsEmailVerification = false;

     

       34
        
       	@state() verificationCode = "";

     

       35
       +
       	@state() resendCodeTimer = 0;

     

       36
       +
       	@state() resendingCode = false;

     

       37
       +
       	private resendInterval: number | null = null;

     

       38
       +
       	private codeSentAt: number | null = null; // Unix timestamp in seconds when code was sent

     

       39
        
       

     

       40
        
       	static override styles = css`

     

       41
        
       		:host {

     
···

       287
        
       			font-family: 'Monaco', 'Courier New', monospace;

     

       288
        
       		}

     

       289
        
       

     

       290
       +
       		.resend-link {

     

       291
       +
       			text-align: center;

     

       292
       +
       			margin-top: 1rem;

     

       293
       +
       			font-size: 0.875rem;

     

       294
       +
       			color: var(--text);

     

       295
       +
       		}

     

       296
       +
       

     

       297
       +
       		.resend-button {

     

       298
       +
       			background: none;

     

       299
       +
       			border: none;

     

       300
       +
       			color: var(--primary);

     

       301
       +
       			cursor: pointer;

     

       302
       +
       			text-decoration: underline;

     

       303
       +
       			font-size: 0.875rem;

     

       304
       +
       			padding: 0;

     

       305
       +
       			font-family: inherit;

     

       306
       +
       		}

     

       307
       +
       

     

       308
       +
       		.resend-button:hover:not(:disabled) {

     

       309
       +
       			color: var(--accent);

     

       310
       +
       		}

     

       311
       +
       

     

       312
       +
       		.resend-button:disabled {

     

       313
       +
       			color: var(--secondary);

     

       314
       +
       			cursor: not-allowed;

     

       315
       +
       			text-decoration: none;

     

       316
       +
       		}

     

       317
       +
       

     

       318
        
       		.btn-secondary {

     

       319
        
       			background: transparent;

     

       320
        
       			color: var(--text);

     
···

       445
        
       					this.needsEmailVerification = true;

     

       446
        
       					this.password = "";

     

       447
        
       					this.error = "";

     

       448
       +
       					this.startResendTimer(data.verification_code_sent_at);

     

       449
        
       					return;

     

       450
        
       				}

     

       451
        
       

     
···

       483
        
       					this.needsEmailVerification = true;

     

       484
        
       					this.password = "";

     

       485
        
       					this.error = "";

     

       486
       +
       					this.startResendTimer(data.verification_code_sent_at);

     

       487
        
       					return;

     

       488
        
       				}

     

       489
        
       

     
···

       605
        
       		}

     

       606
        
       	}

     

       607
        
       

     

       608
       +
       	private startResendTimer(sentAtTimestamp: number) {

     

       609
       +
       		// Use provided timestamp

     

       610
       +
       		this.codeSentAt = sentAtTimestamp;

     

       611
       +
       		

     

       612
       +
       		// Clear existing interval if any

     

       613
       +
       		if (this.resendInterval !== null) {

     

       614
       +
       			clearInterval(this.resendInterval);

     

       615
       +
       		}

     

       616
       +
       		

     

       617
       +
       		// Update timer based on elapsed time

     

       618
       +
       		const updateTimer = () => {

     

       619
       +
       			if (this.codeSentAt === null) return;

     

       620
       +
       			

     

       621
       +
       			const now = Math.floor(Date.now() / 1000);

     

       622
       +
       			const elapsed = now - this.codeSentAt;

     

       623
       +
       			const remaining = Math.max(0, (5 * 60) - elapsed);

     

       624
       +
       			this.resendCodeTimer = remaining;

     

       625
       +
       			

     

       626
       +
       			if (remaining <= 0) {

     

       627
       +
       				if (this.resendInterval !== null) {

     

       628
       +
       					clearInterval(this.resendInterval);

     

       629
       +
       					this.resendInterval = null;

     

       630
       +
       				}

     

       631
       +
       			}

     

       632
       +
       		};

     

       633
       +
       		

     

       634
       +
       		// Update immediately

     

       635
       +
       		updateTimer();

     

       636
       +
       		

     

       637
       +
       		// Then update every second

     

       638
       +
       		this.resendInterval = window.setInterval(updateTimer, 1000);

     

       639
       +
       	}

     

       640
       +
       

     

       641
       +
       	private async handleResendCode() {

     

       642
       +
       		this.error = "";

     

       643
       +
       		this.resendingCode = true;

     

       644
       +
       

     

       645
       +
       		try {

     

       646
       +
       			const response = await fetch("/api/auth/resend-verification-code", {

     

       647
       +
       				method: "POST",

     

       648
       +
       				headers: {

     

       649
       +
       					"Content-Type": "application/json",

     

       650
       +
       				},

     

       651
       +
       				body: JSON.stringify({

     

       652
       +
       					email: this.email,

     

       653
       +
       				}),

     

       654
       +
       			});

     

       655
       +
       

     

       656
       +
       			if (!response.ok) {

     

       657
       +
       				const data = await response.json();

     

       658
       +
       				this.error = data.error || "Failed to resend code";

     

       659
       +
       				return;

     

       660
       +
       			}

     

       661
       +
       

     

       662
       +
       			// Start the 5-minute timer

     

       663
       +
       			this.startResendTimer(data.verification_code_sent_at);

     

       664
       +
       		} catch (error) {

     

       665
       +
       			this.error = error instanceof Error ? error.message : "An error occurred";

     

       666
       +
       		} finally {

     

       667
       +
       			this.resendingCode = false;

     

       668
       +
       		}

     

       669
       +
       	}

     

       670
       +
       

     

       671
       +
       	private formatTimer(seconds: number): string {

     

       672
       +
       		const mins = Math.floor(seconds / 60);

     

       673
       +
       		const secs = seconds % 60;

     

       674
       +
       		return `${mins}:${secs.toString().padStart(2, '0')}`;

     

       675
       +
       	}

     

       676
       +
       

     

       677
       +
       	override disconnectedCallback() {

     

       678
       +
       		super.disconnectedCallback();

     

       679
       +
       		// Clean up timer when component is removed

     

       680
       +
       		if (this.resendInterval !== null) {

     

       681
       +
       			clearInterval(this.resendInterval);

     

       682
       +
       			this.resendInterval = null;

     

       683
       +
       		}

     

       684
       +
       	}

     

       685
       +
       

     

       686
        
       	override render() {

     

       687
        
       		if (this.loading) {

     

       688
        
       			return html`<div class="loading">Loading...</div>`;

     
···

       771
        
       														? html`<div class="error-message">${this.error}</div>`

     

       772
        
       														: ""

     

       773
        
       												}

     

       774
       +
       

     

       775
       +
       												<div class="resend-link">

     

       776
       +
       													${

     

       777
       +
       														this.resendCodeTimer > 0

     

       778
       +
       															? html`Resend code in ${this.formatTimer(this.resendCodeTimer)}`

     

       779
       +
       															: html`

     

       780
       +
       																<button

     

       781
       +
       																	type="button"

     

       782
       +
       																	class="resend-button"

     

       783
       +
       																	@click=${this.handleResendCode}

     

       784
       +
       																	?disabled=${this.resendingCode}

     

       785
       +
       																>

     

       786
       +
       																	${this.resendingCode ? "Sending..." : "Resend code"}

     

       787
       +
       																</button>

     

       788
       +
       															`

     

       789
       +
       													}

     

       790
       +
       												</div>

     

       791
        
       

     

       792
        
       												<div class="modal-actions">

     

       793
        
       													<button

src/pages/admin.html

···

       319
        
               // Update URL without reloading

     

       320
        
               const url = new URL(window.location.href);

     

       321
        
               url.searchParams.set('tab', tabName);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       322
        
               window.history.pushState({}, '', url);

     

       323
        
             }

     

       324
        
           }

···

       319
        
               // Update URL without reloading

     

       320
        
               const url = new URL(window.location.href);

     

       321
        
               url.searchParams.set('tab', tabName);

     

       322
       +
               // Remove subtab param when leaving classes tab

     

       323
       +
               if (tabName !== 'classes') {

     

       324
       +
                 url.searchParams.delete('subtab');

     

       325
       +
               }

     

       326
        
               window.history.pushState({}, '', url);

     

       327
        
             }

     

       328
        
           }