Added steam id validation to main page

This commit is contained in:
Liam 2022-10-19 17:26:46 +01:00
parent a6bee3c538
commit 8b846ed681

@ -30,6 +30,7 @@ export default class Home extends Component {
isPreviewVisible: false, isPreviewVisible: false,
previewUrl: undefined, previewUrl: undefined,
overlayUrl: undefined, overlayUrl: undefined,
avatarUrl: undefined,
values: { values: {
socketAddr: undefined, socketAddr: undefined,
@ -69,6 +70,7 @@ export default class Home extends Component {
}); });
this.setState({ steamId: json.steamId, values: values }); this.setState({ steamId: json.steamId, values: values });
this.validateSteamId(json.steamId);
} }
this.setState({ loading: false }); this.setState({ loading: false });
} }
@ -121,14 +123,32 @@ export default class Home extends Component {
}, 5); }, 5);
} }
async validateSteamId(steamId) {
if (steamId.length < 16) {
// Steam ID is invalid
return this.setState({ avatarUrl: undefined });
}
const data = await fetch("/api/validateid?steamid=" + steamId);
const json = await data.json();
console.log(json);
if (json.message === "Valid") {
this.setState({
avatarUrl: `https://cdn.scoresaber.com/avatars/${steamId}.jpg`,
});
} else {
this.setState({ avatarUrl: undefined });
}
}
render() { render() {
return this.state.loading ? ( return this.state.loading ? (
<h1>Loading...</h1> <h1>Loading...</h1>
) : ( ) : (
<div className={styles.main}> <div className={styles.main}>
<NavBar <NavBar avatarUrl={this.state.avatarUrl}></NavBar>
avatarUrl={`https://cdn.scoresaber.com/avatars/${this.state.steamId}.jpg`}
></NavBar>
<Container <Container
css={{ css={{
@ -198,8 +218,10 @@ export default class Home extends Component {
labelPlaceholder="Steam Id" labelPlaceholder="Steam Id"
initialValue="" initialValue=""
value={this.state.steamId} value={this.state.steamId}
onChange={(event) => { onChange={async (event) => {
this.setState({ steamId: event.target.value }); const id = event.target.value;
await this.validateSteamId(id);
this.setState({ steamId: id });
this.updateStorage(); this.updateStorage();
}} }}
/> />