Texting strangers might come naturally to some but others may have goose bumps when they are trying to text strangers. When you text strangers you are opening a window into a great text chat with strangers. The first few texts are the most difficult ones, once you have started texting and managed to move past opening texts the rest is easy peasy lemon squeezy. Sending a text to strangers is just like letter writing which was back then known as making pen pals. However, these days text to strangers chat room is a modern way of connecting with strangers. When you text strangers you are at the first step of a great conversation that could blossom into a good friendship or even a relationship. There are many examples in the world where people have found their soulmates when they were random texting strangers online. Many people online text with strangers in order to find some company and to talk to someone. When you send a text to strangers what happens next is a total mystery. It might end abruptly a couple of times whereas other times it might turn into a beautiful conversation and a pleasant experience.
99 |
17 |
19 | Loading...
20 |
21 |
23 | {this.props.errorMessage}
24 |9 | {title} 10 |
11 | 17 |22 | 23 | ); 24 | }; 25 | 26 | export default DocsLink; 27 | -------------------------------------------------------------------------------- /server/routes/api/attach-file.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | module.exports = (app) => { 4 | app.post('/api/attach-file', (req, res, next) => { 5 | let attatchFile = req.files.attachFile; 6 | let uploadDir = 'public/uploads/'; 7 | 8 | if (!fs.existsSync(uploadDir)) { 9 | fs.mkdirSync(uploadDir); 10 | } 11 | 12 | let fileType = attatchFile.name.substring(attatchFile.name.indexOf(".") + 1); 13 | let newFileName = new Date().getTime(); 14 | attatchFile.mv(`${uploadDir}${newFileName}.${fileType}`, function(err) { 15 | if (err) { 16 | return res.status(500).send(err); 17 | } 18 | return res.status(200).send({ 19 | status: true, 20 | fileName: `${newFileName}.${fileType}` 21 | }) 22 | }) 23 | }); 24 | } -------------------------------------------------------------------------------- /src/components/FullScreenImage/FullScreenImage.css: -------------------------------------------------------------------------------- 1 | .full-image { 2 | position: fixed; 3 | width: 100vw; 4 | height: 100vh; 5 | z-index: 10; 6 | background-color: #212529; 7 | top: 0px; 8 | left: 0px; 9 | margin: auto; 10 | } 11 | 12 | .close-btn { 13 | position: absolute; 14 | top: 10px; 15 | right: 15px; 16 | font-size: 1rem; 17 | font-weight: 400; 18 | color: white; 19 | cursor: pointer; 20 | } 21 | 22 | .close-btn:hover { 23 | transform: scale(1.2); 24 | } 25 | 26 | .full-image img { 27 | position: absolute; 28 | left: 0; 29 | right: 0; 30 | top: 0; 31 | bottom: 0; 32 | margin: auto; 33 | max-width: 80%; 34 | } 35 | 36 | .download-btn { 37 | position: absolute; 38 | right: 40px; 39 | top: 9px; 40 | color: white; 41 | } 42 | 43 | .download-btn:hover { 44 | transform: scale(1.1); 45 | } -------------------------------------------------------------------------------- /src/pages/UserSign/UserSign.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | .loginBoxContainer { 26 | margin-top: 20px; 27 | -webkit-box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.25); 28 | box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.25); 29 | -webkit-border-radius: 3px 3px 3px 3px; 30 | border-radius: 3px 3px 3px 3px; 31 | } 32 | 33 | .tabContent { 34 | padding: 10px; 35 | } 36 | 37 | @keyframes App-logo-spin { 38 | from { 39 | transform: rotate(0deg); 40 | } 41 | to { 42 | transform: rotate(360deg); 43 | } 44 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Bootstrap with Material Design 2 | MDBootstrap for React 3 | 4 | ## Getting Started 5 | To test, contribute or just see what we did follow few easy steps: 6 | - clone the repository 7 | - cd to the directory with the repository 8 | - run `yarn install` (or `npm install` if you don't use yarn) 9 | - run the app using `yarn start` (or `npm start`) 10 | - to build project use `yarn run build` (od `npm run build`) 11 | - `yarn run remove-demo` (or `npm run remove-demo`) removes demo app pages 12 | - enjoy! 13 | 14 | ## Bugs 15 | If you want to report a bug or submit your idea feel fre to open an issue 16 | 17 | Before you report a bug, please take your time to find if an issue hasn't been reported yet 18 | 19 | We're also open to pull requests 20 | 21 | ## Something Missing? 22 | If you still have some questions do not hesitate to ask us. Open an issue or [visit our Slack](https://mdbbetatest.slack.com) 23 | -------------------------------------------------------------------------------- /src/css/app.scss: -------------------------------------------------------------------------------- 1 | $fa-font-path: "~font-awesome/fonts"; 2 | @import "~font-awesome/scss/font-awesome"; 3 | 4 | $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; 5 | @import "~bootstrap-sass/assets/stylesheets/bootstrap"; 6 | 7 | @import "variables"; 8 | @import "shared/base"; 9 | 10 | html { 11 | background: url("https://source.unsplash.com/2560x1440/?forest,mountain") center no-repeat fixed; 12 | } 13 | 14 | body { 15 | background: rgba(#000000, 0.6); 16 | padding: 0px 20px 20px 20px; 17 | min-height: 100vh; 18 | } 19 | 20 | .navbar-brand { 21 | font-size: 1.5em; 22 | img { 23 | display: inline-block; 24 | width: 50px; 25 | } 26 | } 27 | 28 | #root { 29 | h2 { 30 | margin-top: 0px; 31 | } 32 | 33 | h4 { 34 | margin-top: 20px; 35 | } 36 | } 37 | 38 | .btn-action { 39 | outline: none; 40 | border: none; 41 | } 42 | 43 | 44 | @import "main-window"; 45 | @import "call-window"; 46 | @import "call-modal"; 47 | -------------------------------------------------------------------------------- /src/css/main-window.scss: -------------------------------------------------------------------------------- 1 | .main-window { 2 | padding-top: 80px; 3 | font-size: 1.75em; 4 | 5 | @media screen and (max-width: 767px) { 6 | padding-top: 40px; 7 | 8 | .pull-left, .pull-right { 9 | width: 100%; 10 | text-align: center; 11 | } 12 | 13 | .pull-right { 14 | margin-top: 20px; 15 | } 16 | } 17 | 18 | .btn-action { 19 | $height: 60px; 20 | height: $height; 21 | width: $height; 22 | margin: 20px 30px 0px 0px; 23 | line-height: $height; 24 | text-align: center; 25 | border-radius: 50%; 26 | border: solid 2px $main-color; 27 | cursor: pointer; 28 | transition-duration: 0.25s; 29 | background-color: transparent; 30 | 31 | &:hover { 32 | background-color: rgba($main-color, 0.2); 33 | } 34 | } 35 | 36 | .txt-clientId { 37 | height: 40px; 38 | margin: 40px auto 0px 10px; 39 | color: $main-color; 40 | font-size: 0.9em; 41 | background-color: transparent; 42 | border: none; 43 | border-bottom: solid 1px $main-color; 44 | @include input-placeholder(rgba($main-color, 0.8)); 45 | } 46 | 47 | } 48 | 49 | -------------------------------------------------------------------------------- /src/components/SearchSettingBox/SearchSettingBox.css: -------------------------------------------------------------------------------- 1 | .search-container-true { 2 | position: fixed; 3 | margin: 0px; 4 | top: 74px; 5 | right: -15px; 6 | width: 350px; 7 | height: 100%; 8 | z-index: 2; 9 | animation-name: search-container; 10 | animation-duration: 0.5s; 11 | } 12 | 13 | .search-container- { 14 | display: none; 15 | } 16 | 17 | @keyframes search-container { 18 | 0% { 19 | right: -400px 20 | } 21 | 100% { 22 | right: -15px; 23 | } 24 | } 25 | 26 | .search-container-false { 27 | position: fixed; 28 | margin: 0px; 29 | top: 74px; 30 | right: -400px; 31 | width: 350px; 32 | height: 100%; 33 | animation-name: search-container-hide; 34 | animation-duration: 0.5s; 35 | } 36 | 37 | @keyframes search-container-hide { 38 | 0% { 39 | right: -15px 40 | } 41 | 100% { 42 | right: -400px; 43 | } 44 | } 45 | 46 | .jumbotron { 47 | padding: 20px 5px 0px 5px; 48 | height: calc( 100vh - 75px); 49 | } 50 | 51 | .form-label { 52 | margin: 10px 0px; 53 | } 54 | 55 | .form-group { 56 | border: none !important; 57 | } 58 | 59 | .card-title { 60 | margin-top: 20px; 61 | } -------------------------------------------------------------------------------- /src/components/sectionContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MDBContainer } from 'mdbreact'; 3 | import classNames from 'classnames'; 4 | 5 | const SectionContainer = ({ 6 | children, 7 | className, 8 | dark, 9 | description, 10 | header, 11 | noBorder, 12 | noBottom, 13 | style, 14 | title, 15 | flexCenter, 16 | flexCenterVert, 17 | flexColumn 18 | }) => { 19 | const classes = classNames( 20 | 'section', 21 | !noBottom && 'mb-5', 22 | !noBorder ? 'border p-3' : 'px-0', 23 | dark && 'grey darken-3', 24 | flexCenter && 'd-flex justify-content-center align-items-center', 25 | flexCenterVert && 'd-flex align-items-center', 26 | flexColumn && 'flex-column', 27 | className 28 | ); 29 | 30 | description = description ?
{description}
: ''; 31 | title = title ?{title}
: ''; 32 | header = header ?{header}
: ''; 33 | 34 | return ( 35 | <> 36 | {title} 37 | {header} 38 |
25 |
38 |
39 | );
40 | }
41 | }
--------------------------------------------------------------------------------
/server/routes/api/admin-manage.js:
--------------------------------------------------------------------------------
1 | const User = require('../../models/User');
2 |
3 | module.exports = (app) => {
4 | app.post('/api/admin/manage', (req, res, next) => {
5 | User.find({ role: { $ne: 'admin' } },
6 | function(err, users) {
7 | if (err) {
8 | console.log(err);
9 | throw err;
10 | } else {
11 | return res.send({
12 | success: true,
13 | users: users
14 | });
15 | }
16 | })
17 | });
18 |
19 | app.post('/api/admin/enable-user', (req, res, next) => {
20 | User.findOneAndUpdate({
21 | _id: req.body.user._id,
22 | }, {
23 | $set: {
24 | isDeleted: !req.body.user.isDeleted,
25 | report_number: req.body.user.isDeleted ? 0 : 5,
26 | report_reason: ''
27 | }
28 | }, { new: true }, (err, newUser) => {
29 | if (err) {
30 | return res.send({
31 | success: false,
32 | message: 'Error: Server Error '
33 | })
34 | }
35 | return res.send({
36 | success: true,
37 | user: newUser,
38 | message: 'User information updated successfully.'
39 | })
40 | });
41 | });
42 | }
--------------------------------------------------------------------------------
/src/pages/Chat/CallModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classnames from 'classnames';
4 |
5 |
6 | function CallModal({ status, callFrom, startCall, rejectCall, userAvatar }) {
7 | const acceptWithVideo = (video) => {
8 | const config = { audio: true, video };
9 | return () => startCall(false, callFrom, config);
10 | };
11 |
12 | return (
13 |
14 |
37 | );
38 | }
39 |
40 | CallModal.propTypes = {
41 | status: PropTypes.string.isRequired,
42 | callFrom: PropTypes.string.isRequired,
43 | startCall: PropTypes.func.isRequired,
44 | rejectCall: PropTypes.func.isRequired
45 | };
46 |
47 | export default CallModal;
--------------------------------------------------------------------------------
/src/components/CallModal/CallModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classnames from 'classnames';
4 | import { RESTAPIUrl } from '../../config/config';
5 | import './CallModal.css';
6 |
7 |
8 | function CallModal({ status, callFrom, startCall, rejectCall, contactUser, userAvatar }) {
9 | const acceptWithVideo = (video) => {
10 | const config = { audio: true, video };
11 | return () => startCall(false, callFrom, config);
12 | };
13 |
14 | return (
15 |
15 | 
16 |
17 | 18 | {`${callFrom}`} 19 |
20 | Incoming call... 21 | 26 | 31 | 36 |
16 |
39 | );
40 | }
41 |
42 | CallModal.propTypes = {
43 | status: PropTypes.string.isRequired,
44 | callFrom: PropTypes.string.isRequired,
45 | startCall: PropTypes.func.isRequired,
46 | rejectCall: PropTypes.func.isRequired
47 | };
48 |
49 | export default CallModal;
--------------------------------------------------------------------------------
/src/pages/Chat/MediaDevice.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | import Emitter from './Emitter';
3 |
4 | /**
5 | * Manage all media devices
6 | */
7 | class MediaDevice extends Emitter {
8 | /**
9 | * Start media devices and send stream
10 | */
11 | start() {
12 | const constraints = {
13 | video: {
14 | facingMode: 'user',
15 | height: { min: 360, ideal: 720, max: 1080 }
16 | },
17 | audio: true
18 | };
19 |
20 | navigator.mediaDevices
21 | .getUserMedia(constraints)
22 | .then((stream) => {
23 | this.stream = stream;
24 | this.emit('stream', stream);
25 | })
26 | .catch((err) => {
27 | if (err instanceof DOMException) {
28 | alert('Cannot open webcam and/or microphone');
29 | } else {
30 | console.log(err);
31 | }
32 | });
33 |
34 | return this;
35 | }
36 |
37 | /**
38 | * Turn on/off a device
39 | * @param {String} type - Type of the device
40 | * @param {Boolean} [on] - State of the device
41 | */
42 | toggle(type, on) {
43 | const len = arguments.length;
44 | if (this.stream) {
45 | this.stream[`get${type}Tracks`]().forEach((track) => {
46 | const state = len === 2 ? on : !track.enabled;
47 | _.set(track, 'enabled', state);
48 | });
49 | }
50 | return this;
51 | }
52 |
53 | /**
54 | * Stop all media track of devices
55 | */
56 | stop() {
57 | if (this.stream) {
58 | this.stream.getTracks().forEach((track) => track.stop());
59 | }
60 | return this;
61 | }
62 | }
63 |
64 | export default MediaDevice;
65 |
--------------------------------------------------------------------------------
/src/css/call-window.scss:
--------------------------------------------------------------------------------
1 | .call-window {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | width: 100vw;
6 | height: 100vh;
7 | opacity: 0;
8 | z-index: -1;
9 | @include transition(opacity 0.5s);
10 | @include bg-gradient(top, #074055 0%, #030D10 100%);
11 |
12 | &.active {
13 | opacity: 1;
14 | z-index: auto;
15 |
16 | .video-control {
17 | z-index: auto;
18 | @include animation(in-fadeout 3s ease);
19 | }
20 | }
21 |
22 | .video-control {
23 | position: absolute;
24 | bottom: 20px;
25 | height: 72px;
26 | width: 100%;
27 | text-align: center;
28 | opacity: 0;
29 | z-index: -1;
30 | @include transition(opacity 0.5s);
31 |
32 |
33 | &:hover {
34 | opacity: 1;
35 | }
36 | }
37 |
38 | video {
39 | position: absolute;
40 | }
41 |
42 | #localVideo {
43 | bottom: 0;
44 | right: 0;
45 | width: 20%;
46 | height: 20%;
47 | }
48 |
49 | #peerVideo {
50 | width: 100%;
51 | height: 100%;
52 | }
53 | }
54 |
55 | @include keyframes(in-fadeout) {
56 | 0% {opacity: 1}
57 | 75% {opacity: 1}
58 | 100% {opacity: 0}
59 | }
60 |
61 | .video-control, .call-modal {
62 | .btn-action {
63 | $height: 50px;
64 | height: $height;
65 | width: $height;
66 | line-height: $height;
67 | margin: 0px 8px;
68 | font-size: 1.4em;
69 | text-align: center;
70 | border-radius: 50%;
71 | cursor: pointer;
72 | transition-duration: 0.25s;
73 |
74 | &:hover {
75 | opacity: 0.8;
76 | }
77 |
78 | &.hangup {
79 | background-color: $red;
80 | @include transform(rotate(135deg));
81 | }
82 |
83 | &:not(.hangup) {
84 | background-color: $blue;
85 |
86 | &.disable {
87 | background-color: $red;
88 | }
89 | }
90 | }
91 | }
--------------------------------------------------------------------------------
/server/models/User.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose');
2 | const bcrypt = require('bcrypt');
3 |
4 | const UserSchema = new mongoose.Schema({
5 | userName: {
6 | type: String,
7 | default: '',
8 | },
9 | age: {
10 | type: Number,
11 | default: '',
12 | },
13 | location: {
14 | type: String,
15 | default: '',
16 | },
17 | gender: {
18 | type: String,
19 | default: '',
20 | },
21 | profile_image: {
22 | type: String,
23 | default: '',
24 | },
25 | ip_address: {
26 | type: String,
27 | default: '',
28 | },
29 | report_reason: [{
30 | reporter_id: { type: String, max: 100 },
31 | reason: { type: String, max: 100 },
32 | }],
33 | report_number: {
34 | type: Number,
35 | default: 0,
36 | },
37 | isDeleted: {
38 | type: Boolean,
39 | default: false,
40 | },
41 | online: {
42 | type: Boolean,
43 | default: false,
44 | },
45 | connected_other: {
46 | type: Boolean,
47 | default: false,
48 | },
49 | email: {
50 | type: String,
51 | default: '',
52 | },
53 | password: {
54 | type: String,
55 | default: '',
56 | },
57 | role: {
58 | type: String,
59 | default: '',
60 | },
61 |
62 | });
63 |
64 | UserSchema.methods.generateHash = (password) =>
65 | bcrypt.hashSync(password, bcrypt.genSaltSync(8), null);
66 |
67 | UserSchema.methods.validPassword = function(password) {
68 | console.log(this.password);
69 | return bcrypt.compareSync(password, this.password);
70 | };
71 |
72 | module.exports = mongoose.model('User', UserSchema);
--------------------------------------------------------------------------------
/src/App/Routes.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, Switch, Redirect } from 'react-router-dom';
3 | import { getFromStorage } from '../utils/storage';
4 |
5 | // FREE
6 | import HomePage from '../pages/HomePage/HomePage';
7 | import UserSign from '../pages/UserSign/UserSign';
8 | import GuestSign from '../pages/GuestSign/GuestSign';
9 | import Chat from '../pages/Chat/Chat';
10 |
11 | import AdminSign from '../pages/AdminSign/AdminSign';
12 | import AdminManage from '../pages/AdminManage/AdminManage';
13 |
14 | const fakeAuth = () => {
15 | const obj = getFromStorage('guest_signin');
16 |
17 | if(obj && obj.token) {
18 | return true;
19 | }
20 | return false;
21 | }
22 |
23 | const PrivateRoute = ({ component: Component, ...rest }) => (
24 |
17 | 
18 |
19 | 20 | {`${contactUser}`} 21 |
22 | Incoming call... 23 | 28 | 33 | 38 |
18 |
52 | );
53 | }
54 |
55 | MainWindow.propTypes = {
56 | clientId: PropTypes.string.isRequired,
57 | startCall: PropTypes.func.isRequired
58 | };
59 |
60 | export default MainWindow;
61 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 |
19 |
30 | 20 | Hi,Dagger your ID is 21 | 27 |
28 |Get started by calling a friend below
29 |
31 | setFriendID(event.target.value)}
37 | />
38 |
51 |
39 |
44 |
49 |
50 |
42 |
43 |
44 |
64 | );
65 | }
66 |
67 | CallWindow.propTypes = {
68 | status: PropTypes.string.isRequired,
69 | localSrc: PropTypes.object, // eslint-disable-line
70 | peerSrc: PropTypes.object, // eslint-disable-line
71 | config: PropTypes.shape({
72 | audio: PropTypes.bool.isRequired,
73 | video: PropTypes.bool.isRequired
74 | }).isRequired,
75 | mediaDevice: PropTypes.object, // eslint-disable-line
76 | endCall: PropTypes.func.isRequired
77 | };
78 |
79 | export default CallWindow;
80 |
--------------------------------------------------------------------------------
/src/components/ProfileBox/ProfileBox.css:
--------------------------------------------------------------------------------
1 | .profile-container-true {
2 | position: fixed;
3 | margin: 0px;
4 | top: 74px;
5 | right: -15px;
6 | width: 350px;
7 | height: 100%;
8 | z-index: 2;
9 | animation-name: profile-container;
10 | animation-duration: 0.5s;
11 | }
12 |
13 | .profile-container- {
14 | display: none;
15 | }
16 |
17 | @keyframes profile-container {
18 | 0% {
19 | right: -400px
20 | }
21 | 100% {
22 | right: -15px;
23 | }
24 | }
25 |
26 | .profile-container-false {
27 | position: fixed;
28 | margin: 0px;
29 | top: 74px;
30 | right: -400px;
31 | width: 350px;
32 | height: 100%;
33 | animation-name: profile-container-hide;
34 | animation-duration: 0.5s;
35 | }
36 |
37 | @keyframes profile-container-hide {
38 | 0% {
39 | right: -15px
40 | }
41 | 100% {
42 | right: -400px;
43 | }
44 | }
45 |
46 | .jumbotron {
47 | padding: 20px 5px 0px 5px;
48 | height: calc( 100vh - 75px);
49 | overflow: auto;
50 | }
51 |
52 | .card-body {
53 | padding-top: 0px;
54 | padding-bottom: 0px;
55 | text-align: left !important;
56 | }
57 |
58 | .profile-image {
59 | text-align: center;
60 | width: 100%;
61 | position: relative;
62 | }
63 |
64 | .profile-image img {
65 | width: 200px;
66 | height: 200px;
67 | border-radius: 50%;
68 | border: 6px solid #F8F8F8;
69 | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
70 | }
71 |
72 | .profile-image .upload-button {
73 | position: absolute;
74 | top: 0px;
75 | width: 200px;
76 | height: 200px;
77 | margin-left: calc( 50% - 100px);
78 | border-radius: 50%;
79 | }
80 |
81 | .profile-image .upload-button label {
82 | width: 100%;
83 | height: 100%;
84 | border-radius: 50%;
85 | cursor: pointer;
86 | }
87 |
88 | .profile-image .upload-button input {
89 | display: none;
90 | }
91 |
92 | .profile-image h4 {
93 | padding-top: 20px;
94 | font-weight: 600;
95 | }
96 |
97 | button.close {
98 | position: absolute;
99 | right: 25px;
100 | top: 5px;
101 | }
102 |
103 | .jumbotron::-webkit-scrollbar {
104 | width: 5px;
105 | background: red;
106 | }
107 |
108 | .jumbotron:hover::-webkit-scrollbar-thumb {
109 | display: block;
110 | background: #888;
111 | }
112 |
113 | .jumbotron::-webkit-scrollbar-track {
114 | background: #f1f1f1;
115 | }
116 |
117 | .jumbotron::-webkit-scrollbar-thumb {
118 | /* background: #888; */
119 | background: transparent;
120 | }
121 |
122 | .jumbotron::-webkit-scrollbar-thumb:hover {
123 | background: #555;
124 | }
--------------------------------------------------------------------------------
/server/routes/api/report.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | const User = require('../../models/User');
3 |
4 | module.exports = (app) => {
5 | app.post('/api/report', (req, res, next) => {
6 | User.find({
7 | _id: req.body.targetUser._id
8 | },
9 | (err, prevUser) => {
10 | if (err) {
11 | return res.status(500).send({
12 | status: false,
13 | message: 'Error: Server Error',
14 | });
15 | } else {
16 | let reporterList = prevUser[0].report_reason;
17 | let already_report = 0;
18 | for (let i = 0; i < reporterList.length; i++) {
19 | // Check to report already for this signed in user
20 | if (reporterList[i].reporter_id == req.body.reportUser._id) {
21 | already_report++;
22 | }
23 | }
24 |
25 | if (already_report > 0) {
26 | return res.status(200).send({
27 | status: false,
28 | message: "You have already reported this user before."
29 | });
30 | } else {
31 | reporterList.push({ reporter_id: req.body.reportUser._id, reason: req.body.reason });
32 | let report_number = prevUser[0].report_number;
33 | User.findOneAndUpdate({
34 | _id: req.body.targetUser._id
35 | }, {
36 | $set: {
37 | report_number: Number(prevUser[0].report_number) + 1,
38 | report_reason: reporterList,
39 | isDeleted: report_number == 4 ? true : false
40 | }
41 | }, {
42 | new: true
43 | }, (err, user) => {
44 | if (err) {
45 | console.log(err);
46 | return res.status(500).send({
47 | status: false,
48 | message: 'Errir: Server Error',
49 | })
50 | } else {
51 | return res.status(200).send({
52 | status: true,
53 | message: "You reported successfully"
54 | });
55 | }
56 | })
57 | }
58 |
59 | }
60 | }
61 | )
62 | });
63 | }
--------------------------------------------------------------------------------
/src/components/CallModal/CallModal.css:
--------------------------------------------------------------------------------
1 | .call-modal {
2 | position: absolute;
3 | width: 250px;
4 | padding: 20px;
5 | left: calc(50vw - 125px);
6 | top: calc(50vh - 200px);
7 | background: -webkit-linear-gradient(top, #074055 0%, #030D10 100%);
8 | background: -moz-linear-gradient(top, #074055 0%, #030D10 100%);
9 | background: -o-linear-gradient(top, #074055 0%, #030D10 100%);
10 | background: linear-gradient(to bottom, #074055, #030D10);
11 | background-color: #212529;
12 | -webkit-border-radius: 5px;
13 | -moz-border-radius: 5px;
14 | -o-border-radius: 5px;
15 | border-radius: 5px;
16 | text-align: center;
17 | display: none;
18 | }
19 |
20 | .call-modal.active {
21 | display: block;
22 | background: linear-gradient(to top, #074055 0%, #030D10 100%);
23 | background-color: #212529;
24 | z-index: 9999;
25 | -webkit-animation: blinking 3s infinite linear;
26 | -moz-animation: blinking 3s infinite linear;
27 | -o-animation: blinking 3s infinite linear;
28 | animation: blinking 3s infinite linear;
29 | text-align: center;
30 | text-align: -webkit-center;
31 | }
32 |
33 | @keyframes blinking {
34 | 25% {
35 | transform: scale(0.96)
36 | }
37 | 50% {
38 | transform: scale(1)
39 | }
40 | 75% {
41 | transform: scale(0.96)
42 | }
43 | 100% {
44 | transform: scale(1)
45 | }
46 | }
47 |
48 | .video-control .btn-action,
49 | .call-modal .btn-action {
50 | height: 40px;
51 | width: 40px;
52 | line-height: 10px;
53 | margin: 0px 8px;
54 | font-size: 1.2em;
55 | text-align: center;
56 | border-radius: 50%;
57 | cursor: pointer;
58 | transition-duration: 0.25s;
59 | }
60 |
61 | .btn-action {
62 | outline: none;
63 | border: none;
64 | }
65 |
66 | .btn-action:focus {
67 | outline: none;
68 | border: none;
69 | }
70 |
71 | .hangup {
72 | transform: rotate(-135deg);
73 | }
74 |
75 | .call-modal p {
76 | font-size: 1.5em;
77 | }
78 |
79 | .call-modal span.caller {
80 | color: #00AFF0;
81 | }
82 |
83 | .call-modal .btn-action:not(.hangup) {
84 | background-color: rgb(76, 175, 80);
85 | }
86 |
87 | .call-modal button {
88 | color: white;
89 | }
90 |
91 | .target-avatar {
92 | width: 100px;
93 | height: 100px;
94 | border-radius: 50%;
95 | overflow: hidden;
96 | margin: 30px 0px;
97 | }
98 |
99 | .target-avatar img {
100 | width: 100%;
101 | height: 100%;
102 | }
103 |
104 | .call-modal span.caller {
105 | color: white;
106 | font-size: 18px;
107 | font-weight: 500;
108 | }
109 |
110 | .incoming {
111 | display: block;
112 | font-size: 14px;
113 | color: rgb(150, 150, 150);
114 | margin-bottom: 20px;
115 | }
--------------------------------------------------------------------------------
/src/components/UserList.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { ChatList } from "react-chat-elements";
3 | import FormControl from "react-bootstrap/lib/FormControl";
4 | import FormGroup from "react-bootstrap/lib/FormGroup";
5 |
6 | /**
7 | *
8 | * Renders user list
9 | *
10 | * Used on both places Sign-in modal and as ChatList
11 | */
12 |
13 | export default class UserList extends Component {
14 | state = {
15 | userData: [],
16 | searchQuery: null
17 | };
18 | componentDidMount() {}
19 | searchInput(e) {
20 | let value = e.target.value;
21 | let searchQuery = null;
22 | if (value) {
23 | searchQuery = value;
24 | }
25 | this.setState({ searchQuery });
26 | }
27 | /**
28 | *
29 | * Implement filter logic on basis of search query.
30 | */
31 | getFilteredUserList() {
32 | return !this.state.searchQuery
33 | ? this.props.userData
34 | : this.props.userData.filter(user =>
35 | user.name.toLowerCase().includes(this.state.searchQuery.toLowerCase())
36 | );
37 | }
38 | render() {
39 | let users = this.getFilteredUserList();
40 | return (
41 |
45 |
63 |
42 |
43 |
49 | {users.length ? (
50 | {
53 | let date = null;
54 | let subtitle = "";
55 | if (
56 | !this.props.showSignInList &&
57 | f.messages &&
58 | f.messages.length
59 | ) {
60 | let lastMessage = f.messages[f.messages.length - 1];
61 | date = new Date(lastMessage.date);
62 | // subtitle =
63 | // (lastMessage.position === "right" ? "You: " : f.name + ": ") +
64 | // lastMessage.text;
65 | subtitle = lastMessage.text;
66 | }
67 | return {
68 | avatar: require(`../static/images/avatar/${f.id}.jpg`),
69 | alt: f.name,
70 | title: f.name,
71 | subtitle: subtitle,
72 | date: date,
73 | unread: f.unread,
74 | user: f,
75 | };
76 | })}
77 | onClick={
78 | !this.props.showSignInList
79 | ? this.props.onChatClicked
80 | : this.props.onUserClicked
81 | }
82 | />
83 | ) : (
84 |
87 | );
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/src/components/CallWindow/callWindow_backup.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classnames from 'classnames';
4 | import "./CallWindow.css";
5 |
6 | const getButtonClass = (icon, enabled) => classnames(`btn-action fa ${icon}`, { disable: !enabled });
7 |
8 | function CallWindow({ peerSrc, localSrc, config, mediaDevice, status, endCall }) {
9 | const peerVideo = useRef(null);
10 | const localVideo = useRef(null);
11 | const [video, setVideo] = useState(config.video);
12 | const [audio, setAudio] = useState(config.audio);
13 |
14 | useEffect(() => {
15 | if (peerVideo.current && peerSrc) peerVideo.current.srcObject = peerSrc;
16 | if (localVideo.current && localSrc) localVideo.current.srcObject = localSrc;
17 | });
18 |
19 | useEffect(() => {
20 | if (mediaDevice) {
21 | mediaDevice.toggle('Video', video);
22 | mediaDevice.toggle('Audio', audio);
23 | }
24 | });
25 |
26 | /**
27 | * Turn on/off a media device
28 | * @param {String} deviceType - Type of the device eg: Video, Audio
29 | */
30 | const toggleMediaDevice = (deviceType) => {
31 | if (deviceType === 'video') {
32 | setVideo(!video);
33 | mediaDevice.toggle('Video');
34 | }
35 | if (deviceType === 'audio') {
36 | setAudio(!audio);
37 | mediaDevice.toggle('Audio');
38 | }
39 | };
40 |
41 | return (
42 | No users to show.
85 | )}
86 |
43 |
71 | );
72 | }
73 |
74 | CallWindow.propTypes = {
75 | status: PropTypes.string.isRequired,
76 | localSrc: PropTypes.object, // eslint-disable-line
77 | peerSrc: PropTypes.object, // eslint-disable-line
78 | config: PropTypes.shape({
79 | audio: PropTypes.bool.isRequired,
80 | video: PropTypes.bool.isRequired
81 | }).isRequired,
82 | mediaDevice: PropTypes.object, // eslint-disable-line
83 | endCall: PropTypes.func.isRequired
84 | };
85 |
86 | export default CallWindow;
--------------------------------------------------------------------------------
/src/components/CallWindow/CallWindow.css:
--------------------------------------------------------------------------------
1 | .video-contact {
2 | position: fixed;
3 | width: 300px;
4 | height: auto;
5 | left: 20px;
6 | top: 100px;
7 | object-fit: cover;
8 | overflow: hidden;
9 | z-index: 5;
10 | }
11 |
12 | .call-window #peerVideo {
13 | height: auto;
14 | width: 100%;
15 | border-radius: 6px;
16 | }
17 |
18 | .video-user {
19 | position: fixed;
20 | overflow: hidden;
21 | height: 60px;
22 | width: auto;
23 | right: 60px;
24 | top: 7px;
25 | border-radius: 0px;
26 | }
27 |
28 | .video-user #localVideo {
29 | height: 100%;
30 | width: auto;
31 | max-width: 9.375rem;
32 | border-radius: 6px;
33 | border: 3px solid #fff;
34 | }
35 |
36 | .video-control {
37 | position: absolute;
38 | bottom: 92px;
39 | left: 50%;
40 | transform: translate(-50%);
41 | animation: fade-out 4s;
42 | opacity: 0;
43 | }
44 |
45 | @keyframes fade-out {
46 | 0% {
47 | opacity: 1;
48 | }
49 | 80% {
50 | opacity: 1;
51 | }
52 | 100% {
53 | opacity: 0;
54 | }
55 | }
56 |
57 | .video-control:hover {
58 | animation: fade-in 1s;
59 | opacity: 1;
60 | }
61 |
62 | @keyframes fade-in {
63 | 0% {
64 | opacity: 0;
65 | }
66 | 100% {
67 | opacity: 1;
68 | }
69 | }
70 |
71 | .video-control button {
72 | color: white;
73 | }
74 |
75 | button.fa-video,
76 | button.fa-microphone {
77 | background-color: rgb(76, 175, 80);
78 | }
79 |
80 | button.hangup {
81 | background-color: rgb(244, 67, 54);
82 | }
83 |
84 | .call-modal .btn-action,
85 | .video-control .btn-action {
86 | height: 40px;
87 | width: 40px;
88 | line-height: 10px;
89 | margin: 0 8px;
90 | font-size: 1.2em;
91 | text-align: center;
92 | border-radius: 50%;
93 | cursor: pointer;
94 | transition-duration: .25s;
95 | }
96 |
97 | .btn-action:focus {
98 | outline: none;
99 | border: none;
100 | }
101 |
102 | .video-contact:hover .max-mark {
103 | display: block;
104 | }
105 |
106 | .toggle-contact-video {
107 | position: absolute;
108 | width: 25px;
109 | height: 25px;
110 | border-radius: 50%;
111 | background-color: rgba(23, 35, 34, .75);
112 | cursor: pointer;
113 | }
114 |
115 | .toggle-contact-video:hover {
116 | background-color: rgba(14, 226, 208, 0.75);
117 | }
118 |
119 | .toggle-contact-video img {
120 | width: 100%;
121 | height: 100%;
122 | }
123 |
124 | .max-mark {
125 | top: 3px;
126 | right: 3px;
127 | display: none;
128 | }
129 |
130 | .min-mark {
131 | bottom: 5px;
132 | left: 0px;
133 | }
134 |
135 | .max-video {
136 | opacity: 1;
137 | }
138 |
139 | .min-video {
140 | opacity: 0;
141 | }
142 |
143 | @media only screen and (max-width: 768px) {
144 | .video-user {
145 | right: 47px;
146 | }
147 | }
--------------------------------------------------------------------------------
/server/routes/api/admin-sign.js:
--------------------------------------------------------------------------------
1 | const User = require('../../models/User');
2 |
3 | module.exports = (app) => {
4 | app.post('/api/admin/signin', (req, res, next) => {
5 |
6 | let body = req.body;
7 | let { email, password } = body;
8 | email = email.toLowerCase();
9 | email = email.trim();
10 |
11 | User.find({
12 | email: email
13 | }, (err, users) => {
14 | if (err) {
15 | return res.send({
16 | success: false,
17 | message: 'Error: server error'
18 | });
19 | }
20 |
21 | if (users.length != 1) {
22 | return res.send({
23 | success: false,
24 | message: 'Error: This user does not exist.'
25 | });
26 | } else {
27 | const user = users[0];
28 | if (!user.validPassword(password)) {
29 | return res.send({
30 | success: false,
31 | message: 'Error: Wrong Email or Password'
32 | });
33 | } else {
34 | return res.send({
35 | success: true,
36 | message: 'Valid sign in'
37 | });
38 | }
39 | }
40 | });
41 |
42 | });
43 |
44 | app.post('/api/admin/update-profile', (req, res, next) => {
45 | let body = req.body;
46 | let { email, password, confirmPassword } = body;
47 | email = email.toLowerCase();
48 | email = email.trim();
49 |
50 | if (password != confirmPassword) {
51 | return res.send({
52 | success: false,
53 | message: 'Error: Password and confirm password does not match '
54 | })
55 | }
56 |
57 | const newUser = new User();
58 | const hashPassword = newUser.generateHash(password);
59 |
60 | User.findOneAndUpdate({
61 | role: 'admin'
62 | }, {
63 | $set: {
64 | email: email,
65 | password: hashPassword
66 | }
67 | }, { new: true }, (err, newUser) => {
68 | if (err) {
69 | console.log(err);
70 | return res.send({
71 | success: false,
72 | message: 'Error: Server Error',
73 | });
74 | } else {
75 | return res.send({
76 | success: true,
77 | message: 'Admin information updated successfully',
78 | });
79 | }
80 | });
81 |
82 | });
83 |
84 | app.post('/api/admin/get-info', (req, res, next) => {
85 |
86 | User.find({
87 | role: 'admin'
88 | }, (err, user) => {
89 | if (err) {
90 | console.log(err);
91 | throw err;
92 | } else {
93 | return res.send({
94 | success: true,
95 | admin: user[0]
96 | })
97 | }
98 | })
99 | });
100 | }
--------------------------------------------------------------------------------
/src/pages/AdminSign/AdminSign.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { MDBRow, MDBCol, MDBInput, MDBBtn, MDBCard, MDBCardBody, MDBModalFooter } from 'mdbreact';
3 | import 'whatwg-fetch';
4 | import {
5 | NotificationContainer,
6 | NotificationManager
7 | } from "react-notifications";
8 | import "react-notifications/lib/notifications.css";
9 |
10 | import { RESTAPIUrl } from '../../config/config';
11 | import './AdminSign.css';
12 |
13 | class AdminSign extends React.Component {
14 | constructor(props) {
15 | super(props);
16 |
17 | this.state = {
18 | email: '' ,
19 | password: '',
20 | adminSignLoading: false
21 | }
22 | }
23 |
24 | handleChangeEmail(e) {
25 | console.log("email change", this.state.email)
26 | this.setState({ email: e.target.value });
27 | }
28 |
29 | handleChangePassword(e) {
30 | this.setState({ password: e.target.value });
31 | }
32 |
33 |
34 | handleSubmit(event) {
35 | event.preventDefault();
36 | const { email, password } = this.state;
37 |
38 | this.setState ({
39 | adminSignLoading: true,
40 | });
41 |
42 | fetch(RESTAPIUrl + '/api/admin/signin', {
43 | method: 'POST',
44 | headers: {
45 | 'Content-Type': 'application/json'
46 | },
47 | body: JSON.stringify({
48 | email,
49 | password
50 | }),
51 | }).then(res =>res.json())
52 | .then(json => {
53 | console.log('this is json object', json);
54 | if(json.success) {
55 | this.props.history.push("/admin/manage");
56 | } else {
57 | NotificationManager.error(
58 | `${json.message}`
59 | );
60 | }
61 | })
62 | }
63 | render() {
64 | return (
65 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
70 |
49 |
84 | );
85 | }
86 |
87 | CallWindow.propTypes = {
88 | status: PropTypes.string.isRequired,
89 | localSrc: PropTypes.object, // eslint-disable-line
90 | peerSrc: PropTypes.object, // eslint-disable-line
91 | config: PropTypes.shape({
92 | audio: PropTypes.bool.isRequired,
93 | video: PropTypes.bool.isRequired
94 | }).isRequired,
95 | mediaDevice: PropTypes.object, // eslint-disable-line
96 | endCall: PropTypes.func.isRequired
97 | };
98 |
99 | export default CallWindow;
100 |
--------------------------------------------------------------------------------
/yarn-error.log:
--------------------------------------------------------------------------------
1 | Arguments:
2 | C:\Program Files\nodejs\node.exe C:\Program Files (x86)\Yarn\bin\yarn.js add node-sass
3 |
4 | PATH:
5 | C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\Program Files (x86)\Yarn\bin\;C:\Program Files\Amazon\AWSCLI\bin\;C:\Program Files\PuTTY\;F:\xampp\php;C:\composer;C:\Users\dagger\AppData\Local\Programs\Python\Python37\Scripts\;C:\Users\dagger\AppData\Local\Programs\Python\Python37\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\Program Files (x86)\Yarn\bin\;C:\Program Files\Amazon\AWSCLI\bin\;C:\Program Files\PuTTY\;C:\Users\dagger\AppData\Local\Microsoft\WindowsApps;C:\Users\dagger\AppData\Roaming\npm;C:\Users\dagger\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\dagger\AppData\Local\Yarn\bin;C:\Program Files\Git;C:\Program Files\Amazon\AWSCLI;C:\Python34\Scripts;C:\Program Files\JetBrains\PyCharm 2019.3.3\bin;;C:\Users\dagger\AppData\Roaming\Composer\vendor\bin;F:\xampp\mysql\bin;
6 |
7 | Yarn version:
8 | 1.19.2
9 |
10 | Node version:
11 | 10.16.2
12 |
13 | Platform:
14 | win32 x64
15 |
16 | Trace:
17 | Error: EPERM: operation not permitted, unlink 'E:\Work\React\MDB react\node_modules\bcrypt\lib\binding\bcrypt_lib.node'
18 |
19 | npm manifest:
20 | {
21 | "name": "your-app",
22 | "version": "0.1.0",
23 | "private": true,
24 | "// If You want to install mdbreact from our GitLab repository, please replace '4.25.6' with gitURL provided here ->": "git+https://oauth2:
50 |
51 |
52 |
59 |
60 | toggleVideoContact()}
55 | >
56 | 
57 |
58 |
61 |
62 |
63 |
64 |
65 |
83 |
49 |
50 |
51 |
52 |
53 |
54 | Chat With Stranger
55 |
56 | {!this.state.isWideEnough &&
58 |
59 |
60 |
64 | GUEST
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
78 |
93 |
94 |
95 |
96 |
97 |
98 |
100 |
101 |
102 | );
103 | }
104 | }
105 |
106 | export default FullPageIntroWithFixedTransparentNavbar;
--------------------------------------------------------------------------------
/src/pages/UserSign/UserSign.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './UserSign.css';
3 | import {
4 | Grid,
5 | Row,
6 | Col,
7 | Tabs,
8 | Tab,
9 | Button
10 | } from 'react-bootstrap';
11 | import SignUp from '../Signup/Signup';
12 | import LogIn from '../Login/Login';
13 | import {
14 | getFromStorage,
15 | } from '../../utils/storage';
16 | import { RESTAPIUrl } from '../../config/config';
17 |
18 | class UserSign extends Component {
19 | constructor( props, context) {
20 | super(props, context);
21 |
22 | this.stateChanger = this.stateChanger.bind(this);
23 | this.logOutClicked = this.logOutClicked.bind(this);
24 |
25 | this.state = {
26 | loggedIn: false,
27 | token: '',
28 | loggedInName: 'Unnamed Ashok Kumar',
29 | logOutButtonStatus: 'warning',
30 | logOutLoadingMessage: 'Log Out',
31 | logOutLoading: false,
32 |
33 |
34 |
35 | }
36 | }
37 |
38 | stateChanger(newState) {
39 | this.setState(newState);
40 | }
41 |
42 | componentDidMount() {
43 | const obj = getFromStorage('the_login_n_signup');
44 | if (obj && obj.token) {
45 | const { token } = obj;
46 | const { name } = obj;
47 | // Verify token
48 | fetch( RESTAPIUrl + '/api/account/verify?token=' + token)
49 | .then(res => res.json())
50 | .then(json => {
51 | if (json.success) {
52 | this.setState({
53 | token,
54 | loggedInName: name,
55 | logOutLoading: false,
56 | loggedIn: true,
57 | });
58 | } else {
59 | this.setState({
60 | logOutLoading: false,
61 | });
62 | }
63 | });
64 | } else {
65 | this.setState({
66 | logOutLoading: false,
67 | });
68 | }
69 | }
70 |
71 | logOutClicked() {
72 | this.setState({
73 | logOutLoading: true,
74 | logOutLoadingMessage: 'Logging Out...',
75 | logOutButtonStatus: 'info',
76 | });
77 | const obj = getFromStorage('the_login_n_signup');
78 | if (obj && obj.token) {
79 | const { token } = obj;
80 | // Verify token
81 | fetch(RESTAPIUrl + '/api/account/logout?token=' + token)
82 | .then(res => {
83 | //console.log(res);
84 | return res.json();
85 | })
86 | .then(json => {
87 | if (json.success) {
88 | this.setState({
89 | token: '',
90 | logOutLoading: false,
91 | loggedIn: false,
92 | });
93 | } else {
94 | this.setState({
95 | logOutLoading: false,
96 | });
97 | }
98 | });
99 | } else {
100 | this.setState({
101 | logOutLoading: false,
102 | });
103 | }
104 |
105 | }
106 |
107 |
108 | render() {
109 | return (
110 | Random Video, Text & Audio Chat with Strangers
76 |
It provides free random chat with cool people in private chat rooms.
77 |Chat with strangers & send pictures, videos in private free chat rooms. Meet & talk to strangers from all over the world.
78 |
79 |
82 |
87 |
89 |
90 |
91 | {this.state.restricted ? Your ip address is restricted from this chat
: null} 92 |
111 |
112 |
113 |
115 |
116 |
117 |
146 |
147 |
148 | );
149 | }
150 | }
151 |
152 | export default UserSign;
153 |
--------------------------------------------------------------------------------
/src/pages/GuestSign/GuestSign.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { MDBRow, MDBCol, MDBInput, MDBBtn, MDBCard, MDBCardBody, MDBModalFooter, MDBInputSelect } from 'mdbreact';
3 | import 'whatwg-fetch';
4 | import {
5 | NotificationContainer,
6 | NotificationManager
7 | } from "react-notifications";
8 | import { setInStorage } from '../../utils/storage';
9 | import { RESTAPIUrl } from '../../config/config';
10 | import { countries } from "../../config/country";
11 | import './GuestSign.css';
12 |
13 | class GuestSign extends React.Component {
14 | constructor(props, context) {
15 | super(props, context);
16 | this.handleChangeName = this.handleChangeName.bind(this);
17 | this.handleChangeLocation = this.handleChangeLocation.bind(this);
18 | this.handleChangeAge = this.handleChangeAge.bind(this);
19 | this.handleChangeGender = this.handleChangeGender.bind(this);
20 | this.handleSubmit = this.handleSubmit.bind(this);
21 |
22 | this.state = {
23 | userName: '',
24 | location: 'Canada',
25 | age: 28,
26 | gender: 'Male',
27 | loginLoading: false,
28 | }
29 | }
30 |
31 | handleChangeName(e) {
32 | this.setState({ userName: e.target.value });
33 | }
34 |
35 | handleChangeLocation(e) {
36 | this.setState({ location: e.target.value });
37 | }
38 |
39 | handleChangeAge(value) {
40 | this.setState({ age: value });
41 | }
42 |
43 | handleChangeGender(e) {
44 | this.setState({ gender: e.target.value });
45 | }
46 |
47 | handleSubmit(event) {
48 | event.preventDefault();
49 | const { userName, location, age, gender } = this.state;
50 |
51 | this.setState ({
52 | loginLoading: true,
53 | });
54 |
55 | fetch(RESTAPIUrl + '/api/guest/signin', {
56 | method: 'POST',
57 | headers: {
58 | 'Content-Type': 'application/json'
59 | },
60 | body: JSON.stringify({
61 | userName,
62 | location,
63 | age,
64 | gender
65 | }),
66 | }).then(res =>res.json())
67 | .then(json => {
68 | if(json.status) {
69 | setInStorage('guest_signin', {token:json.token});
70 | this.props.history.push("/chat");
71 | } else {
72 | NotificationManager.error(
73 | `${json.message}`
74 | );
75 | }
76 | })
77 | }
78 | render() {
79 | return (
80 | Login Or Sign-Up
114 |Welcome {this.state.loggedInName}!
121 | 129 |
133 |
134 |
135 |
136 |
137 |
138 |
140 |
141 |
}
142 |
143 |
144 | 135 | { this.state.signInError } 136 |
137 | 138 |
150 |
185 |
186 |
194 |
195 | { this.state.show ? this.displayAlert() : null}
196 |
197 |
198 |
199 |
200 | );
201 |
202 | }
203 | }
204 |
205 | export default LogIn;
206 |
207 |
--------------------------------------------------------------------------------
/src/components/ReportBox/ReportBox.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import {
3 | MDBJumbotron,
4 | MDBBtn,
5 | MDBRow,
6 | MDBCol,
7 | MDBCardTitle,
8 | MDBCardBody,
9 | MDBCloseIcon,
10 | } from 'mdbreact';
11 | import {
12 | NotificationManager
13 | } from "react-notifications";
14 |
15 | import { RESTAPIUrl } from "../../config/config";
16 | import "./ReportBox.css";
17 |
18 | export default class ReportBox extends Component {
19 | constructor(props) {
20 | super(props);
21 | this.state = {
22 | reportList: ['Spam', 'Inappropriate or Vulgar Content', 'Illegal Content', 'Abusive behaviour', 'Other'],
23 | reportReason: '',
24 | inputTextActive: false,
25 | }
26 |
27 | }
28 |
29 | handleReport(e) {
30 | e.preventDefault();
31 | if( typeof this.props.targetUser._id == 'undefined' ) {
32 | NotificationManager.error(
33 | "Please select target user"
34 | );
35 | return false;
36 | }
37 | fetch(RESTAPIUrl + '/api/report', {
38 | method: 'POST',
39 | headers: {
40 | 'Content-Type': 'application/json'
41 | },
42 | body: JSON.stringify({
43 | reportUser: this.props.signedInUser,
44 | targetUser: this.props.targetUser,
45 | reason: this.state.reportReason
46 | }),
47 | }).then(res =>res.json())
48 | .then(json => {
49 | if(json.status) {
50 | NotificationManager.success(
51 | json.message
52 | );
53 | } else {
54 | NotificationManager.error(
55 | json.message
56 | );
57 | }
58 | });
59 |
60 | }
61 |
62 | handleChangeReportSetting(e) {
63 | if(e.target.value !== "Other") {
64 | this.setState({
65 | reportReason: e.target.value,
66 | inputTextActive: false,
67 | })
68 | } else {
69 | this.setState({inputTextActive: true});
70 | }
71 | }
72 |
73 | handleOtherReason(e) {
74 | this.setState({reportReason: e.target.value});
75 | }
76 |
77 | onReportModalShow() {
78 | this.props.onReportModalShow(false);
79 | }
80 |
81 | render() {
82 | return (
83 |
84 |
85 |
86 |
89 |
90 | Report User
91 |
92 |
93 |
94 |
153 |
154 |
155 |
156 |
157 |
158 |
159 | );
160 | }
161 | }
--------------------------------------------------------------------------------
/src/components/SearchSettingBox/SearchSettingBox.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import {
3 | MDBJumbotron,
4 | MDBBtn,
5 | MDBRow,
6 | MDBCol,
7 | MDBCardTitle,
8 | MDBCardBody,
9 | MDBCloseIcon
10 | } from 'mdbreact';
11 | import Slider from 'rc-slider';
12 | import 'rc-slider/assets/index.css';
13 |
14 | import { countries } from "../../config/country";
15 | import "./SearchSettingBox.css";
16 |
17 | const createSliderWithTooltip = Slider.createSliderWithTooltip;
18 | const Range = createSliderWithTooltip(Slider.Range);
19 |
20 | export default class SearchSettingBox extends Component {
21 | constructor(props) {
22 | super(props);
23 | const temp = this.props.searchSetting
24 | this.state = {
25 | searchSetting: temp,
26 | }
27 |
28 | this.handleChangeGender = this.handleChangeGender.bind(this);
29 | }
30 |
31 | handleChangeSearchSetting(e) {
32 | e.preventDefault();
33 |
34 | }
35 |
36 | handleChangeGender(e) {
37 | let searchSetting = this.state.searchSetting;
38 | searchSetting.gender = e.target.value;
39 | this.setState({ searchSetting });
40 | }
41 |
42 | handleChangeLocation(e) {
43 | let searchSetting = this.state.searchSetting;
44 | searchSetting.location = e.target.value;
45 | this.setState({ searchSetting });
46 | }
47 |
48 | handleChangeAge(value) {
49 | let searchSetting = this.state.searchSetting;
50 | searchSetting.ageMin = value[0];
51 | searchSetting.ageMax = value[1];
52 | this.setState({ searchSetting });
53 |
54 | // this.setState({
55 | // ageMin: value[0],
56 | // ageMax: value[1],
57 | // })
58 | }
59 | onSearchSettingModalShow() {
60 | this.props.onSearchSettingModalShow(false);
61 | }
62 |
63 | render() {
64 | return (
65 | 93 |
66 |
67 |
68 |
71 |
72 | Search Filter Setting
73 |
74 |
75 |
76 |
145 |
146 |
147 |
148 |
149 |
150 |
151 | );
152 | }
153 | }
--------------------------------------------------------------------------------
/src/pages/Signup/Signup.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Signup.css';
3 | import {
4 | FormGroup,
5 | FormControl,
6 | HelpBlock,
7 | Button,
8 | Alert,
9 | } from 'react-bootstrap';
10 | import 'whatwg-fetch';
11 | import { RESTAPIUrl } from '../../config/config';
12 |
13 | class SignUp extends Component {
14 |
15 | constructor(props, context) {
16 | super(props, context);
17 |
18 | this.handleChange = this.handleChange.bind(this);
19 |
20 | this.handleChangeEmail = this.handleChangeEmail.bind(this);
21 |
22 | this.handleChangeConfirm = this.handleChangeConfirm.bind(this);
23 |
24 | this.handleChangeName = this.handleChangeName.bind(this);
25 |
26 | this.handleDismiss = this.handleDismiss.bind(this);
27 |
28 | this.handleShow = this.handleShow.bind(this);
29 |
30 |
31 | this.signUpClicked = this.signUpClicked.bind(this);
32 |
33 | this.displayAlert = this.displayAlert.bind(this);
34 |
35 | this.state = {
36 | password: '',
37 | email: '',
38 | confPass: '',
39 | name: '',
40 | signInLoading: false,
41 | show: false,
42 | signupStatus: 'success',
43 | signUpMessage: 'You have signed up successfully. Proceed to login.',
44 |
45 | };
46 | }
47 |
48 | validateEmail() {
49 | if(this.state.email.length ===0) return null;
50 | // eslint-disable-next-line
51 | var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
52 | return re.test(String(this.state.email).toLowerCase())?'success':'error';
53 | }
54 |
55 | getValidationState() {
56 | const length = this.state.password.length;
57 | if (length > 8) return 'success';
58 | else if (length > 5) return 'warning';
59 | else if (length > 0) return 'error';
60 | return null;
61 | }
62 |
63 | getValidationStateConf() {
64 | const length = this.state.confPass.length;
65 | if(length === 0 ) return null;
66 |
67 | else if( this.state.password === this.state.confPass ) return 'success';
68 |
69 | else return 'error';
70 |
71 |
72 | }
73 |
74 | handleChange(e) {
75 | this.setState({ password: e.target.value });
76 | }
77 |
78 | handleChangeEmail(e) {
79 | this.setState({ email: e.target.value });
80 | }
81 |
82 | handleChangeConfirm(e) {
83 | this.setState({ confPass: e.target.value });
84 | }
85 |
86 | handleChangeName(e) {
87 | this.setState({ name: e.target.value });
88 | }
89 |
90 | handleDismiss() {
91 | this.setState({ show: false });
92 | }
93 |
94 | handleShow() {
95 | this.setState({ show: true });
96 | }
97 |
98 | displayAlert() {
99 | return (
100 | 103 | { this.state.signUpMessage } 104 |
105 | 106 |
180 |
251 |
252 | { this.state.show ? this.displayAlert() : null}
253 |
254 |
255 |
256 |
257 |
258 | );
259 |
260 | }
261 | }
262 |
263 | export default SignUp;
264 |
265 |
--------------------------------------------------------------------------------
/server/socket/index.js:
--------------------------------------------------------------------------------
1 | const io = require('socket.io');
2 | const User = require('../models/User');
3 |
4 | /**
5 | * Initialize when a connection is made
6 | * @param {SocketIO.Socket} socket
7 | */
8 |
9 | function initSocket(client) {
10 | let id;
11 | let target_id;
12 | client.on("create_room", e => {
13 | id = e._id;
14 | client.join(e._id);
15 |
16 | User.findOneAndUpdate({
17 | ip_address: e.ip_address
18 | }, {
19 | $set: {
20 | online: true,
21 | connected_other: false,
22 | }
23 | }, {
24 | new: true
25 | }, function() {
26 | client.broadcast.to(e._id).emit('remove_old_session');
27 | });
28 | });
29 |
30 | // Find target user with blackUsers list and filter settings
31 | client.on("find_target", e => {
32 | var blackUsersList = e.blackUsersList;
33 | var signedInUser = e.signedInUser;
34 | var prevTargetUser = e.prevTargetUser;
35 |
36 | if (e.searchSetting.location == '') {
37 | var location = {};
38 | } else {
39 | var location = { location: e.searchSetting.location };
40 | }
41 |
42 | if (e.searchSetting.gender == '') {
43 | var gender = {};
44 | } else {
45 | var gender = { gender: e.searchSetting.gender };
46 | }
47 | ageMin = { age: { $gte: e.searchSetting.ageMin } };
48 | ageMax = { age: { $lte: e.searchSetting.ageMax } };
49 |
50 | let online = { online: true };
51 | let isDeleted = { isDeleted: false };
52 | let connected_other = { connected_other: false };
53 |
54 | User
55 | .find({
56 | $or: [
57 | { _id: signedInUser._id },
58 | { _id: prevTargetUser._id }
59 | ]
60 | }).updateMany({
61 | $set: {
62 | connected_other: false,
63 | }
64 | }, (err, user) => {
65 | client.to(prevTargetUser._id).emit('ignore', { status: 'ignore' });
66 | });
67 |
68 | User.find({
69 | $and: [
70 | location,
71 | gender,
72 | ageMin,
73 | ageMax,
74 | online,
75 | isDeleted,
76 | connected_other
77 | ]
78 | },
79 | function(err, docs) {
80 | if (!err) {
81 | console.log("Filtered user's number:", docs.length);
82 |
83 | if (docs.length == 0) {
84 | // Send message that there is none to find
85 | client.emit('search-none');
86 | } else {
87 | if (docs.length == 1 && docs[0]._id == signedInUser._id) {
88 | client.emit('search-none');
89 | } else {
90 | var available_user = [];
91 |
92 | console.log("Black user list length", blackUsersList.length, blackUsersList);
93 | for (let i = 0; i < docs.length; i++) {
94 | let blackNum = 0;
95 | for (let j = 0; j < blackUsersList.length; j++) {
96 | if (docs[i]._id == blackUsersList[j])
97 | blackNum = 1;
98 | }
99 | if (blackNum == 0) {
100 | available_user.push(docs[i]);
101 |
102 | }
103 | }
104 |
105 | console.log("available user Number", available_user.length);
106 | if (available_user.length != 0) {
107 | let targetUser = available_user[Math.floor(Math.random() * available_user.length)];
108 |
109 | User
110 | .find({
111 | $or: [
112 | { _id: signedInUser._id },
113 | { _id: targetUser._id }
114 | ]
115 | }).updateMany({
116 | $set: {
117 | connected_other: true,
118 | }
119 | }, (err, user) => {
120 | client.emit('find_target', targetUser);
121 | client.to(targetUser._id).emit('find_target', signedInUser);
122 | });
123 |
124 | } else {
125 | client.emit('available-none');
126 | }
127 | }
128 | // Remove users who contacted before
129 |
130 |
131 | }
132 | } else {
133 | throw err;
134 | }
135 | });
136 | });
137 |
138 | // Set target user for global variable in backend
139 | client.on("confirm-find_target", e => {
140 | target_id = e._id;
141 | });
142 |
143 | // Let target user know about typing now
144 | client.on("on-typing", e => {
145 | client.to(e._id).emit('on-typing');
146 | });
147 |
148 | client.on("sign-in", e => {
149 | let user_id = e.id;
150 | if (!user_id) return;
151 | client.user_id = user_id;
152 | if (clients[user_id]) {
153 | clients[user_id].push(client);
154 | } else {
155 | clients[user_id] = [client];
156 | }
157 | });
158 |
159 | client.on("message", e => {
160 | let targetId = e.to;
161 | // let sourceId = client.user_id;
162 | // client.to(sourceId).emit('message', e);
163 | client.emit('message', e);
164 | client.to(targetId).emit('message', e);
165 | // if (targetId && clients[targetId]) {
166 | // clients[targetId].forEach(cli => {
167 | // cli.emit("message", e);
168 | // });
169 | // }
170 |
171 | // if (sourceId && clients[sourceId]) {
172 | // clients[sourceId].forEach(cli => {
173 | // cli.emit("message", e);
174 | // });
175 | // }
176 | });
177 |
178 | client.on("confirm_remove_old_session", e => {
179 |
180 | client.leave(e._id);
181 |
182 | User.findOneAndUpdate({
183 | _id: target_id
184 | }, {
185 | $set: {
186 | connected_other: false,
187 | }
188 | }, {
189 | new: true
190 | }, function() {
191 | client.to(target_id).emit('target-logout');
192 | });
193 | });
194 |
195 | client.on("log-out", e => {
196 | User.findOneAndUpdate({
197 | _id: id
198 | }, {
199 | $set: {
200 | online: false,
201 | connected_other: false,
202 | }
203 | }, {
204 | new: true
205 | }, function() {
206 | User.findOneAndUpdate({
207 | _id: target_id
208 | }, {
209 | $set: {
210 | connected_other: false,
211 | }
212 | }, {
213 | new: true
214 | }, function() {
215 | client.emit('log-out', e);
216 | client.to(target_id).emit('target-logout');
217 | target_id = '';
218 | });
219 | // BroadCast socket for logout and disconnect
220 | });
221 | });
222 |
223 | client.on("confirm-target-logout", () => {
224 | target_id = '';
225 | });
226 |
227 | client.on('disconnect', e => {
228 | User.findOneAndUpdate({
229 | _id: id
230 | }, {
231 | $set: {
232 | online: false,
233 | connected_other: false,
234 | }
235 | }, {
236 | new: true
237 | }, function() {
238 | User.findOneAndUpdate({
239 | _id: target_id
240 | }, {
241 | $set: {
242 | connected_other: false,
243 | }
244 | }, {
245 | new: true
246 | }, function() {
247 | client.to(target_id).emit('target-disconnect');
248 | target_id = '';
249 | });
250 | });
251 | });
252 |
253 | client.on("confirm-target-disconnect", () => {
254 | target_id = '';
255 | })
256 |
257 | // client.on("disconnect", function() {
258 | // if (!client.user_id || !clients[client.user_id]) {
259 | // return;
260 | // }
261 | // let targetClients = clients[client.user_id];
262 | // for (let i = 0; i < targetClients.length; ++i) {
263 | // if (targetClients[i] == client) {
264 | // targetClients.splice(i, 1);
265 | // }
266 | // }
267 | // });
268 |
269 | // Socket for video chat
270 |
271 | // client.on('init', async() => {
272 | // id = await users.create(socket);
273 | // client.emit('init', { id });
274 | // });
275 | client.on('request', (data) => {
276 | // const receiver = users.get(data.to);
277 | // if (receiver) {
278 | // receiver.emit('request', { from: id });
279 | // }
280 | client.to(data.to).emit('request', { from: id });
281 | });
282 | client.on('call', (data) => {
283 | // const receiver = users.get(data.to);
284 | // if (receiver) {
285 | // receiver.emit('call', {...data, from: id });
286 | // } else {
287 | // socket.emit('failed');
288 | // }
289 | client.to(data.to).emit('call', {...data, from: id });
290 | })
291 | client.on('end', (data) => {
292 | // const receiver = users.get(data.to);
293 | // if (receiver) {
294 | // receiver.emit('end');
295 | // }
296 | client.to(data.to).emit('end');
297 | })
298 | // client.on('disconnect', () => {
299 | // // users.remove(id);
300 | // console.log(id, 'disconnected');
301 | // });
302 | }
303 |
304 | module.exports = (client) => {
305 | io({ serveClient: false })
306 | .listen(client, { log: true })
307 | .on('connection', initSocket);
308 | };
--------------------------------------------------------------------------------
/src/components/ProfileBox/ProfileBox.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import {
3 | MDBJumbotron,
4 | MDBBtn,
5 | MDBRow,
6 | MDBCol,
7 | MDBCardBody,
8 | MDBInput,
9 | MDBInputSelect,
10 | MDBCloseIcon
11 | } from 'mdbreact';
12 |
13 | import {
14 | NotificationContainer,
15 | NotificationManager
16 | } from "react-notifications";
17 | import jwt_decode from "jwt-decode";
18 | import { RESTAPIUrl } from '../../config/config';
19 | import { setInStorage } from "../../utils/storage";
20 | import { countries } from "../../config/country";
21 |
22 | import "./ProfileBox.css";
23 |
24 |
25 |
26 |
27 | export default class ChatBox extends Component {
28 | constructor(props) {
29 | super(props);
30 |
31 | this.state = {
32 | imageURL: `${RESTAPIUrl}/public/profile/${this.props.profileInfo.profile_image}`,
33 | userName: this.props.profileInfo.userName,
34 | age: this.props.profileInfo.age,
35 | location: this.props.profileInfo.location,
36 | gender: this.props.profileInfo.gender,
37 | imageHash: this.props.imageHash
38 | }
39 |
40 | this.handleUploadImage = this.handleUploadImage.bind(this);
41 | this.handleChangeProfile = this.handleChangeProfile.bind(this);
42 | }
43 | componentWillReceiveProps() {
44 | this.setState({
45 | imageURL: `${RESTAPIUrl}/public/profile/${this.props.profileInfo.profile_image}`
46 | });
47 | }
48 | handleUploadImage(ev) {
49 | ev.preventDefault();
50 |
51 | const data = new FormData();
52 | data.append('file', this.uploadInput.files[0]);
53 | data.append('fileName', this.fileName.value);
54 |
55 | fetch(`${RESTAPIUrl}/api/profile/image`, {
56 | method: 'POST',
57 | body: data,
58 | })
59 | .then(res =>res.json())
60 | .then(json => {
61 | if(json.status) {
62 | setInStorage('guest_signin', {token:json.token});
63 | this.props.updateProfile();
64 |
65 | // this.setState({imageHash: Date.now()});
66 |
67 | let decoded_token = jwt_decode(json.token);
68 | let signedInUser = decoded_token.user;
69 | // this.props.onChangeProfile(signedInUser);
70 | this.setState({
71 | imageURL: `${RESTAPIUrl}/public/profile/${signedInUser.profile_image}`,
72 | imageHash: Date.now()
73 | });
74 | } else {
75 | alert("Server Error");
76 | }
77 | })
78 |
79 |
80 | // .then((response) => {
81 | // response.json().then((body) => {
82 | // this.setState({ imageURL: `http://localhost:5000/${body.file}` });
83 | // });
84 | // });
85 | }
86 |
87 | handleChangeProfile(e) {
88 | e.preventDefault();
89 | const { userName, location, age, gender } = this.state;
90 | const { _id } = this.props.profileInfo;
91 | this.setState ({
92 | loginLoading: true,
93 | });
94 |
95 | fetch(RESTAPIUrl + '/api/profile/update', {
96 | method: 'POST',
97 | headers: {
98 | 'Content-Type': 'application/json'
99 | },
100 | body: JSON.stringify({
101 | _id,
102 | userName,
103 | location,
104 | age,
105 | gender
106 | }),
107 | }).then(res =>res.json())
108 | .then(json => {
109 | if(json.status) {
110 | setInStorage('guest_signin', {token:json.token});
111 | this.props.updateProfile();
112 | this.props.onProfileModalShow(false);
113 | NotificationManager.success(
114 | `${json.message}`
115 | );
116 | } else {
117 | NotificationManager.error(
118 | `${json.message}`
119 | );
120 | }
121 | });
122 | }
123 |
124 | onProfileModalShow() {
125 | this.props.onProfileModalShow(false);
126 | }
127 |
128 | handleChangeName(e) {
129 | this.setState({ userName: e.target.value });
130 | }
131 |
132 | handleChangeLocation(e) {
133 | this.setState({ location: e.target.value });
134 | }
135 |
136 | handleChangeAge(value) {
137 | this.setState({ age: value });
138 | }
139 |
140 | handleChangeGender(e) {
141 | this.setState({ gender: e.target.value });
142 | }
143 |
144 | render() {
145 | return (
146 |
147 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
254 |
255 |
256 |
257 |
258 |
259 |
260 | );
261 | }
262 | }
--------------------------------------------------------------------------------
/server/routes/api/sign-in.js:
--------------------------------------------------------------------------------
1 | const jwt = require('jsonwebtoken');
2 | const randomip = require('random-ip');
3 | const jwt_decode = require("jwt-decode");
4 | const fs = require('fs');
5 | const User = require('../../models/User');
6 | const UserSession = require('../../models/UserSession');
7 |
8 | module.exports = (app) => {
9 | //SignUp
10 | app.post('/api/account/signup', (req, res, next) => {
11 | const body = req.body;
12 | console.log(body);
13 |
14 | const {
15 | password
16 | } = body;
17 |
18 | const {
19 | name
20 | } = body;
21 |
22 | let {
23 | email
24 | } = body;
25 |
26 | if (!email) {
27 | return res.send({
28 | success: false,
29 | message: 'Error: Email cannot be blank.'
30 | });
31 | }
32 | if (!password) {
33 | return res.send({
34 | success: false,
35 | message: 'Error: Password cannot be blank.'
36 | });
37 | }
38 |
39 | email = email.toLowerCase();
40 | email = email.trim();
41 |
42 | User.find({
43 | email: email,
44 | },
45 | (err, prevUsers) => {
46 | console.log(prevUsers);
47 | if (err) {
48 | return res.status(500).send({
49 | message: 'Error: Server Error',
50 | });
51 | } else if (prevUsers.length != 0) {
52 | return res.status(200).send({
53 | message: 'Error: Account Already Exists'
54 | })
55 | } else {
56 | const newUser = new User();
57 |
58 | newUser.email = email;
59 | newUser.password = newUser.generateHash(password);
60 | newUser.name = name;
61 | console.log(newUser.password);
62 | newUser.save((err, user) => {
63 | if (err) {
64 | return res.status(500).send({
65 | message: 'Error: Server Error',
66 | });
67 | } else {
68 | return res.status(200).send({
69 | message: "Signed Up",
70 | });
71 | }
72 |
73 | });
74 | }
75 | });
76 | });
77 |
78 | app.post('/api/account/signin', (req, res, next) => {
79 | const { body } = req;
80 |
81 | const {
82 | password
83 | } = body;
84 |
85 | let {
86 | email
87 | } = body;
88 |
89 | if (!email) {
90 | return res.status(300).send({
91 | message: 'Error: Email cannot be blank.',
92 | respId: 'LIE1'
93 | });
94 | }
95 |
96 | if (!password) {
97 | return res.send({
98 | success: false,
99 | message: 'Error Password cannot be blank.',
100 | respId: 'LIE2',
101 | });
102 | }
103 |
104 | email = email.toLowerCase();
105 | email = email.trim();
106 |
107 | User.find({
108 | email: email
109 | }, (err, users) => {
110 | if (err) {
111 | console.log('err2:', err);
112 | return res.send({
113 | success: false,
114 | message: 'Error: server error',
115 | respId: 'LIE3',
116 | });
117 | }
118 |
119 | if (users.length != 1) {
120 | return res.send({
121 | success: false,
122 | message: 'Error: Invalid',
123 | respId: 'LIE4',
124 | });
125 | } else {
126 | const user = users[0];
127 | console.log(password, user.password);
128 | if (!user.validPassword(password)) {
129 | return res.send({
130 | success: false,
131 | message: 'Error: Wrong Email or Password',
132 | respId: 'LIE5',
133 | });
134 | } else {
135 | const userSession = new UserSession();
136 | userSession.userId = user._id;
137 | userSession.save((err, doc) => {
138 | if (err) {
139 | console.log(err);
140 | return res.send({
141 | success: false,
142 | message: 'Error: Server Error',
143 | respId: 'LIE6',
144 | });
145 | } else {
146 | return res.send({
147 | success: true,
148 | message: 'Valid sign in',
149 | token: doc._id,
150 | name: user.name,
151 | respId: 'LIS',
152 | });
153 | }
154 |
155 | });
156 | }
157 | }
158 |
159 |
160 |
161 | });
162 |
163 | });
164 |
165 | app.get('/api/account/logout', (req, res, next) => {
166 | const { query } = req;
167 | const { token } = query;
168 |
169 | UserSession.findOneAndUpdate({
170 | _id: token,
171 | isDeleted: false,
172 | }, {
173 | $set: {
174 | isDeleted: true,
175 | }
176 | }, null, (err, sessions) => {
177 | if (err) {
178 | console.log(err);
179 | return res.send({
180 | success: false,
181 | message: 'Error: Server Error',
182 | });
183 | } else {
184 | return res.send({
185 | success: true,
186 | message: 'Logged Out',
187 | });
188 | }
189 | });
190 |
191 | });
192 |
193 | app.get('/api/account/verify', (req, res, next) => {
194 | // Get the token
195 | const { query } = req;
196 | const { token } = query;
197 | // ?token=test
198 | // Verify the token is one of a kind and it's not deleted.
199 | UserSession.find({
200 | _id: token,
201 | isDeleted: false
202 | }, (err, sessions) => {
203 | if (err) {
204 | console.log(err);
205 | return res.send({
206 | success: false,
207 | message: 'Error: Server error'
208 | });
209 | }
210 | if (sessions.length != 1) {
211 | return res.send({
212 | success: false,
213 | message: 'Error: Invalid'
214 | });
215 | } else {
216 | // DO ACTION
217 | return res.send({
218 | success: true,
219 | message: 'Good'
220 | });
221 | }
222 | });
223 | });
224 |
225 | app.post('/api/guest/signin', (req, res, next) => {
226 | // Get the client's IP Address
227 | var ip_address = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
228 | ip_address = ip_address.substr(ip_address.lastIndexOf(":") + 1);
229 |
230 | // var ip_address = randomip('192.168.2.0', 24);
231 | console.log("sign in ip address")
232 |
233 | const { userName, age, gender, location } = req.body;
234 |
235 | if (age > 99 || age < 13) {
236 | return res.status(500).send({
237 | status: false,
238 | message: 'Validation Error: Specified attribute is not between the expected ages of 13 and 99.',
239 | });
240 | }
241 |
242 | User.find({
243 | ip_address: ip_address,
244 | },
245 | (err, prevUsers) => {
246 | if (err) {
247 | return res.status(500).send({
248 | status: false,
249 | message: 'Error: Server Error',
250 | });
251 | }
252 | // When user already exist with same ip address
253 | else if (prevUsers.length != 0) {
254 | // Find user with specified ip address and update user's information
255 | User.findOneAndUpdate({
256 | ip_address: ip_address
257 | }, {
258 | $set: {
259 | userName: userName,
260 | age: age,
261 | gender: gender,
262 | location: location,
263 | ip_address: ip_address,
264 | }
265 | }, {
266 | new: true
267 | }, (err, user) => {
268 | if (err) {
269 | console.log(err);
270 | return res.status(500).send({
271 | status: false,
272 | message: 'Error: Server Error',
273 | })
274 | } else {
275 | console.log(user);
276 | let token = jwt.sign({ user: user },
277 | 'secret', {
278 | expiresIn: 31556926 // 1 year in second
279 | },
280 | (err, token) => {
281 | if (err) {
282 | console.log('Failed to create token', err);
283 | } else {
284 | return res.status(200).send({
285 | status: true,
286 | message: "SignIn success but user information changed a little",
287 | token: token
288 | });
289 | }
290 | }
291 | )
292 | }
293 | });
294 |
295 | }
296 | // Create new user with client's ip address
297 | else {
298 | const newUser = new User();
299 |
300 | newUser.userName = userName;
301 | newUser.age = age;
302 | newUser.gender = gender;
303 | newUser.location = location;
304 | newUser.ip_address = ip_address;
305 |
306 | newUser.save((err, user) => {
307 | if (err) {
308 | return res.status(500).send({
309 | message: 'Error: Server Error',
310 | });
311 | } else {
312 | // File copy as default png file according to gender(Male or Female)
313 | if (user.gender == "Male") {
314 | fs.copyFile('public/profile/male.png', `public/profile/${user.id}.png`, (err) => {
315 | if (err) throw err;
316 | });
317 | } else if (user.gender == "Female") {
318 | fs.copyFile('public/profile/female.png', `public/profile/${user.id}.png`, (err) => {
319 | if (err) throw err;
320 | });
321 | }
322 |
323 |
324 | User.findOneAndUpdate({
325 | _id: user.id
326 | }, {
327 | $set: {
328 | profile_image: `${user.id}.png`
329 | }
330 | }, {
331 | new: true
332 | }, (err, newUser) => {
333 | let token = jwt.sign({ user: newUser },
334 | 'secret', {
335 | expiresIn: 31556926 // 1 year in second
336 | },
337 | (err, token) => {
338 | if (err) {
339 | console.log('Failed to create token', err);
340 | } else {
341 | console.log(token);
342 | return res.status(200).send({
343 | status: true,
344 | message: "SignIn success",
345 | token: token
346 | });
347 | }
348 | }
349 | )
350 | });
351 | }
352 | });
353 | }
354 | }
355 | )
356 |
357 | });
358 |
359 | app.post('/api/guest/verify', (req, res, next) => {
360 | var decoded_token = jwt_decode(req.body.token);
361 | User.find({
362 | _id: decoded_token.user._id,
363 | },
364 | (err, user) => {
365 | if (user.length > 0) {
366 | if (user[0].isDeleted == false) {
367 | return res.send({
368 | status: true
369 | });
370 | }
371 | return res.send({
372 | status: false
373 | });
374 | }
375 | return res.send({
376 | status: false
377 | })
378 |
379 | });
380 |
381 | });
382 |
383 | app.post('/api/guest/ipverify', (req, res, next) => {
384 | var ip_address = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
385 | ip_address = ip_address.substr(ip_address.lastIndexOf(":") + 1);
386 | User.find({
387 | ip_address: ip_address
388 | },
389 | (err, user) => {
390 | if (user.length != 0) {
391 | if (user[0].isDeleted == false) {
392 | console.log("user's information", user[0]);
393 | return res.send({
394 | status: true
395 | });
396 | }
397 | return res.send({
398 | status: false
399 | });
400 | } else {
401 | return res.send({
402 | status: true,
403 | message: 'Not match'
404 | });
405 | }
406 |
407 | });
408 |
409 | });
410 |
411 |
412 | };
--------------------------------------------------------------------------------
/src/pages/AdminManage/AdminManage.css:
--------------------------------------------------------------------------------
1 | a {
2 | transition: background 0.2s, color 0.2s;
3 | }
4 |
5 | .container {
6 | display: flex;
7 | justify-content: center;
8 | }
9 |
10 | table tr {
11 | height: 40px;
12 | }
13 |
14 | .table-responsive>table>tbody>tr>td {
15 | padding-top: 7px;
16 | padding-bottom: 8px;
17 | }
18 |
19 | table tr img {
20 | width: 35px;
21 | height: 35px;
22 | border-radius: 50%;
23 | }
24 |
25 | .admin-profile {
26 | position: absolute;
27 | top: 35%;
28 | left: 50%;
29 | transform: translate(-50%, -50%);
30 | }
31 |
32 | .user-profile {
33 | position: absolute;
34 | top: 30px;
35 | left: 50%;
36 | transform: translate(-50%, 0%);
37 | }
38 |
39 | .avatar-container {
40 | position: relative;
41 | background-image: url('/07.jpg');
42 | height: 11rem;
43 | background-position: 50%;
44 | background-size: cover;
45 | background-repeat: no-repeat;
46 | padding: 0 1.875rem;
47 | }
48 |
49 | .avatar-container img {
50 | position: absolute;
51 | left: 50%;
52 | top: 45%;
53 | transform: translate(-50%, -50%);
54 | width: 120px;
55 | height: 120px;
56 | border-radius: 50%;
57 | border: 3px solid white;
58 | }
59 |
60 | .avatar-container h2 {
61 | position: absolute;
62 | bottom: 0px;
63 | left: 50%;
64 | transform: translate(-50%, 0);
65 | color: white;
66 | font-size: 1.375rem;
67 | font-weight: 300;
68 | }
69 |
70 | .contact-title,
71 | .report-title {
72 | margin-top: 2rem;
73 | padding: .625rem 1.25rem;
74 | color: #a2a2a2;
75 | }
76 |
77 | .contact-body {}
78 |
79 | .contact-sub-body,
80 | .report-sub-body {
81 | display: flex;
82 | justify-content: space-between;
83 | border-bottom: 1px solid #dadce0;
84 | padding: 1rem 1.25rem;
85 | align-items: center;
86 | }
87 |
88 | .contact-sub-left {
89 | font-weight: 600;
90 | font-size: 15px;
91 | }
92 |
93 | .contact-sub-left i {
94 | width: 20px;
95 | margin-right: 10px;
96 | color: #949aa2;
97 | }
98 |
99 | .contact-sub-right {}
100 |
101 | .report-sub-left img {
102 | display: inline;
103 | width: 30px;
104 | height: 30px;
105 | border-radius: 50%;
106 | margin-right: 10px;
107 | }
108 |
109 |
110 | /* Switch button style */
111 |
112 | .button-switch {
113 | font-size: 1em;
114 | height: 1.875em;
115 | position: relative;
116 | width: 4.5em;
117 | }
118 |
119 | .button-switch .lbl-off,
120 | .button-switch .lbl-on {
121 | cursor: pointer;
122 | display: block;
123 | font-size: 0.9em;
124 | font-weight: bold;
125 | line-height: 1em;
126 | position: absolute;
127 | top: 0.5em;
128 | -webkit-transition: opacity 0.25s ease-out 0.1s;
129 | transition: opacity 0.25s ease-out 0.1s;
130 | text-transform: uppercase;
131 | }
132 |
133 | .button-switch .lbl-off {
134 | right: 0.4375em;
135 | }
136 |
137 | .button-switch .lbl-on {
138 | color: #fefefe;
139 | opacity: 0;
140 | left: 0.4375em;
141 | }
142 |
143 | .button-switch .switch {
144 | -webkit-appearance: none;
145 | -moz-appearance: none;
146 | appearance: none;
147 | height: 0;
148 | font-size: 1em;
149 | left: 0;
150 | line-height: 0;
151 | outline: none;
152 | position: absolute;
153 | top: 0;
154 | width: 0;
155 | }
156 |
157 | .button-switch .switch:before,
158 | .button-switch .switch:after {
159 | content: "";
160 | font-size: 1em;
161 | position: absolute;
162 | }
163 |
164 | .button-switch .switch:before {
165 | border-radius: 1.25em;
166 | background: #bdc3c7;
167 | height: 1.875em;
168 | left: -0.25em;
169 | top: -0.1875em;
170 | -webkit-transition: background-color 0.25s ease-out 0.1s;
171 | transition: background-color 0.25s ease-out 0.1s;
172 | width: 4.5em;
173 | }
174 |
175 | .button-switch .switch:after {
176 | box-shadow: 0 0.0625em 0.375em 0 #666;
177 | border-radius: 50%;
178 | background: #fefefe;
179 | height: 1.5em;
180 | -webkit-transform: translate(0, 0);
181 | transform: translate(0, 0);
182 | -webkit-transition: -webkit-transform 0.25s ease-out 0.1s;
183 | transition: -webkit-transform 0.25s ease-out 0.1s;
184 | transition: transform 0.25s ease-out 0.1s;
185 | transition: transform 0.25s ease-out 0.1s, -webkit-transform 0.25s ease-out 0.1s;
186 | width: 1.5em;
187 | }
188 |
189 | .button-switch .switch:checked:after {
190 | -webkit-transform: translate(2.5em, 0);
191 | transform: translate(2.5em, 0);
192 | }
193 |
194 | .button-switch .switch:checked~.lbl-off {
195 | opacity: 0;
196 | }
197 |
198 | .button-switch .switch:checked~.lbl-on {
199 | opacity: 1;
200 | }
201 |
202 | .button-switch .switch#switch-orange:checked:before {
203 | background: #e67e22;
204 | }
205 |
206 | .button-switch .switch#switch-blue:checked:before {
207 | background: #3498db;
208 | }
209 |
210 |
211 | /* Loading Icon style */
212 |
213 | @keyframes rotate-loading {
214 | 0% {
215 | transform: rotate(0deg);
216 | -ms-transform: rotate(0deg);
217 | -webkit-transform: rotate(0deg);
218 | -o-transform: rotate(0deg);
219 | -moz-transform: rotate(0deg);
220 | }
221 | 100% {
222 | transform: rotate(360deg);
223 | -ms-transform: rotate(360deg);
224 | -webkit-transform: rotate(360deg);
225 | -o-transform: rotate(360deg);
226 | -moz-transform: rotate(360deg);
227 | }
228 | }
229 |
230 | @-moz-keyframes rotate-loading {
231 | 0% {
232 | transform: rotate(0deg);
233 | -ms-transform: rotate(0deg);
234 | -webkit-transform: rotate(0deg);
235 | -o-transform: rotate(0deg);
236 | -moz-transform: rotate(0deg);
237 | }
238 | 100% {
239 | transform: rotate(360deg);
240 | -ms-transform: rotate(360deg);
241 | -webkit-transform: rotate(360deg);
242 | -o-transform: rotate(360deg);
243 | -moz-transform: rotate(360deg);
244 | }
245 | }
246 |
247 | @-webkit-keyframes rotate-loading {
248 | 0% {
249 | transform: rotate(0deg);
250 | -ms-transform: rotate(0deg);
251 | -webkit-transform: rotate(0deg);
252 | -o-transform: rotate(0deg);
253 | -moz-transform: rotate(0deg);
254 | }
255 | 100% {
256 | transform: rotate(360deg);
257 | -ms-transform: rotate(360deg);
258 | -webkit-transform: rotate(360deg);
259 | -o-transform: rotate(360deg);
260 | -moz-transform: rotate(360deg);
261 | }
262 | }
263 |
264 | @-o-keyframes rotate-loading {
265 | 0% {
266 | transform: rotate(0deg);
267 | -ms-transform: rotate(0deg);
268 | -webkit-transform: rotate(0deg);
269 | -o-transform: rotate(0deg);
270 | -moz-transform: rotate(0deg);
271 | }
272 | 100% {
273 | transform: rotate(360deg);
274 | -ms-transform: rotate(360deg);
275 | -webkit-transform: rotate(360deg);
276 | -o-transform: rotate(360deg);
277 | -moz-transform: rotate(360deg);
278 | }
279 | }
280 |
281 | @keyframes rotate-loading {
282 | 0% {
283 | transform: rotate(0deg);
284 | -ms-transform: rotate(0deg);
285 | -webkit-transform: rotate(0deg);
286 | -o-transform: rotate(0deg);
287 | -moz-transform: rotate(0deg);
288 | }
289 | 100% {
290 | transform: rotate(360deg);
291 | -ms-transform: rotate(360deg);
292 | -webkit-transform: rotate(360deg);
293 | -o-transform: rotate(360deg);
294 | -moz-transform: rotate(360deg);
295 | }
296 | }
297 |
298 | @-moz-keyframes rotate-loading {
299 | 0% {
300 | transform: rotate(0deg);
301 | -ms-transform: rotate(0deg);
302 | -webkit-transform: rotate(0deg);
303 | -o-transform: rotate(0deg);
304 | -moz-transform: rotate(0deg);
305 | }
306 | 100% {
307 | transform: rotate(360deg);
308 | -ms-transform: rotate(360deg);
309 | -webkit-transform: rotate(360deg);
310 | -o-transform: rotate(360deg);
311 | -moz-transform: rotate(360deg);
312 | }
313 | }
314 |
315 | @-webkit-keyframes rotate-loading {
316 | 0% {
317 | transform: rotate(0deg);
318 | -ms-transform: rotate(0deg);
319 | -webkit-transform: rotate(0deg);
320 | -o-transform: rotate(0deg);
321 | -moz-transform: rotate(0deg);
322 | }
323 | 100% {
324 | transform: rotate(360deg);
325 | -ms-transform: rotate(360deg);
326 | -webkit-transform: rotate(360deg);
327 | -o-transform: rotate(360deg);
328 | -moz-transform: rotate(360deg);
329 | }
330 | }
331 |
332 | @-o-keyframes rotate-loading {
333 | 0% {
334 | transform: rotate(0deg);
335 | -ms-transform: rotate(0deg);
336 | -webkit-transform: rotate(0deg);
337 | -o-transform: rotate(0deg);
338 | -moz-transform: rotate(0deg);
339 | }
340 | 100% {
341 | transform: rotate(360deg);
342 | -ms-transform: rotate(360deg);
343 | -webkit-transform: rotate(360deg);
344 | -o-transform: rotate(360deg);
345 | -moz-transform: rotate(360deg);
346 | }
347 | }
348 |
349 | @keyframes loading-text-opacity {
350 | 0% {
351 | opacity: 0
352 | }
353 | 20% {
354 | opacity: 0
355 | }
356 | 50% {
357 | opacity: 1
358 | }
359 | 100% {
360 | opacity: 0
361 | }
362 | }
363 |
364 | @-moz-keyframes loading-text-opacity {
365 | 0% {
366 | opacity: 0
367 | }
368 | 20% {
369 | opacity: 0
370 | }
371 | 50% {
372 | opacity: 1
373 | }
374 | 100% {
375 | opacity: 0
376 | }
377 | }
378 |
379 | @-webkit-keyframes loading-text-opacity {
380 | 0% {
381 | opacity: 0
382 | }
383 | 20% {
384 | opacity: 0
385 | }
386 | 50% {
387 | opacity: 1
388 | }
389 | 100% {
390 | opacity: 0
391 | }
392 | }
393 |
394 | @-o-keyframes loading-text-opacity {
395 | 0% {
396 | opacity: 0
397 | }
398 | 20% {
399 | opacity: 0
400 | }
401 | 50% {
402 | opacity: 1
403 | }
404 | 100% {
405 | opacity: 0
406 | }
407 | }
408 |
409 | .loading {
410 | position: absolute;
411 | height: 70px;
412 | width: 70px;
413 | left: calc( 50% - 35px);
414 | top: calc( 50% - 35px);
415 | transform: translate(-50%, -50%);
416 | border-radius: 100%;
417 | }
418 |
419 | .loading-container {
420 | position: absolute;
421 | width: 100%;
422 | height: calc(100vh - 300px);
423 | left: 0;
424 | top: 0px;
425 | /* top: calc( 40% - 50px); */
426 | border-radius: 100%;
427 | margin: 40px auto
428 | }
429 |
430 | .loading {
431 | border: 2px solid transparent;
432 | border-color: transparent grey transparent grey;
433 | -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
434 | -moz-transform-origin: 50% 50%;
435 | -o-animation: rotate-loading 1.5s linear 0s infinite normal;
436 | -o-transform-origin: 50% 50%;
437 | -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
438 | -webkit-transform-origin: 50% 50%;
439 | animation: rotate-loading 1.5s linear 0s infinite normal;
440 | transform-origin: 50% 50%;
441 | }
442 |
443 | .loading-container:hover .loading {
444 | border-color: transparent grey transparent grey;
445 | }
446 |
447 | .loading-container:hover .loading,
448 | .loading-container .loading {
449 | -webkit-transition: all 0.5s ease-in-out;
450 | -moz-transition: all 0.5s ease-in-out;
451 | -ms-transition: all 0.5s ease-in-out;
452 | -o-transition: all 0.5s ease-in-out;
453 | transition: all 0.5s ease-in-out;
454 | }
455 |
456 | #loading-text {
457 | -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
458 | -o-animation: loading-text-opacity 2s linear 0s infinite normal;
459 | -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
460 | animation: loading-text-opacity 2s linear 0s infinite normal;
461 | color: grey;
462 | font-family: "Helvetica Neue, "Helvetica", ""arial";
463 | font-size: 10px;
464 | font-weight: bold;
465 | opacity: 0;
466 | position: absolute;
467 | text-align: center;
468 | text-transform: uppercase;
469 | top: calc( 50% - 10px);
470 | left: calc( 50% - 50px);
471 | width: 100px;
472 | height: 20px;
473 | }
474 |
475 |
476 | /* Origin style */
477 |
478 | a:hover,
479 | a:focus {
480 | text-decoration: none;
481 | }
482 |
483 | #wrapper {
484 | width: 100vw;
485 | height: 100vh;
486 | padding-left: 0;
487 | transition: all 0.5s ease;
488 | position: relative;
489 | }
490 |
491 | #sidebar-wrapper {
492 | z-index: 2;
493 | position: fixed;
494 | left: 0px;
495 | width: 0;
496 | height: 100%;
497 | overflow-y: auto;
498 | overflow-x: hidden;
499 | background: #31353D;
500 | transition: all 0.5s ease;
501 | }
502 |
503 | #wrapper.toggled #sidebar-wrapper {
504 | width: 250px;
505 | }
506 |
507 | .sidebar-brand {
508 | position: absolute;
509 | top: 0;
510 | width: 250px;
511 | padding: 20px 70px;
512 | }
513 |
514 | .sidebar-nav {
515 | position: absolute;
516 | top: 75px;
517 | width: 250px;
518 | margin: 0;
519 | padding: 0;
520 | list-style: none;
521 | }
522 |
523 | .sidebar-nav>li {
524 | text-indent: 10px;
525 | line-height: 42px;
526 | }
527 |
528 | .sidebar-nav>li a {
529 | display: block;
530 | text-decoration: none;
531 | color: #757575;
532 | font-weight: 600;
533 | font-size: 18px;
534 | }
535 |
536 | .sidebar-nav>li>a:hover,
537 | .sidebar-nav>li.active>a {
538 | text-decoration: none;
539 | color: #fff;
540 | }
541 |
542 | .sidebar-nav>li>a i.fa {
543 | font-size: 24px;
544 | width: 60px;
545 | }
546 |
547 |
548 | /* Wrapper Style */
549 |
550 | #navbar-wrapper {
551 | width: 100%;
552 | position: absolute;
553 | z-index: 2;
554 | }
555 |
556 | #wrapper.toggled #navbar-wrapper {
557 | position: absolute;
558 | margin-right: -250px;
559 | }
560 |
561 | #navbar-wrapper .navbar {
562 | border-width: 0 0 0 0;
563 | background-color: #eee;
564 | font-size: 24px;
565 | margin-bottom: 0;
566 | border-radius: 0;
567 | }
568 |
569 | #navbar-wrapper .navbar a {
570 | color: #757575;
571 | }
572 |
573 | #navbar-wrapper .navbar a:hover {
574 | color: #F8BE12;
575 | }
576 |
577 | .content-wrapper {
578 | width: 100%;
579 | position: absolute;
580 | padding: 15px;
581 | top: 100px;
582 | height: calc( 100% - 56px);
583 | }
584 |
585 | #wrapper.toggled .content-wrapper {
586 | position: absolute;
587 | margin-right: -250px;
588 | }
589 |
590 |
591 | /* Toggle Wrapper */
592 |
593 | #wrapper.expand-wrapper {
594 | padding-left: 60px;
595 | }
596 |
597 | #wrapper.shrink-wrapper {
598 | padding-left: 250px;
599 | }
600 |
601 | #sidebar-wrapper.expand-sidebar {
602 | width: 250px;
603 | }
604 |
605 | #sidebar-wrapper.shrink-sidebar {
606 | width: 60px;
607 | }
608 |
609 | @media (min-width: 992px) {
610 | #wrapper {
611 | padding-left: 250px;
612 | }
613 | #wrapper.toggled {
614 | padding-left: 60px;
615 | }
616 | #sidebar-wrapper {
617 | width: 250px;
618 | }
619 | #wrapper.toggled #sidebar-wrapper {
620 | width: 60px;
621 | }
622 | #wrapper.toggled #navbar-wrapper {
623 | position: absolute;
624 | margin-right: -190px;
625 | }
626 | #wrapper.toggled .content-wrapper {
627 | position: absolute;
628 | margin-right: -190px;
629 | }
630 | #navbar-wrapper {
631 | position: relative;
632 | }
633 | #wrapper.toggled {
634 | padding-left: 60px;
635 | }
636 | .content-wrapper {
637 | position: relative;
638 | top: 0;
639 | }
640 | #wrapper.toggled #navbar-wrapper,
641 | #wrapper.toggled .content-wrapper {
642 | position: relative;
643 | margin-right: 60px;
644 | }
645 | }
646 |
647 | @media (min-width: 768px) and (max-width: 991px) {
648 | #wrapper {
649 | padding-left: 60px;
650 | }
651 | #sidebar-wrapper {
652 | width: 60px;
653 | }
654 | #wrapper.toggled #navbar-wrapper {
655 | position: absolute;
656 | margin-right: -250px;
657 | }
658 | #wrapper.toggled .content-wrapper {
659 | position: absolute;
660 | margin-right: -250px;
661 | }
662 | #navbar-wrapper {
663 | position: relative;
664 | }
665 | #wrapper.toggled {
666 | padding-left: 250px;
667 | }
668 | .content-wrapper {
669 | position: relative;
670 | top: 0;
671 | }
672 | #wrapper.toggled #navbar-wrapper,
673 | #wrapper.toggled .content-wrapper {
674 | position: relative;
675 | margin-right: 250px;
676 | }
677 | }
678 |
679 | @media (max-width: 767px) {
680 | #wrapper {
681 | padding-left: 0;
682 | }
683 | #sidebar-wrapper {
684 | width: 0;
685 | }
686 | #wrapper.toggled #sidebar-wrapper {
687 | width: 250px;
688 | }
689 | #wrapper.toggled #navbar-wrapper {
690 | position: absolute;
691 | margin-right: -250px;
692 | }
693 | #wrapper.toggled .content-wrapper {
694 | position: absolute;
695 | margin-right: -250px;
696 | }
697 | #navbar-wrapper {
698 | position: relative;
699 | }
700 | #wrapper.toggled {
701 | padding-left: 250px;
702 | }
703 | .content-wrapper {
704 | position: relative;
705 | top: 0;
706 | }
707 | #wrapper.toggled #navbar-wrapper,
708 | #wrapper.toggled .content-wrapper {
709 | position: relative;
710 | margin-right: 250px;
711 | }
712 | #wrapper.expand-wrapper {
713 | padding-left: 0px;
714 | }
715 | #wrapper.shrink-wrapper {
716 | padding-left: 0px;
717 | }
718 | #sidebar-wrapper.expand-sidebar {
719 | width: 60px;
720 | }
721 | #sidebar-wrapper.shrink-sidebar {
722 | width: 0px;
723 | }
724 | }
--------------------------------------------------------------------------------