53 | Logged in as
56 | {matrixClient.userID}
54 |
55 |
57 | {Object.values(bridges).map(bridge =>
74 | {Object.values(bridges).map(bridge =>
75 | {meta.server} ❌
21 | }
22 | return Loading {meta.server}...
23 | }
24 | return
31 | }
32 |
33 | export default BridgeListEntry
34 |
--------------------------------------------------------------------------------
/src/preload.ts:
--------------------------------------------------------------------------------
1 | import { contextBridge, ipcRenderer } from "electron"
2 | import type { LoginCookieOutput, LoginCookiesParams } from "./types/loginstep"
3 |
4 | export interface AccessTokenChangedParams {
5 | homeserverURL: string
6 | accessToken: string
7 | }
8 |
9 | contextBridge.exposeInMainWorld("mautrixAPI", {
10 | openWebview: (params: LoginCookiesParams) =>
11 | ipcRenderer.invoke("mautrix:open-webview", params),
12 | closeWebview: () => ipcRenderer.invoke("mautrix:close-webview"),
13 | accessTokenChanged: (newDetails: AccessTokenChangedParams) =>
14 | ipcRenderer.invoke("mautrix:access-token-changed", newDetails),
15 | openInBrowser: (url: string) => ipcRenderer.invoke("mautrix:open-in-browser", url),
16 | isDevBuild: process.env.NODE_ENV === "development",
17 | })
18 |
19 | declare global {
20 | interface Window {
21 | mautrixAPI: {
22 | openWebview: (params: LoginCookiesParams) => Promise<{ cookies: LoginCookieOutput }>
23 | closeWebview: () => Promise
24 |
44 | }
45 |
46 | const BridgeStatusView = ({ bridge, hidden }: BridgeViewProps) => {
47 | const mxClient = bridge.client.matrixClient
48 | const [login, setLogin] = useState
25 |
40 | setExpandDetails(!expandDetails)}>
26 | {login.profile?.avatar &&
27 | })
}
28 | {login.name ||
30 | {login.id}}
29 |
31 |
32 | {login.state?.state_event || "NO STATE"}
33 |
34 | {login.state?.state_event === "BAD_CREDENTIALS" &&
35 | }
36 |
38 |
39 |
41 | {JSON.stringify(login, null, 2)}
42 |
43 | BridgeView spinner
70 | }
71 |
72 | return
73 | {bridge.whoami.logins.map(login =>
74 | ,
75 | )}
76 | {login ?
94 | }
95 |
96 | export default BridgeStatusView
97 |
--------------------------------------------------------------------------------
/src/app/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useMemo, useCallback } from "react"
2 | import type { RespLogin } from "../types/matrix"
3 | import useInit from "../util/useInit"
4 | import { MatrixClient } from "../api/matrixclient"
5 | import { APIError } from "../api/error"
6 | import TypedLocalStorage from "../api/localstorage"
7 | import MatrixLogin from "./MatrixLogin"
8 | import MainView from "./MainView"
9 |
10 | export interface Credentials {
11 | user_id: string
12 | access_token: string
13 | }
14 |
15 | function useCredentials() {
16 | const [credentials, setCredentials] = useState(() => TypedLocalStorage.credentials)
17 | const setCredentialsProxy = useCallback((newCredentials: Credentials | null) => {
18 | TypedLocalStorage.credentials = newCredentials
19 | setCredentials(newCredentials)
20 | }, [setCredentials])
21 | return [credentials, setCredentialsProxy] as const
22 | }
23 |
24 | function useHomeserverURL() {
25 | const [homeserverURL, setHomeserverURL] = useState(() => TypedLocalStorage.homeserverURL)
26 | const setHomeserverURLProxy = useCallback((url: string) => {
27 | TypedLocalStorage.homeserverURL = url
28 | setHomeserverURL(url)
29 | }, [setHomeserverURL])
30 | return [homeserverURL, setHomeserverURLProxy] as const
31 | }
32 |
33 | const App = () => {
34 | const [error, setError] = useState("")
35 | const [homeserverURL, setHomeserverURL] = useHomeserverURL()
36 | const [credentials, setCredentials] = useCredentials()
37 | const [isLoggedIn, setIsLoggedIn] = useState
82 | New login:
83 | {bridge.whoami.login_flows.map(flow =>
84 | )}
92 |
}
93 | {error} 3:
94 | } else if (isLoggedIn === null) {
95 | return spinner
96 | } else if (!isLoggedIn) {
97 | return mautrix-manager
92 | { 98 | setHomeserverURL(evt.target.value) 99 | setLoginFlows(null) 100 | }} 101 | /> 102 | {!loginFlows?.size && } 103 | {loginFlows?.has("m.login.password") && } 120 | {loginFlows?.has("m.login.sso") && <> 121 | 122 | } 123 | {error &&
124 | {error}
125 |
}
126 |
42 |
43 |
49 |
50 | }
51 |
52 | const DisplayAndWaitStep = ({ params }: { params: LoginDisplayAndWaitParams }) => {
53 | switch (params.type) {
54 | case "emoji":
55 | if (params.image_url) {
56 | return {params.data}
63 | } 64 | case "code": 65 | return{params.data}
66 | case "qr": 67 | return
70 |
72 | default:
73 | return
74 | Unknown display type {(params as { type: string }).type}
75 |
76 | }
77 | }
78 |
79 | const LoginStep = ({ step, onSubmit, onLoginComplete, onCancel }: LoginStepProps) => {
80 | const submitForm = useCallback((evt: React.FormEvent) => {
81 | evt.preventDefault()
82 | const form = evt.currentTarget as HTMLFormElement
83 | const data = Array.from(form.elements).reduce((acc, elem) => {
84 | if (elem instanceof HTMLInputElement) {
85 | acc[elem.name] = elem.value
86 | }
87 | return acc
88 | }, {} as Record
94 |
95 |
96 | case "display_and_wait":
97 | return
98 |
99 |
100 |
101 | case "user_input":
102 | return
112 | case "complete":
113 | return
114 |
115 |
116 | }
117 | }
118 |
119 | const BridgeLoginView = ({ client, onLoginCancel, onLoginComplete }: LoginViewProps) => {
120 | const [error, setError] = useState("")
121 | const [loading, setLoading] = useState(client.loading)
122 | const [step, setStep] = useState(client.step)
123 | useEffect(() => {
124 | const onError = (err: Error) => setError(err.message)
125 | client.listen(setStep, setLoading, onError)
126 | return () => client.stopListen(setStep, setLoading, onError)
127 | }, [client])
128 | const cancelLogin = useCallback(() => {
129 | client.cancel()
130 | onLoginCancel()
131 | }, [client, onLoginCancel])
132 |
133 | let instructionsToRender = step.instructions
134 | if (step.type === "cookies") {
135 | instructionsToRender = "Please complete the login in the webview"
136 | }
137 |
138 | return
139 |
149 | }
150 |
151 | export default BridgeLoginView
152 |
--------------------------------------------------------------------------------
/src/api/loginclient.ts:
--------------------------------------------------------------------------------
1 | import type { LoginStepData } from "../types/loginstep"
2 | import type { RespSubmitLogin } from "../types/login"
3 | import type { ProvisioningClient } from "./provisionclient"
4 |
5 | const baseChromeUserAgent = window.navigator.userAgent
6 | .replace(/ mautrix-manager\/\S+/, "")
7 | .replace(/ Electron\/\S+/, "")
8 |
9 | export class LoginClient {
10 | public readonly loginID: string
11 | #step: LoginStepData
12 | #error: Error | null = null
13 | private submitInProgress = false
14 |
15 | private abortController: AbortController
16 |
17 | private stepListener: ((ev: LoginStepData) => void) | null = null
18 | private loadingListener: ((loading: boolean) => void) | null = null
19 | private errorListener: ((ev: Error) => void) | null = null
20 |
21 | constructor(
22 | public readonly client: ProvisioningClient,
23 | step: RespSubmitLogin,
24 | private readonly onCompleteRefresh: () => void,
25 | ) {
26 | this.abortController = new AbortController()
27 | this.#step = step
28 | this.loginID = step.login_id
29 | this.processStep()
30 | }
31 |
32 | get step() {
33 | return this.#step
34 | }
35 |
36 | get error() {
37 | return this.#error
38 | }
39 |
40 | get loading() {
41 | return this.submitInProgress
42 | }
43 |
44 | listen(
45 | onStep: (ev: LoginStepData) => void,
46 | onLoading: (loading: boolean) => void,
47 | onError: (ev: Error) => void,
48 | ) {
49 | this.stepListener = onStep
50 | this.loadingListener = onLoading
51 | this.errorListener = onError
52 | if (this.#error) {
53 | onError(this.#error)
54 | } else {
55 | onLoading(this.submitInProgress)
56 | onStep(this.#step)
57 | }
58 | }
59 |
60 | stopListen(
61 | onStep: (ev: LoginStepData) => void,
62 | onLoading: (loading: boolean) => void,
63 | onError: (ev: Error) => void,
64 | ) {
65 | if (this.stepListener === onStep) {
66 | this.stepListener = null
67 | }
68 | if (this.loadingListener === onLoading) {
69 | this.loadingListener = null
70 | }
71 | if (this.errorListener === onError) {
72 | this.errorListener = null
73 | }
74 | }
75 |
76 | cancel = () => {
77 | this.abortController.abort()
78 | this.onError(new Error("Login was cancelled"))
79 | }
80 |
81 | private processStep() {
82 | if (this.#step.type === "cookies") {
83 | const closeWebview = () => window.mautrixAPI.closeWebview()
84 | const removeListener = () => this.abortController.signal.removeEventListener("abort", closeWebview)
85 | this.abortController.signal.addEventListener("abort", closeWebview)
86 | if (!this.#step.cookies.user_agent) {
87 | this.#step.cookies.user_agent = baseChromeUserAgent
88 | }
89 | window.mautrixAPI.openWebview(this.#step.cookies).then(
90 | res => this.submitCookies(res.cookies),
91 | this.onError,
92 | ).finally(removeListener)
93 | } else if (this.#step.type === "display_and_wait") {
94 | this.wait()
95 | } else if (this.#step.type === "complete") {
96 | setTimeout(this.onCompleteRefresh, 200)
97 | }
98 | }
99 |
100 | submitUserInput = (params: Record
140 | {error ? `Login failed :( ${error}` : instructionsToRender}
141 |
142 |