From 2b45bfb5564c2ae421befc35acbc6babc9e8b0e4 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Tue, 18 May 2021 04:04:13 -0400 Subject: [PATCH] submit create user request --- vocodes/src/App.tsx | 1 + vocodes/src/api/ApiConfig.ts | 48 ++++++++++++++++++++ vocodes/src/modes/signup/SignupComponent.tsx | 47 ++++++++++++++++--- 3 files changed, 90 insertions(+), 6 deletions(-) create mode 100644 vocodes/src/api/ApiConfig.ts diff --git a/vocodes/src/App.tsx b/vocodes/src/App.tsx index 444552d78f..ca3ae8ed2e 100644 --- a/vocodes/src/App.tsx +++ b/vocodes/src/App.tsx @@ -359,6 +359,7 @@ class App extends React.Component { case Mode.SIGNUP_MODE: component = break; } diff --git a/vocodes/src/api/ApiConfig.ts b/vocodes/src/api/ApiConfig.ts new file mode 100644 index 0000000000..40d3741ab2 --- /dev/null +++ b/vocodes/src/api/ApiConfig.ts @@ -0,0 +1,48 @@ + +class ApiConfig { + + isLocalDev: boolean; + + constructor() { + if (document.location.host.includes("localhost")) { + this.isLocalDev = true; + } else { + this.isLocalDev = false; + } + } + + speakEndpoint() : string { + return 'https://mumble.stream/speak_spectrogram'; + } + + speakSpectrogramEndpoint() : string { + return 'https://mumble.stream/speak_spectrogram'; + } + + + createAccount() : string { + return `${this.getScheme()}://${this.getHost()}/create_account`; + } + + login() : string { + return `${this.getScheme()}://${this.getHost()}/login`; + } + + logout() : string { + return `${this.getScheme()}://${this.getHost()}/logout`; + } + + sessionDetails() : string { + return `${this.getScheme()}://${this.getHost()}/session`; + } + + private getScheme() : string { + return this.isLocalDev ? "http" : "https"; + } + + private getHost() : string { + return this.isLocalDev ? "localhost:12345" : "mumble.stream"; + } +} + +export { ApiConfig } \ No newline at end of file diff --git a/vocodes/src/modes/signup/SignupComponent.tsx b/vocodes/src/modes/signup/SignupComponent.tsx index c3d5370f03..447bacb834 100644 --- a/vocodes/src/modes/signup/SignupComponent.tsx +++ b/vocodes/src/modes/signup/SignupComponent.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import { ApiConfig } from '../../api/ApiConfig'; +import { Mode } from '../../AppMode'; enum FieldTriState { EMPTY_FALSE, @@ -8,6 +10,7 @@ enum FieldTriState { interface Props { loggedIn: boolean, + switchModeCallback: (mode: Mode) => void, } interface State { @@ -26,8 +29,6 @@ interface State { passwordConfirmation: string, passwordConfirmationValid: FieldTriState, passwordConfirmationInvalidReason: string, - - formValid: boolean, } class SignupComponent extends React.Component { @@ -50,8 +51,6 @@ class SignupComponent extends React.Component { passwordConfirmation: "", passwordConfirmationValid: FieldTriState.EMPTY_FALSE, passwordConfirmationInvalidReason: "", - - formValid: false, }; } @@ -182,10 +181,46 @@ class SignupComponent extends React.Component { return false; } - - handleFormSubmit = (ev: React.FormEvent) : boolean => { ev.preventDefault(); + + if (!this.state.usernameValid || + !this.state.emailValid || + !this.state.passwordValid || + !this.state.passwordConfirmationValid) { + return false; + } + + const api = new ApiConfig(); + const endpointUrl = api.createAccount(); + + const request = { + username: this.state.username, + email_address: this.state.email, + password: this.state.password, + password_confirmation: this.state.passwordConfirmation, + } + + fetch(endpointUrl, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify(request), + }) + .then(res => res.json()) + .then(res => { + console.log('create account response', res) + if (res.success) { + this.props.switchModeCallback(Mode.SPEAK_MODE); + return; + } + }) + .catch(e => { + //this.props.onSpeakErrorCallback(); + }); + return false; }