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

afb510d92e Set up new tables to handle users and roles

d7e4293da0 Start using ResultExt to improve error handling

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

e8bc0590c6 Make the interface to show users in the system

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

7466ef2a6f Remove the original UI files

5e89b8257d Set up the authentication page

7ca1581b55 Set up a state provider

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

7d7e6ef300 Start trying to set up providers

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

2a616ef6c9 Set the admin password on a new server

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