diff --git a/frontend/src/styles/account-settings.scss b/frontend/src/styles/account-settings.scss
deleted file mode 100644
index ca4816e592e3..000000000000
--- a/frontend/src/styles/account-settings.scss
+++ /dev/null
@@ -1,195 +0,0 @@
-.pageAccountSettings {
- & > .content > .title {
- font-size: 2rem;
- color: var(--sub-color);
- display: inline-flex;
- align-items: baseline;
- margin-bottom: 1em;
- i {
- margin-right: 0.5em;
- }
- }
- .main {
- display: grid;
- grid-template-columns: 15rem 1fr;
- gap: 4rem;
- .tabs {
- background: var(--sub-alt-color);
- border-radius: calc(var(--roundness) * 2);
- padding: 1rem 0;
- display: flex;
- flex-direction: column;
- height: max-content;
- button {
- padding: 1em 2em;
- width: 100%;
- justify-content: flex-start;
- &.active {
- color: var(--text-color);
- }
- }
- }
- .right {
- padding-top: 1rem;
- .tab {
- display: grid;
- gap: 2rem;
-
- & > .title {
- color: var(--sub-color);
- font-size: 2rem;
- margin-bottom: 2rem;
- }
-
- .section {
- display: grid;
- grid-template-areas: "title buttons" "text buttons";
- grid-template-columns: 2fr 1fr;
- grid-template-rows: auto 1fr;
- column-gap: 2rem;
- row-gap: 0.5rem;
- align-items: center;
- .title {
- color: var(--sub-color);
- grid-area: title;
- }
- .text {
- grid-area: text;
- align-self: normal;
- .red {
- color: var(--error-color);
- }
- }
- .buttons {
- grid-area: buttons;
- display: grid;
- &.vertical {
- grid-auto-flow: row;
- gap: 0.5rem;
- }
- }
- &.discordIntegration {
- .info {
- grid-area: buttons;
- text-align: center;
- color: var(--main-color);
- }
-
- #discordButtonGroup {
- display: grid;
- grid-auto-flow: column;
- justify-content: center;
- gap: 0.5rem;
- }
-
- #unlinkDiscordButton,
- #updateDiscordAvatarButton {
- margin: 0.5rem auto 0 auto;
- font-size: 0.75rem;
- line-height: 0.7rem;
- }
-
- .howto {
- margin-top: 1rem;
- color: var(--text-color);
- }
- }
- &.optOutOfLeaderboards {
- .optedOut {
- grid-area: buttons;
- text-align: center;
- color: var(--sub-color);
- }
- }
- &.setStreakHourOffset {
- .info {
- grid-area: buttons;
- text-align: center;
- color: var(--sub-color);
- }
- }
- &.apeKeys {
- .lostAccess {
- grid-area: buttons;
- text-align: center;
- color: var(--error-color);
- }
- }
- }
- &[data-tab="apeKeys"] {
- table {
- width: 100%;
- border-spacing: 0;
- border-collapse: collapse;
-
- tr.me {
- td {
- color: var(--main-color);
- // font-weight: 900;
- }
- }
-
- td {
- padding: 0.5rem 0.5rem;
- }
-
- thead {
- color: var(--sub-color);
- font-size: 0.75rem;
-
- td {
- padding: 0.5rem;
- background: var(--bg-color);
- position: sticky;
- top: 0;
- z-index: 99;
- }
- }
-
- tbody {
- color: var(--text-color);
-
- tr:nth-child(odd) td {
- background: var(--sub-alt-color);
- }
- }
-
- tfoot {
- td {
- padding: 1rem 0.5rem;
- position: sticky;
- bottom: -5px;
- background: var(--bg-color);
- color: var(--main-color);
- z-index: 4;
- }
- }
-
- tr {
- td:first-child {
- padding-left: 1rem;
- }
- td:last-child {
- padding-right: 1rem;
- }
- }
- .keyButtons {
- display: flex;
- gap: 0.5rem;
- }
- }
- }
-
- &[data-tab="apeKeys"] {
- tr td:first-child {
- text-align: center;
- }
- }
- }
- }
- // .right {
- // background: var(--sub-alt-color);
- // border-radius: calc(var(--roundness) * 2);
- // }
- }
-}
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 1b1dc6632a16..5b53a661e173 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -18,7 +18,7 @@
@layer custom-styles {
@import "buttons", "ads", "test-activity", "animations", "caret",
"commandline", "core", "fonts", "inputs", "keymap", "monkey", "popups",
- "scroll", "account-settings", "test", "loading", "media-queries";
+ "scroll", "test", "loading", "media-queries";
.chartCanvas {
width: 100% !important;
diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss
index 424c0fffce5c..b833df2a8cc7 100644
--- a/frontend/src/styles/media-queries-blue.scss
+++ b/frontend/src/styles/media-queries-blue.scss
@@ -28,21 +28,6 @@
}
}
}
- .pageAccountSettings {
- .main {
- grid-template-columns: 1fr;
- grid-template-rows: auto auto;
- .tabs {
- padding: 0;
- display: grid;
- grid-auto-flow: row;
- button {
- justify-content: center;
- padding: 1em 0.5em;
- }
- }
- }
- }
}
@media (pointer: coarse) and (max-width: 778px) {
#restartTestButton {
diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss
index 559d955b3833..444da3e43b4e 100644
--- a/frontend/src/styles/media-queries-green.scss
+++ b/frontend/src/styles/media-queries-green.scss
@@ -4,20 +4,6 @@
.content-grid {
--content-max-width: 768px;
}
- .pageAccountSettings .main {
- gap: 2rem;
- .right .tab .section {
- grid-template-columns: 1fr;
- grid-template-areas:
- "title"
- "text" "buttons";
- &.discordIntegration .info {
- height: 8rem;
- display: grid;
- align-content: center;
- }
- }
- }
.pageTest {
#result .wrapper .stats.morestats {
display: grid;
diff --git a/frontend/src/styles/media-queries-yellow.scss b/frontend/src/styles/media-queries-yellow.scss
index 535a872cffda..bdc5cde176a8 100644
--- a/frontend/src/styles/media-queries-yellow.scss
+++ b/frontend/src/styles/media-queries-yellow.scss
@@ -5,13 +5,6 @@
--content-max-width: 1024px;
}
- .pageAccountSettings .main {
- gap: 2rem;
- .right .tab .section {
- grid-template-columns: 1fr 1fr;
- }
- }
-
.pageTest {
#liveStatsTextTop,
#liveStatsTextBottom {
@@ -36,15 +29,4 @@
display: none;
}
}
-
- .pageFriends {
- .content .friends table,
- .content .pendingRequests table {
- font-size: 0.9rem;
-
- .badge .text {
- display: none;
- }
- }
- }
}
diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index 52b7231bd230..5647b94bec9a 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -6,14 +6,17 @@ import {
EmailAuthProvider,
GithubAuthProvider,
GoogleAuthProvider,
+ linkWithCredential,
linkWithPopup,
reauthenticateWithCredential,
reauthenticateWithPopup,
unlink,
+ updateEmail,
updateProfile,
User,
User as UserType,
} from "firebase/auth";
+import { createMemo } from "solid-js";
import { z, ZodString } from "zod";
import Ape from "./ape";
@@ -31,14 +34,17 @@ import {
signInWithEmailAndPassword,
signInWithPopup,
} from "./firebase";
+import { createSignalWithSetters } from "./hooks/createSignalWithSetters";
+import { createEffectOn } from "./hooks/effects";
import * as Sentry from "./sentry";
-import { isAuthenticated, setUserId } from "./states/core";
+import { getUserId, isAuthenticated, setUserId } from "./states/core";
import { hideLoaderBar, showLoaderBar } from "./states/loader-bar";
import {
showErrorNotification,
showNoticeNotification,
showSuccessNotification,
} from "./states/notifications";
+import { FaObject } from "./types/font-awesome";
import { isDevEnvironment } from "./utils/env";
import { createErrorMessage } from "./utils/error";
import { typedKeys } from "./utils/misc";
@@ -47,6 +53,7 @@ import { OneOf } from "./utils/types";
type AuthMethodInfo = {
display: string;
+ fa: FaObject;
} & OneOf<{
provider: AuthProvider;
providerId: string;
@@ -60,18 +67,22 @@ const authMethods = {
password: {
display: "Password",
providerId: "password",
+ fa: { icon: "fa-lock" },
},
github: {
display: "GitHub",
provider: new GithubAuthProvider(),
+ fa: { variant: "brand", icon: "fa-github" },
},
google: {
display: "Google",
provider: new GoogleAuthProvider(),
+ fa: { variant: "brand", icon: "fa-google" },
},
} as const satisfies Record
;
export type AuthMethod = keyof typeof authMethods;
+export type ProviderAuthMethod = Exclude;
export type AuthResult =
| {
@@ -98,6 +109,41 @@ type ReauthenticateOptions = {
password?: string;
};
+const [getAuthenticatedUserReactive, { updateAuthenticatedUser }] =
+ createSignalWithSetters | null>(null)({
+ updateAuthenticatedUser: (set) => {
+ const user = getAuthenticatedUser();
+ if (user === null) {
+ set(null);
+ } else {
+ set({ providerData: user.providerData });
+ }
+ },
+ });
+export { getAuthenticatedUser };
+
+createEffectOn(getUserId, () => {
+ updateAuthenticatedUser();
+});
+
+const authenticationMemos = Object.fromEntries(
+ typedKeys(authMethods).map((authMethod) => {
+ const memo = createMemo(() => {
+ const providerId = getProviderId(authMethod);
+
+ const user = getAuthenticatedUserReactive();
+ if (user === null) return undefined;
+ const result = {
+ isInUse: user.providerData.some((p) => p.providerId === providerId),
+ hasAdditionalAuthMethods: hasAdditionalAuthMethods(authMethod),
+ };
+
+ return result;
+ });
+ return [authMethod, memo];
+ }),
+);
+
export async function sendVerificationEmail(): Promise {
if (!isAuthAvailable()) {
showErrorNotification("Authentication uninitialized", { durationMs: 3000 });
@@ -241,34 +287,88 @@ export async function signInWithProvider(
return { success: true };
}
-export async function addAuthProvider(authMethod: AuthMethod): Promise {
+export async function addAuthProvider(
+ options:
+ | { authMethod: ProviderAuthMethod }
+ | {
+ authMethod: "password";
+ email: string;
+ password: string;
+ },
+): Promise {
if (!isAuthAvailable()) {
showErrorNotification("Authentication uninitialized", { durationMs: 3000 });
return;
}
- const provider = getAuthProvider(authMethod);
- if (provider === undefined) {
- showErrorNotification(`Authentication ${authMethod} is missing a provider`);
- return;
- }
- const providerName = getAuthMethodDisplay(authMethod);
+ const authMethod = options.authMethod;
- showLoaderBar();
const user = getAuthenticatedUser();
+ const providerName = getAuthMethodDisplay(authMethod);
+
if (!user) return;
+ showLoaderBar();
try {
- await linkWithPopup(user, provider);
- hideLoaderBar();
+ if (authMethod === "password") {
+ await addPasswordProvider(user, options);
+ } else {
+ await addPopupProvider(user, options);
+ }
+
showSuccessNotification(`${providerName} authentication added`);
- authEvent.dispatch({ type: "authConfigUpdated" });
+ updateAuthenticatedUser();
} catch (error) {
- hideLoaderBar();
showErrorNotification(`Failed to add ${providerName} authentication`, {
error,
});
+ } finally {
+ hideLoaderBar();
+ }
+}
+
+async function addPasswordProvider(
+ user: User,
+ options: {
+ email: string;
+ password: string;
+ },
+) {
+ const reauth = await reauthenticate({ password: options.password });
+ if (reauth.status !== "success") {
+ throw new Error(reauth.message);
+ }
+ const credential = EmailAuthProvider.credential(
+ options.email,
+ options.password,
+ );
+ await linkWithCredential(reauth.user, credential);
+ await updateEmail(user, options.email);
+ const response = await Ape.users.updateEmail({
+ body: {
+ newEmail: options.email,
+ previousEmail: reauth.user.email as string,
+ },
+ });
+ if (response.status !== 200) {
+ throw new Error(
+ "Password authentication added but updating the database email failed. This shouldn't happen, please contact support. Error",
+ );
}
}
+async function addPopupProvider(
+ user: User,
+ options: { authMethod: ProviderAuthMethod },
+) {
+ const authMethod = options.authMethod;
+ const provider = getAuthProvider(authMethod);
+ if (provider === undefined) {
+ throw new Error(`Authentication ${authMethod} is missing a provider`);
+ }
+
+ await linkWithPopup(user, provider);
+ authEvent.dispatch({ type: "authConfigUpdated" });
+}
+
export async function removeAuthProvider(
authMethod: AuthMethod,
options?: { password?: string },
@@ -285,6 +385,7 @@ export async function removeAuthProvider(
}
try {
await unlink(reauth.user, getProviderId(authMethod));
+ updateAuthenticatedUser();
} catch (e) {
const message = createErrorMessage(
e,
@@ -464,7 +565,7 @@ function getPreferredAuthenticationMethod(
return undefined;
}
-function isUsingAuthentication(authMethod: AuthMethod): boolean {
+export function isUsingAuthentication(authMethod: AuthMethod): boolean {
const providerId = getProviderId(authMethod);
return (
getAuthenticatedUser()?.providerData.some(
@@ -473,6 +574,10 @@ function isUsingAuthentication(authMethod: AuthMethod): boolean {
);
}
+export function isUsingAuthenticationReactive(authMethod: AuthMethod): boolean {
+ return authenticationMemos[authMethod]?.()?.isInUse ?? false;
+}
+
export function getPasswordSchema(): ZodString {
return isDevEnvironment() ? z.string().min(6) : PasswordSchema;
}
@@ -487,10 +592,18 @@ export function hasAdditionalAuthMethods(authMethod: AuthMethod) {
);
}
+export function hasAdditionalAuthMethodsReactive(authMethod: AuthMethod) {
+ return authenticationMemos[authMethod]?.()?.hasAdditionalAuthMethods ?? false;
+}
+
export function getAuthMethodDisplay(authMethod: AuthMethod): string {
return authMethods[authMethod].display;
}
+export function getAuthMethodIcon(authMethod: AuthMethod): FaObject {
+ return authMethods[authMethod].fa;
+}
+
function getProviderId(authMethod: AuthMethod): string {
const info = authMethods[authMethod];
diff --git a/frontend/src/ts/collections/ape-keys.ts b/frontend/src/ts/collections/ape-keys.ts
new file mode 100644
index 000000000000..262cf1809eb6
--- /dev/null
+++ b/frontend/src/ts/collections/ape-keys.ts
@@ -0,0 +1,200 @@
+import { queryCollectionOptions } from "@tanstack/query-db-collection";
+import {
+ createCollection,
+ createOptimisticAction,
+ useLiveQuery,
+} from "@tanstack/solid-db";
+import Ape from "../ape";
+import { queryClient } from "../queries";
+import { baseKey } from "../queries/utils/keys";
+import { isAuthenticated } from "../states/core";
+import {
+ setApeKeysDenied,
+ setLastGeneratedApeKey,
+} from "../states/account-settings";
+import { applyIdWorkaround, tempId } from "./utils/misc";
+import { typedEntries } from "../utils/misc";
+import { ApeKey } from "@monkeytype/schemas/ape-keys";
+import { showSuccessNotification } from "../states/notifications";
+import {
+ replaceSpacesWithUnderscores,
+ replaceUnderscoresWithSpaces,
+} from "../utils/strings";
+
+export type ApeKeyEntry = ApeKey & { _id: string };
+const queryKeys = {
+ root: () => [...baseKey("apeKeys", { isUserSpecific: true })],
+};
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export function useApeKeyLiveQuery() {
+ return useLiveQuery((q) =>
+ isAuthenticated()
+ ? q
+ .from({ keys: apeKeysCollection })
+ .orderBy(({ keys }) => keys.createdOn, "asc")
+ : undefined,
+ );
+}
+
+const apeKeysCollection = createCollection(
+ queryCollectionOptions({
+ staleTime: Infinity,
+ queryKey: queryKeys.root(),
+ queryClient,
+ enabled: isAuthenticated,
+ getKey: (it) => it._id,
+ queryFn: async () => {
+ const response = await Ape.apeKeys.get();
+
+ if (response.status !== 200) {
+ if (
+ response.body.message ===
+ "You have lost access to ape keys, please contact support"
+ ) {
+ setApeKeysDenied(true);
+ }
+
+ throw new Error(`Error fetching ape keys: ${response.body.message}`);
+ }
+
+ const dataArray = typedEntries(response.body.data)
+ .map(
+ ([_id, data]) =>
+ ({
+ ...data,
+ _id,
+ name: replaceUnderscoresWithSpaces(data.name),
+ }) satisfies ApeKeyEntry,
+ )
+ .map(applyIdWorkaround);
+
+ return dataArray;
+ },
+ }),
+);
+
+type ActionType = {
+ insertKey: { name: string };
+ setEnabled: { apeKeyId: string; enabled: boolean };
+ rename: { apeKeyId: string; name: string };
+ remove: { apeKeyId: string };
+};
+
+const actions = {
+ insertKey: createOptimisticAction({
+ onMutate: ({ name }) => {
+ apeKeysCollection.insert({
+ _id: tempId(),
+ name: replaceSpacesWithUnderscores(name),
+ enabled: false,
+ lastUsedOn: -1,
+ createdOn: Date.now(),
+ modifiedOn: Date.now(),
+ });
+ },
+ mutationFn: async ({ name }) => {
+ const response = await Ape.apeKeys.add({
+ body: { name, enabled: false },
+ });
+
+ if (response.status !== 200) {
+ throw new Error(`Failed to add key: ${response.body.message}`);
+ }
+
+ const newKey = {
+ ...response.body.data.apeKeyDetails,
+ _id: response.body.data.apeKeyId,
+ name: replaceUnderscoresWithSpaces(name),
+ };
+
+ apeKeysCollection.utils.writeInsert(newKey);
+
+ setLastGeneratedApeKey(response.body.data.apeKey);
+ },
+ }),
+ setEnabled: createOptimisticAction({
+ onMutate: ({ apeKeyId, enabled }) => {
+ apeKeysCollection.update(apeKeyId, (key) => {
+ key.enabled = enabled;
+ });
+ },
+ mutationFn: async ({ apeKeyId, enabled }) => {
+ const response = await Ape.apeKeys.save({
+ params: { apeKeyId },
+ body: { enabled },
+ });
+
+ if (response.status !== 200) {
+ throw new Error(`Failed to update key: ${response.body.message}`);
+ }
+
+ apeKeysCollection.utils.writeUpdate({ _id: apeKeyId, enabled });
+
+ showSuccessNotification(`Key ${enabled ? "active" : "inactive"}`);
+ },
+ }),
+ rename: createOptimisticAction({
+ onMutate: ({ apeKeyId, name }) => {
+ apeKeysCollection.update(apeKeyId, (key) => {
+ key.name = replaceUnderscoresWithSpaces(name);
+ });
+ },
+ mutationFn: async ({ apeKeyId, name }) => {
+ const response = await Ape.apeKeys.save({
+ params: { apeKeyId },
+ body: { name },
+ });
+
+ if (response.status !== 200) {
+ throw new Error(`Failed to update key: ${response.body.message}`);
+ }
+
+ apeKeysCollection.utils.writeUpdate({
+ _id: apeKeyId,
+ name: replaceUnderscoresWithSpaces(name),
+ });
+ },
+ }),
+ remove: createOptimisticAction({
+ onMutate: ({ apeKeyId }) => {
+ apeKeysCollection.delete(apeKeyId);
+ },
+ mutationFn: async ({ apeKeyId }) => {
+ const response = await Ape.apeKeys.delete({ params: { apeKeyId } });
+ if (response.status !== 200) {
+ throw new Error(`Failed to delete key: ${response.body.message}`);
+ }
+
+ apeKeysCollection.utils.writeDelete(apeKeyId);
+ },
+ }),
+};
+
+export async function insertApeKey(
+ params: ActionType["insertKey"],
+): Promise {
+ const transaction = actions.insertKey(params);
+ await transaction.isPersisted.promise;
+}
+
+export async function updateApeKeyEnabled(
+ params: ActionType["setEnabled"],
+): Promise {
+ const transaction = actions.setEnabled(params);
+ await transaction.isPersisted.promise;
+}
+
+export async function renameApeKey(
+ params: ActionType["rename"],
+): Promise {
+ const transaction = actions.rename(params);
+ await transaction.isPersisted.promise;
+}
+
+export async function removeApeKey(
+ params: ActionType["remove"],
+): Promise {
+ const transaction = actions.remove(params);
+ await transaction.isPersisted.promise;
+}
diff --git a/frontend/src/ts/components/common/Setting.tsx b/frontend/src/ts/components/common/Setting.tsx
new file mode 100644
index 000000000000..fc5d7e6d8947
--- /dev/null
+++ b/frontend/src/ts/components/common/Setting.tsx
@@ -0,0 +1,132 @@
+import { JSXElement, ParentProps, Show } from "solid-js";
+import { z } from "zod";
+import { serialize } from "zod-urlsearchparams";
+
+import {
+ showErrorNotification,
+ showSuccessNotification,
+} from "../../states/notifications";
+import { cn } from "../../utils/cn";
+import { Button } from "./Button";
+import { FaProps } from "./Fa";
+import { H3 } from "./Headers";
+
+export type SettingProps = {
+ title: string;
+ fa: FaProps;
+ description: string | JSXElement;
+ inputs?: JSXElement;
+ fullWidthInputs?: JSXElement;
+ breakpoints?: "none" | "normal" | "narrow";
+} & ParentProps &
+ (
+ | {
+ /**
+ * data-settings-key
+ */
+ key: string;
+ showDeepLink?: true;
+ }
+ | {
+ key?: never;
+ showDeepLink: false;
+ }
+ ) &
+ (
+ | {
+ disabled: boolean;
+ disabledDescription: JSXElement;
+ }
+ | {
+ disabled?: never;
+ disabledDescription?: never;
+ }
+ );
+
+export function Setting(props: SettingProps): JSXElement {
+ const breakpoints = () => props.breakpoints ?? "normal";
+ return (
+
+
+
+
+
+
+
+
+
{props.disabledDescription}
+
+ {props.description}
+
+
+ {props.inputs}
+
+
+ {props.children}
+
+
+ );
+}
+
+function DeepLinkButton(props: { key: string }) {
+ return (
+