Added initial client authentication functionality

Author: staplespeter

src/Client/ClientAuthentication.ts

@@ -16,34 +16,46 @@ export default class ClientAuthentication extends EventTarget implements IClient
 
     async signIn(username: string, password: string): Promise<boolean> {
         this._lastError = null;
-        const response = await this._client.axios.post('auth/login', {
-            username: username,
-            password: password
-        });
-        if (response.status == 201) {
-            window.localStorage.setItem(ClientAuthentication.TOKEN_STORAGE_KEY, response.data.token);
-            return true;
+        try {
+            const response = await this._client.axios.post('auth/login', {
+                username: username,
+                password: password
+            });
+            if (response.status == 201) {
+                window.localStorage.setItem(ClientAuthentication.TOKEN_STORAGE_KEY, response.data.token);
+                return true;
+            }
+            if (response.data.error) {
+                this._lastError = response.data.error;
+            }
+            return false;
         }
-        if (response.data.error) {
-            this._lastError = response.data.error;
+        catch (err: any) {
+            this._lastError = err;
+            return false;    
         }
-        return false;
     }
 
     async signUp(username: string, password: string): Promise<boolean> {
         this._lastError = null;
-        const response = await this._client.axios.post('auth/register', {
-            username: username,
-            password: password
-        });
-        if (response.status == 201) {
-            window.localStorage.setItem(ClientAuthentication.TOKEN_STORAGE_KEY, response.data.token);
-            return true;
+        try {
+            const response = await this._client.axios.post('auth/register', {
+                username: username,
+                password: password
+            });
+            if (response.status == 201) {
+                window.localStorage.setItem(ClientAuthentication.TOKEN_STORAGE_KEY, response.data.token);
+                return true;
+            }
+            if (response.data.error) {
+                this._lastError = response.data.error;
+            }
+            return false;
         }
-        if (response.data.error) {
-            this._lastError = response.data.error;
+        catch (err: any) {
+            this._lastError = err;
+            return false;
         }
-        return false;
     }
 
 }

src/Client/IClientAuthentication.ts

@@ -1,4 +1,5 @@
 export default interface IClientAuthentication {
+    lastError: string;
     signIn(username: string, password: string): Promise<boolean>;
     signUp(username: string, password: string): Promise<boolean>;
 }

src/React/Layout.tsx

@@ -10,7 +10,7 @@ export default class Layout extends React.Component<PropsWithChildren<Props>> {
 
     render() {
         return (
-            <div>
+            <div className='Layout'>
                 {this.props.children}
             </div>
         );

src/React/Page.tsx

@@ -11,7 +11,7 @@ export default class Page extends React.Component<PropsWithChildren<Props>> {
 
     render() {
         return (
-            <div>
+            <div className='Page'>
                 {this.props.children}
             </div>
         );

src/React/SignIn/SignIn.tsx

@@ -6,44 +6,87 @@ type Props = {
 };
 
 type State = {
-    signIn: boolean
+    signIn: boolean;
+    errorMessage: string;
 };
 
 export default class SignIn extends React.Component<PropsWithChildren<Props>, State> {
+    private emailRef: React.RefObject<HTMLInputElement> = React.createRef();
+    private password1Ref: React.RefObject<HTMLInputElement> = React.createRef();
+    private password2Ref: React.RefObject<HTMLInputElement> = React.createRef();
+    private errorMessageRef: React.RefObject<HTMLDivElement> = React.createRef();
+    
+
     constructor(props: Props) {
         super(props);
         this.handleSignInClick = this.handleSignInClick.bind(this);
         this.handleSignUpClick = this.handleSignUpClick.bind(this);
-        this.state = { signIn: true };
+        this.state = {
+            signIn: true,
+            errorMessage: null
+        };
     }
 
-    handleSignInClick() {
-
+    async handleSignInClick() {
+        if (this.state.signIn) {
+            if (await this.props.auth.signIn(this.emailRef.current.value, this.password1Ref.current.value)) {
+                this.setState({ errorMessage: null });
+            }
+            else {
+                this.setState({ errorMessage: 'Error signing in: ' + this.props.auth.lastError });
+            }
+        }
+        else {
+            this.setState({ signIn: true });
+        }
     }
 
-    handleSignUpClick(){
+    async handleSignUpClick(){
+        if (this.state.signIn) {
+            this.setState({ signIn: false });
+        }
+        else {
+            if (this.password1Ref.current.value != this.password2Ref.current.value) {
+                this.setState({ errorMessage: 'Passwords do not match'});
+                return;
+            }
 
+            if (await this.props.auth.signUp(this.emailRef.current.value, this.password1Ref.current.value)) {
+                this.setState({ errorMessage: null });
+            }
+            else {
+                this.setState({ errorMessage: 'Error signing up: ' + this.props.auth.lastError });
+            }
+        }
     }
 
     render() {
         return (
-            <div>
+            <div className="SignIn">
                 Sign In
                 <hr></hr>
                 <div>
-                    Username: <input type="email" id="SignInUsername"></input>
+                    Username: <input type="email" id="SignInUsername" ref={this.emailRef}></input>
                 </div>
                 <div>
-                    Password: <input type="password" id="SignInPassword1"></input>
+                    Password: <input type="password" id="SignInPassword1" ref={this.password1Ref}></input>
                 </div>
-                {this.state.signIn ? <div></div> :
+                {this.state.signIn ?
+                    <div></div> :
                     <div>
-                        Password: <input type="password" id="SignInPassword2"></input>
-                    </div>}                
+                        Password: <input type="password" id="SignInPassword2" ref={this.password2Ref}></input>
+                    </div>
+                }                
                 <div>
-                    <input type="button" value="Sign In" onClick={this.handleSignInClick}></input>
-                    <input type="Button" value="Sign Up" onClick={this.handleSignUpClick}></input>
+                    <input type="button" value="Sign In" onClick={this.handleSignInClick} readOnly></input>
+                    <input type="Button" value="Sign Up" onClick={this.handleSignUpClick} readOnly></input>
                 </div>
+                {!this.state.errorMessage ?
+                    <div></div> :
+                    <div id="errorMessage" ref={this.errorMessageRef}>
+                        {this.state.errorMessage}
+                    </div>
+                }
             </div>
         );
     }