forked from Mirrors/gomuks
87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
// gomuks - A Matrix client written in Go.
|
|
// Copyright (C) 2024 Tulir Asokan
|
|
//
|
|
// This program is free software: you can redistribute it and/or modify
|
|
// it under the terms of the GNU Affero General Public License as published by
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
// (at your option) any later version.
|
|
//
|
|
// This program is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU Affero General Public License for more details.
|
|
//
|
|
// You should have received a copy of the GNU Affero General Public License
|
|
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
import React, { useCallback, useEffect, useState } from "react"
|
|
import type Client from "../../api/client.ts"
|
|
import "./LoginScreen.css"
|
|
import { ClientState } from "../../api/types/hievents.ts"
|
|
|
|
export interface LoginScreenProps {
|
|
client: Client
|
|
clientState: ClientState
|
|
}
|
|
|
|
export const LoginScreen = ({ client }: LoginScreenProps) => {
|
|
const [username, setUsername] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
const [homeserverURL, setHomeserverURL] = useState("")
|
|
const [error, setError] = useState("")
|
|
|
|
const login = useCallback((evt: React.FormEvent) => {
|
|
evt.preventDefault()
|
|
client.login(homeserverURL, username, password).then(
|
|
() => {},
|
|
err => setError(err.toString()),
|
|
)
|
|
}, [homeserverURL, username, password, client])
|
|
|
|
const resolveHomeserver = useCallback(() => {
|
|
client.discoverHomeserver(username).then(
|
|
resp => setHomeserverURL(resp["m.homeserver"].base_url),
|
|
err => setError(`Failed to resolve homeserver: ${err}`),
|
|
)
|
|
}, [client, username])
|
|
|
|
useEffect(() => {
|
|
if (!username.startsWith("@") || !username.includes(":") || !username.includes(".")) {
|
|
return
|
|
}
|
|
const timeout = setTimeout(resolveHomeserver, 500)
|
|
return () => {
|
|
clearTimeout(timeout)
|
|
}
|
|
}, [username, resolveHomeserver])
|
|
|
|
return <main className="matrix-login">
|
|
<h1>gomuks web</h1>
|
|
<form onSubmit={login}>
|
|
<input
|
|
type="text"
|
|
id="mxlogin-username"
|
|
placeholder="User ID"
|
|
value={username}
|
|
onChange={evt => setUsername(evt.target.value)}
|
|
/>
|
|
<input
|
|
type="password"
|
|
id="mxlogin-password"
|
|
placeholder="Password"
|
|
value={password}
|
|
onChange={evt => setPassword(evt.target.value)}
|
|
/>
|
|
<input
|
|
type="text"
|
|
id="mxlogin-homeserver-url"
|
|
placeholder="Homeserver URL"
|
|
value={homeserverURL}
|
|
onChange={evt => setHomeserverURL(evt.target.value)}
|
|
/>
|
|
<button className="mx-login-button" type="submit">Login</button>
|
|
</form>
|
|
{error && <div className="error">
|
|
{error}
|
|
</div>}
|
|
</main>
|
|
}
|