rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

yes

Browse source
This commit is contained in:
Maieul BOYER 2025-12-10 16:38:26 +01:00 • committed by apetitco
parent 00e4f522ab
commit 37a33d8a73
24 changed files with 1233 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/api/generated/.openapi-generator/FILES
View file

@ -1,6 +1,9 @@
apis/OpenapiOtherApi.ts
apis/index.ts
index.ts
models/ChangeDisplayName200Response.ts
models/ChangeDisplayName400Response.ts
models/ChangeDisplayNameRequest.ts
models/ChatTest200Response.ts
models/ChatTest200ResponsePayload.ts
models/DisableOtp200Response.ts
@ -20,7 +23,9 @@ models/GetUser404Response.ts
models/GetUserUserParameter.ts
models/GuestLogin200Response.ts
models/GuestLogin200ResponsePayload.ts
models/GuestLogin400Response.ts
models/GuestLogin500Response.ts
models/GuestLoginRequest.ts
models/Login200Response.ts
models/Login202Response.ts
models/Login202ResponsePayload.ts

94
frontend/src/api/generated/apis/OpenapiOtherApi.ts
View file

@ -15,6 +15,9 @@
import * as runtime from '../runtime';
import type {
ChangeDisplayName200Response,
ChangeDisplayName400Response,
ChangeDisplayNameRequest,
ChatTest200Response,
DisableOtp200Response,
DisableOtp400Response,
@ -28,7 +31,9 @@ import type {
GetUser404Response,
GetUserUserParameter,
GuestLogin200Response,
GuestLogin400Response,
GuestLogin500Response,
GuestLoginRequest,
Login200Response,
Login202Response,
Login400Response,
@ -49,6 +54,12 @@ import type {
StatusOtp500Response,
} from '../models/index';
import {
ChangeDisplayName200ResponseFromJSON,
ChangeDisplayName200ResponseToJSON,
ChangeDisplayName400ResponseFromJSON,
ChangeDisplayName400ResponseToJSON,
ChangeDisplayNameRequestFromJSON,
ChangeDisplayNameRequestToJSON,
ChatTest200ResponseFromJSON,
ChatTest200ResponseToJSON,
DisableOtp200ResponseFromJSON,
@ -75,8 +86,12 @@ import {
GetUserUserParameterToJSON,
GuestLogin200ResponseFromJSON,
GuestLogin200ResponseToJSON,
GuestLogin400ResponseFromJSON,
GuestLogin400ResponseToJSON,
GuestLogin500ResponseFromJSON,
GuestLogin500ResponseToJSON,
GuestLoginRequestFromJSON,
GuestLoginRequestToJSON,
Login200ResponseFromJSON,
Login200ResponseToJSON,
Login202ResponseFromJSON,
@ -115,10 +130,18 @@ import {
StatusOtp500ResponseToJSON,
} from '../models/index';
export interface ChangeDisplayNameOperationRequest {
changeDisplayNameRequest: ChangeDisplayNameRequest;
}
export interface GetUserRequest {
user: GetUserUserParameter;
}
export interface GuestLoginOperationRequest {
guestLoginRequest?: GuestLoginRequest;
}
export interface LoginOperationRequest {
loginRequest: LoginRequest;
}
@ -136,6 +159,62 @@ export interface SigninRequest {
*/
export class OpenapiOtherApi extends runtime.BaseAPI {
/**
*/
async changeDisplayNameRaw(requestParameters: ChangeDisplayNameOperationRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<ChangeDisplayName200Response | ChangeDisplayName400Response | DisableOtp401Response>> {
if (requestParameters['changeDisplayNameRequest'] == null) {
throw new runtime.RequiredError(
'changeDisplayNameRequest',
'Required parameter "changeDisplayNameRequest" was null or undefined when calling changeDisplayName().'
);
}
const queryParameters: any = {};
const headerParameters: runtime.HTTPHeaders = {};
headerParameters['Content-Type'] = 'application/json';
let urlPath = `/api/user/changeDisplayName`;
const response = await this.request({
path: urlPath,
method: 'PUT',
headers: headerParameters,
query: queryParameters,
body: ChangeDisplayNameRequestToJSON(requestParameters['changeDisplayNameRequest']),
}, initOverrides);
// CHANGED: Handle all status codes defined in the OpenAPI spec, not just 2xx responses
// This allows typed access to error responses (4xx, 5xx) and other status codes.
// The code routes responses based on the actual HTTP status code and returns
// appropriately typed ApiResponse wrappers for each status code.
if (response.status === 200) {
// Object response for status 200
return new runtime.JSONApiResponse(response, (jsonValue) => ChangeDisplayName200ResponseFromJSON(jsonValue));
}
if (response.status === 400) {
// Object response for status 400
return new runtime.JSONApiResponse(response, (jsonValue) => ChangeDisplayName400ResponseFromJSON(jsonValue));
}
if (response.status === 401) {
// Object response for status 401
return new runtime.JSONApiResponse(response, (jsonValue) => DisableOtp401ResponseFromJSON(jsonValue));
}
// CHANGED: Throw error if status code is not handled by any of the defined responses
// This ensures all code paths return a value and provides clear error messages for unexpected status codes
// Only throw if responses were defined but none matched the actual status code
throw new runtime.ResponseError(response, `Unexpected status code: ${response.status}. Expected one of: 200, 400, 401`);
}
/**
*/
async changeDisplayName(requestParameters: ChangeDisplayNameOperationRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<ChangeDisplayName200Response | ChangeDisplayName400Response | DisableOtp401Response> {
const response = await this.changeDisplayNameRaw(requestParameters, initOverrides);
return await response.value();
}
/**
*/
async chatTestRaw(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<ChatTest200Response | StatusOtp401Response>> {
@ -334,11 +413,13 @@ export class OpenapiOtherApi extends runtime.BaseAPI {
/**
*/
async guestLoginRaw(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<GuestLogin200Response | GuestLogin500Response>> {
async guestLoginRaw(requestParameters: GuestLoginOperationRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<GuestLogin200Response | GuestLogin400Response | GuestLogin500Response>> {
const queryParameters: any = {};
const headerParameters: runtime.HTTPHeaders = {};
headerParameters['Content-Type'] = 'application/json';
let urlPath = `/api/auth/guest`;
@ -347,6 +428,7 @@ export class OpenapiOtherApi extends runtime.BaseAPI {
method: 'POST',
headers: headerParameters,
query: queryParameters,
body: GuestLoginRequestToJSON(requestParameters['guestLoginRequest']),
}, initOverrides);
// CHANGED: Handle all status codes defined in the OpenAPI spec, not just 2xx responses
@ -357,6 +439,10 @@ export class OpenapiOtherApi extends runtime.BaseAPI {
// Object response for status 200
return new runtime.JSONApiResponse(response, (jsonValue) => GuestLogin200ResponseFromJSON(jsonValue));
}
if (response.status === 400) {
// Object response for status 400
return new runtime.JSONApiResponse(response, (jsonValue) => GuestLogin400ResponseFromJSON(jsonValue));
}
if (response.status === 500) {
// Object response for status 500
return new runtime.JSONApiResponse(response, (jsonValue) => GuestLogin500ResponseFromJSON(jsonValue));
@ -364,13 +450,13 @@ export class OpenapiOtherApi extends runtime.BaseAPI {
// CHANGED: Throw error if status code is not handled by any of the defined responses
// This ensures all code paths return a value and provides clear error messages for unexpected status codes
// Only throw if responses were defined but none matched the actual status code
throw new runtime.ResponseError(response, `Unexpected status code: ${response.status}. Expected one of: 200, 500`);
throw new runtime.ResponseError(response, `Unexpected status code: ${response.status}. Expected one of: 200, 400, 500`);
}
/**
*/
async guestLogin(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<GuestLogin200Response | GuestLogin500Response> {
const response = await this.guestLoginRaw(initOverrides);
async guestLogin(requestParameters: GuestLoginOperationRequest = {}, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<GuestLogin200Response | GuestLogin400Response | GuestLogin500Response> {
const response = await this.guestLoginRaw(requestParameters, initOverrides);
return await response.value();
}

93
frontend/src/api/generated/models/ChangeDisplayName200Response.ts Normal file
View file

@ -0,0 +1,93 @@
/* tslint:disable */
/* eslint-disable */
/**
* @fastify/swagger
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
*
* The version of the OpenAPI document: 9.6.1
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import { mapValues } from '../runtime';
/**
*
* @export
* @interface ChangeDisplayName200Response
*/
export interface ChangeDisplayName200Response {
/**
*
* @type {string}
* @memberof ChangeDisplayName200Response
*/
kind: ChangeDisplayName200ResponseKindEnum;
/**
*
* @type {string}
* @memberof ChangeDisplayName200Response
*/
msg: ChangeDisplayName200ResponseMsgEnum;
}
/**
* @export
*/
export const ChangeDisplayName200ResponseKindEnum = {
Success: 'success'
} as const;
export type ChangeDisplayName200ResponseKindEnum = typeof ChangeDisplayName200ResponseKindEnum[keyof typeof ChangeDisplayName200ResponseKindEnum];
/**
* @export
*/
export const ChangeDisplayName200ResponseMsgEnum = {
ChangeDisplayNameSuccess: 'changeDisplayName.success'
} as const;
export type ChangeDisplayName200ResponseMsgEnum = typeof ChangeDisplayName200ResponseMsgEnum[keyof typeof ChangeDisplayName200ResponseMsgEnum];
/**
* Check if a given object implements the ChangeDisplayName200Response interface.
*/
export function instanceOfChangeDisplayName200Response(value: object): value is ChangeDisplayName200Response {
if (!('kind' in value) || value['kind'] === undefined) return false;
if (!('msg' in value) || value['msg'] === undefined) return false;
return true;
}
export function ChangeDisplayName200ResponseFromJSON(json: any): ChangeDisplayName200Response {
return ChangeDisplayName200ResponseFromJSONTyped(json, false);
}
export function ChangeDisplayName200ResponseFromJSONTyped(json: any, ignoreDiscriminator: boolean): ChangeDisplayName200Response {
if (json == null) {
return json;
}
return {
'kind': json['kind'],
'msg': json['msg'],
};
}
export function ChangeDisplayName200ResponseToJSON(json: any): ChangeDisplayName200Response {
return ChangeDisplayName200ResponseToJSONTyped(json, false);
}
export function ChangeDisplayName200ResponseToJSONTyped(value?: ChangeDisplayName200Response | null, ignoreDiscriminator: boolean = false): any {
if (value == null) {
return value;
}
return {
'kind': value['kind'],
'msg': value['msg'],
};
}

94
frontend/src/api/generated/models/ChangeDisplayName400Response.ts Normal file
View file

@ -0,0 +1,94 @@
/* tslint:disable */
/* eslint-disable */
/**
* @fastify/swagger
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
*
* The version of the OpenAPI document: 9.6.1
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import { mapValues } from '../runtime';
/**
*
* @export
* @interface ChangeDisplayName400Response
*/
export interface ChangeDisplayName400Response {
/**
*
* @type {string}
* @memberof ChangeDisplayName400Response
*/
kind: ChangeDisplayName400ResponseKindEnum;
/**
*
* @type {string}
* @memberof ChangeDisplayName400Response
*/
msg: ChangeDisplayName400ResponseMsgEnum;
}
/**
* @export
*/
export const ChangeDisplayName400ResponseKindEnum = {
Failure: 'failure'
} as const;
export type ChangeDisplayName400ResponseKindEnum = typeof ChangeDisplayName400ResponseKindEnum[keyof typeof ChangeDisplayName400ResponseKindEnum];
/**
* @export
*/
export const ChangeDisplayName400ResponseMsgEnum = {
ChangeDisplayNameAlreadyExist: 'changeDisplayName.alreadyExist',
ChangeDisplayNameInvalid: 'changeDisplayName.invalid'
} as const;
export type ChangeDisplayName400ResponseMsgEnum = typeof ChangeDisplayName400ResponseMsgEnum[keyof typeof ChangeDisplayName400ResponseMsgEnum];
/**
* Check if a given object implements the ChangeDisplayName400Response interface.
*/
export function instanceOfChangeDisplayName400Response(value: object): value is ChangeDisplayName400Response {
if (!('kind' in value) || value['kind'] === undefined) return false;
if (!('msg' in value) || value['msg'] === undefined) return false;
return true;
}
export function ChangeDisplayName400ResponseFromJSON(json: any): ChangeDisplayName400Response {
return ChangeDisplayName400ResponseFromJSONTyped(json, false);
}
export function ChangeDisplayName400ResponseFromJSONTyped(json: any, ignoreDiscriminator: boolean): ChangeDisplayName400Response {
if (json == null) {
return json;
}
return {
'kind': json['kind'],
'msg': json['msg'],
};
}
export function ChangeDisplayName400ResponseToJSON(json: any): ChangeDisplayName400Response {
return ChangeDisplayName400ResponseToJSONTyped(json, false);
}
export function ChangeDisplayName400ResponseToJSONTyped(value?: ChangeDisplayName400Response | null, ignoreDiscriminator: boolean = false): any {
if (value == null) {
return value;
}
return {
'kind': value['kind'],
'msg': value['msg'],
};
}

66
frontend/src/api/generated/models/ChangeDisplayNameRequest.ts Normal file
View file

@ -0,0 +1,66 @@
/* tslint:disable */
/* eslint-disable */
/**
* @fastify/swagger
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
*
* The version of the OpenAPI document: 9.6.1
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import { mapValues } from '../runtime';
/**
*
* @export
* @interface ChangeDisplayNameRequest
*/
export interface ChangeDisplayNameRequest {
/**
* New Display Name
* @type {string}
* @memberof ChangeDisplayNameRequest
*/
name: string;
}
/**
* Check if a given object implements the ChangeDisplayNameRequest interface.
*/
export function instanceOfChangeDisplayNameRequest(value: object): value is ChangeDisplayNameRequest {
if (!('name' in value) || value['name'] === undefined) return false;
return true;
}
export function ChangeDisplayNameRequestFromJSON(json: any): ChangeDisplayNameRequest {
return ChangeDisplayNameRequestFromJSONTyped(json, false);
}
export function ChangeDisplayNameRequestFromJSONTyped(json: any, ignoreDiscriminator: boolean): ChangeDisplayNameRequest {
if (json == null) {
return json;
}
return {
'name': json['name'],
};
}
export function ChangeDisplayNameRequestToJSON(json: any): ChangeDisplayNameRequest {
return ChangeDisplayNameRequestToJSONTyped(json, false);
}
export function ChangeDisplayNameRequestToJSONTyped(value?: ChangeDisplayNameRequest | null, ignoreDiscriminator: boolean = false): any {
if (value == null) {
return value;
}
return {
'name': value['name'],
};
}

93
frontend/src/api/generated/models/GuestLogin400Response.ts Normal file
View file

@ -0,0 +1,93 @@
/* tslint:disable */
/* eslint-disable */
/**
* @fastify/swagger
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
*
* The version of the OpenAPI document: 9.6.1
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import { mapValues } from '../runtime';
/**
*
* @export
* @interface GuestLogin400Response
*/
export interface GuestLogin400Response {
/**
*
* @type {string}
* @memberof GuestLogin400Response
*/
kind: GuestLogin400ResponseKindEnum;
/**
*
* @type {string}
* @memberof GuestLogin400Response
*/
msg: GuestLogin400ResponseMsgEnum;
}
/**
* @export
*/
export const GuestLogin400ResponseKindEnum = {
Failed: 'failed'
} as const;
export type GuestLogin400ResponseKindEnum = typeof GuestLogin400ResponseKindEnum[keyof typeof GuestLogin400ResponseKindEnum];
/**
* @export
*/
export const GuestLogin400ResponseMsgEnum = {
GuestLoginFailedInvalid: 'guestLogin.failed.invalid'
} as const;
export type GuestLogin400ResponseMsgEnum = typeof GuestLogin400ResponseMsgEnum[keyof typeof GuestLogin400ResponseMsgEnum];
/**
* Check if a given object implements the GuestLogin400Response interface.
*/
export function instanceOfGuestLogin400Response(value: object): value is GuestLogin400Response {
if (!('kind' in value) || value['kind'] === undefined) return false;
if (!('msg' in value) || value['msg'] === undefined) return false;
return true;
}
export function GuestLogin400ResponseFromJSON(json: any): GuestLogin400Response {
return GuestLogin400ResponseFromJSONTyped(json, false);
}
export function GuestLogin400ResponseFromJSONTyped(json: any, ignoreDiscriminator: boolean): GuestLogin400Response {
if (json == null) {
return json;
}
return {
'kind': json['kind'],
'msg': json['msg'],
};
}
export function GuestLogin400ResponseToJSON(json: any): GuestLogin400Response {
return GuestLogin400ResponseToJSONTyped(json, false);
}
export function GuestLogin400ResponseToJSONTyped(value?: GuestLogin400Response | null, ignoreDiscriminator: boolean = false): any {
if (value == null) {
return value;
}
return {
'kind': value['kind'],
'msg': value['msg'],
};
}

65
frontend/src/api/generated/models/GuestLoginRequest.ts Normal file
View file

@ -0,0 +1,65 @@
/* tslint:disable */
/* eslint-disable */
/**
* @fastify/swagger
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
*
* The version of the OpenAPI document: 9.6.1
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import { mapValues } from '../runtime';
/**
*
* @export
* @interface GuestLoginRequest
*/
export interface GuestLoginRequest {
/**
*
* @type {string}
* @memberof GuestLoginRequest
*/
name?: string;
}
/**
* Check if a given object implements the GuestLoginRequest interface.
*/
export function instanceOfGuestLoginRequest(value: object): value is GuestLoginRequest {
return true;
}
export function GuestLoginRequestFromJSON(json: any): GuestLoginRequest {
return GuestLoginRequestFromJSONTyped(json, false);
}
export function GuestLoginRequestFromJSONTyped(json: any, ignoreDiscriminator: boolean): GuestLoginRequest {
if (json == null) {
return json;
}
return {
'name': json['name'] == null ? undefined : json['name'],
};
}
export function GuestLoginRequestToJSON(json: any): GuestLoginRequest {
return GuestLoginRequestToJSONTyped(json, false);
}
export function GuestLoginRequestToJSONTyped(value?: GuestLoginRequest | null, ignoreDiscriminator: boolean = false): any {
if (value == null) {
return value;
}
return {
'name': value['name'],
};
}

5
frontend/src/api/generated/models/index.ts
View file

@ -1,5 +1,8 @@
/* tslint:disable */
/* eslint-disable */
export * from './ChangeDisplayName200Response';
export * from './ChangeDisplayName400Response';
export * from './ChangeDisplayNameRequest';
export * from './ChatTest200Response';
export * from './ChatTest200ResponsePayload';
export * from './DisableOtp200Response';
@ -19,7 +22,9 @@ export * from './GetUser404Response';
export * from './GetUserUserParameter';
export * from './GuestLogin200Response';
export * from './GuestLogin200ResponsePayload';
export * from './GuestLogin400Response';
export * from './GuestLogin500Response';
export * from './GuestLoginRequest';
export * from './Login200Response';
export * from './Login202Response';
export * from './Login202ResponsePayload';

4
frontend/src/auth/index.ts
View file

@ -7,8 +7,8 @@ export type User = {
name: string;
selfInfo?: {
loginName?: string;
provider_id?: string;
provider_user?: string;
providerId?: string;
providerUser?: string;
}
};

2
frontend/src/pages/login/login.ts
View file

@ -209,7 +209,7 @@ async function handleLogin(
document.querySelector<HTMLButtonElement>("#bGuestLogin");
bLoginAsGuest?.addEventListener("click", async () => {
try {
const res = await client.guestLogin();
const res = await client.guestLogin({ guestLoginRequest: { name: undefined } });
switch (res.kind) {
case "success": {
Cookie.set("token", res.payload.token, {

27
frontend/src/pages/profile/profile.html
View file

@ -7,12 +7,33 @@
<span class="text-red-600"> You can't change anything here </span>
</div>
<div class="mb-1 text-gray-700 rounded-sm border-2 outline-lime-100">
<label class="inline font-medium mb-1 text-gray-700">AccountType: </label>
<span id="accountType" class="font-medium"></span>
</div>
<!-- Login Name -->
<div id="loginNameWrapper" class="py-2">
<div id="loginNameWrapper" class="py-2" hidden>
<label class="block font-medium mb-1 text-gray-700">Login Name</label>
<div id="loginNameBox" class="font-medium mb-1 text-gray-700 rounded-sm border-2 outline-lime-100"></div>
</div>
<!-- Login Name -->
<div id="providerWrapper" class="py-2 mb-1 border-2 border-green-400 rounded-sm" hidden>
<span class="py-2 mb-1 text-gray-700 text-lg">Provider</span>
<div class="flex items-center justify-center gap-4">
<div>
<label class="block font-medium mb-1 text-gray-700">Name</label>
<div id="providerNameBox"
class="font-medium mb-1 text-gray-700"></div>
</div>
<div>
<label class="block font-medium mb-1 text-gray-700">User</label>
<div id="providerUserBox"
class="font-medium mb-1 text-gray-700"></div>
</div>
</div>
</div>
<!-- Display Name -->
<div id="displayNameWrapper" class="py-2">
<label class="block font-medium mb-1 text-gray-700">Display Name</label>
@ -35,7 +56,7 @@
</div>
<!-- TOTP -->
<div class="border rounded p-4">
<div class="border rounded p-4" id="totpWrapper">
<h2 class="font-semibold text-lg mb-2">Two-Factor Authentication (TOTP)</h2>
<div class="flex items-center justify-between">

379
frontend/src/pages/profile/profile.ts
View file

@ -1,5 +1,5 @@
import { addRoute, navigateTo, setTitle } from "@app/routing";
import { showError } from "@app/toast";
import { addRoute, handleRoute, navigateTo, setTitle } from "@app/routing";
import { showError, showSuccess } from "@app/toast";
import page from "./profile.html?raw";
import { updateUser } from "@app/auth";
import { isNullish } from "@app/utils";
@ -38,176 +38,219 @@ export async function renderOAuth2QRCode(
});
canvas.style.width = "";
canvas.style.height = "";
}
async function route(url: string, _args: { [k: string]: string }) {
setTitle("Edit Profile");
return {
html: page,
postInsert: async (app: HTMLElement | undefined) => {
const user = await updateUser();
if (isNullish(user)) return showError("No User");
if (isNullish(app)) return showError("Failed to render");
let totpState = await (async () => {
let res = await client.statusOtp();
if (res.kind === "success")
return {
enabled:
(res.msg as string) === "statusOtp.success.enabled",
secret:
(res.msg as string) === "statusOtp.success.enabled"
? res.payload.secret
: null,
};
else {
showError("Failed to get OTP status");
return {
enabled: false,
secret: null,
};
}
})();
// ---- Simulated State ----
let totpEnabled = totpState.enabled;
let totpSecret = totpState.secret; // would come from backend
let guestBox = app.querySelector<HTMLDivElement>("#isGuestBox")!;
let displayNameWrapper = app.querySelector<HTMLDivElement>(
"#displayNameWrapper",
)!;
let displayNameBox =
app.querySelector<HTMLInputElement>("#displayNameBox")!;
let displayNameButton =
app.querySelector<HTMLButtonElement>("#displayNameButton")!;
let loginNameWrapper =
app.querySelector<HTMLDivElement>("#loginNameWrapper")!;
let loginNameBox =
app.querySelector<HTMLDivElement>("#loginNameBox")!;
let passwordWrapper =
app.querySelector<HTMLDivElement>("#passwordWrapper")!;
let passwordBox =
app.querySelector<HTMLInputElement>("#passwordBox")!;
let passwordButton =
app.querySelector<HTMLButtonElement>("#passwordButton")!;
if (!isNullish(user.selfInfo?.loginName))
loginNameBox.innerText = user.selfInfo?.loginName;
else
loginNameBox.innerHTML =
'<span class="text-red-600 font-bold mb-1">You don\'t have a login name</span>';
displayNameBox.value = user.name;
guestBox.hidden = !user.guest;
// ---- DOM Elements ----
const totpStatusText = app.querySelector("#totpStatusText")!;
const enableBtn =
app.querySelector<HTMLButtonElement>("#enableTotp")!;
const disableBtn =
app.querySelector<HTMLButtonElement>("#disableTotp")!;
const showSecretBtn =
app.querySelector<HTMLButtonElement>("#showSecret")!;
const secretBox = app.querySelector("#totpSecretBox")!;
const secretText =
app.querySelector<HTMLDivElement>("#totpSecretText")!;
const secretCanvas =
app.querySelector<HTMLCanvasElement>("#totpSecretCanvas")!;
if (user.guest) {
for (let c of passwordButton.classList.values()) {
if (c.startsWith("bg-") || c.startsWith("hover:bg-"))
passwordButton.classList.remove(c);
}
passwordButton.disabled = true;
passwordButton.classList.add(
"bg-gray-700",
"hover:bg-gray-700",
);
passwordBox.disabled = true;
passwordBox.classList.add("color-white");
for (let c of displayNameButton.classList.values()) {
if (c.startsWith("bg-") || c.startsWith("hover:bg-"))
displayNameButton.classList.remove(c);
}
displayNameButton.disabled = true;
displayNameButton.classList.add("bg-gray-700");
displayNameButton.classList.add("color-white");
displayNameBox.disabled = true;
displayNameBox.classList.add("color-white");
for (let c of enableBtn.classList.values()) {
if (c.startsWith("bg-") || c.startsWith("hover:bg-"))
enableBtn.classList.remove(c);
}
for (let c of disableBtn.classList.values()) {
if (c.startsWith("bg-") || c.startsWith("hover:bg-"))
disableBtn.classList.remove(c);
}
for (let c of showSecretBtn.classList.values()) {
if (c.startsWith("bg-") || c.startsWith("hover:bg-"))
showSecretBtn.classList.remove(c);
}
enableBtn.classList.add("bg-gray-700", "hover:bg-gray-700");
disableBtn.classList.add("bg-gray-700", "hover:bg-gray-700");
showSecretBtn.classList.add("bg-gray-700", "hover:bg-gray-700");
enableBtn.disabled = true;
disableBtn.disabled = true;
showSecretBtn.disabled = true;
function removeBgColor(...elem: HTMLElement[]) {
for (let e of elem) {
for (let c of e.classList.values()) {
if (c.startsWith("bg-") || c.startsWith("hover:bg-"))
e.classList.remove(c);
}
}
}
// ---- Update UI ----
function refreshTotpUI() {
if (totpEnabled) {
totpStatusText.textContent = "Status: Enabled";
async function route(url: string, _args: { [k: string]: string }) {
setTitle("Edit Profile");
return {
html: page,
postInsert: async (app: HTMLElement | undefined) => {
const user = await updateUser();
if (isNullish(user)) return showError("No User");
if (isNullish(app)) return showError("Failed to render");
let totpState = await (async () => {
let res = await client.statusOtp();
if (res.kind === "success")
return {
enabled:
(res.msg as string) === "statusOtp.success.enabled",
secret:
(res.msg as string) === "statusOtp.success.enabled"
? res.payload.secret
: null,
};
else {
showError("Failed to get OTP status");
return {
enabled: false,
secret: null,
};
}
})();
// ---- Simulated State ----
let totpEnabled = totpState.enabled;
let totpSecret = totpState.secret; // would come from backend
enableBtn.classList.add("hidden");
disableBtn.classList.remove("hidden");
showSecretBtn.classList.remove("hidden");
} else {
totpStatusText.textContent = "Status: Disabled";
let guestBox = app.querySelector<HTMLDivElement>("#isGuestBox")!;
let displayNameWrapper = app.querySelector<HTMLDivElement>(
"#displayNameWrapper",
)!;
let displayNameBox =
app.querySelector<HTMLInputElement>("#displayNameBox")!;
let displayNameButton =
app.querySelector<HTMLButtonElement>("#displayNameButton")!;
let loginNameWrapper =
app.querySelector<HTMLDivElement>("#loginNameWrapper")!;
let loginNameBox =
app.querySelector<HTMLDivElement>("#loginNameBox")!;
let passwordWrapper =
app.querySelector<HTMLDivElement>("#passwordWrapper")!;
let passwordBox =
app.querySelector<HTMLInputElement>("#passwordBox")!;
let passwordButton =
app.querySelector<HTMLButtonElement>("#passwordButton")!;
enableBtn.classList.remove("hidden");
disableBtn.classList.add("hidden");
showSecretBtn.classList.add("hidden");
secretBox.classList.add("hidden");
}
}
let providerWrapper =
app.querySelector<HTMLDivElement>("#providerWrapper")!;
let providerNameBox =
app.querySelector<HTMLDivElement>("#providerNameBox")!;
let providerUserBox =
app.querySelector<HTMLDivElement>("#providerUserBox")!;
// ---- Button Events ----
enableBtn.onclick = async () => {
let res = await client.enableOtp();
if (res.kind === "success") {
navigateTo(url);
} else {
showError(`failed to activate OTP: ${res.msg}`);
}
let accountTypeBox =
app.querySelector<HTMLDivElement>("#accountType")!;
displayNameBox.value = user.name;
guestBox.hidden = !user.guest;
// ---- DOM Elements ----
const totpStatusText = app.querySelector("#totpStatusText")!;
const enableBtn =
app.querySelector<HTMLButtonElement>("#enableTotp")!;
const disableBtn =
app.querySelector<HTMLButtonElement>("#disableTotp")!;
const showSecretBtn =
app.querySelector<HTMLButtonElement>("#showSecret")!;
const secretBox = app.querySelector("#totpSecretBox")!;
const secretText =
app.querySelector<HTMLDivElement>("#totpSecretText")!;
const secretCanvas =
app.querySelector<HTMLCanvasElement>("#totpSecretCanvas")!;
if (user.guest) {
for (let c of passwordButton.classList.values()) {
if (c.startsWith("bg-") || c.startsWith("hover:bg-"))
passwordButton.classList.remove(c);
}
let totpWrapper = app.querySelector<HTMLDivElement>("#totpWrapper")!;
if (user.guest) {
removeBgColor(
passwordButton,
displayNameButton,
enableBtn,
disableBtn,
showSecretBtn,
);
passwordButton.classList.add(
"bg-gray-700",
"hover:bg-gray-700",
);
passwordBox.disabled = true;
passwordBox.classList.add("color-white");
displayNameButton.disabled = true;
displayNameButton.classList.add("bg-gray-700", "color-white");
displayNameBox.disabled = true;
displayNameBox.classList.add("color-white");
enableBtn.classList.add("bg-gray-700", "hover:bg-gray-700");
disableBtn.classList.add("bg-gray-700", "hover:bg-gray-700");
showSecretBtn.classList.add("bg-gray-700", "hover:bg-gray-700");
enableBtn.disabled = true;
disableBtn.disabled = true;
showSecretBtn.disabled = true;
accountTypeBox.innerText = "Guest";
} else if (!isNullish(user.selfInfo?.loginName)) {
loginNameWrapper.hidden = false;
loginNameBox.innerText = user.selfInfo.loginName;
accountTypeBox.innerText = "Normal";
} else if (
!isNullish(user.selfInfo?.providerId) &&
!isNullish(user.selfInfo?.providerUser)
) {
providerWrapper.hidden = false;
providerNameBox.innerText = user.selfInfo.providerId;
providerUserBox.innerText = user.selfInfo.providerUser;
enableBtn.classList.add("bg-gray-700", "hover:bg-gray-700");
disableBtn.classList.add("bg-gray-700", "hover:bg-gray-700");
showSecretBtn.classList.add("bg-gray-700", "hover:bg-gray-700");
enableBtn.disabled = true;
disableBtn.disabled = true;
showSecretBtn.disabled = true;
removeBgColor(enableBtn, disableBtn, showSecretBtn);
passwordWrapper.hidden = true;
totpWrapper.hidden = true;
accountTypeBox.innerText = "Provider";
}
// ---- Update UI ----
function refreshTotpUI() {
if (totpEnabled) {
totpStatusText.textContent = "Status: Enabled";
enableBtn.classList.add("hidden");
disableBtn.classList.remove("hidden");
showSecretBtn.classList.remove("hidden");
} else {
totpStatusText.textContent = "Status: Disabled";
enableBtn.classList.remove("hidden");
disableBtn.classList.add("hidden");
showSecretBtn.classList.add("hidden");
secretBox.classList.add("hidden");
}
}
// ---- Button Events ----
enableBtn.onclick = async () => {
let res = await client.enableOtp();
if (res.kind === "success") {
navigateTo(url);
} else {
showError(`failed to activate OTP: ${res.msg}`);
}
};
disableBtn.onclick = async () => {
let res = await client.disableOtp();
if (res.kind === "success") {
navigateTo(url);
} else {
showError(`failed to deactivate OTP: ${res.msg}`);
}
};
showSecretBtn.onclick = () => {
if (!isNullish(totpSecret)) {
secretText.textContent = totpSecret;
renderOAuth2QRCode(secretCanvas, totpSecret);
}
secretBox.classList.toggle("hidden");
};
displayNameButton.onclick = async () => {
let req = await client.changeDisplayName({
changeDisplayNameRequest: { name: displayNameBox.value },
});
if (req.kind === "success") {
showSuccess("Successfully changed display name");
handleRoute();
} else {
showError(`Failed to update: ${req.msg}`);
}
};
// Initialize UI state
refreshTotpUI();
},
};
}
disableBtn.onclick = async () => {
let res = await client.disableOtp();
if (res.kind === "success") {
navigateTo(url);
} else {
showError(`failed to deactivate OTP: ${res.msg}`);
}
};
showSecretBtn.onclick = () => {
if (!isNullish(totpSecret)) {
secretText.textContent = totpSecret;
renderOAuth2QRCode(secretCanvas, totpSecret);
}
secretBox.classList.toggle("hidden");
};
// Initialize UI state
refreshTotpUI();
},
};
}
addRoute("/profile", route);
addRoute("/profile", route);