Add Account Settings page

.github/workflows/nightly.yml

@@ -53,7 +53,7 @@ jobs:
 
       - name: Refresh datasets
         run: |
-          curl -X POST --fail https://${{ env.SUBDOMAIN }}.webknossos.xyz/data/triggers/checkInboxBlocking?token=${{ secrets.WK_AUTH_TOKEN }}
+          curl -X POST --fail https://${{ env.SUBDOMAIN }}.webknossos.xyz/data/triggers/checkInboxBlocking?token=${{ secrets.WK_DEV_AUTH_TOKEN }}
 
       - name: Run screenshot tests
         run: |
@@ -62,7 +62,7 @@ jobs:
           yarn test-screenshot
         env:
           URL: https://${{ env.SUBDOMAIN }}.webknossos.xyz/
-          WK_AUTH_TOKEN: ${{ secrets.WK_AUTH_TOKEN }}
+          WK_AUTH_TOKEN: ${{ secrets.WK_DEV_AUTH_TOKEN }}
           BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
           BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
 

.github/workflows/wkorg-nightly.yaml

@@ -28,7 +28,7 @@ jobs:
           yarn test-wkorg-screenshot
         env:
           URL: https://webknossos.org/
-          WK_AUTH_TOKEN: ${{ secrets.WK_AUTH_TOKEN }}
+          WK_AUTH_TOKEN: ${{ secrets.WK_ORG_AUTH_TOKEN }}
           BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
           BROWSERSTACK_ACCESS_KEY : ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
 
@@ -57,4 +57,4 @@ jobs:
             --data-raw '[{"position":[2752,4320,1728],"additionalCoordinates":[],"mag":[1,1,1],"cubeSize":32,"fourBit":false}]' \
             'https://data-humerus.webknossos.org/data/datasets/scalable_minds/l4dense_motta_et_al_demo/layers/segmentation/data?token=' \
             | grep -q "content-encoding: gzip"
-          echo Success.
+          echo Success.

frontend/javascripts/admin/account/account_auth_token_view.tsx

@@ -18,9 +18,14 @@ function AccountAuthTokenView() {
   }, []);
 
   async function fetchData(): Promise<void> {
-    const token = await getAuthToken();
-    setCurrentToken(token);
-    setIsLoading(false);
+    try {
+      const token = await getAuthToken();
+      setCurrentToken(token);
+    } catch (error) {
+      console.error("Failed to fetch auth token:", error);
+    } finally {
+      setIsLoading(false);
+    }
   }
 
   const handleRevokeToken = async (): Promise<void> => {

frontend/javascripts/admin/account/account_password_view.tsx

@@ -1,34 +1,29 @@
-import { DeleteOutlined, LockOutlined, ReloadOutlined } from "@ant-design/icons";
+import { EditOutlined, LockOutlined } from "@ant-design/icons";
+import { changePassword, logoutUser } from "admin/rest_api";
 import { Alert, Button, Col, Form, Input, Row, Space } from "antd";
-import Request from "libs/request";
 import Toast from "libs/toast";
 import messages from "messages";
 import { useState } from "react";
-import { type RouteComponentProps, withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import { logoutUserAction } from "viewer/model/actions/user_actions";
 import Store from "viewer/store";
 import { SettingsCard } from "./helpers/settings_card";
 import { SettingsTitle } from "./helpers/settings_title";
 const FormItem = Form.Item;
 const { Password } = Input;
 
-type Props = {
-  history: RouteComponentProps["history"];
-};
-
 const MIN_PASSWORD_LENGTH = 8;
 
-function AccountPasswordView({ history }: Props) {
+function AccountPasswordView() {
+  const history = useHistory();
   const [form] = Form.useForm();
   const [isResetPasswordVisible, setResetPasswordVisible] = useState(false);
 
   function onFinish(formValues: Record<string, any>) {
-    Request.sendJSONReceiveJSON("/api/auth/changePassword", {
-      data: formValues,
-    })
+    changePassword(formValues)
       .then(async () => {
         Toast.success(messages["auth.reset_pw_confirmation"]);
-        await Request.receiveJSON("/api/auth/logout");
+        await logoutUser();
         Store.dispatch(logoutUserAction());
         history.push("/auth/login");
       })
@@ -164,7 +159,8 @@ function AccountPasswordView({ history }: Props) {
     {
       title: "Coming soon",
       value: "Passwordless login with passkeys is coming soon",
-      action: <Button type="default" shape="circle" icon={<DeleteOutlined />} size="small" />,
+      // action: <Button type="default" shape="circle" icon={<DeleteOutlined />} size="small" />,
+      action: undefined,
     },
   ];
 
@@ -180,7 +176,7 @@ function AccountPasswordView({ history }: Props) {
               <Button
                 type="default"
                 shape="circle"
-                icon={<ReloadOutlined />}
+                icon={<EditOutlined />}
                 size="small"
                 onClick={handleResetPassword}
               />
@@ -201,4 +197,4 @@ function AccountPasswordView({ history }: Props) {
   );
 }
 
-export default withRouter<RouteComponentProps, any>(AccountPasswordView);
+export default AccountPasswordView;

frontend/javascripts/admin/account/account_settings_view.tsx

@@ -47,7 +47,7 @@ const MENU_ITEMS: MenuItemGroupType[] = [
 function AccountSettingsView() {
   const location = useLocation();
   const history = useHistory();
-  const selectedKey = location.pathname.split("/").pop() || "profile";
+  const selectedKey = location.pathname.split("/").filter(Boolean).pop() || "profile";
 
   const breadcrumbItems = [
     {

frontend/javascripts/admin/auth/finish_reset_password_view.tsx

@@ -3,16 +3,16 @@ import { Button, Card, Col, Form, Input, Row } from "antd";
 import Request from "libs/request";
 import Toast from "libs/toast";
 import messages from "messages";
-import { type RouteComponentProps, withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 const FormItem = Form.Item;
 const { Password } = Input;
 type Props = {
-  history: RouteComponentProps["history"];
   resetToken: string;
 };
 
 function FinishResetPasswordView(props: Props) {
   const [form] = Form.useForm();
+  const history = useHistory();
 
   function onFinish(formValues: Record<string, any>) {
     const data = formValues;
@@ -27,7 +27,7 @@ function FinishResetPasswordView(props: Props) {
       data,
     }).then(() => {
       Toast.success(messages["auth.reset_pw_confirmation"]);
-      props.history.push("/auth/login");
+      history.push("/auth/login");
     });
   }
 
@@ -128,4 +128,4 @@ function FinishResetPasswordView(props: Props) {
   );
 }
 
-export default withRouter<RouteComponentProps & Props, any>(FinishResetPasswordView);
+export default FinishResetPasswordView;

frontend/javascripts/admin/auth/login_view.tsx

@@ -1,16 +1,15 @@
 import { Card, Col, Row } from "antd";
 import * as Utils from "libs/utils";
 import window from "libs/window";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import LoginForm from "./login_form";
 
 type Props = {
-  history: RouteComponentProps["history"];
   redirect?: string;
 };
 
-function LoginView({ history, redirect }: Props) {
+function LoginView({ redirect }: Props) {
+  const history = useHistory();
   const onLoggedIn = () => {
     if (!Utils.hasUrlParam("redirectPage")) {
       if (redirect) {
@@ -38,4 +37,4 @@ function LoginView({ history, redirect }: Props) {
   );
 }
 
-export default withRouter<RouteComponentProps & Props, any>(LoginView);
+export default LoginView;

frontend/javascripts/admin/auth/start_reset_password_view.tsx

@@ -3,14 +3,12 @@ import { Button, Card, Col, Form, Input, Row } from "antd";
 import Request from "libs/request";
 import Toast from "libs/toast";
 import messages from "messages";
-import { Link, type RouteComponentProps, withRouter } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 const FormItem = Form.Item;
-type Props = {
-  history: RouteComponentProps["history"];
-};
 
-function StartResetPasswordView({ history }: Props) {
+function StartResetPasswordView() {
   const [form] = Form.useForm();
+  const history = useHistory();
 
   const onFinish = (formValues: Record<string, any>) => {
     Request.sendJSONReceiveJSON("/api/auth/startResetPassword", {
@@ -67,4 +65,4 @@ function StartResetPasswordView({ history }: Props) {
   );
 }
 
-export default withRouter<RouteComponentProps & Props, any>(StartResetPasswordView);
+export default StartResetPasswordView;

frontend/javascripts/admin/dataset/dataset_add_view.tsx

@@ -4,13 +4,11 @@ import DatasetUploadView from "admin/dataset/dataset_upload_view";
 import { getDatastores } from "admin/rest_api";
 import { Button, Layout, Modal, Tabs, type TabsProps } from "antd";
 import features from "features";
-import type { History } from "history";
 import { useFetch } from "libs/react_helpers";
 import { useWkSelector } from "libs/react_hooks";
 import React, { useState } from "react";
 import { connect } from "react-redux";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import type { APIDataStore } from "types/api_types";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
@@ -33,7 +31,8 @@ const addTypeToVerb: Record<DatasetAddType, string> = {
   compose: "created",
 };
 
-function DatasetAddView({ history }: RouteComponentProps) {
+function DatasetAddView() {
+  const history = useHistory();
   const datastores = useFetch<APIDataStore[]>(getDatastores, [], []);
   const [datasetId, setDatasetId] = useState("");
   const [uploadedDatasetName, setUploadedDatasetName] = useState("");
@@ -267,15 +266,15 @@ const mapStateToProps = (state: WebknossosState) => ({
 });
 
 const connector = connect(mapStateToProps);
-export default connector(withRouter(DatasetAddView));
+export default connector(DatasetAddView);
 
 const getPostUploadModal = (
   datasetNeedsConversion: boolean,
   datasetAddType: DatasetAddType,
   datasetId: string,
   uploadedDatasetName: string,
   setDatasetId: (arg0: string) => void,
-  history: History<unknown>,
+  history: ReturnType<typeof useHistory>,
 ) => {
   return (
     <Modal

frontend/javascripts/admin/organization/organization_view.tsx

@@ -48,7 +48,7 @@ const OrganizationView = () => {
   );
   const location = useLocation();
   const history = useHistory();
-  const selectedKey = location.pathname.split("/").pop() || "overview";
+  const selectedKey = location.pathname.split("/").filter(Boolean).pop() || "overview";
 
   const breadcrumbItems = [
     {

frontend/javascripts/admin/project/project_create_view.tsx

@@ -14,13 +14,11 @@ import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
 import { FormItemWithInfo } from "../../dashboard/dataset/helper_components";
 
 const FormItem = Form.Item;
-type OwnProps = {
+type Props = {
   projectId?: string | null | undefined;
 };
-type Props = OwnProps;
-type PropsWithRouter = Props;
 
-function ProjectCreateView({ projectId }: PropsWithRouter) {
+function ProjectCreateView({ projectId }: Props) {
   const [teams, setTeams] = useState<APITeam[]>([]);
   const [users, setUsers] = useState<APIUser[]>([]);
   const [isFetchingData, setIsFetchingData] = useState<boolean>(false);

frontend/javascripts/admin/rest_api.ts

@@ -150,6 +150,10 @@ export async function loginUser(formValues: {
   return [activeUser, organization];
 }
 
+export async function logoutUser(): Promise<void> {
+  await Request.receiveJSON("/api/auth/logout");
+}
+
 export async function getUsers(): Promise<Array<APIUser>> {
   const users = await Request.receiveJSON("/api/users");
   assertResponseLimit(users);
@@ -237,6 +241,12 @@ export async function revokeAuthToken(): Promise<void> {
   });
 }
 
+export async function changePassword(data: Record<string, string>): Promise<void> {
+  await Request.sendJSONReceiveJSON("/api/auth/changePassword", {
+    data: data,
+  });
+}
+
 // Used only by the webknossos-libs python client, but tested here in the snapshot tests.
 export async function getLoggedTimes(userID: string): Promise<Array<APITimeInterval>> {
   const url = `/api/users/${userID}/loggedTime`;

frontend/javascripts/admin/scripts/script_create_view.tsx

@@ -2,8 +2,7 @@ import { createScript, getScript, getTeamManagerOrAdminUsers, updateScript } fro
 import { Button, Card, Form, Input, Select } from "antd";
 import { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import type { APIUser } from "types/api_types";
 import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
 import type { WebknossosState } from "viewer/store";
@@ -16,11 +15,9 @@ type StateProps = {
   activeUser: APIUser;
 };
 type Props = OwnProps & StateProps;
-type PropsWithRouter = Props & {
-  history: RouteComponentProps["history"];
-};
 
-function ScriptCreateView({ scriptId, activeUser, history }: PropsWithRouter) {
+function ScriptCreateView({ scriptId, activeUser }: Props) {
+  const history = useHistory();
   const [users, setUsers] = useState<APIUser[]>([]);
   const [isFetchingData, setIsFetchingData] = useState<boolean>(false);
   const [form] = Form.useForm();
@@ -135,4 +132,4 @@ const mapStateToProps = (state: WebknossosState): StateProps => ({
 });
 
 const connector = connect(mapStateToProps);
-export default connector(withRouter<RouteComponentProps & Props, any>(ScriptCreateView));
+export default connector(ScriptCreateView);

frontend/javascripts/admin/task/task_create_form_view.tsx

@@ -42,8 +42,7 @@ import { Vector3Input, Vector6Input } from "libs/vector_input";
 import _ from "lodash";
 import messages from "messages";
 import React, { useEffect, useState } from "react";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import type { APIDataset, APIProject, APIScript, APITask, APITaskType } from "types/api_types";
 import type { Vector3, Vector6 } from "viewer/constants";
 import type { BoundingBoxObject } from "viewer/store";
@@ -291,7 +290,6 @@ export function ReloadResourceButton({
 
 type Props = {
   taskId: string | null | undefined;
-  history: RouteComponentProps["history"];
 };
 
 type FormValues = {
@@ -309,7 +307,8 @@ type FormValues = {
   neededExperience: NewTask["neededExperience"];
 };
 
-function TaskCreateFormView({ taskId, history }: Props) {
+function TaskCreateFormView({ taskId }: Props) {
+  const history = useHistory();
   const { modal } = App.useApp();
   const [form] = Form.useForm<FormValues>();
 
@@ -811,4 +810,4 @@ function TaskCreateFormView({ taskId, history }: Props) {
   );
 }
 
-export default withRouter<RouteComponentProps & Props, any>(TaskCreateFormView);
+export default TaskCreateFormView;