KEYCLOAK-8604: Figure out how forms will be handled

themes/src/main/resources/theme/keycloak-preview/account/resources/app/account-service/account.service.ts

@@ -38,7 +38,7 @@ export class AccountServiceClient {
     private constructor() {}
     
     public static get Instance(): AccountServiceClient  {
-        return this.instance;
+        return AccountServiceClient.instance;
     }
     
     public doGet(endpoint: string, 
@@ -46,6 +46,16 @@ export class AccountServiceClient {
         return this.doRequest(endpoint, {...config, method: 'get'});
     }
     
+    public doPut(endpoint: string, 
+                config?: AxiosRequestConfig): Promise<AxiosResponse> {
+        return this.doRequest(endpoint, {...config, method: 'put'});
+    }
+    
+    public doPost(endpoint: string, 
+                config?: AxiosRequestConfig): Promise<AxiosResponse> {
+        return this.doRequest(endpoint, {...config, method: 'post'});
+    }
+    
     public doRequest(endpoint: string, 
                      config?: AxiosRequestConfig): Promise<AxiosResponse> {
         

themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/AccountPage.tsx

@@ -22,6 +22,7 @@ interface AccountPageProps {
 }
 
 interface AccountPageState {
+    readonly changed: boolean,
     readonly username: string,
     readonly firstName?: string,
     readonly lastName?: string,
@@ -34,7 +35,11 @@ interface AccountPageState {
  */
 export class AccountPage extends React.Component<AccountPageProps, AccountPageState> {
     readonly state: AccountPageState = {
-        username: ''
+        changed: false,
+        username: '',
+        firstName: '',
+        lastName: '',
+        email: ''
     };
     
     constructor(props: AccountPageProps) {
@@ -44,14 +49,59 @@ export class AccountPage extends React.Component<AccountPageProps, AccountPageSt
                 this.setState(response.data);
                 console.log({response});
             });
+            
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.makeTextInput = this.makeTextInput.bind(this);
     }
 
-    render() {
-        const {username, firstName} = this.state;
+    private handleChange(event: React.ChangeEvent<HTMLInputElement>): void  {
+        const target: HTMLInputElement = event.target;
+        const value: string = target.value;
+        const name: string = target.name;
+        this.setState({
+            changed: true,
+            username: this.state.username,
+            [name]: value
+        } as AccountPageState);
+    }
+    
+    private handleSubmit(event: React.FormEvent<HTMLFormElement>): void {
+        event.preventDefault();
+        const reqData = {...this.state};
+        delete reqData.changed;
+        AccountServiceClient.Instance.doPost("/", {data: reqData})
+            .then((response: AxiosResponse<AccountPageState>) => {
+                this.setState({changed: false});
+                alert('Data posted');
+            });
+    }
+    
+    private makeTextInput(label: string, 
+                          name: string, 
+                          disabled = false): React.ReactElement<any> {
         return (
-            <div>
-                <h2>Hello {username} {firstName}</h2>
-            </div>
+            <label>{label}
+                <input disabled={disabled} type="text" name={name} value={this.state[name]} onChange={this.handleChange} />
+            </label>
+        );
+    }
+    
+    render() {
+        return (
+            <form onSubmit={this.handleSubmit}>
+                {this.makeTextInput('User Name:', 'username', true)}
+                <br/>
+                {this.makeTextInput('First Name:', 'firstName')}
+                <br/>
+                {this.makeTextInput('Last Name:', 'lastName')}
+                <br/>
+                {this.makeTextInput('Email:', 'email')}
+                <br/>
+                <button className="btn btn-primary btn-lg btn-sign" 
+                        disabled={!this.state.changed}
+                        value="Submit">Submit</button>
+            </form>
         );
     }
 };