Set up the user interface state model and set up the admin user onboarding #283

savanni · 2024-12-18T04:49:53Z

savanni commented

2024-12-18 04:49:53 +00:00

In this MR, I'm setting up the onboarding flow for the admin user. On a new server, the first user going there will see this interface, prompting for an admin password:

After the admin password has been set, the users will be prompted to log in:

To make this happen, in the UI I had to finally work out state management and query/response server interactions. I've broken the Websocket connection in the interests of getting this part going.

State management is being done through a React state provider, like so:

export const StateProvider = ({ client, children }: PropsWithChildren<StateProviderProps>) => {
    ...
    return <StateContext.Provider value={[state, stateManager.current]}>
        {children}
    </StateContext.Provider>;
}

And the state manager, which gets initialized in the StateProvider component, handles interacting with the server and dispatching messages to the store reducer:

class StateManager {
    ...
    async setAdminPassword(password: string) {
        if (!this.client || !this.dispatch) return;

        await this.client.setAdminPassword(password);
        await this.status();
    }
}

In this MR, I'm setting up the onboarding flow for the admin user. On a new server, the first user going there will see this interface, prompting for an admin password: ![image](/attachments/866d72f9-ddb8-4cfa-98b7-296f729691c5) After the admin password has been set, the users will be prompted to log in: ![image](/attachments/69428ac8-fe8c-4f56-8965-74e2d0baf906) To make this happen, in the UI I had to finally work out state management and query/response server interactions. I've broken the Websocket connection in the interests of getting this part going. State management is being done through a React state provider, like so: ``` export const StateProvider = ({ client, children }: PropsWithChildren<StateProviderProps>) => { ... return <StateContext.Provider value={[state, stateManager.current]}> {children} </StateContext.Provider>; } ``` And the state manager, which gets initialized in the `StateProvider` component, handles interacting with the server and dispatching messages to the store reducer: ``` class StateManager { ... async setAdminPassword(password: string) { if (!this.client || !this.dispatch) return; await this.client.setAdminPassword(password); await this.status(); } } ```

image.png

26 KiB

image.png

19 KiB

savanni added 12 commits 2024-12-18 04:49:54 +00:00

Set up new tables to handle users and roles afb510d92e

Start using ResultExt to improve error handling d7e4293da0

Add the ability to save users and games. Link games more tightly to characters 5c23f326b6

Make the interface to show users in the system e8bc0590c6

Set up an admin panel that shows the list of users e505c21bc8

Remove the original UI files 7466ef2a6f

Set up the authentication page 5e89b8257d

Set up a state provider 7ca1581b55

Create a status endpoint that shows the onboarding UI if there's no admin password af0ab5d020

Start trying to set up providers 7d7e6ef300

Merge the auth state into a tabletop in the AppState provider f6a45a9223

Set the admin password on a new server 2a616ef6c9

This sets up the client state manager and state model. It has all of the
functions to support the set admin password endpoint, and some extras
which will be helpful in saving users generally.

savanni merged commit 2a616ef6c9 into main

2024-12-18 14:18:16 +00:00

savanni deleted branch visions-admin

2024-12-18 14:18:16 +00:00

savanni referenced this pull request

2024-12-18 14:19:40 +00:00

Bootstap the initial admin user #108

Sign in to join this conversation.

No reviewers