Frontend: Add Fullname to the Registration and Profile pages (#32)

* Add fullname to registration form + validate it + updating it on the profile. * Profile page now supports updating passwords by the user + About Me section. * Support fullname + validation + about me * Support fullname + validation + about me Co-authored-by: Nadav Goldin <[email protected]>
OSS-team-zulu · Jul 8, 2020 · 88a2ef1 · 88a2ef1
1 parent bb4f492
commit 88a2ef1
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 2 deletions.
diff --git a/frontend/zulu/src/components/Login/profile.component.js b/frontend/zulu/src/components/Login/profile.component.js
@@ -8,6 +8,10 @@ export default class Profile extends Component {
     this.state = { currentUser: AuthService.getCurrentUser() };
 
   }
+
+
+
+
   render() {
     console.log(this.state.currentUser);
     return (
@@ -19,12 +23,19 @@ export default class Profile extends Component {
         </header>
         <p>
           <strong>Full name:</strong>{" "}
-          {this.state.currentUser.full_name}
+          {this.state.currentUser.fullname}
         </p>
         <p>
           <strong>Email:</strong>{" "}
           {this.state.currentUser.email}
         </p>
+
+        <p>
+          <strong>About Me:</strong>{" "}
+          {this.state.currentUser.fullname} ! What can you tell us about you?
+        </p>
+
+
       </div>
     );
   }

diff --git a/frontend/zulu/src/components/Login/register.component.js b/frontend/zulu/src/components/Login/register.component.js
@@ -3,6 +3,7 @@ import Form from "react-validation/build/form";
 import Input from "react-validation/build/input";
 import CheckButton from "react-validation/build/button";
 import { isEmail } from "validator";
+import { isAlpha } from "validator";
 
 import AuthService from "../../services/auth.service";
 
@@ -26,7 +27,19 @@ const email = value => {
   }
 };
 
+
 const vusername = value => {
+  if (value.length < 3 || value.length > 20 || !isAlpha(value)) {
+    return (
+      <div className="alert alert-danger" role="alert">
+        The full name must be between 3 and 20 characters, and only letters are allowed.
+      </div>
+    );
+  }
+};
+
+// Validator for fullname //
+const vfullname = value => {
   if (value.length < 3 || value.length > 20) {
     return (
       <div className="alert alert-danger" role="alert">
@@ -36,6 +49,8 @@ const vusername = value => {
   }
 };
 
+
+
 const vpassword = value => {
   if (value.length < 6 || value.length > 40) {
     return (
@@ -51,6 +66,7 @@ export default class Register extends Component {
     super(props);
     this.handleRegister = this.handleRegister.bind(this);
     this.onChangeUsername = this.onChangeUsername.bind(this);
+    this.onChangeFullname = this.onChangeFullname.bind(this);
     this.onChangeEmail = this.onChangeEmail.bind(this);
     this.onChangePassword = this.onChangePassword.bind(this);
 
@@ -59,6 +75,7 @@ export default class Register extends Component {
       email: "",
       password: "",
       successful: false,
+      fullName: "",
       message: ""
     };
   }
@@ -69,6 +86,13 @@ export default class Register extends Component {
     });
   }
 
+// onChangeFullname //
+  onChangeFullname(e) { 
+    this.setState({
+      fullName: e.target.value
+    });
+  }
+
   onChangeEmail(e) {
     this.setState({
       email: e.target.value
@@ -95,7 +119,8 @@ export default class Register extends Component {
       AuthService.register(
         this.state.username,
         this.state.email,
-        this.state.password
+        this.state.password,
+        this.state.fullName             
       ).then(
         response => {
           this.setState({
@@ -151,6 +176,23 @@ export default class Register extends Component {
                   />
                 </div>
 
+
+
+                <div className="form-group"> 
+                  <label htmlFor="fullname">fullname</label>
+                  <Input
+                    type="text"
+                    className="form-control"
+                    name="fullname"
+                    value={this.state.fullname}
+                    onChange={this.onChangeFullname}
+                    validations={[required, vfullname]}
+                  />
+                </div>
+
+
+
+
                 <div className="form-group">
                   <label htmlFor="email">Email</label>
                   <Input