├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── Components ├── Auth │ ├── Auth.jsx │ ├── SignUp.jsx │ ├── User.js │ └── style.css └── Layout │ ├── Header.js │ ├── SideNav.css │ └── Sidebar.js ├── Config ├── Language.json └── config.js ├── Password ├── ChangePassword.jsx ├── Forget.css ├── ForgetPassword.jsx ├── LogoutPop.jsx ├── Passsword │ ├── Password.css │ └── PasswordStrength.js └── ResetPassword.jsx ├── ResumeFile ├── A4.js ├── About.js ├── Education.js ├── Hobbies.js ├── Language.js ├── MainForm.js ├── Project.js ├── Reme.css ├── Resume │ ├── One.css │ └── One.js ├── Skills.js ├── Success.js ├── Technologies.js ├── Tools.js ├── Work.js └── style.css ├── Router ├── Index.jsx └── Route.jsx ├── Service ├── Auth.jsx ├── Blog.jsx ├── Password.jsx ├── Print.jsx ├── Resume.jsx └── User.jsx ├── View ├── Admin │ ├── CronaVirus.jsx │ └── Userlist.jsx ├── Blog │ ├── Blog.css │ ├── Blog.jsx │ ├── BlogDetail.jsx │ ├── BlogUser.jsx │ └── Tags.jsx ├── Feed │ ├── AddFeed.jsx │ ├── Feed.css │ ├── Feed.jsx │ └── Likers.jsx ├── Home.js ├── Profile │ ├── EditModel.jsx │ ├── EditProfile.jsx │ ├── Profile.css │ └── Profile.jsx └── User │ ├── Details.jsx │ ├── EditProfile.jsx │ ├── Profile.jsx │ ├── ResumeList.jsx │ └── ViewResume.jsx ├── img ├── bg.svg ├── blue.svg ├── greenform-01.svg └── purpleform.svg ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── setupTests.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## DEMO 2 | 3 | #### FrontEnd : [https://beautiresume.herokuapp.com/](https://beautiresume.herokuapp.com/) If you get error while running this app please reload page it will work. 4 | 5 | #### Backend: [https://softbike.herokuapp.com/api/1/data/resume/](https://softbike.herokuapp.com/api/1/data/resume/) If you get error while running this app please reload page it will work. 6 | 7 | ### Features 8 | 9 | - Login/Registration (Send Email Confirmation after Registration\_ 10 | - Change Password 11 | - Forget Password 12 | - Session Timeout (Auto Logout after 5 minutes inactive session) 13 | - Write Blog 14 | - Filter blog by(Author or By Tag) and (Like on Post, Comment on post, See user Who liked your post, Follow Or unfollow user) 15 | - Post (Like on Post, Comment on post, See user Who liked your post, Follow Or unfollow user) 16 | - Update Used deatils 17 | - User profile view. 18 | - Minimal Design 19 | - Create/Edit/Delete Your Resume 20 | - User Profile 21 | - Admin Panel 22 | - Create/View/Edit/Delete A User 23 | - Pagination on All blog list and Live search 24 | - Create/View/Edit/Delete A Resume By Any User 25 | 26 | ## Frontend Setup 27 | 28 | 1. Navigate the current working directory to : `cd` dir. 29 | 2. Install the all frontend dependencies using npm: `npm install`. 30 | 3. Run the server: `npm start`. 31 | 32 | ### Creating The First Resume 33 | 34 | 1. Make sure that both Backend and Frontend Servers are running. 35 | 2. Open your browser and navigate to [localhost:3000](localhost:3000). 36 | 3. Go To [http://localhost:3000/](http://localhost:3000/). 37 | 4. Go To Signup page if you are not registered [http://localhost:3000/register/](http://localhost:3000/register/). 38 | 5. Login with the superuser credentials created while setting up the Backend (Step: 8) 39 | 6. Navigate To _Dashboard -> Your all resume_ ([http://localhost:3000/user/view/resume/create-new-post](http://localhost:3000/user/view/resume/)). 40 | 41 | ## Backend API Documentation 42 | 43 | API Documentation is generated using the default tool provided by Django Rest Framework. 44 | 45 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 46 | 47 | ## Sample Image 48 | 49 | #### Login Page 50 | 51 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-10.02.12-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 52 | 53 | #### Register(Send confirmation email after registration) 54 | 55 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-10.02.20-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 56 | 57 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-10.02.27-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa27ac0280339750413) 58 | 59 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-10.01.40-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 60 | 61 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-10.24.15-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa245da2351370223357) 62 | 63 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-9.55.20-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 64 | 65 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-9.55.46-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 66 | 67 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-9.55.58-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 68 | 69 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-9.56.34-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 70 | 71 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-9.57.06-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 72 | 73 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-9.59.46-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 74 | 75 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-9.59.52-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 76 | 77 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-9.59.57-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 78 | 79 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-10.00.01-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 80 | 81 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-10.00.22-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 82 | 83 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-10.00.40-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 84 | 85 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-10.00.46-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 86 | 87 | [![image](https://www.linkpicture.com/q/Screen-Shot-2020-11-14-at-10.01.57-AM.png)](https://www.linkpicture.com/view.php?img=LPic5fafa1042a69d353861954) 88 | 89 | ## Available Scripts 90 | 91 | In the project directory, you can run: 92 | 93 | ### `npm start` 94 | 95 | Runs the app in the development mode.
96 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 97 | 98 | The page will reload if you make edits.
99 | You will also see any lint errors in the console. 100 | 101 | ### `npm test` 102 | 103 | Launches the test runner in the interactive watch mode.
104 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 105 | 106 | ### `npm run build` 107 | 108 | Builds the app for production to the `build` folder.
109 | It correctly bundles React in production mode and optimizes the build for the best performance. 110 | 111 | The build is minified and the filenames include the hashes.
112 | Your app is ready to be deployed! 113 | 114 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 115 | 116 | ### `npm run eject` 117 | 118 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 119 | 120 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 121 | 122 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 123 | 124 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 125 | 126 | ## Learn More 127 | 128 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 129 | 130 | To learn React, check out the [React documentation](https://reactjs.org/). 131 | 132 | ### Code Splitting 133 | 134 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 135 | 136 | ### Analyzing the Bundle Size 137 | 138 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 139 | 140 | ### Making a Progressive Web App 141 | 142 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 143 | 144 | ### Advanced Configuration 145 | 146 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 147 | 148 | ### Deployment 149 | 150 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 151 | 152 | ### `npm run build` fails to minify 153 | 154 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 155 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "resumebuilder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.9.3", 7 | "@material-ui/icons": "^4.9.1", 8 | "@progress/kendo-drawing": "^1.6.0", 9 | "@progress/kendo-react-pdf": "^3.11.0", 10 | "@testing-library/jest-dom": "^4.2.4", 11 | "@testing-library/react": "^9.4.0", 12 | "@testing-library/user-event": "^7.2.1", 13 | "apexcharts": "^3.15.6", 14 | "axios": "^0.19.2", 15 | "html2canvas": "^1.0.0-rc.5", 16 | "i18next": "^19.3.1", 17 | "i18next-browser-languagedetector": "^4.0.1", 18 | "i18next-xhr-backend": "^3.2.2", 19 | "jspdf": "^1.5.3", 20 | "leaflet": "^1.6.0", 21 | "local-storage": "^2.0.0", 22 | "moment": "^2.24.0", 23 | "paginate-array": "^2.1.0", 24 | "react": "^16.10.6", 25 | "react-bootstrap": "^1.0.0-beta.16", 26 | "react-dom": "^16.8.6", 27 | "react-i18next": "^11.3.3", 28 | "react-lazy-load-image-component": "^1.5.0", 29 | "react-leaflet": "^2.6.1", 30 | "react-router-dom": "^5.1.2", 31 | "react-scripts": "3.0.1", 32 | "sweetalert2": "^9.7.2", 33 | "universal-cookie": "^4.0.3" 34 | }, 35 | "scripts": { 36 | "start": "react-scripts start", 37 | "build": "react-scripts build", 38 | "test": "react-scripts test", 39 | "eject": "react-scripts eject" 40 | }, 41 | "eslintConfig": { 42 | "extends": "react-app" 43 | }, 44 | "browserslist": { 45 | "production": [ 46 | ">0.2%", 47 | "not dead", 48 | "not op_mini all" 49 | ], 50 | "development": [ 51 | "last 1 chrome version", 52 | "last 1 firefox version", 53 | "last 1 safari version" 54 | ] 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamrraj/React-Resume-Generator/42d73ba6e506d96525f3b6032884b07e152f77d0/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 | 17 | 18 | 22 | 26 | 30 | 36 | 40 | 41 | 45 | 46 | 55 | 56 | Resume Builder 57 | 58 | 59 | 60 |
61 | 71 | 72 | 77 | 82 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamrraj/React-Resume-Generator/42d73ba6e506d96525f3b6032884b07e152f77d0/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamrraj/React-Resume-Generator/42d73ba6e506d96525f3b6032884b07e152f77d0/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Router from "./Router/Route" 3 | // import "./App.css" 4 | 5 | 6 | 7 | class App extends Component { 8 | render() { 9 | return ( 10 |
11 | 12 |
13 | ); 14 | } 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/Components/Auth/Auth.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | // import ls from "local-storage"; 3 | import Swal from "sweetalert2"; 4 | import axios from "axios"; 5 | import config from "../../Config/config"; 6 | import Visibility from "@material-ui/icons/Visibility"; 7 | import VisibilityOff from "@material-ui/icons/VisibilityOff"; 8 | 9 | // import Cookies from "universal-cookie"; 10 | 11 | const CLIENT_ID = "Resume-Builder"; 12 | const GRANT_TYPE = "password"; 13 | 14 | function Auth() { 15 | const [password, setPassword] = useState({ 16 | username: "", 17 | password: "", 18 | }); 19 | 20 | const [showPassword, setShowPassword] = useState(false); 21 | 22 | const handleChange = (event) => { 23 | const { name, value } = event.target; 24 | setPassword({ ...password, [name]: value }); 25 | }; 26 | 27 | const handleClickShowPassword = () => { 28 | setShowPassword(!showPassword); 29 | }; 30 | 31 | const handleSubmit = (e) => { 32 | e.preventDefault(); 33 | Swal.fire({ 34 | title: "Loading", 35 | type: "warning", 36 | showCancelButton: false, 37 | showConfirmButton: false, 38 | timerProgressBar: true, 39 | onBeforeOpen: () => { 40 | Swal.showLoading(); 41 | }, 42 | }); 43 | 44 | axios({ 45 | method: "post", 46 | url: config.apiUrl.login, 47 | headers: { 48 | "Content-Type": "application/x-www-form-urlencoded", 49 | }, 50 | 51 | data: `grant_type=${GRANT_TYPE}&username=${password.username}&password=${password.password}&client_id=${CLIENT_ID}`, 52 | }) 53 | .then((response) => { 54 | localStorage.setItem("username", password.username); 55 | localStorage.setItem("Token", response.data.access_token); 56 | 57 | Swal.fire({ 58 | title: "Log in", 59 | icon: "success", 60 | text: "You Successfully loggedin", 61 | showConfirmButton: false, 62 | timer: 3000, 63 | }); 64 | setTimeout(function () { 65 | window.location.href = "/feed/"; 66 | }, 2000); 67 | }) 68 | .catch((reject) => { 69 | console.log(reject); 70 | Swal.fire({ 71 | title: "Login Error", 72 | icon: "error", 73 | text: reject.response.data.message, 74 | timer: 2000, 75 | }); 76 | }); 77 | }; 78 | 79 | return ( 80 |
81 | {/* */} 82 |
83 |
84 |
85 |
86 | {/* */} 87 |
88 |
89 | Forget Password 94 |
95 |
96 |
97 |
98 |

99 | Login 100 |

101 |

102 | Welcome to Resume Builder Login page 103 |

104 |
105 |
110 |
111 | 119 |
120 |
121 | 129 | 134 | {showPassword ? ( 135 | 136 | ) : ( 137 | 138 | )} 139 | 140 |
141 | 142 | 149 |
150 |
151 | 167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 | ); 176 | } 177 | 178 | export default Auth; 179 | -------------------------------------------------------------------------------- /src/Components/Auth/SignUp.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Visibility from "@material-ui/icons/Visibility"; 3 | import VisibilityOff from "@material-ui/icons/VisibilityOff"; 4 | import Swal from "sweetalert2"; 5 | import axios from "axios"; 6 | import config from "../../Config/config"; 7 | import PasswordStrength from "../../Password/Passsword/PasswordStrength"; 8 | 9 | function SignUp() { 10 | const [password, setPassword] = useState({ 11 | username: "", 12 | password: "", 13 | confirmPassword: "", 14 | email: "", 15 | }); 16 | 17 | const [showPassword, setShowPassword] = useState(false); 18 | 19 | const handleChange = (event) => { 20 | const { name, value } = event.target; 21 | setPassword({ ...password, [name]: value }); 22 | }; 23 | 24 | const handleClickShowPassword = () => { 25 | setShowPassword(!showPassword); 26 | }; 27 | 28 | const handleSubmit = (e) => { 29 | e.preventDefault(); 30 | Swal.fire({ 31 | title: "Loading", 32 | type: "warning", 33 | showCancelButton: false, 34 | showConfirmButton: false, 35 | timerProgressBar: true, 36 | onBeforeOpen: () => { 37 | Swal.showLoading(); 38 | }, 39 | }); 40 | 41 | const re = RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}$/); 42 | const isOk = re.test(password.password); 43 | 44 | if (isOk) { 45 | axios({ 46 | method: "post", 47 | url: config.apiUrl.register, 48 | headers: { 49 | Accept: "application/json", 50 | "Content-Type": "application/json", 51 | }, 52 | 53 | data: password, 54 | }) 55 | .then((response) => { 56 | Swal.fire({ 57 | title: "Registerd", 58 | icon: "success", 59 | text: `Successfully Register Please check your email "${password.email} "to confirm account !!`, 60 | showConfirmButton: false, 61 | timer: 3000, 62 | }); 63 | setTimeout(function () { 64 | window.location.href = "/"; 65 | }, 2000); 66 | }) 67 | .catch((err) => { 68 | console.log(err); 69 | Swal.fire({ 70 | title: "Registerd", 71 | icon: "error", 72 | text: err.response.data["message"] 73 | ? err.response.data["message"] 74 | : "Seems like this username is already in use", 75 | timer: 2000, 76 | }); 77 | }); 78 | } else { 79 | Swal.fire({ 80 | title: "Password Error", 81 | icon: "warning", 82 | text: 83 | "Your password must contain at least one small , big letter and least one digit", 84 | timer: 2000, 85 | }); 86 | } 87 | }; 88 | return ( 89 |
90 | {/* */} 91 |
92 |
93 |
94 |
95 | {/* */} 96 |
97 |
98 | Forget Password 103 |
104 |
105 |
106 |
107 |

108 | Register 109 |

110 |

111 | Welcome to Resume Builder Register page 112 |

113 |
114 |
119 |
120 | 128 |
129 | 130 |
131 | 139 |
140 |
141 | 149 | 154 | {showPassword ? ( 155 | 156 | ) : ( 157 | 158 | )} 159 | 160 | 161 | 162 |
163 | 164 |
165 | 173 | 174 | {password.password !== password.confirmPassword ? ( 175 | password.confirmPassword.length > 1 ? ( 176 | 180 | Password did not match 181 | 182 | ) : ( 183 | "" 184 | ) 185 | ) : password.confirmPassword.length > 1 ? ( 186 | 190 | Password matched 191 | 192 | ) : ( 193 | "" 194 | )} 195 |
196 | 197 | 207 |
208 |
209 | 218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 | ); 227 | } 228 | 229 | export default SignUp; 230 | -------------------------------------------------------------------------------- /src/Components/Auth/User.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { getUser } from "../../Service/Auth"; 3 | import config from "../../Config/Config"; 4 | 5 | export class User extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | name: "", 10 | walk: [] 11 | }; 12 | } 13 | 14 | async componentDidMount() { 15 | let authToken = localStorage.getItem("Token"); 16 | const res = await fetch(config.apiUrl.me, { 17 | method: "GET", 18 | headers: { 19 | Accept: "application/json", 20 | "Content-Type": "application/json", 21 | Authorization: "Bearer " + authToken 22 | } 23 | }); 24 | const walk = await res.json(); 25 | localStorage.setItem("Name", walk.first_name); 26 | this.setState({ 27 | walk 28 | }); 29 | } 30 | 31 | render() { 32 | const { walk } = this.state; 33 | 34 | return ( 35 | 36 | {/* {localStorage.getItem("Name")} */} 37 | {walk.first_name} {walk.last_name} 38 | 39 | ); 40 | } 41 | } 42 | 43 | export default User; 44 | -------------------------------------------------------------------------------- /src/Components/Auth/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Montserrat|Raleway:400,500,700|Roboto&display=swap"); 2 | *, 3 | *, 4 | ::after, 5 | *::before { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | list-style: none; 10 | border: none; 11 | outline: none; 12 | text-decoration: none; 13 | } 14 | a:hover { 15 | text-decoration: none; 16 | } 17 | 18 | button { 19 | width: 200px; 20 | height: 55px; 21 | font-family: "Montserrat", sans-serif; 22 | font-size: 1.2rem; 23 | text-transform: capitalize; 24 | cursor: pointer; 25 | } 26 | 27 | .container { 28 | max-width: 90%; 29 | margin: 0 auto; 30 | } 31 | 32 | .flex { 33 | display: flex; 34 | } 35 | 36 | .flex-column { 37 | flex-direction: column; 38 | } 39 | 40 | .items-center { 41 | align-items: center; 42 | } 43 | 44 | .justify-center { 45 | justify-content: center; 46 | } 47 | 48 | .justify-between { 49 | justify-content: space-between; 50 | } 51 | 52 | body { 53 | background-color: rgba(244, 255, 246, 0.83); 54 | } 55 | 56 | header { 57 | height: 100vh; 58 | background-image: url("../../img/bg.svg"); 59 | background-size: cover; 60 | background-position: center; 61 | } 62 | header .login, 63 | header .signup { 64 | height: 100%; 65 | } 66 | header .login form, 67 | header .signup form { 68 | width: 80%; 69 | background-color: #fff; 70 | height: 90%; 71 | box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.16); 72 | border-radius: 30px; 73 | overflow: hidden; 74 | position: relative; 75 | } 76 | header .login form aside, 77 | header .signup form aside { 78 | width: 40%; 79 | background-image: linear-gradient(to right, #bc4e9cd1, #f80759b3); 80 | position: relative; 81 | } 82 | header .login form aside:after, 83 | header .signup form aside:after { 84 | width: 100%; 85 | height: 100%; 86 | content: ""; 87 | position: absolute; 88 | top: 0; 89 | left: 0; 90 | background-color: rgba(228, 171, 220, 0.42); 91 | clip-path: circle(30% at 30% 0%); 92 | } 93 | header .login form aside:before, 94 | header .signup form aside:before { 95 | width: 100%; 96 | height: 100%; 97 | content: ""; 98 | position: absolute; 99 | top: 0; 100 | left: 0; 101 | background-color: rgba(228, 171, 220, 0.42); 102 | clip-path: circle(40% at 0% 0%); 103 | } 104 | header .login form aside h1, 105 | header .signup form aside h1 { 106 | font-family: "Roboto", sans-serif; 107 | font-size: 2.5rem; 108 | text-align: center; 109 | color: #fff; 110 | text-transform: capitalize; 111 | line-height: 2; 112 | } 113 | header .login form aside h2, 114 | header .signup form aside h2 { 115 | font-family: "Raleway", sans-serif; 116 | font-size: 1rem; 117 | line-height: 1.7; 118 | letter-spacing: 0.5px; 119 | text-align: center; 120 | padding: 1rem 2rem; 121 | color: #fef; 122 | margin-top: -1rem; 123 | font-weight: 200; 124 | text-transform: capitalize; 125 | } 126 | header .login form aside button, 127 | header .signup form aside button { 128 | border-radius: 30px; 129 | color: #fff; 130 | border: 1px solid #fff; 131 | background-color: transparent; 132 | margin-top: 1rem; 133 | } 134 | header .login form .content, 135 | header .signup form .content { 136 | width: 60%; 137 | } 138 | header .login form .content .text, 139 | header .signup form .content .text { 140 | padding: 2rem 0; 141 | margin-top: -2rem; 142 | } 143 | header .login form .content .text h1, 144 | header .signup form .content .text h1 { 145 | text-align: center; 146 | font-family: "Raleway", sans-serif; 147 | font-size: 2rem; 148 | line-height: 2; 149 | letter-spacing: 1px; 150 | text-transform: capitalize; 151 | color: #bb41aa; 152 | } 153 | header .login form .content .text .icon, 154 | header .signup form .content .text .icon { 155 | margin-bottom: 1rem; 156 | } 157 | header .login form .content .text .icon i, 158 | header .signup form .content .text .icon i { 159 | font-size: 1.7rem; 160 | color: rgba(88, 27, 152, 0.67); 161 | margin-left: 0.5rem; 162 | } 163 | header .login form .content .text span, 164 | header .signup form .content .text span { 165 | font-family: "Raleway", sans-serif; 166 | color: rgba(61, 71, 76, 0.92); 167 | } 168 | header .login form .content .form-group, 169 | header .signup form .content .form-group { 170 | width: 85%; 171 | } 172 | header .login form .content .form-group input, 173 | header .signup form .content .form-group input { 174 | width: 100%; 175 | height: 55px; 176 | font-family: "Raleway", sans-serif; 177 | font-size: 1.1rem; 178 | padding-left: 1rem; 179 | /* text-transform: capitalize; */ 180 | margin-bottom: 1rem; 181 | background-color: #f0f0f0; 182 | border-radius: 4px; 183 | } 184 | header .login form .content .form-group input[type="submit"], 185 | header .signup form .content .form-group input[type="submit"] { 186 | width: 200px; 187 | border-radius: 30px; 188 | text-align: center; 189 | cursor: pointer; 190 | background-image: linear-gradient(to right, #bc4e9c, #f80759); 191 | color: #fff; 192 | } 193 | 194 | @media screen and (max-width: 967px) { 195 | header { 196 | min-height: 120vh !important; 197 | } 198 | header .signup, 199 | header .login { 200 | width: 90%; 201 | min-height: 100% !important; 202 | } 203 | header .signup form, 204 | header .login form { 205 | width: 105% !important; 206 | flex-direction: column !important; 207 | justify-content: center; 208 | align-items: center; 209 | min-height: 110vh; 210 | } 211 | header .signup form aside, 212 | header .login form aside { 213 | width: 100%; 214 | min-height: 40%; 215 | padding-top: 2rem; 216 | } 217 | header .signup form aside h1, 218 | header .login form aside h1 { 219 | font-size: 1.7rem; 220 | margin-top: 1.5rem; 221 | } 222 | header .signup form aside h2, 223 | header .login form aside h2 { 224 | font-size: 1rem; 225 | width: 80%; 226 | } 227 | header .signup form aside button, 228 | header .login form aside button { 229 | margin: 0; 230 | } 231 | header .signup form .content, 232 | header .login form .content { 233 | width: 100%; 234 | min-height: 80%; 235 | justify-content: flex-start; 236 | } 237 | header .signup form .content .text, 238 | header .login form .content .text { 239 | padding: 0; 240 | margin-top: 1rem; 241 | margin-bottom: 1rem; 242 | } 243 | header .signup form .content .text h1, 244 | header .login form .content .text h1 { 245 | font-size: 1.4rem; 246 | } 247 | header .signup form .content .form-group, 248 | header .login form .content .form-group { 249 | width: 95%; 250 | } 251 | header .login form aside { 252 | order: 1 !important; 253 | } 254 | header .login form .content { 255 | order: 2 !important; 256 | } 257 | header .login form .content .text { 258 | margin-top: 3rem; 259 | margin-bottom: 2rem; 260 | } 261 | } 262 | 263 | /*# sourceMappingURL=style.css.map */ 264 | -------------------------------------------------------------------------------- /src/Components/Layout/Header.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { withRouter } from "react-router-dom"; 3 | import SideBar from "./Sidebar"; 4 | 5 | 6 | class Header extends Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | search: "", 11 | logged_in: localStorage.getItem("Token") ? true : false 12 | }; 13 | } 14 | 15 | render() { 16 | const { loggedIn } = this.props; 17 | return ( 18 |
19 | {loggedIn && ( 20 | 35 | )} 36 |
37 | ); 38 | } 39 | } 40 | 41 | export default withRouter(Header); 42 | -------------------------------------------------------------------------------- /src/Components/Layout/SideNav.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --navcover-z-index: 99; 3 | --sidenav-z-index: 100; 4 | } 5 | 6 | .nav-cover { 7 | position: fixed; 8 | z-index: var(--navcover-z-index); 9 | top: 0; 10 | right: 0; 11 | width: 0; 12 | height: 100%; 13 | /* background-color: rgba(0, 0, 0, 0.5); */ 14 | } 15 | 16 | .side-nav { 17 | height: 100%; 18 | width: 0; /* to be set in js */ 19 | position: fixed; 20 | overflow-x: hidden; 21 | z-index: var(--sidenav-z-index); 22 | top: 0; 23 | right: 0; 24 | background: white; 25 | padding-top: 3.5rem; 26 | transition: 0.5s; 27 | } 28 | 29 | .side-nav a { 30 | padding: 0.5rem 0.5rem 0.5rem 1rem; 31 | text-decoration: none; 32 | font-size: 17px; 33 | color: #818181; 34 | display: block; 35 | transition: 0.53s; 36 | padding-left: 30px; 37 | padding-top: 20px; 38 | color: black; 39 | font-weight: normal; 40 | } 41 | 42 | /* .side-nav a:hover { 43 | color: #f1f1f1; 44 | } */ 45 | 46 | .sideheader_image { 47 | height: 50px; 48 | width: 250px; 49 | margin-bottom: -20px; 50 | } 51 | 52 | .side-nav .close-nav { 53 | position: absolute; 54 | top: 1rem; 55 | right: 1rem; 56 | font-size: 2.2rem; 57 | } 58 | 59 | .site-wrapper { 60 | transition: margin-left 0.5s; 61 | } 62 | 63 | .open-nav { 64 | font-size: 2rem; 65 | cursor: pointer; 66 | position: relative; 67 | top: -5px; 68 | } 69 | -------------------------------------------------------------------------------- /src/Components/Layout/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./SideNav.css"; 3 | // import User from "../User"; 4 | import Cookies from "universal-cookie"; 5 | import { withRouter } from "react-router-dom"; 6 | import { getUser } from "../../Service/Auth"; 7 | import LogoutPopup from "../../Password/LogoutPop"; 8 | const cookies = new Cookies(); 9 | 10 | class SideBar extends React.Component { 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | showNav: false, 15 | status: [], 16 | user: [], 17 | }; 18 | } 19 | 20 | // componentDidMount() { 21 | // if (cookies.get("Token") === null || cookies.get("Token") === undefined) { 22 | 23 | // localStorage.clear(); 24 | // this.props.history.push("/"); 25 | // window.location.reload(1); 26 | 27 | // // setTimeout(function() { 28 | // // window.location.reload(1); 29 | // // }, 1000); 30 | // } else { 31 | // //console.log(cookies.get("Token")); 32 | // } 33 | // } 34 | 35 | async componentDidMount() { 36 | let username = window.localStorage.getItem("username"); 37 | getUser(username).then((data) => { 38 | this.setState({ username: data, status: data.is_superuser }); 39 | }); 40 | } 41 | 42 | onLogout() { 43 | window.localStorage.clear(); 44 | cookies.remove("Token"); 45 | window.location.href = "/"; 46 | window.location.reload(1); 47 | } 48 | 49 | openNavClick = (e) => { 50 | e.preventDefault(); 51 | this.openNav(); 52 | }; 53 | 54 | closeNavClick = (e) => { 55 | e.preventDefault(); 56 | this.closeNav(); 57 | }; 58 | 59 | openNav = () => { 60 | this.setState({ 61 | showNav: true, 62 | }); 63 | 64 | document.addEventListener("keydown", this.handleEscKey); 65 | }; 66 | closeNav = () => { 67 | this.setState({ 68 | showNav: false, 69 | }); 70 | 71 | document.removeEventListener("keydown", this.handleEscKey); 72 | }; 73 | 74 | handleEscKey = (e) => { 75 | if (e.key === "Escape") { 76 | this.closeNav(); 77 | } 78 | }; 79 | 80 | render() { 81 | const { showNav, status } = this.state; 82 | let navCoverStyle = { width: showNav ? "100%" : "0" }; 83 | let sideNavStyle = { width: showNav ? "270px" : "0" }; 84 | console.log(status); 85 | return ( 86 | 87 | 88 | 93 | ☰ 94 | 95 |
100 | 101 |
102 | 103 | × 104 | 105 |

109 | Profile 118 |   119 | {window.localStorage.getItem("username")} 120 |

121 |
122 | 123 | 124 | 125 | {" "} 126 | {" "} 127 |     Dashboard 128 | 129 | 130 | 131 | {" "} 132 | {" "} 133 |     Create Resume 134 | 135 | 136 | 137 | 138 | {" "} 139 | {" "} 140 |     View Profile 141 | 142 | 143 | 144 | {" "} 145 | {" "} 146 |     Edit Profile 147 | 148 | 149 | 150 | 151 | {" "} 152 | {" "} 153 |     Feed 154 | 155 | 156 | 157 | 158 | {" "} 159 | {" "} 160 |     Change Password 161 | 162 | 163 | {status === true && ( 164 | 165 | 166 | 167 | {" "} 168 | {" "} 169 |     User List 170 | 171 | 172 | 173 | 174 | {" "} 175 | {" "} 176 |     Email List 177 | 178 | 179 | 180 | 181 | {" "} 182 | {" "} 183 |     All Blog 184 | 185 | 186 | )} 187 | 188 | 194 | 195 | {" "} 196 | {" "} 197 |     Logout 198 | 199 | 200 |
201 |
202 | {" "} 203 | 204 | 205 | 206 |
207 |
208 | 209 | 210 | 211 |
212 |
213 | 214 | 215 | 216 |
217 |
218 | {" "} 219 | 220 | 221 | 222 |
223 |
224 |
225 | 226 | ); 227 | } 228 | } 229 | 230 | export default withRouter(SideBar); 231 | -------------------------------------------------------------------------------- /src/Config/config.js: -------------------------------------------------------------------------------- 1 | const api = `https://inback.herokuapp.com/api/1/`; 2 | //const api = `http://localhost:8000/api/1/` ? `http://localhost:8000/api/1/` : `https://inback.herokuapp.com/api/1/` ; 3 | 4 | let authToken = localStorage.getItem("Token"); 5 | const config = { 6 | apiUrl: { 7 | me: `${api}me/`, 8 | login: `${api}oauth/token/dashboard/`, // oauth/token/`, 9 | profile: `${api}user/`, 10 | user: `${api}user/`, 11 | 12 | comment: `${api}post/comment/`, 13 | post: `${api}post/`, 14 | 15 | feed: `${api}post/feed/`, 16 | avatar: `${api}user/edit/user/avatar/`, 17 | edit: `${api}user/edit/me/`, 18 | like: `${api}post/like/`, 19 | updateProfile: `${api}user/edit/me/`, 20 | register: `${api}user/register/`, 21 | forgetPassword: `${api}user/api/sendForgottenPasswordEmail/`, 22 | changeForgottenPassword: `${api}user/api/changeForgottenPassword/`, 23 | passwordChnage: `${api}user/change/password/`, 24 | resume: `${api}data/resume/`, 25 | resumeuser: `${api}data/resume/user/`, 26 | langauge: "https://www.mocky.io/v2/5e4eed892f00006c0016ac21", 27 | }, 28 | 29 | blog: { 30 | blog_list: `${api}blog/`, 31 | user_blog_list: `${api}user/blog/`, 32 | }, 33 | 34 | head: { 35 | method: "GET", 36 | headers: { 37 | Accept: "application/json", 38 | "Content-Type": "application/json", 39 | Authorization: "Bearer " + authToken, 40 | }, 41 | }, 42 | 43 | headPost: { 44 | method: "POST", 45 | headers: { 46 | Accept: "application/json", 47 | "Content-Type": "application/json", 48 | "Accept-Language": window.localStorage.i18nextLng, 49 | Authorization: "Bearer " + authToken, 50 | }, 51 | }, 52 | 53 | headDelete: { 54 | method: "DELETE", 55 | headers: { 56 | Accept: "application/json", 57 | "Content-Type": "application/json", 58 | Authorization: "Bearer " + authToken, 59 | }, 60 | }, 61 | }; 62 | 63 | export default config; 64 | -------------------------------------------------------------------------------- /src/Password/ChangePassword.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Swal from "sweetalert2"; 3 | import axios from "axios"; 4 | import config from "../Config/config"; 5 | import Visibility from "@material-ui/icons/Visibility"; 6 | import VisibilityOff from "@material-ui/icons/VisibilityOff"; 7 | import PasswordStrength from "./Passsword/PasswordStrength"; 8 | 9 | const authToken = localStorage.getItem("Token"); 10 | function ChangePassword() { 11 | const [password, setPassword] = useState({ 12 | old_password: "", 13 | new_password: "", 14 | confirmPassword: "", 15 | }); 16 | const [showPassword, setShowPassword] = useState(false); 17 | const [showPassword1, setShowPassword1] = useState(false); 18 | 19 | const handleClickShowPassword = () => { 20 | setShowPassword(!showPassword); 21 | }; 22 | const handleClickShowPassword1 = () => { 23 | setShowPassword1(!showPassword1); 24 | }; 25 | 26 | const handleChange = (event) => { 27 | const { name, value } = event.target; 28 | setPassword({ ...password, [name]: value }); 29 | }; 30 | 31 | const handleSubmit = (e) => { 32 | e.preventDefault(); 33 | Swal.fire({ 34 | title: "Loading", 35 | type: "warning", 36 | showCancelButton: false, 37 | showConfirmButton: false, 38 | timerProgressBar: true, 39 | onBeforeOpen: () => { 40 | Swal.showLoading(); 41 | }, 42 | }); 43 | 44 | const re = RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}$/); 45 | const isOk = re.test(password.new_password); 46 | 47 | if (isOk) { 48 | axios({ 49 | url: config.apiUrl.passwordChnage, 50 | method: "put", 51 | headers: { 52 | Accept: "application/json", 53 | "Content-Type": "application/json", 54 | Authorization: "Bearer " + authToken, 55 | }, 56 | data: password, 57 | }) 58 | .then((response) => { 59 | Swal.fire({ 60 | title: "Password Changed", 61 | icon: "success", 62 | text: `You have successfuly changed password`, 63 | showConfirmButton: false, 64 | timer: 3000, 65 | }); 66 | setTimeout(function () { 67 | window.location.href = "/home/"; 68 | }, 2000); 69 | }) 70 | .catch((err) => { 71 | console.log(err); 72 | Swal.fire({ 73 | title: "Registerd", 74 | icon: "error", 75 | text: err.response.data["message"], 76 | timer: 2000, 77 | }); 78 | }); 79 | } else { 80 | Swal.fire({ 81 | title: "Password Error", 82 | icon: "warning", 83 | text: 84 | "Your password must contain at least one small , big letter and least one digit", 85 | timer: 2000, 86 | }); 87 | } 88 | }; 89 | return ( 90 |
91 | {/* */} 92 |
93 |
94 |
95 |
96 | {/* */} 97 |
98 |
99 | Forget Password 104 |
105 |
106 |
107 |
108 |

109 | Change Password ? 110 |

111 |

112 | We get it, stuff happens. Just enter your email address 113 | below and we'll send you a link to reset your password! 114 |

115 |
116 |
121 |
122 | 130 |
131 |
132 | 140 | 145 | {showPassword ? ( 146 | 147 | ) : ( 148 | 149 | )} 150 | 151 | 152 |
153 | 154 |
155 | 163 | 168 | {showPassword1 ? ( 169 | 170 | ) : ( 171 | 172 | )} 173 | 174 | {password.new_password !== password.confirmPassword ? ( 175 | password.confirmPassword.length > 1 ? ( 176 | 180 | Password did not match 181 | 182 | ) : ( 183 | "" 184 | ) 185 | ) : password.confirmPassword.length > 1 ? ( 186 | 190 | Password matched 191 | 192 | ) : ( 193 | "" 194 | )}{" "} 195 |
196 | 206 |
207 |
208 |
209 | 214 | Main Page 215 | 216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 | ); 226 | } 227 | 228 | export default ChangePassword; 229 | -------------------------------------------------------------------------------- /src/Password/Forget.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 100px) and (max-width: 800px) { 2 | .don_sm { 3 | width: 400px; 4 | } 5 | .hip1 { 6 | margin-left: 20px; 7 | overflow: hidden; 8 | } 9 | .mb-2 { 10 | line-height: 200px; 11 | margin-left: -10px; 12 | } 13 | .user { 14 | width: 270px; 15 | margin-left: -10px; 16 | } 17 | .helll_my { 18 | max-width: 100%; 19 | overflow: hidden; 20 | } 21 | .Main_section1 { 22 | max-width: 100%; 23 | } 24 | .mb-4{ 25 | position: relative; 26 | top: -60px; 27 | } 28 | .user{ 29 | position: relative; 30 | top: -40px; 31 | margin: 0 auto; 32 | max-width: 100%; 33 | } 34 | 35 | } 36 | .forget_name{ 37 | margin-bottom: 10px; 38 | } 39 | 40 | 41 | .hip1 { 42 | position: absolute; 43 | left: 50%; 44 | top: 50%; 45 | transform: translate(-50%, -50%); 46 | } 47 | .btn-login{ 48 | background: rgba(183, 28, 28, 1); 49 | padding: 10px; 50 | font-size: 15px; 51 | box-shadow: 0px 8px 25px -7px #c0c0c0; 52 | border-radius: 4px; 53 | width: "100%"; 54 | color: white; 55 | height: 43px; 56 | font-weight: bolder; 57 | margin-top: 25px; 58 | 59 | } 60 | .btn-login:hover{ 61 | color: white; 62 | } 63 | .password{ 64 | margin-top: 25px; 65 | } 66 | 67 | .full{ 68 | float: right; 69 | position: relative; 70 | top: -30px; 71 | left: -10px; 72 | } 73 | 74 | 75 | .progress { 76 | margin-bottom: 10px; 77 | border-radius: 20px; 78 | } 79 | 80 | .progress-bar { 81 | width: 0; 82 | border-radius: 20px; 83 | position:relative; 84 | } 85 | .progress-bar span[data-toggle="tooltip"]{ 86 | width: 16px; 87 | height: 16px; 88 | border-radius: 20px; 89 | background: red; 90 | position:absolute; 91 | right:0px; 92 | top:0; 93 | } 94 | 95 | 96 | #fact1 { 97 | background: url("https://assets.vogue.com/photos/5bf4664e090f622d55116ce1/master/pass/00-promo-image-the-tulip-skyscraper-building-london.jpg") 98 | center top no-repeat fixed; 99 | background-size: cover; 100 | padding: 40px 0; 101 | position: relative; 102 | margin-top: 0px; 103 | 104 | color: white; 105 | } 106 | 107 | #fact1::before { 108 | content: ""; 109 | position: absolute; 110 | left: 0; 111 | right: 0; 112 | top: 0%; 113 | bottom: 0; 114 | background: rgba(5, 5, 5, 0.78); 115 | z-index: 0; 116 | } 117 | 118 | #fact1 .container { 119 | position: relative; 120 | z-index: 100; 121 | } 122 | 123 | .about_project1 { 124 | font-size: 12px; 125 | font-family: sans-serif; 126 | color: gray; 127 | line-height: 20px; 128 | margin-top: -10px; 129 | } 130 | 131 | .about_project { 132 | font-size: 12px; 133 | font-family: sans-serif; 134 | color: gray; 135 | line-height: 20px; 136 | margin-top: -10px; 137 | } 138 | .project_head { 139 | font-family: sans-serif; 140 | font-size: 16.765px; 141 | line-height: 15px; 142 | } 143 | 144 | .education { 145 | color: rgb(66, 66, 204); 146 | font-family: sans-serif; 147 | font-weight: 900; 148 | font-size: 24px; 149 | margin-bottom: 10px; 150 | letter-spacing: 2px; 151 | } 152 | .name_section { 153 | color: black; 154 | font-family: sans-serif; 155 | font-weight: bolder; 156 | font-size: 18px; 157 | letter-spacing: 0.5px; 158 | } 159 | .degree_major { 160 | color: black; 161 | font-family: sans-serif; 162 | font-weight: 400; 163 | font-size: 18px; 164 | letter-spacing: 0.5px; 165 | font-size: 15px; 166 | line-height: 15px; 167 | } 168 | 169 | .main_section { 170 | /* padding-left: 40px; */ 171 | /* padding-right: 40px; */ 172 | /* margin-top: 15px; */ 173 | width: 105%; 174 | margin-top: 1px; 175 | } 176 | 177 | .basic_information { 178 | background-color: rgb(66, 66, 204, 0.05); 179 | font-family: "Roboto", sans-serif; 180 | font-weight: 300; 181 | padding-top: 25px; 182 | padding-bottom: 10px; 183 | 184 | /* padding-left: 40px; 185 | padding-right: 40px; */ 186 | position: relative; 187 | top: -20px; 188 | margin-top: 5px; 189 | } 190 | .basic_information1 { 191 | background-color: rgb(66, 66, 204, 0.05); 192 | font-family: "Roboto", sans-serif; 193 | font-weight: 300; 194 | padding-top: 25px; 195 | padding-bottom: 10px; 196 | position: relative; 197 | top: -20px; 198 | } 199 | .hello_eductioen{ 200 | padding-left: 10px; 201 | } 202 | .dons{ 203 | margin-top: 30px; 204 | } 205 | .progress{ 206 | height: 10px; 207 | margin-top: 5px; 208 | } 209 | .subheading{ 210 | line-height: 20px; 211 | } 212 | canvas { 213 | display: none; 214 | } -------------------------------------------------------------------------------- /src/Password/ForgetPassword.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Swal from "sweetalert2"; 3 | import axios from "axios"; 4 | import config from "../Config/config"; 5 | import "./Forget.css"; 6 | 7 | function ForgetPassword() { 8 | const [password, setPassword] = useState({ 9 | email: "", 10 | }); 11 | 12 | const handleChange = (event) => { 13 | const { name, value } = event.target; 14 | setPassword({ ...password, [name]: value }); 15 | }; 16 | 17 | const handleSubmit = (e) => { 18 | e.preventDefault(); 19 | Swal.fire({ 20 | title: "Loading", 21 | type: "warning", 22 | showCancelButton: false, 23 | showConfirmButton: false, 24 | timerProgressBar: true, 25 | onBeforeOpen: () => { 26 | Swal.showLoading(); 27 | }, 28 | }); 29 | 30 | axios({ 31 | method: "post", 32 | url: config.apiUrl.forgetPassword, 33 | headers: { 34 | Accept: "application/json", 35 | "Content-Type": "application/json", 36 | }, 37 | 38 | data: password, 39 | }) 40 | .then((response) => { 41 | Swal.fire({ 42 | title: "Email Sent", 43 | icon: "success", 44 | text: `We have succesfully sent an email to ${password.email}`, 45 | showConfirmButton: false, 46 | timer: 3000, 47 | }); 48 | setTimeout(function () { 49 | window.location.href = "/"; 50 | }, 2000); 51 | }) 52 | .catch((err) => { 53 | console.log(err); 54 | Swal.fire({ 55 | title: "Registerd", 56 | icon: "error", 57 | text: err.response.data["message"], 58 | timer: 2000, 59 | }); 60 | }); 61 | } 62 | const mailformat = RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g); 63 | const isEnabled = password.email.match(mailformat); 64 | return ( 65 |
66 | {/* */} 67 |
68 |
69 |
70 |
71 | {/* */} 72 |
73 |
74 | Forget Password 79 |
80 |
81 |
82 |
83 |

87 | Forget Password ? 88 |

89 |

90 | We get it, stuff happens. Just enter your email address 91 | below and we'll send you a link to reset your password! 92 |

93 |
94 |
99 |
100 | 108 |
109 | 117 |
118 |
119 |
120 | 125 | Login Page 126 | 127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | ); 137 | } 138 | 139 | export default ForgetPassword; 140 | -------------------------------------------------------------------------------- /src/Password/LogoutPop.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Cookies from "universal-cookie"; 3 | import Swal from "sweetalert2"; 4 | import { withRouter } from "react-router-dom"; 5 | 6 | const cookies = new Cookies(); 7 | const LogoutPopup = () => { 8 | const [signoutTime, setSignoutTime] = useState(1800000); 9 | const [warningTime, setWarningTime] = useState(1500000); 10 | let warnTimeout; 11 | let logoutTimeout; 12 | 13 | const warn = () => { 14 | Swal.fire({ 15 | title: "Your session in going to expire soon ", 16 | icon: "warning", 17 | html: "Session will expire 30 sec.", 18 | // text: "Session will expire in 30 sec", 19 | showConfirmButton: false, 20 | timer: 3000, 21 | }); 22 | }; 23 | const logout = () => { 24 | Swal.fire({ 25 | title: "Logged out ", 26 | icon: "success", 27 | text: "You have been loged out", 28 | showConfirmButton: false, 29 | timer: 3000, 30 | }); 31 | localStorage.removeItem("Name"); 32 | cookies.remove("Token"); 33 | localStorage.removeItem("Token"); 34 | window.location.href = "/"; 35 | window.location.reload(); 36 | }; 37 | 38 | // const destroy = () => { 39 | // Swal.fire({ 40 | // title: "Destroy ", 41 | // type: "success", 42 | // text: "Session destroy Successfully !", 43 | // showConfirmButton: false, 44 | // timer: 3000, 45 | // }); 46 | // }; 47 | const setTimeouts = () => { 48 | warnTimeout = setTimeout(warn, warningTime); 49 | logoutTimeout = setTimeout(logout, signoutTime); 50 | }; 51 | 52 | const clearTimeouts = () => { 53 | if (warnTimeout) clearTimeout(warnTimeout); 54 | if (logoutTimeout) clearTimeout(logoutTimeout); 55 | }; 56 | 57 | function TrainingTime(totalSeconds) { 58 | totalSeconds %= 3600; 59 | let minutes = Math.floor(totalSeconds / 60); 60 | let seconds = totalSeconds % 60; 61 | return `${minutes} : ${seconds}`; 62 | } 63 | 64 | var count = -1; 65 | const deadTime = Math.floor(signoutTime / 1000); 66 | function beginTimer() { 67 | count++; 68 | 69 | if (count < deadTime) { 70 | var don = deadTime - count; 71 | var minutes = TrainingTime(don); 72 | document.getElementById("demo").innerHTML = ""; //minutes; 73 | setTimeout(beginTimer, 2000); 74 | } else { 75 | endTimer(); 76 | } 77 | } 78 | 79 | function endTimer() { 80 | console.log("Time is finished"); 81 | } 82 | 83 | useEffect(() => { 84 | const events = [ 85 | "load", 86 | "mousemove", 87 | "mousedown", 88 | "click", 89 | "scroll", 90 | "keypress", 91 | "wheel", 92 | "keydown", 93 | ]; 94 | 95 | beginTimer(); 96 | 97 | const resetTimeout = () => { 98 | clearTimeouts(); 99 | setTimeouts(); 100 | }; 101 | setSignoutTime(); 102 | setWarningTime(); 103 | 104 | for (let i in events) { 105 | window.addEventListener(events[i], resetTimeout); 106 | } 107 | 108 | setTimeouts(); 109 | return () => { 110 | for (let i in events) { 111 | window.removeEventListener(events[i], resetTimeout); 112 | clearTimeouts(); 113 | } 114 | }; 115 | // eslint-disable-next-line 116 | }, []); 117 | 118 | return ( 119 |
120 |
121 | {" "} 122 |
123 |
124 | ); 125 | }; 126 | export default withRouter(LogoutPopup); 127 | -------------------------------------------------------------------------------- /src/Password/Passsword/Password.css: -------------------------------------------------------------------------------- 1 | .password-strength-meter { 2 | width: 100%; 3 | margin-top: -10px; 4 | } 5 | 6 | .password-strength-meter-progress { 7 | -webkit-appearance: none; 8 | appearance: none; 9 | width: 100%; 10 | height: 8px; 11 | } 12 | 13 | .password-strength-meter-progress::-webkit-progress-bar { 14 | background-color: #eee; 15 | border-radius: 3px; 16 | } 17 | 18 | .password-strength-meter-label { 19 | font-size: 14px; 20 | width: 100%; 21 | } 22 | 23 | .password-strength-meter-progress::-webkit-progress-value { 24 | border-radius: 2px; 25 | background-size: 35px 20px, 100% 100%, 100% 100%; 26 | } 27 | 28 | .strength-Weak::-webkit-progress-value { 29 | background-color: #f25f5c; 30 | } 31 | .strength-Fair::-webkit-progress-value { 32 | background-color: #ffe066; 33 | } 34 | .strength-Good::-webkit-progress-value { 35 | background-color: #247ba0; 36 | } 37 | .strength-Strong::-webkit-progress-value { 38 | background-color: #70c1b3; 39 | } 40 | 41 | .password-input { 42 | color: #616161; 43 | outline: 0; 44 | padding: 7px; 45 | font-size: 1em; 46 | min-width: 250px; 47 | border-radius: 5px; 48 | 49 | margin-left: 15px; 50 | text-align: left; 51 | padding-left: 30px; 52 | } 53 | .progress { 54 | width: 100%; 55 | height: 8px; 56 | } 57 | -------------------------------------------------------------------------------- /src/Password/Passsword/PasswordStrength.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Password.css"; 3 | function PasswordStrength(props) { 4 | const hasNumber = (value) => { 5 | return new RegExp(/[0-9]/).test(value); 6 | }; 7 | 8 | const hasMixed = (value) => { 9 | return new RegExp(/[a-z]/).test(value) && new RegExp(/[A-Z]/).test(value); 10 | }; 11 | 12 | const hasSpecial = (value) => { 13 | return new RegExp(/[!#@$%^&*)(+=._-]/).test(value); 14 | }; 15 | 16 | const strengthColor = (count) => { 17 | if (count < 2) return "Too short"; 18 | 19 | if (count < 3) return "Weak"; 20 | 21 | if (count < 4) return "Fair"; 22 | 23 | if (count < 5) return "Strong"; 24 | 25 | if (count < 6) return "Very Strong"; 26 | }; 27 | 28 | const strengthIndicator = (value) => { 29 | let strengths = 0; 30 | 31 | if (value.length > 5) strengths++; 32 | 33 | if (value.length > 7) strengths++; 34 | 35 | if (hasNumber(value)) strengths++; 36 | 37 | if (hasSpecial(value)) strengths++; 38 | 39 | if (hasMixed(value)) strengths++; 40 | 41 | return strengths; 42 | }; 43 | 44 | const strength = strengthIndicator(props.password); 45 | const color = strengthColor(strength); 46 | const pick = (data) => 47 | data === "Too short" 48 | ? "5" 49 | : data === "Weak" 50 | ? "35" 51 | : data === "Fair" 52 | ? "50" 53 | : data === "Strong" 54 | ? "75" 55 | : data === "Very Strong" 56 | ? "100" 57 | : 0; 58 | const back = (data) => 59 | data === "Too short" 60 | ? "danger" 61 | : data === "Weak" 62 | ? "danger" 63 | : data === "Fair" 64 | ? "primary" 65 | : data === "Strong" 66 | ? "info" 67 | : data === "Very Strong" 68 | ? "success" 69 | : "danger"; 70 | return ( 71 | <> 72 | {props.password && ( 73 | 93 | )} 94 | 95 | ); 96 | } 97 | 98 | export default PasswordStrength; 99 | -------------------------------------------------------------------------------- /src/Password/ResetPassword.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Swal from "sweetalert2"; 3 | import axios from "axios"; 4 | import config from "../Config/config"; 5 | import PasswordStrength from "./Passsword/PasswordStrength"; 6 | 7 | function ResetPassword() { 8 | const [password, setPassword] = useState({ 9 | password: "", 10 | token: new URLSearchParams(window.location.search).get("token"), 11 | confirmPassword: "", 12 | }); 13 | 14 | const handleChange = (event) => { 15 | const { name, value } = event.target; 16 | setPassword({ ...password, [name]: value }); 17 | }; 18 | 19 | const handleSubmit = (e) => { 20 | e.preventDefault(); 21 | Swal.fire({ 22 | title: "Loading", 23 | type: "warning", 24 | showCancelButton: false, 25 | showConfirmButton: false, 26 | timerProgressBar: true, 27 | onBeforeOpen: () => { 28 | Swal.showLoading(); 29 | }, 30 | }); 31 | 32 | const re = RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}$/); 33 | const isOk = re.test(password.password); 34 | 35 | if (isOk) { 36 | axios({ 37 | method: "post", 38 | url: config.apiUrl.changeForgottenPassword, 39 | headers: { 40 | Accept: "application/json", 41 | "Content-Type": "application/json", 42 | }, 43 | 44 | data: password, 45 | }) 46 | .then((response) => { 47 | Swal.fire({ 48 | title: "Password Changed", 49 | icon: "success", 50 | text: `You have successfuly changed password`, 51 | showConfirmButton: false, 52 | timer: 3000, 53 | }); 54 | setTimeout(function () { 55 | window.location.href = "/"; 56 | }, 2000); 57 | }) 58 | .catch((err) => { 59 | console.log(err); 60 | Swal.fire({ 61 | title: "Registerd", 62 | icon: "error", 63 | text: err.response.data["message"], 64 | timer: 2000, 65 | }); 66 | }); 67 | } else { 68 | Swal.fire({ 69 | title: "Password Error", 70 | icon: "warning", 71 | text: 72 | "Your password must contain at least one small , big letter and least one digit", 73 | timer: 2000, 74 | }); 75 | } 76 | }; 77 | return ( 78 |
79 | {/* */} 80 |
81 |
82 |
83 |
84 | {/* */} 85 |
86 |
87 | Forget Password 92 |
93 |
94 |
95 |
96 |

97 | Forget Password ? 98 |

99 |

100 | We get it, stuff happens. Just enter your email address 101 | below and we'll send you a link to reset your password! 102 |

103 |
104 |
109 |
110 | 118 | 119 |
120 | 121 |
122 | 130 | {password.password !== password.confirmPassword ? ( 131 | password.confirmPassword.length > 1 ? ( 132 | 136 | Password did not match 137 | 138 | ) : ( 139 | "" 140 | ) 141 | ) : password.confirmPassword.length > 1 ? ( 142 | 146 | Password matched 147 | 148 | ) : ( 149 | "" 150 | )}{" "} 151 |
152 | 162 |
163 |
164 |
165 | 170 | Login Page 171 | 172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 | ); 182 | } 183 | 184 | export default ResetPassword; 185 | -------------------------------------------------------------------------------- /src/ResumeFile/A4.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export class A4 extends Component { 4 | render() { 5 | return ( 6 | //
7 | // 8 | //
9 |
10 |
11 |
12 |
13 |
14 | Profile 25 |
26 | 27 |
28 |

Rahul Raj

29 |

30 | I am a Computer Science student with extensive knowledge of 31 | programming and computer applications.I'm a Full Stack 32 | Developer. At the moment, I'm living in Warsaw Poland and 33 | working as full stack developerat Viva Drive. currently 34 | working with Python, Django, React Js,Node js . I also worked 35 | have Knowledge inProgramming with Java, PHP,DataScience and 36 | passionate to learn Data Science Machine Learning. 37 |

38 |
39 |
40 | 41 |
42 |
43 |

44 |   +48722750618 45 |

46 |

47 |   Linkedin 48 |

49 |

50 | @   rajr97555@gmail.com 51 |

52 |
53 |
54 |

55 |   Warsaw, Poland 56 |

57 |

58 |   Githubb 59 |

60 |
61 |
62 |

63 |   Skype 64 |

65 |

66 |   Web 67 |

68 |
69 |
70 | 71 |
72 |
73 |

EDUCATION

74 | 75 | {/* This Section For Education List */} 76 |
77 |
78 |

79 | University Of Social Science 80 |

81 |

Bachelor (Computer Science)

82 |

83 | 10/2016 - 02/2020 {" "} 84 | Warsaw, Poland 85 |

86 |

87 | GPA 4.6/5 88 |

89 |
90 |
91 | 92 | {/* For Work Projects */} 93 |
94 |

WORK EXPERIANCE

95 | 96 | {/* This Section For Person List */} 97 |
98 |
99 |

Full Stack Developer

100 |

VIVA DRIVE (Full-Time)

101 |

102 | 10/2016 - 02/2020 {" "} 103 | Warsaw, Poland 104 |

105 |

106 | - I am a Computer Science student with extensive 107 | knowledge of programming and computer applications.I'm a 108 | Full Stack Developer. At the moment, I'm living in 109 | Warsaw Poland and working as full stack developerat Viva 110 | Drive 111 |

112 |
113 |
114 |
115 | 116 | {/* For Personal Projects */} 117 |
118 |

PERSONAL PROJECT

119 | 120 | {/* This Section For Person List */} 121 |
122 |
123 |

124 | Trace Speditions and Manage CMRs Circulation{" "} 125 | 126 | {" "} 127 | {" "} 128 |

129 |

130 | - I am a Computer Science student with extensive 131 | knowledge of programming and computer applications.I'm a 132 | Full Stack Developer. At the moment, I'm living in 133 | Warsaw Poland and working as full stack developerat Viva 134 | Drive 135 |

136 |
137 |
138 |
139 |
140 | 141 | {/* Another Part Of Resume */} 142 |
143 | {/* For Skills Projects */} 144 |
145 |

SKILLS

146 | 147 | {/* This Section For Person List */} 148 |
149 | 150 | 151 | 152 | 153 | 154 | 155 |
156 |
157 | 158 | {/* For LANGUAGE Projects */} 159 |
163 |

LANGUAGE

164 | 165 | {/* This Section For Person List */} 166 |
167 |
168 |
169 |
ENGLISH
170 |
FLUENT
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 | ); 181 | } 182 | } 183 | 184 | export default A4; 185 | -------------------------------------------------------------------------------- /src/ResumeFile/Hobbies.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class Hobbies extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = {}; 7 | } 8 | 9 | handleAddFields = () => { 10 | const values = this.props.state; 11 | values.push({ 12 | intrest: "" 13 | }); 14 | this.setState({ 15 | values 16 | }); 17 | }; 18 | 19 | handleRemoveFields = index => { 20 | const values = this.props.state; 21 | values.splice(index, 1); 22 | this.setState({ 23 | values 24 | }); 25 | }; 26 | 27 | async onChange(e, index) { 28 | if (["intrest"].includes(e.target.name)) { 29 | let cats = [...this.props.state]; 30 | cats[index][e.target.name] = e.target.value; 31 | await this.setState({ 32 | cats 33 | }); 34 | } else { 35 | this.setState({ [e.target.name]: e.target.value.toUpperCase() }); 36 | } 37 | //console.log(this.props.state); 38 | } 39 | 40 | saveAndContinue = e => { 41 | e.preventDefault(); 42 | this.props.nextStep(); 43 | }; 44 | 45 | back = e => { 46 | e.preventDefault(); 47 | this.props.prevStep(); 48 | }; 49 | 50 | render() { 51 | return ( 52 |
53 |
54 |

55 | 62 | 69 |

70 | 71 |
72 |
73 | {this.props.state.map((inputField, index) => ( 74 |
75 |
76 |
77 | 80 |
81 | {/*
82 | 83 | 84 | 85 |
*/} 86 | { 93 | this.onChange(e, index); 94 | }} 95 | /> 96 |
97 |
98 |
99 | 107 |
108 |
109 |
110 | ))} 111 |
112 |
113 |
114 | 117 | 120 |
121 |
122 |
123 | ); 124 | } 125 | } 126 | 127 | export default Hobbies; 128 | -------------------------------------------------------------------------------- /src/ResumeFile/Language.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import config from "../Config/config"; 3 | 4 | class Language extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | code: [], 9 | inputFields: [ 10 | { 11 | language: "", 12 | level: "" 13 | } 14 | ] 15 | }; 16 | } 17 | 18 | handleAddFields = () => { 19 | const values = this.props.state; 20 | values.push({ 21 | language: "", 22 | level: "" 23 | }); 24 | this.setState({ 25 | values 26 | }); 27 | }; 28 | 29 | handleRemoveFields = index => { 30 | const values = this.props.state; 31 | values.splice(index, 1); 32 | this.setState({ 33 | values 34 | }); 35 | }; 36 | 37 | async onChange(e, index) { 38 | if (["language", "level"].includes(e.target.name)) { 39 | let cats = [...this.props.state]; 40 | cats[index][e.target.name] = e.target.value; 41 | await this.setState({ 42 | cats 43 | }); 44 | } else { 45 | this.setState({ [e.target.name]: e.target.value.toUpperCase() }); 46 | } 47 | //console.log(this.props.state); 48 | } 49 | 50 | saveAndContinue = e => { 51 | e.preventDefault(); 52 | this.props.nextStep(); 53 | }; 54 | 55 | back = e => { 56 | e.preventDefault(); 57 | this.props.prevStep(); 58 | }; 59 | 60 | async componentDidMount() { 61 | const res = await fetch(config.apiUrl.langauge); 62 | const code = await res.json(); 63 | console.log(code); 64 | this.setState({ 65 | code 66 | }); 67 | } 68 | 69 | render() { 70 | const { code } = this.state; 71 | return ( 72 |
73 |
74 |

75 | 82 | 89 |

90 | 91 | {this.props.state.map((inputField, index) => ( 92 |
93 |
97 |
98 |
99 |
100 | 103 |
104 |
105 | 106 | 107 | 108 |
109 | 110 | 125 |
126 |
127 |
128 | 129 |
130 |
131 | 134 |
135 |
136 | 137 | 138 | 139 |
140 | 159 |
160 |
161 |
162 |
163 |
164 | 172 |
173 |
174 |
175 | ))} 176 |
177 | 180 | 183 |
184 |
185 |
186 | ); 187 | } 188 | } 189 | 190 | export default Language; 191 | -------------------------------------------------------------------------------- /src/ResumeFile/Project.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class Project extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | project: "" 8 | }; 9 | } 10 | 11 | handleAddFields = () => { 12 | const values = this.props.state; 13 | values.push({ 14 | title: "", 15 | projectdetails: "", 16 | link: "" 17 | }); 18 | this.setState({ 19 | values 20 | }); 21 | }; 22 | 23 | handleRemoveFields = index => { 24 | const values = this.props.state; 25 | values.splice(index, 1); 26 | this.setState({ 27 | values 28 | }); 29 | }; 30 | 31 | async onChange(e, index) { 32 | if (["title", "projectdetails", "link"].includes(e.target.name)) { 33 | let cats = [...this.props.state]; 34 | cats[index][e.target.name] = e.target.value; 35 | await this.setState({ 36 | cats 37 | }); 38 | } else { 39 | this.setState({ [e.target.name]: e.target.value.toUpperCase() }); 40 | } 41 | // console.log(this.state.this.props.state); 42 | } 43 | 44 | // async change(e) { 45 | // await this.setState({ 46 | // [e.target.name]: e.target.value 47 | // }); 48 | // console.log(this.state.project); 49 | // } 50 | 51 | // handleSubmit = e => { 52 | // e.preventDefault(); 53 | // console.log("inputFields", this.state.inputFields); 54 | // }; 55 | 56 | saveAndContinue = e => { 57 | e.preventDefault(); 58 | this.props.nextStep(); 59 | }; 60 | 61 | back = e => { 62 | e.preventDefault(); 63 | this.props.prevStep(); 64 | }; 65 | render() { 66 | return ( 67 |
68 |
69 |

70 | 77 | 84 |

85 | 86 | {this.props.state.map((inputField, index) => ( 87 |
88 |
92 |
93 | {/* Project Name */} 94 |
95 |
96 | 99 |
100 |
101 | 102 | 103 | 104 |
105 | { 111 | this.onChange(e, index); 112 | }} 113 | /> 114 |
115 |
116 |
117 | 118 | {/* Project Link */} 119 |
120 |
121 | 124 |
125 |
126 | 127 | 128 | 129 |
130 | { 136 | this.onChange(e, index); 137 | }} 138 | /> 139 |
140 |
141 |
142 |
143 | 144 |
145 |
146 |
147 | 150 | 151 | 162 |
163 |
164 |
165 |
166 | 174 |
175 |
176 |
177 | ))} 178 |
179 | 182 | 185 |
186 |
187 |
188 | ); 189 | } 190 | } 191 | 192 | export default Project; 193 | -------------------------------------------------------------------------------- /src/ResumeFile/Reme.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamrraj/React-Resume-Generator/42d73ba6e506d96525f3b6032884b07e152f77d0/src/ResumeFile/Reme.css -------------------------------------------------------------------------------- /src/ResumeFile/Resume/One.css: -------------------------------------------------------------------------------- 1 | @page { 2 | size: letter portrait; 3 | margin: 0; 4 | } 5 | 6 | * { 7 | box-sizing: border-box; 8 | } 9 | 10 | :root { 11 | --page-width: 8.5in; 12 | --page-height: 11in; 13 | --main-width: 6.4in; 14 | --sidebar-width: calc(var(--page-width) - var(--main-width)); 15 | --decorator-horizontal-margin: 0.2in; 16 | 17 | --sidebar-horizontal-padding: 0.2in; 18 | 19 | /* XXX: using px for very good precision control */ 20 | --decorator-outer-offset-top: 10px; 21 | --decorator-outer-offset-left: -5.5px; 22 | --decorator-border-width: 1px; 23 | --decorator-outer-dim: 9px; 24 | --decorator-border: 1px solid #ccc; 25 | 26 | --row-blocks-padding-top: 5pt; 27 | --date-block-width: 0.6in; 28 | 29 | --main-blocks-title-icon-offset-left: -19pt; 30 | } 31 | 32 | /* body { 33 | width: var(--page-width); 34 | height: var(--page-height); 35 | margin: 0; 36 | font-family: "Open Sans", sans-serif; 37 | font-weight: 300; 38 | line-height: 1.3; 39 | color: #444; 40 | hyphens: auto; 41 | } */ 42 | 43 | h1, 44 | h2, 45 | h3 { 46 | margin: 0; 47 | color: #000; 48 | } 49 | 50 | li { 51 | list-style-type: none; 52 | } 53 | 54 | #main { 55 | float: left; 56 | width: 70%; 57 | /* width: var(--main-width); */ 58 | /* padding: 0.25in 0.25in 0 0.25in; */ 59 | font-size: 7pt; 60 | } 61 | 62 | #sidebar { 63 | float: right; 64 | width: 25%; 65 | position: relative; /* for disclaimer */ 66 | /* width: var(--sidebar-width); */ 67 | height: 100%; 68 | /* padding: 0.6in var(--sidebar-horizontal-padding); */ 69 | background-color: #f2f2f2; 70 | font-size: 8.5pt; 71 | } 72 | 73 | /* main */ 74 | 75 | /** big title **/ 76 | #title, 77 | h1, 78 | h2 { 79 | text-transform: uppercase; 80 | } 81 | 82 | #title { 83 | position: relative; 84 | left: 0.55in; 85 | margin-bottom: 0.3in; 86 | line-height: 1.2; 87 | } 88 | 89 | #title h1 { 90 | font-weight: 300; 91 | font-size: 18pt; 92 | line-height: 1.5; 93 | } 94 | 95 | #title h1 strong { 96 | margin: auto 2pt auto 4pt; 97 | font-weight: 600; 98 | } 99 | 100 | .subtitle { 101 | font-size: 8pt; 102 | } 103 | 104 | /*** categorial blocks ***/ 105 | 106 | .main-block { 107 | margin-top: 0.1in; 108 | } 109 | 110 | #main h2 { 111 | position: relative; 112 | top: var(--row-blocks-padding-top); 113 | /* XXX: 0.5px for aligning fx printing */ 114 | left: calc((var(--date-block-width) + var(--decorator-horizontal-margin))); 115 | font-weight: 400; 116 | font-size: 11pt; 117 | color: #555; 118 | } 119 | 120 | #main h2 > i { 121 | /* use absolute position to prevent icon's width from misaligning title */ 122 | /* assigning a fixed width here is no better due to needing to align decorator 123 | line too */ 124 | position: absolute; 125 | left: var(--main-blocks-title-icon-offset-left); 126 | z-index: 1; /* over decorator line */ 127 | color: #444; 128 | } 129 | 130 | #main h2::after { 131 | /* extends the decorator line */ 132 | height: calc(var(--row-blocks-padding-top) * 2); 133 | position: relative; 134 | top: calc(-1 * var(--row-blocks-padding-top)); 135 | /* XXX: 0.5px for aligning fx printing */ 136 | left: calc(-1 * var(--decorator-horizontal-margin)); 137 | display: block; 138 | border-left: var(--decorator-border); 139 | z-index: 0; 140 | line-height: 0; 141 | font-size: 0; 142 | content: " "; 143 | } 144 | 145 | /**** minor tweaks on the icon fonts ****/ 146 | #main h2 > .fa-graduation-cap { 147 | left: calc(var(--main-blocks-title-icon-offset-left) - 2pt); 148 | top: 2pt; 149 | } 150 | 151 | #main h2 > .fa-suitcase { 152 | top: 1pt; 153 | } 154 | 155 | #main h2 > .fa-folder-open { 156 | top: 1.5pt; 157 | } 158 | 159 | /**** individual row blocks (date - decorator - details) ****/ 160 | 161 | .blocks { 162 | display: flex; 163 | flex-flow: row nowrap; 164 | } 165 | 166 | .blocks > div { 167 | padding-top: var(--row-blocks-padding-top); 168 | } 169 | 170 | .date { 171 | flex: 0 0 var(--date-block-width); 172 | padding-top: calc(var(--row-blocks-padding-top) + 2.5pt) !important; 173 | padding-right: var(--decorator-horizontal-margin); 174 | font-size: 7pt; 175 | text-align: right; 176 | line-height: 1; 177 | } 178 | 179 | .date span { 180 | display: block; 181 | } 182 | 183 | .date span:nth-child(2)::before { 184 | position: relative; 185 | top: 1pt; 186 | right: 5.5pt; 187 | display: block; 188 | height: 10pt; 189 | content: "|"; 190 | } 191 | 192 | .decorator { 193 | flex: 0 0 0; 194 | position: relative; 195 | width: 2pt; 196 | min-height: 100%; 197 | border-left: var(--decorator-border); 198 | } 199 | 200 | /* 201 | * XXX: Use two filled circles to achieve the circle-with-white-border effect. 202 | * The normal technique of only using one pseudo element and 203 | * border: 1px solid white; style makes firefox erroneously either: 204 | * 1) overflows the grayshade background (if no background-clip is set), or 205 | * 2) shows decorator line which should've been masked by the white border 206 | * 207 | */ 208 | 209 | .decorator::before { 210 | position: absolute; 211 | top: var(--decorator-outer-offset-top); 212 | left: var(--decorator-outer-offset-left); 213 | content: " "; 214 | display: block; 215 | width: var(--decorator-outer-dim); 216 | height: var(--decorator-outer-dim); 217 | border-radius: calc(var(--decorator-outer-dim) / 2); 218 | background-color: #fff; 219 | } 220 | 221 | .decorator::after { 222 | position: absolute; 223 | top: calc(var(--decorator-outer-offset-top) + var(--decorator-border-width)); 224 | left: calc( 225 | var(--decorator-outer-offset-left) + var(--decorator-border-width) 226 | ); 227 | content: " "; 228 | display: block; 229 | width: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2)); 230 | height: calc( 231 | var(--decorator-outer-dim) - (var(--decorator-border-width) * 2) 232 | ); 233 | border-radius: calc( 234 | (var(--decorator-outer-dim) - (var(--decorator-border-width) * 2)) / 2 235 | ); 236 | background-color: #555; 237 | } 238 | 239 | .blocks:last-child .decorator { 240 | /* slightly shortens it */ 241 | margin-bottom: 0.25in; 242 | } 243 | 244 | /***** fine-tunes on the details block where the real juice is *****/ 245 | 246 | .details { 247 | flex: 1 0 0; 248 | padding-left: var(--decorator-horizontal-margin); 249 | padding-top: calc( 250 | var(--row-blocks-padding-top) - 0.5pt 251 | ) !important; /* not sure why but this is needed for better alignment */ 252 | } 253 | 254 | .details header { 255 | color: #000; 256 | } 257 | 258 | .details h3 { 259 | font-size: 9pt; 260 | } 261 | 262 | .main-block:not(.concise) .details div { 263 | margin: 0.18in 0 0.1in 0; 264 | } 265 | 266 | .main-block:not(.concise) .blocks:last-child .details div { 267 | margin-bottom: 0; 268 | } 269 | 270 | .main-block.concise .details div:not(.concise) { 271 | /* use padding to work around the fact that margin doesn't affect floated 272 | neighboring elements */ 273 | padding: 0.05in 0 0.07in 0; 274 | } 275 | 276 | .details .place { 277 | float: left; 278 | font-size: 7.5pt; 279 | } 280 | 281 | .details .location { 282 | float: right; 283 | } 284 | 285 | .details div { 286 | clear: both; 287 | } 288 | 289 | .details .location::before { 290 | display: inline-block; 291 | position: relative; 292 | right: 3pt; 293 | top: 0.25pt; 294 | font-family: FontAwesome; 295 | font-weight: normal; 296 | font-style: normal; 297 | text-decoration: inherit; 298 | content: "\f041"; 299 | } 300 | 301 | /***** fine-tunes on the lists... *****/ 302 | 303 | #main ul { 304 | padding-left: 0.07in; 305 | margin: 0.08in 0; 306 | } 307 | 308 | #main li { 309 | margin: 0 0 0.025in 0; 310 | } 311 | 312 | /****** customize list symbol style ******/ 313 | #main li::before { 314 | position: relative; 315 | margin-left: -4.25pt; 316 | content: "• "; 317 | } 318 | 319 | .details .concise ul { 320 | margin: 0 !important; 321 | -webkit-columns: 2; 322 | -moz-columns: 2; 323 | columns: 2; 324 | } 325 | 326 | .details .concise li { 327 | margin: 0 !important; 328 | } 329 | 330 | .details .concise li { 331 | margin-left: 0 !important; 332 | } 333 | 334 | /* sidebar */ 335 | 336 | #sidebar h1 { 337 | font-weight: 400; 338 | font-size: 11pt; 339 | } 340 | 341 | .side-block { 342 | margin-top: 0.5in; 343 | } 344 | 345 | #contact ul { 346 | margin-top: 0.05in; 347 | 348 | padding-left: 15px; 349 | font-family: "Source Code Pro"; 350 | font-weight: 400; 351 | margin: 10px; 352 | padding: 10px; 353 | line-height: 1.75; 354 | } 355 | 356 | #contact li > i { 357 | width: 9pt; /* for text alignment */ 358 | text-align: right; 359 | margin-right: 5px; 360 | } 361 | 362 | #skills { 363 | line-height: 1.5; 364 | } 365 | 366 | .skillss { 367 | /* margin: 0.05in 0 0.15in; */ 368 | font-weight: bolder; 369 | margin: 10px; 370 | padding-left: 15px; 371 | padding: 10px; 372 | } 373 | 374 | #skills ul { 375 | margin: 10px; 376 | padding-left: 15px; 377 | padding: 10px; 378 | } 379 | 380 | #disclaimer { 381 | position: absolute; 382 | bottom: var(--sidebar-horizontal-padding); 383 | right: var(--sidebar-horizontal-padding); 384 | font-size: 7.5pt; 385 | font-style: italic; 386 | line-height: 1.1; 387 | text-align: right; 388 | color: #777; 389 | } 390 | 391 | #disclaimer code { 392 | color: #666; 393 | font-family: "Source Code Pro"; 394 | font-weight: 400; 395 | font-style: normal; 396 | } 397 | -------------------------------------------------------------------------------- /src/ResumeFile/Skills.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class Skills extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = {}; 7 | } 8 | 9 | handleAddFields = () => { 10 | const values = this.props.state; 11 | values.push({ 12 | skilss: "" 13 | }); 14 | this.setState({ 15 | values 16 | }); 17 | }; 18 | 19 | handleRemoveFields = index => { 20 | const values = this.props.state; 21 | values.splice(index, 1); 22 | this.setState({ 23 | values 24 | }); 25 | }; 26 | 27 | async onChange(e, index) { 28 | if (["skilss"].includes(e.target.name)) { 29 | let cats = [...this.props.state]; 30 | cats[index][e.target.name] = e.target.value; 31 | await this.setState({ 32 | cats 33 | }); 34 | } else { 35 | this.setState({ [e.target.name]: e.target.value.toUpperCase() }); 36 | } 37 | //console.log(this.props.state); 38 | } 39 | 40 | saveAndContinue = e => { 41 | e.preventDefault(); 42 | this.props.nextStep(); 43 | }; 44 | 45 | back = e => { 46 | e.preventDefault(); 47 | this.props.prevStep(); 48 | }; 49 | 50 | render() { 51 | return ( 52 |
53 |
54 |

55 | 62 | 69 |

70 | 71 |
72 |
73 | {this.props.state.map((inputField, index) => ( 74 |
75 |
76 |
77 | 80 |
81 | {/*
82 | 83 | 84 | 85 |
*/} 86 | { 93 | this.onChange(e, index); 94 | }} 95 | /> 96 |
97 |
98 |
99 | 107 |
108 |
109 |
110 | ))} 111 |
112 |
113 |
114 | 117 |
120 |
121 |
122 | ); 123 | } 124 | } 125 | 126 | export default Skills; 127 | -------------------------------------------------------------------------------- /src/ResumeFile/Technologies.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamrraj/React-Resume-Generator/42d73ba6e506d96525f3b6032884b07e152f77d0/src/ResumeFile/Technologies.js -------------------------------------------------------------------------------- /src/ResumeFile/Tools.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamrraj/React-Resume-Generator/42d73ba6e506d96525f3b6032884b07e152f77d0/src/ResumeFile/Tools.js -------------------------------------------------------------------------------- /src/ResumeFile/style.css: -------------------------------------------------------------------------------- 1 | #Main_section{ 2 | max-width: 1000px; 3 | margin: 0 auto; 4 | box-shadow: 4px 4px 16px 2px rgb(225, 225, 225, 0.3), 5 | 4px 4px 16px 0px rgb(225, 225, 225, 0.3); 6 | padding: 50px; 7 | margin-top: 50px; 8 | } 9 | 10 | .box{ 11 | box-shadow: 4px 4px 16px 2px rgb(225, 225, 225, 0.3), 12 | 4px 4px 16px 0px rgb(225, 225, 225, 0.3); 13 | padding: 20px; 14 | margin-left: 20px; 15 | } 16 | #Main_section1{ 17 | /* max-width: 1300px; */ 18 | margin: 0 auto; 19 | box-shadow: 4px 4px 16px 2px rgb(225, 225, 225, 0.3), 20 | 4px 4px 16px 0px rgb(225, 225, 225, 0.3); 21 | padding: 50px; 22 | margin-top: 50px; 23 | 24 | width: 340mm; 25 | height: 297mm; 26 | margin: 0 auto; 27 | background-color: white; 28 | } 29 | .sheet{ 30 | padding: 50px; 31 | } 32 | .button{ 33 | margin-bottom: 80px; 34 | 35 | } 36 | .btn-success{ 37 | margin-left: 20px; 38 | } 39 | -------------------------------------------------------------------------------- /src/Router/Index.jsx: -------------------------------------------------------------------------------- 1 | export { default as MainForm } from "../ResumeFile/MainForm"; 2 | export { default as Home } from "../View/Home"; 3 | export { default as Header } from "../Components/Layout/Header"; 4 | 5 | export { default as ResumeList } from "../View/User/ResumeList"; 6 | export { default as ViewResume } from "../View/User/ViewResume"; 7 | 8 | export { default as Auth } from "../Components/Auth/Auth"; 9 | export { default as SignUp } from "../Components/Auth/SignUp"; 10 | export { default as ForgetPassword } from "../Password/ForgetPassword"; 11 | export { default as ResetPassword } from "../Password/ResetPassword"; 12 | export { default as ChangePassword } from "../Password/ChangePassword"; 13 | 14 | export { default as Profile } from "../View/Profile/Profile"; 15 | export { default as Feed } from "../View/Feed/Feed"; 16 | export { default as Blog } from "../View/Blog/Blog"; 17 | export { default as Tags } from "../View/Blog/Tags"; 18 | export { default as BlogDetail } from "../View/Blog/BlogDetail"; 19 | export { default as EditProfile } from "../View/Profile/EditProfile"; 20 | 21 | // import React, { Component } from "react"; 22 | // import { Redirect } from "react-router"; 23 | // import { BrowserRouter, Route, Switch } from "react-router-dom"; 24 | // import MainForm from "./ResumeFile/MainForm"; 25 | // import A4 from "./ResumeFile/A4"; 26 | // import "./App.css"; 27 | // import Register from "./Components/Auth/Register"; 28 | // import Login from "./Components/Auth/Login"; 29 | // import Header from "./Components/Layout/Header"; 30 | // import One from "./ResumeFile/Resume/One"; 31 | // import ResumeList from "./View/User/ResumeList"; 32 | // import Details from "./View/User/Details"; 33 | // import Profile from "./View/User/Profile"; 34 | // import EditProfile from "./View/User/EditProfile"; 35 | // import ViewResume from "./View/User/ViewResume"; 36 | // import Home from "./View/Home"; 37 | -------------------------------------------------------------------------------- /src/Router/Route.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Redirect } from "react-router"; 3 | import { BrowserRouter, Route, Switch } from "react-router-dom"; 4 | import { 5 | MainForm, 6 | SignUp, 7 | Home, 8 | Header, 9 | ForgetPassword, 10 | ResetPassword, 11 | Auth, 12 | ResumeList, 13 | ViewResume, 14 | ChangePassword, 15 | Profile, 16 | Feed, 17 | Blog, 18 | Tags, 19 | BlogDetail, 20 | EditProfile, 21 | } from "./Index"; 22 | 23 | const PrivateRoute = ({ component: Component, ...props }) => { 24 | return ( 25 | 28 | localStorage.getItem("Token") ? ( 29 | 30 | ) : ( 31 | 37 | ) 38 | } 39 | /> 40 | ); 41 | }; 42 | 43 | const WithoutTokenRoute = ({ component: Component, ...props }) => { 44 | return ( 45 | 48 | localStorage.getItem("Token") ? ( 49 | 55 | ) : ( 56 | 57 | ) 58 | } 59 | /> 60 | ); 61 | }; 62 | 63 | const ResetPasswordTokenRoute = ({ component: Component, ...props }) => { 64 | return ( 65 | 68 | new URLSearchParams(window.location.search).get("token") ? ( 69 | 70 | ) : ( 71 | 77 | ) 78 | } 79 | /> 80 | ); 81 | }; 82 | 83 | function Router() { 84 | return ( 85 | <> 86 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 107 | 111 | 112 | 113 | 114 | 115 | ); 116 | } 117 | 118 | export default Router; 119 | -------------------------------------------------------------------------------- /src/Service/Auth.jsx: -------------------------------------------------------------------------------- 1 | import config from "../Config/config" 2 | // import Swal from "sweetalert2"; 3 | // let authToken = localStorage.getItem("Token"); 4 | 5 | 6 | // const CLIENT_ID = "Resume-Builder"; 7 | // const GRANT_TYPE = "password"; 8 | 9 | // export async function getLogin(username, password) { 10 | // return fetch(config.apiUrl.login, { 11 | // method: "POST", 12 | // headers: { 13 | // "Content-Type": "application/x-www-form-urlencoded", 14 | 15 | // }, 16 | // body: `grant_type=${GRANT_TYPE}&username=${username}&password=${password}&client_id=${CLIENT_ID}`, 17 | // }) 18 | // .then((response) => { 19 | // localStorage.setItem("Token",response.data["access_token"] ) 20 | 21 | // console.log(response.status) 22 | // return response.json(); 23 | // }) 24 | // .catch((err) => { 25 | 26 | // console.log(err); 27 | // }); 28 | // } 29 | 30 | 31 | export async function getUser(username) { 32 | let products = new Promise((resolve, reject) => { 33 | fetch( 34 | `${config.apiUrl.profile}${username}/`, 35 | config.head 36 | ) 37 | .then((response) => { 38 | resolve(response.json()); 39 | }) 40 | .catch((reject) => console.log(reject)); 41 | }); 42 | return products; 43 | } -------------------------------------------------------------------------------- /src/Service/Blog.jsx: -------------------------------------------------------------------------------- 1 | import config from "../Config/config"; 2 | 3 | export async function getBlog() { 4 | let products = new Promise((resolve, reject) => { 5 | fetch(`${config.blog.blog_list}`, config.head) 6 | .then((response) => { 7 | resolve(response.json()); 8 | }) 9 | .catch((reject) => console.log(reject)); 10 | }); 11 | return products; 12 | } 13 | 14 | export async function getBlogByTag(tag) { 15 | let products = new Promise((resolve, reject) => { 16 | fetch(`${config.blog.blog_list}list/?tags__name=${tag}`, config.head) 17 | .then((response) => { 18 | resolve(response.json()); 19 | }) 20 | .catch((reject) => console.log(reject)); 21 | }); 22 | return products; 23 | } 24 | export async function getBlogByUSer(id) { 25 | let products = new Promise((resolve, reject) => { 26 | fetch(`${config.blog.blog_list}list/?author=${id}`, config.head) 27 | .then((response) => { 28 | resolve(response.json()); 29 | }) 30 | .catch((reject) => console.log(reject)); 31 | }); 32 | return products; 33 | } 34 | 35 | export async function getBlogDetails(id) { 36 | let products = new Promise((resolve, reject) => { 37 | fetch(`https://inback.herokuapp.com/api/1/blog/list/${id}/`, config.head) 38 | .then((response) => { 39 | resolve(response.json()); 40 | }) 41 | .catch((reject) => console.log(reject)); 42 | }); 43 | return products; 44 | } 45 | 46 | export async function getUserBlogList(user) { 47 | let products = new Promise((resolve, reject) => { 48 | fetch(`${config.blog.user_blog_list}${user}/`, config.head) 49 | .then((response) => { 50 | resolve(response.json()); 51 | }) 52 | .catch((reject) => console.log(reject)); 53 | }); 54 | return products; 55 | } 56 | 57 | export async function getLikeBlog(id) { 58 | let products = new Promise((resolve, reject) => { 59 | fetch(`${config.blog.blog_list}like/${id}/`, config.head) 60 | .then((response) => { 61 | resolve(response.json()); 62 | }) 63 | .catch((reject) => console.log(reject)); 64 | }); 65 | return products; 66 | } 67 | 68 | export async function getLikerList(id) { 69 | let products = new Promise((resolve, reject) => { 70 | fetch(`${config.blog.blog_list}${id}/get-likers/`, config.head) 71 | .then((response) => { 72 | resolve(response.json()); 73 | }) 74 | .catch((reject) => console.log(reject)); 75 | }); 76 | return products; 77 | } 78 | -------------------------------------------------------------------------------- /src/Service/Password.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamrraj/React-Resume-Generator/42d73ba6e506d96525f3b6032884b07e152f77d0/src/Service/Password.jsx -------------------------------------------------------------------------------- /src/Service/Print.jsx: -------------------------------------------------------------------------------- 1 | import jsPDF from "jspdf"; 2 | import html2canvas from "html2canvas"; 3 | 4 | const getPrint = (name) => { 5 | const input = document.getElementById("divToPrint"); 6 | html2canvas(input).then((canvas) => { 7 | document.body.appendChild(canvas); 8 | var imgWidth = 210; 9 | var pageHeight = 295; 10 | var imgHeight = (canvas.height * imgWidth) / canvas.width; 11 | var heightLeft = imgHeight; 12 | const imgData = canvas.toDataURL("image/png"); 13 | window.open(imgData); 14 | const pdf = new jsPDF("p", "mm"); 15 | var position = -2; 16 | pdf.addImage(imgData, "JPEG", 0, position, imgWidth, imgHeight); 17 | heightLeft -= pageHeight; 18 | 19 | /* add extra pages if the div size is larger than a a4 size */ 20 | while (heightLeft >= 0) { 21 | position = heightLeft - imgHeight; 22 | pdf.addPage(); 23 | pdf.addImage(imgData, "JPEG", 0, position, imgWidth, imgHeight); 24 | heightLeft -= pageHeight; 25 | } 26 | pdf.save(`${name}.pdf`); 27 | }); 28 | }; 29 | 30 | export default getPrint; 31 | -------------------------------------------------------------------------------- /src/Service/Resume.jsx: -------------------------------------------------------------------------------- 1 | import config from "../Config/config" 2 | 3 | 4 | 5 | export async function getResume() { 6 | let products = new Promise((resolve, reject) => { 7 | fetch( 8 | config.apiUrl.resumeuser, 9 | config.head 10 | ) 11 | .then((response) => { 12 | resolve(response.json()); 13 | }) 14 | .catch((reject) => console.log(reject)); 15 | }); 16 | return products; 17 | } 18 | 19 | 20 | export async function deleteResume(id) { 21 | let products = new Promise((resolve, reject) => { 22 | fetch(`${config.apiUrl.resume}${id}/`, config.headDelete) 23 | .then((response) => { 24 | resolve(response.json()); 25 | }) 26 | .catch((reject) => console.log(reject)); 27 | }); 28 | return products; 29 | } 30 | -------------------------------------------------------------------------------- /src/Service/User.jsx: -------------------------------------------------------------------------------- 1 | import config from "../Config/config"; 2 | import Swal from "sweetalert2"; 3 | let authToken = localStorage.getItem("Token"); 4 | 5 | export async function getUserDetail(name) { 6 | let products = new Promise((resolve, reject) => { 7 | fetch(`${config.apiUrl.user}${name}/`, config.head) 8 | .then((response) => { 9 | resolve(response.json()); 10 | }) 11 | .catch((reject) => console.log(reject)); 12 | }); 13 | return products; 14 | } 15 | 16 | export async function followUser(name) { 17 | let products = new Promise((resolve, reject) => { 18 | fetch(`${config.apiUrl.user}${name}/follow/`, config.head) 19 | .then((response) => { 20 | resolve(response.json()); 21 | }) 22 | .catch((reject) => console.log(reject)); 23 | }); 24 | return products; 25 | } 26 | 27 | export async function postComment1(product, id) { 28 | return fetch(`${config.apiUrl.comment}${id}/`, { 29 | method: "POST", 30 | headers: { 31 | Accept: "application/json", 32 | "Content-Type": "application/json", 33 | "Accept-Language": window.localStorage.i18nextLng, 34 | Authorization: "Bearer " + authToken, 35 | }, 36 | body: JSON.stringify(product), 37 | }) 38 | .then((response) => { 39 | return response.json(); 40 | }) 41 | .catch((err) => { 42 | console.log(err); 43 | }); 44 | } 45 | 46 | export async function deletePost(id) { 47 | let products = new Promise((resolve, reject) => { 48 | fetch(`${config.apiUrl.post}${id}/`, config.headDelete) 49 | .then((response) => { 50 | resolve(response.json()); 51 | }) 52 | .catch((reject) => console.log(reject)); 53 | }); 54 | return products; 55 | } 56 | 57 | export async function deleteComment(id) { 58 | let products = new Promise((resolve, reject) => { 59 | fetch(`${config.apiUrl.comment}${id}/`, config.headDelete) 60 | .then((response) => { 61 | resolve(response.json()); 62 | }) 63 | .catch((reject) => console.log(reject)); 64 | }); 65 | return products; 66 | } 67 | 68 | export async function getFeed() { 69 | let products = new Promise((resolve, reject) => { 70 | fetch(`${config.apiUrl.feed}`, config.head) 71 | .then((response) => { 72 | resolve(response.json()); 73 | }) 74 | .catch((reject) => console.log(reject)); 75 | }); 76 | return products; 77 | } 78 | 79 | export async function getLiker(liker) { 80 | let products = new Promise((resolve, reject) => { 81 | fetch(`${config.apiUrl.post}${liker}/get-likers/`, config.head) 82 | .then((response) => { 83 | resolve(response.json()); 84 | }) 85 | .catch((reject) => console.log(reject)); 86 | }); 87 | return products; 88 | } 89 | 90 | export async function likePost(id) { 91 | let products = new Promise((resolve, reject) => { 92 | fetch(`${config.apiUrl.like}${id}/`, config.head) 93 | .then((response) => { 94 | resolve(response.json()); 95 | }) 96 | .catch((reject) => console.log(reject)); 97 | }); 98 | return products; 99 | } 100 | 101 | export async function getUser(id) { 102 | let products = new Promise((resolve, reject) => { 103 | fetch(`${config.apiUrl.edit}`, config.head) 104 | .then((response) => { 105 | resolve(response.json()); 106 | }) 107 | .catch((reject) => console.log(reject)); 108 | }); 109 | return products; 110 | } 111 | 112 | export async function EditUser(product) { 113 | return fetch(`${config.apiUrl.edit}`, { 114 | method: "PUT", 115 | headers: { 116 | Accept: "application/json, text/plain, */*", 117 | "Content-Type": "application/json", 118 | "Accept-Language": window.localStorage.i18nextLng, 119 | Authorization: "Bearer " + authToken, 120 | }, 121 | body: JSON.stringify(product), 122 | }) 123 | .then((response) => { 124 | if (response.status === 200) { 125 | Swal.fire({ 126 | title: "Update", 127 | icon: "success", 128 | text: "Profile Update success fully !", 129 | showConfirmButton: false, 130 | timer: 2000, 131 | }); 132 | } else { 133 | Swal.fire({ 134 | title: "Error !", 135 | icon: "error", 136 | text: " ERROR WHILE UPDATE PROFILE !", 137 | showConfirmButton: false, 138 | timer: 2000, 139 | }); 140 | } 141 | return response.json(); 142 | }) 143 | .catch((err) => { 144 | console.log(err); 145 | }); 146 | } 147 | 148 | export async function deleteUser(id) { 149 | let products = new Promise((resolve, reject) => { 150 | fetch(`${config.apiUrl.edit}`, config.headDelete) 151 | .then((response) => { 152 | resolve(response.json()); 153 | }) 154 | .catch((reject) => console.log(reject)); 155 | }); 156 | return products; 157 | } 158 | -------------------------------------------------------------------------------- /src/View/Admin/CronaVirus.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class CronaVirus extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | virus: [] 8 | }; 9 | } 10 | 11 | render() { 12 | return ( 13 |
14 |

Hello CronaVirus

15 |
16 | ); 17 | } 18 | } 19 | 20 | export default CronaVirus; 21 | -------------------------------------------------------------------------------- /src/View/Admin/Userlist.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class Userlist extends Component { 4 | render() { 5 | return ( 6 |
7 |

Hey Resume List

8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Userlist; 14 | -------------------------------------------------------------------------------- /src/View/Blog/Blog.css: -------------------------------------------------------------------------------- 1 | .body_tag { 2 | margin-top: 40px; 3 | padding: 44px; 4 | } 5 | .logo1 { 6 | display: block; 7 | margin-left: auto; 8 | margin-right: auto; 9 | } 10 | .weloce { 11 | font-weight: bold; 12 | font-size: 22px; 13 | } 14 | strong { 15 | font-weight: bold; 16 | } 17 | .weloce_title { 18 | font-weight: 100; 19 | font-size: 16.5px; 20 | margin-top: -15px; 21 | padding-left: 30px; 22 | margin-bottom: -40px; 23 | } 24 | .img { 25 | max-width: 100%; 26 | } 27 | a { 28 | color: black; 29 | text-decoration: none; 30 | } 31 | .header { 32 | text-align: center; 33 | font-size: 30px; 34 | margin-bottom: -10px; 35 | } 36 | .title { 37 | font-size: 30px; 38 | margin-bottom: -10px; 39 | margin-top: -10px; 40 | } 41 | .user_don { 42 | font-size: 16px; 43 | text-align: center; 44 | } 45 | .body_text { 46 | font-size: 16px; 47 | text-align: justify; 48 | } 49 | .btn_tag { 50 | padding: 10px; 51 | background-color: orange; 52 | margin-right: 5px; 53 | border-radius: 3px; 54 | font-size: 13px; 55 | font-weight: bold; 56 | } 57 | .done:hover { 58 | color: black; 59 | } 60 | 61 | .fa-faceook { 62 | padding: 15px; 63 | height: 15px; 64 | width: 15px; 65 | color: white; 66 | border-radius: 50%; 67 | background: gray; 68 | } 69 | /* .fa-linkedin { 70 | padding: 15px; 71 | height: 15px; 72 | 73 | color: white; 74 | border-radius: 50%; 75 | background: gray; 76 | } */ 77 | .fa-twiter { 78 | padding: 15px; 79 | height: 15px; 80 | 81 | color: white; 82 | border-radius: 50%; 83 | background: gray; 84 | } 85 | 86 | .row1 { 87 | width: 100%; 88 | } 89 | .col1 { 90 | width: 60%; 91 | } 92 | .col-sm-5 { 93 | width: 30%; 94 | } 95 | #don { 96 | max-width: 600px; 97 | } 98 | .down_text { 99 | text-align: center; 100 | font-size: 17px; 101 | color: white; 102 | } 103 | .a { 104 | color: black; 105 | font-weight: bold; 106 | } 107 | .read_more { 108 | font-size: 19px; 109 | } 110 | 111 | a:hover { 112 | color: orange; 113 | } 114 | 115 | .footer_text { 116 | margin-top: 50px; 117 | background-color: #fe775a; 118 | padding: 30px; 119 | } 120 | 121 | .container .myBtn { 122 | width: 60px; 123 | height: 40px; 124 | background-color: #e52727; 125 | color: white; 126 | position: absolute; 127 | right: 40px; 128 | bottom: 20px; 129 | } 130 | .myBtn { 131 | position: fixed; 132 | bottom: 20px; 133 | right: 30px; 134 | z-index: 99; 135 | font-size: 18px; 136 | border: none; 137 | outline: none; 138 | 139 | color: white; 140 | cursor: pointer; 141 | width: 60px; 142 | background: linear-gradient(-120deg, #4285f4, #34a853, #fbbc05, #ea4335); 143 | height: 60px; 144 | font-size: 40px; 145 | line-height: -40px; 146 | border-radius: 50%; 147 | } 148 | 149 | .myBtn:hover { 150 | background-color: #555; 151 | } 152 | 153 | .fa-faceook { 154 | text-decoration: none; 155 | padding: 12px; 156 | width: 50px; 157 | background-color: gray; 158 | } 159 | 160 | .fa-twiter { 161 | text-decoration: none; 162 | background-color: gray; 163 | } 164 | 165 | #fact23 { 166 | background: url("https://assets.vogue.com/photos/5bf4664e090f622d55116ce1/master/pass/00-promo-image-the-tulip-skyscraper-building-london.jpg") 167 | center top no-repeat fixed; 168 | background-size: cover; 169 | color: white; 170 | position: relative; 171 | padding: 50px; 172 | border-radius: 6px; 173 | } 174 | 175 | #fact23::before { 176 | content: ""; 177 | position: absolute; 178 | left: 0; 179 | right: 0; 180 | top: 0; 181 | bottom: 0; 182 | background: rgba(5, 5, 5, 0.78); 183 | z-index: 0; 184 | } 185 | 186 | #fact23 .container { 187 | position: relative; 188 | z-index: 100; 189 | } 190 | 191 | /* Blog details css */ 192 | 193 | .main_section { 194 | background-color: white; 195 | padding: 30px; 196 | margin-top: -30px; 197 | border: 1px solid black; 198 | } 199 | .main_image { 200 | border-radius: 50%; 201 | } 202 | 203 | .blog_detail { 204 | margin-top: 40px; 205 | background-color: white; 206 | padding: 30px; 207 | } 208 | hr { 209 | border: 1px dashed black; 210 | opacity: 0.2; 211 | } 212 | -------------------------------------------------------------------------------- /src/View/Blog/Blog.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import moment from "moment"; 3 | import { getBlog } from "../../Service/Blog"; 4 | import "./Blog.css"; 5 | function Blog() { 6 | const [feed, setFeed] = useState([]); 7 | 8 | useEffect(() => { 9 | getBlog().then((data) => { 10 | setFeed(data); 11 | }); 12 | }, []); 13 | 14 | const baseUrl = process.env.PUBLIC_URL; 15 | 16 | return ( 17 |
18 |
19 |
20 |
21 |
22 |

23 |

24 | SIMP 25 | LE IS{" "} 26 | BES 27 | T{" "} 28 |

29 |

Its a Blog channel

30 | 31 |
32 |
33 |
34 |
35 |
36 |
37 | {feed.map((c) => ( 38 |
39 |
40 |

{c.header}

41 | 42 |
43 |
44 | 47 |

{c.title}

48 | 49 |
50 |

51 | {" "} 52 | {moment(c.timestamp).format("DD-MM-YYYY")}   53 | 54 | 55 | {" "} 56 | {c.author.fullname ? c.author.fullname : c.author.username} 57 | {" "} 58 |   59 | {c.read_time.substring(0, 5)}{" "} 60 | Minutes Read   0 61 | Comments   {c.views} Views 62 |

63 | 64 | {c.title} 73 | 74 |
75 |

{c.blog_body}

76 | 77 |
78 | 79 |

80 | 85 | READ MORE 86 | 87 |

88 |
89 |
90 |

91 | {c.get_tags.map((app) => ( 92 | 97 | ))} 98 |

99 |
100 |
101 | ))} 102 |
103 | 104 |
105 |

106 | Subscribe To 107 | Our Mailing List 108 |

109 |

Receive updates from the Blog!

110 | 111 |

112 | © 2019-2020 Simpleisbest®, All Rights Reserved.
113 | 675 Ponce De Leon Ave NE • Suite 5000 • Atlanta, GA 30308 USA
114 | 115 | Contact Us{" "} 116 | {" "} 117 | •{" "} 118 | 119 | Terms of Use{" "} 120 | {" "} 121 | •{" "} 122 | 123 | Privacy Policy{" "} 124 | 125 |

126 |
127 |
128 | 129 | 133 |
134 | ); 135 | } 136 | 137 | export default Blog; 138 | -------------------------------------------------------------------------------- /src/View/Blog/BlogDetail.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import moment from "moment"; 3 | import { getBlogDetails, getUserBlogList } from "../../Service/Blog"; 4 | import { followUser } from "../../Service/User"; 5 | 6 | function BlogDetail(props) { 7 | const [lol, setLol] = useState({}); 8 | const [author, setAuthor] = useState({}); 9 | const [name, setName] = useState({}); 10 | 11 | useEffect(() => { 12 | getBlogDetails(props.match.params.pk).then((data) => { 13 | setAuthor(data.author); 14 | setLol(data); 15 | }); 16 | getUser(); 17 | }, []); //[] leave black means you will not repet your url 18 | 19 | const getUser = () => { 20 | getUserBlogList(props.match.params.slug).then((data) => { 21 | setName(data); 22 | }); 23 | }; 24 | 25 | const getFollow = (e) => { 26 | e.preventDefault(); 27 | followUser(props.match.params.slug).then((data) => {}); 28 | }; 29 | 30 | return ( 31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | 66996194-394482144528868-896954686559485952-n 45 |
46 |
47 |
48 | {" "} 49 | By{" "} 50 | 51 | {author.fullname ? author.fullname : author.username} 52 | {" "} 53 |   54 | 55 | {localStorage.getItem("username") === author.username ? ( 56 | 61 | Edit Profile 62 | 63 | ) : ( 64 | 65 | {name.followed_by_req_user === false ? ( 66 | 73 | Follow 74 | 75 | ) : ( 76 | 83 | Following 84 | 85 | )} 86 | 87 | )} 88 | 89 |
90 |

{author.bio ? author.bio : ""}

91 | 92 |
93 |
94 | {" "} 95 | 99 | 100 | 101 |
102 |
103 | 107 | 108 | 109 |
110 |
111 | 115 | 116 | 117 |
118 |
119 | {" "} 120 | 121 | 122 | 123 |
124 |
125 |
126 |
127 |
128 | 129 |
130 |

131 | {lol.header} 132 |

133 |
134 |
135 |

{lol.title}

136 |
137 | 138 |

139 | sfs 140 | {moment(lol.timestamp).format("DD-MM-YYYY")}   141 | 142 | 143 | {" "} 144 | fdfsf 145 | {author.fullname ? author.fullname : author.username} 146 | {" "} 147 |   148 | {lol.read_time} 149 | Minutes Read   0 Comments 150 |   {lol.views} Views 151 | {/* */} 152 |

153 |

154 |
155 | {/* {c.title} */} 164 | title 169 |
170 | 171 |
172 |

173 | {/*

174 | {c.get_tags.map((app) => ( 175 | 180 | ))} 181 |

*/} 182 |
183 |
184 |
185 |
186 |
187 |
188 | ); 189 | } 190 | 191 | export default BlogDetail; 192 | -------------------------------------------------------------------------------- /src/View/Blog/BlogUser.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import moment from "moment"; 3 | import { getBlogByUSer } from "../../Service/Blog"; 4 | 5 | function BlogUser(props) { 6 | const [feed, setFeed] = useState([]); 7 | 8 | useEffect(() => { 9 | getBlogByUSer(props.match.params.pk).then((data) => { 10 | setFeed(data); 11 | }); 12 | }, []); 13 | 14 | const baseUrl = process.env.PUBLIC_URL; 15 | 16 | return ( 17 |
18 |
19 |
20 |
21 |
22 |

23 |

24 | SIMP 25 | LE IS{" "} 26 | BES 27 | T{" "} 28 |

29 |

30 | Blog related to{" "} 31 | 32 | # {props.match.params.tag}{" "} 33 | {" "} 34 | tags 35 |

36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 | {feed.map((c) => ( 44 |
45 |
46 |

{c.header}

47 | 48 |
49 |
50 | 53 |

{c.title}

54 | 55 |
56 |

57 | {" "} 58 | {moment(c.timestamp).format("DD-MM-YYYY")}   59 | 60 | 61 | {" "} 62 | {c.author.fullname ? c.author.fullname : c.author.username} 63 | {" "} 64 |   65 | {c.read_time.substring(0, 5)}{" "} 66 | Minutes Read   0 67 | Comments   {c.views} Views 68 |

69 | 70 | {c.title} 79 | 80 |
81 |

{c.blog_body}

82 | 83 |
84 | 85 |

86 | 91 | READ MORE 92 | 93 |

94 |
95 |
96 |

97 | {c.get_tags.map((app) => ( 98 | 103 | ))} 104 |

105 |
106 |
107 | ))} 108 |
109 | 110 |
111 |

112 | Subscribe To 113 | Our Mailing List 114 |

115 |

Receive updates from the Blog!

116 | 117 |

118 | © 2019-2020 Simpleisbest®, All Rights Reserved.
119 | 675 Ponce De Leon Ave NE • Suite 5000 • Atlanta, GA 30308 USA
120 | 121 | Contact Us{" "} 122 | {" "} 123 | •{" "} 124 | 125 | Terms of Use{" "} 126 | {" "} 127 | •{" "} 128 | 129 | Privacy Policy{" "} 130 | 131 |

132 |
133 |
134 | 135 | 139 |
140 | ); 141 | } 142 | 143 | export default BlogUser; 144 | -------------------------------------------------------------------------------- /src/View/Blog/Tags.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import moment from "moment"; 3 | import { getBlogByTag } from "../../Service/Blog"; 4 | 5 | function Tags(props) { 6 | const [feed, setFeed] = useState([]); 7 | 8 | useEffect(() => { 9 | getBlogByTag(props.match.params.tag).then((data) => { 10 | setFeed(data); 11 | }); 12 | }, []); 13 | 14 | const baseUrl = process.env.PUBLIC_URL; 15 | 16 | return ( 17 |
18 |
19 |
20 |
21 |
22 |

23 |

24 | SIMP 25 | LE IS{" "} 26 | BES 27 | T{" "} 28 |

29 |

30 | Blog related to{" "} 31 | 32 | # {props.match.params.tag}{" "} 33 | {" "} 34 | tags 35 |

36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 | {feed.map((c) => ( 44 |
45 |
46 |

{c.header}

47 | 48 |
49 |
50 | 53 |

{c.title}

54 | 55 |
56 |

57 | {" "} 58 | {moment(c.timestamp).format("DD-MM-YYYY")}   59 | 60 | 61 | {" "} 62 | {c.author.fullname ? c.author.fullname : c.author.username} 63 | {" "} 64 |   65 | {c.read_time.substring(0, 5)}{" "} 66 | Minutes Read   0 67 | Comments   {c.views} Views 68 |

69 | 70 | {c.title} 79 | 80 |
81 |

{c.blog_body}

82 | 83 |
84 | 85 |

86 | 91 | READ MORE 92 | 93 |

94 |
95 |
96 |

97 | {c.get_tags.map((app) => ( 98 | 103 | ))} 104 |

105 |
106 |
107 | ))} 108 |
109 | 110 |
111 |

112 | Subscribe To 113 | Our Mailing List 114 |

115 |

Receive updates from the Blog!

116 | 117 |

118 | © 2019-2020 Simpleisbest®, All Rights Reserved.
119 | 675 Ponce De Leon Ave NE • Suite 5000 • Atlanta, GA 30308 USA
120 | 121 | Contact Us{" "} 122 | {" "} 123 | •{" "} 124 | 125 | Terms of Use{" "} 126 | {" "} 127 | •{" "} 128 | 129 | Privacy Policy{" "} 130 | 131 |

132 |
133 |
134 | 135 | 139 |
140 | ); 141 | } 142 | 143 | export default Tags; 144 | -------------------------------------------------------------------------------- /src/View/Feed/AddFeed.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import config from "../../Config/config"; 3 | import Swal from "sweetalert2"; 4 | function AddFeed() { 5 | const [image, setImage] = useState({ 6 | photo: null, 7 | text: "", 8 | location: "", 9 | preview: "", 10 | }); 11 | 12 | const handleChange = (e) => { 13 | if (e.target.files.length) { 14 | setImage({ 15 | preview: URL.createObjectURL(e.target.files[0]), 16 | photo: e.target.files[0], 17 | }); 18 | } 19 | }; 20 | const handleChangeText = (event) => { 21 | const { name, value } = event.target; 22 | setImage({ ...image, [name]: value }); 23 | console.log(image); 24 | }; 25 | 26 | const handleUpload = async (e) => { 27 | e.preventDefault(); 28 | Swal.fire({ 29 | title: "Loading", 30 | type: "warning", 31 | showCancelButton: false, 32 | showConfirmButton: false, 33 | timerProgressBar: true, 34 | onBeforeOpen: () => { 35 | Swal.showLoading(); 36 | }, 37 | }); 38 | const formData = new FormData(); 39 | let authToken = localStorage.getItem("Token"); 40 | 41 | formData.append("text", image.text); 42 | formData.append("location", image.location); 43 | formData.append("photo", image.photo); 44 | 45 | await fetch(config.apiUrl.post, { 46 | method: "POST", 47 | headers: { 48 | Authorization: "Bearer " + authToken, 49 | }, 50 | body: formData, 51 | }) 52 | .then((response) => { 53 | Swal.fire({ 54 | title: "Post Added", 55 | icon: "success", 56 | text: "Sucessfully added new post", 57 | showConfirmButton: false, 58 | timer: 3000, 59 | }); 60 | setTimeout(function () { 61 | window.location.reload(); 62 | }, 2000); 63 | }) 64 | .catch((reject) => { 65 | console.log(reject); 66 | Swal.fire({ 67 | title: "Login Error", 68 | icon: "error", 69 | text: "error", 70 | timer: 2000, 71 | }); 72 | }); 73 | }; 74 | 75 | return ( 76 | 146 | ); 147 | } 148 | 149 | export default AddFeed; 150 | -------------------------------------------------------------------------------- /src/View/Feed/Feed.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | height: 60px; 3 | line-height: 60px; 4 | } 5 | 6 | .aside-info { 7 | position: fixed; 8 | } 9 | 10 | .login { 11 | margin-top: 10vh; 12 | } 13 | 14 | .has-search .form-control { 15 | padding-left: 2.375rem; 16 | } 17 | 18 | .has-search .form-control-feedback { 19 | position: absolute; 20 | z-index: 2; 21 | display: block; 22 | width: 2.375rem; 23 | height: 2.375rem; 24 | line-height: 2.375rem; 25 | text-align: center; 26 | pointer-events: none; 27 | color: #aaa; 28 | } 29 | 30 | #comment input { 31 | border: none; 32 | border-width: 0; 33 | box-shadow: none; 34 | outline: none; 35 | width: 100%; 36 | } 37 | .not_available { 38 | position: absolute; 39 | font-size: 30px; 40 | top: 100%; 41 | left: 40%; 42 | } 43 | #ex1 { 44 | max-width: 850px; 45 | height: 400px; 46 | } 47 | #ex13 { 48 | max-width: 500px; 49 | height: 500px; 50 | overflow-y: auto; 51 | } 52 | 53 | a.close-modal { 54 | position: absolute; 55 | top: -100px; 56 | right: -100px; 57 | width: 200px; 58 | height: 200px; 59 | visibility: hidden; 60 | background: green; 61 | border: 2px solid black; 62 | 63 | -webkit-border-radius: 100px; 64 | -moz-border-radius: 100px; 65 | -o-border-radius: 100px; 66 | -ms-border-radius: 100px; 67 | } 68 | .post_add { 69 | margin-top: 20px; 70 | } 71 | 72 | .upload-btn-wrapper { 73 | position: relative; 74 | overflow: hidden; 75 | display: inline-block; 76 | width: 100%; 77 | } 78 | .upload-btn-wrapper input[type="file"] { 79 | font-size: 100px; 80 | position: absolute; 81 | left: 0; 82 | top: 0; 83 | opacity: 0; 84 | } 85 | .btn112 { 86 | border: 2px solid #b71c1c; 87 | color: gray; 88 | background-color: white; 89 | padding: 8px 20px; 90 | border-radius: 8px; 91 | font-size: 20px; 92 | width: 100%; 93 | font-weight: bold; 94 | } 95 | 96 | .full_name { 97 | font-size: 14px; 98 | } 99 | -------------------------------------------------------------------------------- /src/View/Feed/Likers.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { followUser } from "../../Service/User"; 4 | function Likers(props) { 5 | // useEffect(() => { 6 | // props.data; 7 | // }); 8 | 9 | const getFollow = (username) => (e) => { 10 | e.preventDefault(); 11 | followUser(username).then((data) => {}); 12 | }; 13 | return ( 14 | 104 | ); 105 | } 106 | 107 | export default Likers; 108 | -------------------------------------------------------------------------------- /src/View/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export class Home extends Component { 4 | render() { 5 | return ( 6 |
7 |

Hello

8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Home; 14 | -------------------------------------------------------------------------------- /src/View/Profile/EditModel.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function SignUp() { 4 | const baseUrl = process.env.PUBLIC_URL; 5 | return ( 6 |
7 | 15 | 16 | 55 |
56 | ); 57 | } 58 | 59 | export default SignUp; 60 | -------------------------------------------------------------------------------- /src/View/Profile/Profile.css: -------------------------------------------------------------------------------- 1 | .pb-full { 2 | padding-bottom: 100%; 3 | } 4 | 5 | /* hide search icon on search focus */ 6 | .search-bar:focus + .fa-search { 7 | display: none; 8 | } 9 | .header_photo { 10 | margin-top: 10px; 11 | border: 1px solid black; 12 | } 13 | 14 | .form_comment { 15 | margin-top: -10px; 16 | margin-bottom: 2px; 17 | float: left; 18 | /* display: flex; */ 19 | margin-left: 10px; 20 | } 21 | .form_comment:hover { 22 | border: none; 23 | } 24 | .post { 25 | color: #3897f0; 26 | } 27 | 28 | .input_from { 29 | width: 300%; 30 | 31 | /* border: 1px solid white; */ 32 | } 33 | 34 | @media screen and (min-width: 768px) { 35 | .post:hover .overlay { 36 | display: block; 37 | } 38 | } 39 | 40 | @media screen and (min-width: 900px) and (max-width: 1024px) { 41 | #edit_profiile { 42 | margin-top: 150px; 43 | } 44 | } 45 | @media screen and (min-width: 1030px) and (max-width: 1280px) { 46 | #edit_profiile { 47 | margin-top: 130px; 48 | } 49 | } 50 | @media screen and (min-width: 1290px) and (max-width: 1380px) { 51 | #edit_profiile { 52 | margin-top: 130px; 53 | } 54 | } 55 | @media screen and (min-width: 1390px) and (max-width: 1480px) { 56 | #edit_profiile { 57 | margin-top: 130px; 58 | } 59 | } 60 | @media screen and (min-width: 1490px) and (max-width: 1580px) { 61 | #edit_profiile { 62 | margin-top: 130px; 63 | } 64 | } 65 | @media screen and (min-width: 1590px) and (max-width: 1680px) { 66 | #edit_profiile { 67 | margin-top: 80px; 68 | } 69 | } 70 | @media screen and (min-width: 1690px) and (max-width: 1780px) { 71 | #edit_profiile { 72 | } 73 | } 74 | @media screen and (min-width: 1790px) and (max-width: 1880px) { 75 | } 76 | @media screen and (min-width: 1890px) and (max-width: 2980px) { 77 | } 78 | 79 | .Specila_Button { 80 | position: relative; 81 | overflow: hidden; 82 | display: inline-block; 83 | width: 51%; 84 | top: -40px; 85 | left: 35px; 86 | } 87 | 88 | .Specila_Button input[type="file"] { 89 | font-size: 100px; 90 | position: absolute; 91 | left: 0; 92 | top: 0; 93 | opacity: 0; 94 | cursor: pointer; 95 | } 96 | .fa-pen { 97 | color: black; 98 | } 99 | 100 | .btn113 { 101 | /* border: 2px solid #b71c1c; */ 102 | color: gray; 103 | background-color: white; 104 | padding: 8px 20px; 105 | border-radius: 8px; 106 | font-size: 20px; 107 | width: 50%; 108 | cursor: pointer; 109 | font-size: 14px; 110 | transform: rotate(-100deg); 111 | border-radius: 50%; 112 | font-weight: bold; 113 | } 114 | -------------------------------------------------------------------------------- /src/View/User/Details.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export class Details extends Component { 4 | render() { 5 | return ( 6 |
7 |

Resume Detail List

8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Details; 14 | -------------------------------------------------------------------------------- /src/View/User/Profile.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import config from "../../Config/config"; 3 | 4 | class Profile extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | blog: [] 9 | }; 10 | } 11 | 12 | async componentDidMount() { 13 | let authToken = localStorage.getItem("Token"); 14 | try { 15 | await fetch(config.apiUrl.profile, { 16 | method: "GET", 17 | headers: { 18 | Accept: "application/json", 19 | "Content-Type": "application/json", 20 | Authorization: "Bearer " + authToken 21 | } 22 | }) 23 | .then(blog => blog.json()) 24 | .then(blog => { 25 | this.setState({ 26 | ...this.state, 27 | blog 28 | }); 29 | }); 30 | } catch (e) { 31 | console.log(e); 32 | } 33 | } 34 | render() { 35 | const { blog } = this.state; 36 | return ( 37 |
38 |
39 |
40 |
41 |
42 |

43 | User{" "} 44 | 45 | {window.localStorage.getItem("Name")} 46 | {" "} 47 | Profile View 48 |

49 |
50 |
51 |
52 |
53 | 54 |
58 |

59 | Your Profile Details: {blog.first_name} {blog.last_name} 60 |

61 |
62 |
63 |
64 | {/*
65 | Profile 74 | 81 |
*/} 82 |
83 |
84 |
85 | 86 | 92 |
93 |
94 |
95 |
96 | 97 | 103 |
104 |
105 |
106 |
107 |
108 |
109 | 110 | 116 |
117 |
118 | 119 | 125 |
126 | 127 |
128 | 129 | 135 |
136 |
137 | 138 | 144 |
145 |
146 | 147 | {/* Anothr cols section start */} 148 |
149 |
150 | 151 | 157 |
158 |
159 | 160 | 166 |
167 |
168 | 169 | 175 |
176 |
177 |
178 | 179 |
180 |
181 |
182 | 183 | 189 |
190 |
191 |
192 |
193 | 194 |
195 | 200 | {" "} 201 | Edit Profile 202 | 203 |
204 |
205 |
206 |
207 | ); 208 | } 209 | } 210 | 211 | export default Profile; 212 | -------------------------------------------------------------------------------- /src/View/User/ResumeList.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { getResume } from "../../Service/Resume"; 3 | import moment from "moment"; 4 | 5 | const ResumeList = () => { 6 | const [resume, setResume] = useState([]); 7 | 8 | useEffect(() => { 9 | getResume().then((data) => { 10 | setResume(data); 11 | }); 12 | }); 13 | 14 | // const handleDelete =( index) => { 15 | 16 | // deleteResume(index).then((data) => { 17 | 18 | // }); 19 | // } 20 | 21 | return ( 22 |
23 |
24 |
25 |
26 |
27 |

28 | User{" "} 29 | 30 | {window.localStorage.getItem("username")} 31 | {" "} 32 | Dashboard 33 |

34 |

List Of Your Resume

35 |
36 |
37 |
38 |
39 | 40 |
41 |
42 | {resume.length > 0 ? ( 43 | resume.map((c, i) => ( 44 |
49 |
50 |
51 |
52 |
53 | 66996194-394482144528868-896954686559485952-n 67 |
68 |
69 |
Resume {i + 1}
70 |

77 | 78 |  {moment(c.timestamp).format("YYYY-MM-DD")} 79 |

80 |
81 |
82 | 83 |
87 |
88 |
89 |

90 | {c.name ? `${c.name}` : " ? "} 91 |
92 | 93 |
94 |

95 | 99 | Github 100 | 101 |
102 |
103 | 104 |
105 |
106 | {" "} 107 | {c.location ? `${c.location}` : " ? "} 108 |
109 | 110 |
111 |

112 | 116 | Linkedin 117 | 118 |
119 |
120 |
121 |
122 |
125 | 126 |

127 |
128 | 133 | {" "} 134 | More Info 135 | 136 |
137 | 138 | 145 | 146 |
147 |
148 |
149 |
150 |
151 | )) 152 | ) : ( 153 |
158 |
159 |
160 |
161 |

162 | Sorry{" "} 163 | 164 | {window.localStorage.getItem("Name")} 165 | {" "} 166 | you have not create any resume.. if you want to create 167 | resume Click here 168 |

169 |
170 |
171 |
172 |
173 | )} 174 |
175 |
176 |
177 | ); 178 | }; 179 | 180 | export default ResumeList; 181 | -------------------------------------------------------------------------------- /src/img/bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 27 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 44 | 45 | -------------------------------------------------------------------------------- /src/img/blue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 11 | 14 | 17 | 20 | 23 | 24 | -------------------------------------------------------------------------------- /src/img/greenform-01.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 11 | 14 | 15 | 16 | 17 | 18 | 21 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | -------------------------------------------------------------------------------- /src/img/purpleform.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 11 | 14 | 17 | 20 | 23 | 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | 13 | serviceWorker.register(); // Do this to resolve error 14 | //serviceWorker.unregister(); 15 | console.clear(); 16 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' } 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready.then(registration => { 134 | registration.unregister(); 135 | }); 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | --------------------------------------------------------------------------------