Changeset 6f9b7b0 for client_app/src
- Timestamp:
- 01/10/21 21:16:40 (4 years ago)
- Branches:
- master
- Children:
- fc8421e
- Parents:
- 17abe5e
- Location:
- client_app/src/components
- Files:
-
- 5 edited
-
data/components/user_profile.js (modified) (1 diff)
-
data/profile.js (modified) (1 diff)
-
login/login.js (modified) (2 diffs)
-
main/App.js (modified) (2 diffs)
-
template/header.js (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
client_app/src/components/data/components/user_profile.js
r17abe5e r6f9b7b0 1 1 import React from 'react'; 2 import { Container, Header, List } from 'semantic-ui-react' 2 3 3 4 const UserDetails = (props) =>{ 4 5 return( 5 6 <Container> 7 <Header>Welcome</Header> 8 <br /> 9 <h3>User: {props.data.name}</h3> 10 <table> 11 <tr> 12 <td> 13 <h3>Retained skills</h3> 14 <ul> 15 {props.data.retained.map((value, index) => { 16 return <li key={index}>{value.name}</li> 17 })} 18 </ul> 19 </td> 20 <td> 21 <h3>Skills you want to learn</h3> 22 <ul> 23 {props.data.toLearn.map((value, index) => { 24 return <li key={index}>{value.name}</li> 25 })} 26 </ul> 27 </td> 28 </tr> 29 </table> 30 </Container> 6 31 ); 7 32 } 33 34 export default UserDetails; -
client_app/src/components/data/profile.js
r17abe5e r6f9b7b0 1 1 import React from 'react'; 2 import {useHistory} from 'react-router-dom';3 import { render} from "@testing-library/react";2 import UserDetails from "./components/user_profile"; 3 import { Redirect } from "react-router-dom"; 4 4 5 5 const Profile = (props) => { 6 const history = useHistory();7 const userProfile = React.useState({8 userProfile: props.userProfile9 });10 6 11 if(props.userProfile.email==null){ 12 history.push("/"); 7 if(props.userProfile.type==="USER"){ 8 return ( 9 <UserDetails data={{ 10 email: props.userProfile.email, 11 name: props.userProfile.name, 12 surname: props.userProfile.surname, 13 retained: props.userProfile.retained, 14 toLearn: props.userProfile.toLearn 15 }}/> 16 ); 13 17 } 14 18 15 19 return( 16 < h1>?</h1>20 <Redirect to={"/login"}/> 17 21 ); 18 22 } -
client_app/src/components/login/login.js
r17abe5e r6f9b7b0 1 1 import React from 'react'; 2 import { useHistory} from 'react-router-dom';3 import { Button, Checkbox, Container, Form} from "semantic-ui-react";2 import { Button, Checkbox, Container, Form } from "semantic-ui-react"; 3 import { Redirect } from 'react-router-dom'; 4 4 5 5 const Login = (props) => { 6 const history = useHistory();7 6 const [formData, updateFormData] = React.useState({ 8 7 email: "", … … 25 24 26 25 props.onCompleteForm(email,password,type); 27 history.push("/"); 26 } 27 28 if(!props.loggedIn){ 29 return( 30 <Container> 31 <h1 style={{color: "red"}}>{props.error}</h1> 32 <Form onSubmit={onFormSubmit}> 33 <Form.Input id="email" name="email" type='text' required fluid label='E-mail' placeholder='Enter e-mail.' onChange={handleCheck} /> 34 <Form.Input id="password" name="password" type='password' required fluid label='Password' placeholder='Enter password.' onChange={handleCheck} /> 35 <Form.Field 36 control={Checkbox} 37 radio 38 label='User' 39 id="0" 40 name="type" 41 value="0" 42 checked={formData.type === "0"} 43 onChange={handleCheck} 44 /> 45 <Form.Field 46 control={Checkbox} 47 radio 48 label='Team' 49 id="1" 50 name="type" 51 value="1" 52 checked={formData.type === "1"} 53 onChange={handleCheck} 54 /> 55 <Form.Field 56 control={Checkbox} 57 radio 58 label='Company' 59 id="2" 60 name="type" 61 value="2" 62 checked={formData.type === "2"} 63 onChange={handleCheck} 64 /> 65 <Form.Field control={Button}>LogIn</Form.Field> 66 </Form> 67 </Container> 68 ); 28 69 } 29 70 30 71 return( 31 <Container> 32 <Form onSubmit={onFormSubmit}> 33 <Form.Input id="email" name="email" type='text' required fluid label='E-mail' placeholder='Enter e-mail.' onChange={handleCheck} /> 34 <Form.Input id="password" name="password" type='password' required fluid label='Password' placeholder='Enter password.' onChange={handleCheck} /> 35 <Form.Field 36 control={Checkbox} 37 radio 38 label='User' 39 id="0" 40 name="type" 41 value="0" 42 checked={formData.type === "0"} 43 onChange={handleCheck} 44 /> 45 <Form.Field 46 control={Checkbox} 47 radio 48 label='Team' 49 id="1" 50 name="type" 51 value="1" 52 checked={formData.type === "1"} 53 onChange={handleCheck} 54 /> 55 <Form.Field 56 control={Checkbox} 57 radio 58 label='Company' 59 id="2" 60 name="type" 61 value="2" 62 checked={formData.type === "2"} 63 onChange={handleCheck} 64 /> 65 <Form.Field control={Button}>LogIn</Form.Field> 66 </Form> 67 </Container> 72 <Redirect to={"/profile"}/> 68 73 ); 74 69 75 } 70 76 -
client_app/src/components/main/App.js
r17abe5e r6f9b7b0 1 1 import React, {Component} from 'react'; 2 import {BrowserRouter as Router, Route } from 'react-router-dom';2 import {BrowserRouter as Router, Route, Redirect} from 'react-router-dom'; 3 3 import Login from '../login/login'; 4 4 import Profile from "../data/profile"; … … 12 12 super(props); 13 13 this.state = { 14 currentUser: {} 14 logged: false, 15 error: null, 16 currentUser: {} 15 17 } 16 18 } 17 19 18 20 render(){ 19 return( 20 <Router> 21 <HeaderComp acc={this.state.currentUser.email} accType={this.state.currentUser.type} name={this.state.currentUser.name}/> 22 <main> 23 <Route path={"/login"} render={() => <Login onCompleteForm={this.attemptLogin}/>}/> 24 <Route path={"/profile"} render={() => <Profile userProfile={this.state.currentUser}/>}/> 25 <Route path={"/"}/> 26 <Route path={"/jobs"}/> 27 <Route path={"/internships"}/> 28 </main> 29 </Router> 30 ); 21 return( 22 <Router> 23 <HeaderComp acc={this.state.currentUser.email} accType={this.state.currentUser.type} name={this.state.currentUser.name}/> 24 <main> 25 <Route path={"/login"} render={() => <Login error={this.state.error} onCompleteForm={this.attemptLogin} loggedIn={this.state.logged}/>}/> 26 <Route path={"/profile"} render={() => <Profile userProfile={this.state.currentUser}/>}/> 27 <Route path={"/"} render={() => <Redirect to={"/login"}/>}/> 28 </main> 29 </Router> 30 ); 31 31 } 32 32 33 33 attemptLogin = (email, password, type) => { 34 35 34 UserLogin.login(email, password, type).then((res) =>{ 36 35 console.log(res.data); 37 this.setState({ 38 currentUser: res.data 39 }); 36 if(res.data.email==null){ 37 this.setState({ 38 logged: false, 39 error: res.data.error, 40 }); 41 }else{ 42 this.setState({ 43 logged: true, 44 currentUser: res.data, 45 error: null, 46 }); 47 } 40 48 }); 49 50 if(this.state.currentUser.email!=null){ 51 return <Redirect to={"/profile"}/>; 52 } 41 53 } 42 54 } -
client_app/src/components/template/header.js
r17abe5e r6f9b7b0 54 54 Internships 55 55 </Menu.Item> 56 <Menu.Item as={Link} to='/projects'> 57 Projects 58 </Menu.Item> 59 <Menu.Item as={Link} to='/search'> 60 Search 61 </Menu.Item> 56 62 </Menu> 57 63 );
Note:
See TracChangeset
for help on using the changeset viewer.
