Part 2-3 finished

Author: Toruitas

djsr/authentication/views.py

@@ -12,6 +12,7 @@ class ObtainTokenPairWithColorView(TokenObtainPairView):
 
 class CustomUserCreate(APIView):
     permission_classes = (permissions.AllowAny,)
+    authentication_classes = ()
 
     def post(self, request, format='json'):
         serializer = CustomUserSerializer(data=request.data)

djsr/frontend/src/axiosApi.js

@@ -36,7 +36,8 @@ axiosInstance.interceptors.response.use(
                   console.log(err)
               });
       }
-      return Promise.reject(error);
+      // specific error handling done elsewhere
+      return Promise.reject({...error});
   }
 );
 

djsr/frontend/src/components/signup.js

@@ -1,12 +1,14 @@
 import React, { Component } from "react";
+import axiosInstance from "../axiosApi";
 
 class Signup extends Component{
     constructor(props){
         super(props);
         this.state = {
             username: "",
             password: "",
-            email:""
+            email:"",
+            errors:{}
         };
 
         this.handleChange = this.handleChange.bind(this);
@@ -17,9 +19,21 @@ class Signup extends Component{
         this.setState({[event.target.name]: event.target.value});
     }
 
-    handleSubmit(event) {
-        alert('A username and password was submitted: ' + this.state.username + " " + this.state.password + " " + this.state.email);
+    async handleSubmit(event) {
         event.preventDefault();
+        try {
+            const response = await axiosInstance.post('/user/create/', {
+                username: this.state.username,
+                email: this.state.email,
+                password: this.state.password
+            });
+            return response;
+        } catch (error) {
+            console.log(error.stack);
+            this.setState({
+                errors:error.response.data
+            });
+        }
     }
 
     render() {
@@ -30,19 +44,23 @@ class Signup extends Component{
                     <label>
                         Username:
                         <input name="username" type="text" value={this.state.username} onChange={this.handleChange}/>
+                        { this.state.errors.username ? this.state.errors.username : null}
                     </label>
                     <label>
                         Email:
                         <input name="email" type="email" value={this.state.email} onChange={this.handleChange}/>
+                        { this.state.errors.email ? this.state.errors.email : null}
                     </label>
                     <label>
                         Password:
                         <input name="password" type="password" value={this.state.password} onChange={this.handleChange}/>
+                        { this.state.errors.password ? this.state.errors.password : null}
                     </label>
                     <input type="submit" value="Submit"/>
                 </form>
             </div>
         )
     }
 }
+
 export default Signup;