67 | {Message}
68 |
{ this.el = el; }} />
69 |
70 | );
71 | }
72 | }
73 |
74 |
75 | const mapStateToProps = (state) => {
76 | return {
77 | setCurrentFriend: state.setCurrentFriendReducer,
78 | };
79 | };
80 | export default connect(mapStateToProps)(MessagesLog);
81 |
82 |
--------------------------------------------------------------------------------
/src/components/newMessage.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { withStyles } from 'material-ui/styles';
3 | import IconButton from 'material-ui/IconButton';
4 | import Input, { InputAdornment } from 'material-ui/Input';
5 | import InsertEmoticon from 'material-ui-icons/InsertEmoticon';
6 | import { FormControl } from 'material-ui/Form';
7 | import Emoji from './emoji'
8 |
9 | const styles = theme => ({
10 |
11 | container: {
12 | display: 'flex',
13 | flexWrap: 'wrap',
14 | },
15 | inputLabelFocused: {
16 | color: '#3BA8C6',
17 | },
18 | inputInkbar: {
19 | '&:before': {
20 | backgroundColor: '#79848E',
21 | },
22 | '&:after': {
23 | backgroundColor: '#3BA8C6',
24 | },
25 | }
26 | })
27 |
28 | class NewMessage extends Component {
29 | constructor(props){
30 | super(props);
31 | this.state = {
32 | emojiClicked: false,
33 | selectedEmoji: '',
34 | value: ''
35 | }
36 | this.emojiHandle = this.emojiHandle.bind(this);
37 | this.handleChange = this.handleChange.bind(this);
38 | this.handleEnterKey = this.handleEnterKey.bind(this);
39 |
40 | }
41 |
42 | emojiHandle() {
43 |
44 | this.setState({
45 | emojiClicked: !this.state.emojiClicked
46 | });
47 | }
48 |
49 |
50 | handleChange(evt) {
51 | if (this.state.selectedEmoji) {
52 | this.addSpecialChar(evt);
53 | }
54 | }
55 |
56 | handleEnterKey(e) {
57 | const body = e.target.value
58 |
59 | if (e.keyCode === 13 && body) {
60 | this.setState({
61 | emojiClicked: false
62 | });
63 |
64 | this.props.handleSubmit(e);
65 | }
66 | }
67 |
68 | render() {
69 | const { classes } = this.props;
70 |
71 | return (
72 |
73 |
74 |
75 |
76 |
77 | handleSubmit(e)}
84 | onKeyUp={(e) => this.handleEnterKey(e)}
85 | classes={{
86 | inkbar: classes.inputInkbar,
87 | }}
88 | inputRef={(thisInput) => {this.txtMessage = thisInput}}
89 | endAdornment={
90 |
91 |
92 |
93 |
94 | {this.state.emojiClicked ?
: null}
95 |
96 | }
97 | />
98 |
99 |
100 |
101 |
102 | );
103 | }
104 | }
105 |
106 | export default withStyles(styles)(NewMessage);
107 |
--------------------------------------------------------------------------------
/src/components/searchList.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { withStyles } from 'material-ui/styles';
3 | import List, { ListItem, ListItemText } from 'material-ui/List';
4 | import Avatar from './skypeAvatar';
5 | //import IconButton from "material-ui/IconButton";
6 | import uuidv1 from "uuid/v1";
7 | //import FriendConfirmation from "./addFriendConfirmation";
8 | import config from "../config/config";
9 | import AddIcon from 'material-ui-icons/Add';
10 | //import Icon from 'material-ui/Icon';
11 | import Button from 'material-ui/Button';
12 | const styles = theme => ({
13 | root: {
14 | width: '100%',
15 | backgroundColor:'#fff'
16 | },
17 | button: {
18 | minWidth:10,
19 | height:"46px",
20 | width:"46px",
21 | borderRadius:'50%',
22 | fontSize:24,
23 | backgroundColor:'#0d56a5',
24 | color:'#fff'
25 | },
26 | });
27 |
28 | class SearchList extends Component {
29 | constructor() {
30 | super();
31 | this.requestFriends = this.requestFriends.bind(this);
32 | }
33 |
34 | requestFriends(user) {
35 | let token = localStorage.getItem("token");
36 | let url = `http://localhost:3001/user/friend/add/${uuidv1()}`;
37 | let formData = {
38 | fullName: user.profile.firstName + ' ' + user.profile.lastName,
39 | avatarURL: user.profile.avatarURL,
40 | userId: user._id
41 | }
42 | if (user) {
43 | const searchParams = Object.keys(formData)
44 | .map(key => {
45 | return (
46 | encodeURIComponent(key) + "=" + encodeURIComponent(formData[key])
47 | );
48 | })
49 | .join("&");
50 |
51 | fetch(url, {
52 | method: "POST",
53 | headers: {
54 | Authorization: `TOKEN ${token}`,
55 | "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
56 | },
57 | body: searchParams
58 | })
59 | .then(res => res.json())
60 | .then(data => {
61 | // console.log(data );
62 | window.location.reload();
63 |
64 | })
65 | .catch(err => console.log(err));
66 | } else {
67 | console.log({ Error: "Fields are required" }); //Handle errors here...
68 | }
69 | }
70 | handleClickOpen = () => {
71 | console.log(this.state)
72 | this.setState({ open: true });
73 | };
74 | render() {
75 | const { classes } = this.props;
76 |
77 | let listItems = "";
78 | if(this.props.users !== ''){
79 | listItems = this.props.users.usersList.map(item => {
80 | // let avatarURL = `${config.BASE_URL}images/avatars/${newAvatar}`;
81 | //console.log(item,`${config.BASE_URL}images/avatars/${item.profile.avatarURL}`)
82 | return (
83 |
{
84 | this.requestFriends(item);
85 | // this.handleClickOpen();
86 |
87 | }
88 |
89 | }>
90 |
94 |
95 |
105 |
106 | );
107 | });
108 | }
109 | return (
110 |
111 | {listItems}
112 |
113 | );
114 | }
115 | }
116 |
117 |
118 | export default withStyles(styles)(SearchList);
--------------------------------------------------------------------------------
/src/components/skypeAvatar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Avatar from 'material-ui/Avatar';
3 | import { ListItemText } from 'material-ui/List';
4 |
5 |
6 | class SkypeAvatar extends React.Component {
7 |
8 | render(){
9 | const props = {
10 | avatarUrl : this.props.avatar,
11 | size : this.props.size,
12 | key : this.props.key,
13 | name : this.props.name,
14 | }
15 | const style = {
16 | width:props.size,
17 | height:props.size,
18 | backgroundImage: "url(" + props.avatarUrl + ")",
19 | }
20 |
21 | return (
22 |
31 | )
32 | }
33 | }
34 |
35 | export default SkypeAvatar;
36 |
--------------------------------------------------------------------------------
/src/components/test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AppBar from 'material-ui/AppBar';
3 |
4 | /**
5 | * A simple example of `AppBar` with an icon on the right.
6 | * By default, the left icon is a navigation-menu.
7 | */
8 |
9 | const AppBarExampleIcon = () => (
10 |
14 | );
15 |
16 | export default AppBarExampleIcon;
17 |
--------------------------------------------------------------------------------
/src/components/userDataSetting.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aemal/skype-clone/506e56d66adce49bf920ed1c8a7d561f0fbdcca0/src/components/userDataSetting.js
--------------------------------------------------------------------------------
/src/components/vedioCall.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 |
4 |
5 |
6 |
7 |
8 | class VedioCall extends Component {
9 |
10 | state = {
11 | videoSrc: null,
12 | };
13 |
14 | componentDidMount= () => {
15 | navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
16 | if (navigator.getUserMedia) {
17 | navigator.getUserMedia({audio: false, video:{ width: { min: 1024, ideal: 1280, max: 1920 },
18 | height: { min: 576, ideal: 720, max: 1080 }},}, this.handleVideo, this.videoError);
19 | }
20 | };
21 |
22 |
23 | handleVideo= (stream)=> {
24 | // Update the state, triggering the component to re-render with the correct stream
25 | this.refs.video.src = window.URL.createObjectURL(stream);
26 | };
27 |
28 | videoError= ()=> {
29 |
30 | };
31 |
32 | render() {
33 | return
34 |
35 |
;
36 | }
37 | }
38 |
39 | export default VedioCall;
--------------------------------------------------------------------------------
/src/components/wellcome.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | .main {
4 | margin: 10px 0 10px 0;
5 | border: 1px solid rgb(194, 194, 171);
6 | height: 700px;
7 | background-image: url('wellcomePage.jpg');
8 | background-position: center;
9 | background-size: cover;
10 | background-repeat: no-repeat;
11 | }
12 |
13 | .wellcome {
14 | background-color:rgba(129, 136, 129, 0.719);
15 | margin:90px auto;
16 | text-align: center;
17 | border-radius: 10px;
18 | width: 43%;
19 | height: 500px;
20 | }
--------------------------------------------------------------------------------
/src/components/wellcomePage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aemal/skype-clone/506e56d66adce49bf920ed1c8a7d561f0fbdcca0/src/components/wellcomePage.jpg
--------------------------------------------------------------------------------
/src/config/config.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | module.exports = {
4 | BASE_URL: "http://localhost:3001/",
5 | SOCKET_URL:"http://localhost:3001/"
6 | }
7 |
--------------------------------------------------------------------------------
/src/container/AddFriends.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import SearchBar from 'material-ui-search-bar';
3 |
4 |
5 |
6 |
7 | class AddFriends extends Component {
8 | render() {
9 | return (
10 |
11 | console.log('onChange')}
13 | onRequestSearch={() => console.log('onRequestSearch')}
14 | style={{
15 | margin: '0 auto',
16 | maxWidth: 700,
17 |
18 | }}
19 |
20 | />
21 |
22 | );
23 | }
24 | }
25 |
26 | export default AddFriends;
--------------------------------------------------------------------------------
/src/container/FriendsSearchBar.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | //import { withStyles } from 'material-ui/styles';
3 | import IconButton from 'material-ui/IconButton';
4 | import AppBar from 'material-ui/AppBar';
5 | import Toolbar from 'material-ui/Toolbar';
6 | import { FormControl } from 'material-ui/Form';
7 | import Popover from 'material-ui/Popover';
8 | import Input, { InputLabel } from 'material-ui/Input';
9 | import { findDOMNode } from 'react-dom';
10 | import { setFilter }from '../actions/filterAction';
11 | import { connect } from 'react-redux';
12 | import FormDialog from '../components/dialog'
13 | import AddContact from '../components/Addcontact'
14 |
15 |
16 |
17 | const mapDispatchToProps = dispatch => ({
18 | onFilter: filter => dispatch(setFilter(filter))
19 | })
20 |
21 | class SearchBar extends Component {
22 |
23 | state = {
24 | open: false,
25 | contactAddOpen: false,
26 | anchorEl: null,
27 | anchorOriginVertical: 'bottom',
28 | anchorOriginHorizontal: 'center',
29 | transformOriginVertical: 'top',
30 | transformOriginHorizontal: 'center',
31 | positionTop: 200, // Just so the popover can be spotted more easily
32 | positionLeft: 400, // Same as above
33 | anchorReference: 'anchorEl',
34 | };
35 |
36 | handleClickOpen = () => {
37 | this.setState({ contactAddOpen: true });
38 | };
39 | handleClickClose = () => {
40 | this.setState({
41 | contactAddOpen: false,
42 | });
43 | };
44 |
45 |
46 | handleClickButton = () => {
47 | this.setState({
48 | open: true,
49 | anchorEl: findDOMNode(this.button),
50 | });
51 | };
52 |
53 | handleClose = () => {
54 | this.setState({
55 | open: false,
56 | });
57 | };
58 | searchFriends(e) {
59 | this.props.onFilter(e.target.value)
60 | this.setState({searchKeyword: e.target.value});
61 | }
62 | button = null;
63 |
64 | render() {
65 | //const { classes } = this.props;
66 | const {
67 | open,
68 | anchorEl,
69 | anchorOriginVertical,
70 | anchorOriginHorizontal,
71 | transformOriginVertical,
72 | transformOriginHorizontal,
73 | positionTop,
74 | positionLeft,
75 | anchorReference,
76 | } = this.state;
77 | return (
78 |
140 | );
141 | }
142 | }
143 |
144 | export default connect(null, mapDispatchToProps)(SearchBar)
145 |
--------------------------------------------------------------------------------
/src/images/avatar-penguin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aemal/skype-clone/506e56d66adce49bf920ed1c8a7d561f0fbdcca0/src/images/avatar-penguin.png
--------------------------------------------------------------------------------
/src/images/bear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aemal/skype-clone/506e56d66adce49bf920ed1c8a7d561f0fbdcca0/src/images/bear.png
--------------------------------------------------------------------------------
/src/images/cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aemal/skype-clone/506e56d66adce49bf920ed1c8a7d561f0fbdcca0/src/images/cat.png
--------------------------------------------------------------------------------
/src/images/rabbit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aemal/skype-clone/506e56d66adce49bf920ed1c8a7d561f0fbdcca0/src/images/rabbit.png
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 |
6 | }
7 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 | import registerServiceWorker from "./registerServiceWorker";
5 | import { Provider } from "react-redux";
6 | //import {createStore} from 'redux';
7 | //import reducer from './reducers';
8 | import ProfileSettings from "./components/ProfileSettings";
9 | import store from "./store";
10 | import { ConnectedRouter } from "react-router-redux";
11 | import SingIn from "./components/SingIn";
12 | import { Route } from "react-router";
13 | import createHistory from "history/createBrowserHistory";
14 | import "../node_modules/font-awesome/css/font-awesome.min.css";
15 | import SingUp from "./components/SingUp";
16 | import WellcomePage from "./components/WellcomePage";
17 | import Favicon from "react-favicon";
18 | import config from "./config/config.js";
19 |
20 | const history = createHistory();
21 |
22 | ReactDOM.render(
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | ,
35 | document.getElementById("root")
36 | );
37 | registerServiceWorker();
38 |
--------------------------------------------------------------------------------
/src/reducers/changeSettingReducer.js:
--------------------------------------------------------------------------------
1 | export default function changeSettingReducer(state={
2 | currentUserData:{},
3 | error:null
4 |
5 | },action){
6 | switch(action.type){
7 | case 'CHANGE_USER_DONE':{
8 | return {...state,currentUserData:action.payload}
9 | }
10 | case 'CHANGE_USER_WITHERROR':{
11 | return {...state,error:action.payload}
12 | }
13 | default:
14 | return state
15 | }
16 |
17 | }
--------------------------------------------------------------------------------
/src/reducers/contactListFilterReducer.js:
--------------------------------------------------------------------------------
1 | const contactListFilterReducer = (state,action ) => {
2 | switch (action.type) {
3 | case 'CONTACT_FILTER':
4 | return action.payload;
5 | default:
6 | return state || '';
7 |
8 | }
9 |
10 | }
11 | //state.contactList.filter(el=> el.name.toLowerCase().match(searchValue.toLowerCase()))
12 | export default contactListFilterReducer;
--------------------------------------------------------------------------------
/src/reducers/contactListReducers.js:
--------------------------------------------------------------------------------
1 | export default function contactListReducer(state={
2 | contactList:[],
3 | fetching:false,
4 | fetched:false,
5 | error:null
6 |
7 | },action){
8 | switch(action.type){
9 | case 'FETCH_CONTACT_LIST':{
10 | return {...state,fetching:true}
11 | }
12 | case 'FETCH_USER_DONE':{
13 | return {...state,fetching:false,fetched:true,contactList:action.payload}
14 | }
15 | case 'FETCH_USER_WITHERROR':{
16 | return {...state,fetching:false,error:action.payload}
17 | }
18 | default:
19 | return state
20 | }
21 |
22 | }
--------------------------------------------------------------------------------
/src/reducers/index.js:
--------------------------------------------------------------------------------
1 | import {combineReducers} from 'redux';
2 | import contactListReducers from './contactListReducers';
3 | import contactListFilterReducer from './contactListFilterReducer';
4 | import setCurrentFriendReducer from './setCurrentFriendReducer';
5 | import { routerReducer } from 'react-router-redux'
6 | import changeSettingReducer from './changeSettingReducer'
7 | export default combineReducers({
8 | contactListReducers,
9 | setCurrentFriendReducer,
10 | contactListFilterReducer,
11 | changeSettingReducer,
12 | router: routerReducer
13 | })
--------------------------------------------------------------------------------
/src/reducers/setCurrentFriendReducer.js:
--------------------------------------------------------------------------------
1 | const setCurrentFriendReducer = (state={
2 | setCurrentFriend: '',
3 | } ,action ) => {
4 | switch (action.type) {
5 | case 'SET_CURRENT_FRIEND':
6 | return action.payload;
7 | default:
8 | return state || '';
9 | }
10 | }
11 | export default setCurrentFriendReducer;
--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(
12 | window.location.hostname === 'localhost' ||
13 | // [::1] is the IPv6 localhost address.
14 | window.location.hostname === '[::1]' ||
15 | // 127.0.0.1/8 is considered localhost for IPv4.
16 | window.location.hostname.match(
17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 | )
19 | );
20 |
21 | export default function register() {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (isLocalhost) {
36 | // This is running on localhost. Lets check if a service worker still exists or not.
37 | checkValidServiceWorker(swUrl);
38 | } else {
39 | // Is not local host. Just register service worker
40 | registerValidSW(swUrl);
41 | }
42 | });
43 | }
44 | }
45 |
46 | function registerValidSW(swUrl) {
47 | navigator.serviceWorker
48 | .register(swUrl)
49 | .then(registration => {
50 | registration.onupdatefound = () => {
51 | const installingWorker = registration.installing;
52 | installingWorker.onstatechange = () => {
53 | if (installingWorker.state === 'installed') {
54 | if (navigator.serviceWorker.controller) {
55 | // At this point, the old content will have been purged and
56 | // the fresh content will have been added to the cache.
57 | // It's the perfect time to display a "New content is
58 | // available; please refresh." message in your web app.
59 | console.log('New content is available; please refresh.');
60 | } else {
61 | // At this point, everything has been precached.
62 | // It's the perfect time to display a
63 | // "Content is cached for offline use." message.
64 | console.log('Content is cached for offline use.');
65 | }
66 | }
67 | };
68 | };
69 | })
70 | .catch(error => {
71 | console.error('Error during service worker registration:', error);
72 | });
73 | }
74 |
75 | function checkValidServiceWorker(swUrl) {
76 | // Check if the service worker can be found. If it can't reload the page.
77 | fetch(swUrl)
78 | .then(response => {
79 | // Ensure service worker exists, and that we really are getting a JS file.
80 | if (
81 | response.status === 404 ||
82 | response.headers.get('content-type').indexOf('javascript') === -1
83 | ) {
84 | // No service worker found. Probably a different app. Reload the page.
85 | navigator.serviceWorker.ready.then(registration => {
86 | registration.unregister().then(() => {
87 | window.location.reload();
88 | });
89 | });
90 | } else {
91 | // Service worker found. Proceed as normal.
92 | registerValidSW(swUrl);
93 | }
94 | })
95 | .catch(() => {
96 | console.log(
97 | 'No internet connection found. App is running in offline mode.'
98 | );
99 | });
100 | }
101 |
102 | export function unregister() {
103 | if ('serviceWorker' in navigator) {
104 | navigator.serviceWorker.ready.then(registration => {
105 | registration.unregister();
106 | });
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
1 | import {applyMiddleware, createStore} from 'redux';
2 | //import createHistory from 'history/createBrowserHistory';
3 | import thunk from 'redux-thunk';
4 | import reducer from './reducers';
5 | //import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';
6 |
7 | //const history = createHistory();
8 | //const Routemiddleware = routerMiddleware(history)
9 |
10 | const middlewares= applyMiddleware( thunk);
11 |
12 |
13 | export default createStore(reducer,middlewares);
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | *,
2 | *:before,
3 | *:after {
4 | box-sizing: border-box;
5 | }
6 | /*
7 | *+* {
8 | margin-top: 1rem;
9 | }*/
10 |
11 | /* Media Query for removing padding on small devices */
12 |
13 | /*@media (min-width: 200px) and (max-width: 599px) {
14 | .MuiGrid-typeItem-2 {
15 | padding: 0;
16 | }
17 | }*/
18 |
19 | /* GLOBAL STYLES */
20 |
21 | body {
22 | height: 100%;
23 | margin: 0px;
24 | }
25 |
26 | .app {
27 | height: 100%;
28 | }
29 |
30 | /* SIGN IN PAGE */
31 | /****************/
32 |
33 | .logo {
34 | height: 100px;
35 | display: block;
36 | margin: auto;
37 | }
38 |
39 | .main-container {
40 | display: table;
41 | position: absolute;
42 | height: 100%;
43 | width: 100%;
44 | background-color: #2b81ca;
45 | }
46 |
47 | @-webkit-keyframes Gradient {
48 | 0% {
49 | background-position: 0% 50%;
50 | }
51 | 50% {
52 | background-position: 100% 50%;
53 | }
54 | 100% {
55 | background-position: 0% 50%;
56 | }
57 | }
58 |
59 | @-moz-keyframes Gradient {
60 | 0% {
61 | background-position: 0% 50%;
62 | }
63 | 50% {
64 | background-position: 100% 50%;
65 | }
66 | 100% {
67 | background-position: 0% 50%;
68 | }
69 | }
70 |
71 | @keyframes Gradient {
72 | 0% {
73 | background-position: 0% 50%;
74 | }
75 | 50% {
76 | background-position: 100% 50%;
77 | }
78 | 100% {
79 | background-position: 0% 50%;
80 | }
81 | }
82 |
83 | .sign-in-header {
84 | letter-spacing: 2px;
85 | text-align: center;
86 | text-shadow: 0px 1px 15px grey;
87 | }
88 |
89 | .middle-container {
90 | display: table-cell;
91 | vertical-align: middle;
92 | padding: 30px;
93 | }
94 |
95 | .sign-in-details {
96 | width: 350px;
97 | background: #fff;
98 | border-radius: 10px;
99 | overflow: hidden;
100 | padding: 77px 55px 33px 55px;
101 | box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
102 | -moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
103 | -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
104 | -o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
105 | -ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
106 | margin-left: auto;
107 | margin-right: auto;
108 | }
109 |
110 | .sign-in-details .MuiFormControl-root-12 {
111 | margin-top: 0.7rem;
112 | }
113 |
114 | .sign-in-details input,
115 | .sign-in-details label {
116 | color: #2b81ca;
117 | margin-top: 1rem;
118 | }
119 |
120 | .sign-in-h3 {
121 | letter-spacing: 1px;
122 | color: #726f6f;
123 | }
124 |
125 | .sign-in-details .MuiButton-raised-48 {
126 | background-color: #3ba8c6;
127 | color: white;
128 | border-radius: 10px;
129 | }
130 |
131 | .login-button {
132 | margin-top: 60px;
133 | width: 100%;
134 | color: #f50057;
135 | }
136 |
137 | .additional-options {
138 | justify-content: space-between;
139 | margin-top: 20px;
140 | }
141 | .text-center {
142 | text-align: center;
143 | }
144 |
145 | .additional-options,
146 | .additional-options .link {
147 | display: flex;
148 | flex-wrap: wrap;
149 | color: #726f6f;
150 | text-decoration: none;
151 | }
152 |
153 | .color-checkbox {
154 | margin-right: -2.5rem;
155 | }
156 |
157 | .color-checkbox.MuiCheckbox-checked-58 {
158 | color: #726f6f;
159 | }
160 | .color-checkbox.MuiCheckbox-checked-66 {
161 | color: #726f6f;
162 | }
163 |
164 | .register-forgot-password {
165 | padding: 1rem;
166 | }
167 |
168 | .social {
169 | width: 20px;
170 | }
171 |
172 | .social-media-login-main button {
173 | width: 100%;
174 | margin: 0.5rem;
175 | }
176 |
177 | .social-media-login {
178 | margin-top: 20%;
179 | }
180 |
181 | .social-media-login i {
182 | margin-right: 2rem;
183 | }
184 |
185 | /* SIGN UP PAGE */
186 | /*************/
187 |
188 | .picker {
189 | margin-top: 2rem;
190 | }
191 |
192 | span.MuiTypography-body1-52 {
193 | color: #3ba8c6;
194 | font-size: 1rem;
195 | }
196 |
197 | /* Tried to change the purple colour of the default, but doesn't seem to work */
198 |
199 | legend.MuiFormLabel-focused-24,
200 | legend.MuiFormLabel-focused-25 {
201 | color: #79848e;
202 | }
203 |
204 | /* Tried to change the purple colour of the default, but doesn't seem to work */
205 | span.MuiRadio-checked-112,
206 | span.MuiRadio-checked-113 {
207 | color: #79848e;
208 | }
209 |
210 | button.login-button {
211 | background-color: #ed7033;
212 | color: white;
213 | }
214 |
215 | button.login-button:hover {
216 | background-color: #79848e;
217 | color: white;
218 | }
219 |
220 | /* AUTH PAGE */
221 | /*************/
222 |
223 | /* SIDEBAR COMPONENTS */
224 |
225 | .sideBarMainComponent {
226 | height: 100%;
227 | width: 25%;
228 | float: left;
229 | }
230 |
231 | .sideBarAvatarComponent {
232 | height: "auto";
233 | width: 100%;
234 | background-color: #01062e;
235 | /*position: relative; creates the shadow above the contact list */
236 | }
237 |
238 | .sideBarAvatarComponent .avatar {
239 | margin: 1rem auto 0 auto;
240 | box-shadow: 0 0 13px 3px rgb(255, 255, 255);
241 | }
242 |
243 | .avatar {
244 | margin: 0 auto;
245 | background-size: cover;
246 | background-position: center;
247 | -webkit-border-radius: 50%;
248 | -moz-border-radius: 50%;
249 | border-radius: 50%;
250 | box-shadow: 0 0 13px grey;
251 | }
252 |
253 | .icons {
254 | display: inline-flex;
255 | width: 100%;
256 | justify-content: space-around;
257 | padding: 1rem;
258 | }
259 |
260 | .icons i {
261 | font-size: 1.8rem;
262 | color: #726f6f;
263 | transition: all 0.1s ease-in;
264 | }
265 |
266 | .icons i:hover {
267 | color: #3ba8c6;
268 | transform: scale(1.3);
269 | }
270 |
271 | .sideBarContactListComponent {
272 | height: calc(100vh - 207px);
273 | width: 100%;
274 | overflow: auto;
275 | display: block;
276 | background: linear-gradient(#01062e, #2f3772);
277 | }
278 |
279 | .list-item h3 {
280 | color: #79848e;
281 | font-size: 0.85rem;
282 | }
283 |
284 | .list-item:hover h3 {
285 | font-weight: 700;
286 | color: #3ba8c6;
287 | }
288 |
289 | .list-item .avatar {
290 | font-weight: 700;
291 | border: 2px solid #79848e;
292 | transition: all 0.1s ease-in;
293 | }
294 |
295 | .list-item:hover .avatar {
296 | font-weight: 700;
297 | border: 2px solid #3ba8c6;
298 | transform: scale(1.3);
299 | }
300 |
301 | .sideBarSearchComponent {
302 | height: auto;
303 | width: 100%;
304 | }
305 |
306 | .friend-search-bar {
307 | background-color:#01062e;
308 | color: white;
309 | }
310 |
311 | .friend-search-bar i {
312 | color: #fcf9ff;
313 | }
314 |
315 | .open-search-bar {
316 | background-color: #fcf9ff;
317 | box-shadow: 0 0 15px #fcf9ff;
318 | color: #fcf9ff;
319 | border-radius: 3rem;
320 | }
321 |
322 | .open-search-bar > div,
323 | .open-search-bar > label {
324 | color: #726f6f;
325 | font-size: 1rem;
326 | padding: 0 1rem 0.3rem 1rem;
327 | }
328 |
329 | #searchContact {
330 | width: 80%;
331 | border-radius: 0;
332 | }
333 |
334 | /* MESSAGES FIELD COMPONENTS */
335 |
336 | .chat {
337 | width: 100%;
338 | }
339 |
340 | .messagesMainComponent {
341 | height: 100vh;
342 | width: 75%;
343 | float: left;
344 | padding: 1rem;
345 | }
346 |
347 | .contact-list {
348 | display: flex;
349 | justify-content: space-between;
350 | padding: 0.5rem;
351 | margin: 0;
352 | box-shadow: 1px 0 5px grey;
353 | }
354 |
355 | .contact-list i {
356 | font-size: 1.5rem;
357 | color: #726f6f;
358 | transition: all 0.1s ease-in;
359 | margin-top: 0.4rem;
360 | background-color: #ebeaed;
361 | border-radius: 50%;
362 | padding: 0.7rem;
363 | }
364 |
365 | .contact-list i:hover {
366 | color: #3ba8c6;
367 | transform: scale(1.2);
368 | }
369 |
370 | .contact-list .avatar {
371 | margin-right: 0.8rem;
372 | margin-top: 0.6rem;
373 | }
374 |
375 | /* Messages area */
376 |
377 | .messagesLogComponent {
378 | overflow: auto;
379 | height: calc(100vh - 183px);
380 | width: 100%;
381 | float: left;
382 | display: block;
383 | }
384 |
385 |
386 | .messagesContactDetailComponent {
387 | height: auto;
388 | width: 100%;
389 | float: left;
390 | display: block;
391 | position: relative;
392 | }
393 |
394 | .bubble {
395 | background-color: #fcf9ff;
396 | border-radius: 5px;
397 | box-shadow: 0 0 10px grey;
398 | display: inline-block;
399 | padding: 10px 15px;
400 | position: relative;
401 | vertical-align: top;
402 | color: #726f6f;
403 | }
404 |
405 | .timer {
406 | display: block;
407 | color: #3ba8c6;
408 | font-size: 0.8rem;
409 | margin-top: 0.5rem;
410 | }
411 |
412 | .bubble::before {
413 | background-color: #fcf9ff;
414 | content: "\00a0";
415 | display: block;
416 | height: 13px;
417 | position: absolute;
418 | margin-left: 0.3rem;
419 | transform: rotate(29deg) skew(-35deg);
420 | -moz-transform: rotate(29deg) skew(-35deg);
421 | -ms-transform: rotate(29deg) skew(-35deg);
422 | -o-transform: rotate(29deg) skew(-35deg);
423 | -webkit-transform: rotate(29deg) skew(-35deg);
424 | width: 13px;
425 | }
426 |
427 | .me {
428 | float: left;
429 | margin: 5px 45px 5px 20px;
430 | }
431 |
432 | .me::before {
433 | box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4);
434 | left: -9px;
435 | }
436 |
437 | .you {
438 | float: right;
439 | margin: 5px 20px 5px 45px;
440 | }
441 |
442 | .you::before {
443 |
444 | box-shadow: 2px -2px 2px 0 rgba(178, 178, 178, 0.4);
445 | right: -9px;
446 | }
447 |
448 | .message {
449 | display: flex;
450 | }
451 |
452 | /* Typing the text area */
453 |
454 | .messagesNewMessageComponent {
455 | width: 100%;
456 | float: left;
457 | bottom: 2%;
458 | }
459 |
460 | .texting-area {
461 | padding: 0.5rem;
462 | bottom: 2%;
463 | }
464 |
465 | .emoticon:hover {
466 | color: #a5a5a5;
467 | }
468 |
469 | .form-control {
470 | width: 100%;
471 | }
472 | .highlightedFriend {
473 | background-color: #ffaadd;
474 | }
--------------------------------------------------------------------------------
/src/utiles/Api.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 |
3 |
4 | export function loginRequest(url,email,pass){
5 | axios.post(url, { emailAddress: email, password: pass })
6 | .then(function(response){
7 | console.log(response +'submit succesfull')
8 | });
9 |
10 | }
--------------------------------------------------------------------------------
/temp/data.js:
--------------------------------------------------------------------------------
1 | db.User.insert({
2 | emailAddress: "john@gmail.com",
3 | password: "john123",
4 | dateOfBirth: "1987.02.12",
5 | profile:{
6 | firstName: "john",
7 | lastName: "balout",
8 | gender: "Male",
9 | avatarURL: "statics/pics/image.jpg"
10 | },
11 | status:{
12 | lastSeen: "1987.02.12",
13 | active: true
14 | },
15 | loginStrategy:"local",
16 | loginObject: {},
17 | contacts:{
18 | friends: [],
19 | blocked: [],
20 | requested: [],
21 | pending: []
22 | }
23 | });
24 |
--------------------------------------------------------------------------------
53 |
58 |