snippets added

React/CodePen/src/App.css

@@ -16,4 +16,19 @@
 	padding-top:10px;
 }
 
+.foot{
+	width: 100%;
+	height:150px;
+	background: grey;
+}
+
+.foot span{
+	position:relative;
+	top:30px;
+	left:42%;
+	color:white;
+	font-size: 40px;
+	text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua;
+}
+
 

React/CodePen/src/actions/actionChangePassword.js

@@ -0,0 +1,6 @@
+import {changePass} from "./requests";
+import {actionPromise} from "./actionPromise";
+
+export const actionChangePass = (login, password, newPassword) => async (dispatch) =>{
+	return await dispatch(actionPromise('change', changePass(login, password, newPassword)))
+}

React/CodePen/src/actions/actionSearch.js

@@ -1,5 +1,5 @@
-import { search } from "./requests";
-import { actionPromise } from "./actionPromise";
+import {search} from "./requests";
+import {actionPromise} from "./actionPromise";
 
 export const actionSearch = (string) => async (dispatch) => {
     return await dispatch(actionPromise('searchSnippet', search(string)))

React/CodePen/src/actions/actionSnippetAdd.js

@@ -0,0 +1,6 @@
+import {actionPromise} from "./actionPromise";
+import {snippetAdd} from "./requests";
+
+export const actionSnippetAdd = (title, description, files, idSnippet) => async (dispatch) => {
+	return await dispatch(actionPromise("addSnippet", snippetAdd(title, description, files, idSnippet)));
+};

React/CodePen/src/actions/requests.js

@@ -1,78 +1,84 @@
 import { gql } from "./gql";
 
-export const snippetById = async(id) => {
-    let query = `query snippetFind($query:String){
-      SnippetFind(query:$query){
-                        owner{
-                          _id 
-                        }
-            title description _id files {
-             type text name
-           }
-        }
-  }`;
-  let variables = {
-    query: JSON.stringify([{_id: id }])
-  };
-  
-  let res = gql(query, variables);
-  return res;
-  }
-  export const snippetByOwner = async (id) => {
-    let query = `query snippetFind($query:String){
-        SnippetFind(query:$query){
-                          owner{
-                            _id 
-                          }
-              title description _id files {
-               type text name
-             }
-          }
-  }`;
-    let variables = {
-      query: JSON.stringify([{___owner: id } , {sort:[{_id: -1}]}])
-    };
-  
-    let res = gql(query, variables);
-    return res;
-  }
-  export const userFind = (_id) => {
-    return gql(
-      `query userOne($query:String) {
-                                       UserFindOne(query:$query){
-                                         _id avatar{
-                                           url
-                                         }
-                                       }
-  }`,
-      { query: JSON.stringify([{ _id }]) }
+
+export const userFind = (_id) => {
+    return gql(`query userOne($query:String) {
+            UserFindOne(query:$query){
+                _id 
+                avatar{
+                    url
+                }
+            }
+        }`,
+        { query: JSON.stringify([{ _id }]) }
     );
-  };
-  export const reg = async (login, password) => {
+};
+
+export const reg = async (login, password) => {
     let query = `mutation reg($l:String! , $p:String!) {
         createUser(login:$l,password:$p){
-    _id login
-  }
-  }`;
+            _id login
+        }
+    }`;
     let qVariables = {
-      l: login,
-      p: password,
+        l: login,
+        p: password
     };
     let result = await gql(query, qVariables);
     return result;
-  };
-  export const log = async (login, password) => {
+};
+
+export const log = async (login, password) => {
     let query = ` query log($l:String!,$p:String!) {
         login(login:$l,password:$p)
       }`;
     let qVariables = {
       l: login,
-      p: password,
+      p: password
     };
     let result = await gql(query, qVariables);
     return result;
+};
+
+export const search = async (string) => {
+    return gql(`query snippetFind($query:String){
+        SnippetFind(query:$query){
+          owner {
+            _id login
+          }
+          title description _id files {
+              type text name
+          }
+        }
+    }`,
+      { query: JSON.stringify([
+        {
+            $or: [{title: `/${string.trim().split(" ").join('|')}/`},{description: `/${string.trim().split(" ").join('|')}/`}] 
+        },
+        {
+          sort: [{title: 1}]}]) }
+    );
+};
+
+export const snippetByOwner = async (id) => {
+    let query = `query snippetFind($query:String){
+        SnippetFind(query:$query){
+                          owner{
+                            _id 
+                          }
+              title description _id files {
+               type text name
+             }
+          }
+  }`;
+  let variables = {
+      query: JSON.stringify([{___owner: id } , {sort:[{_id: -1}]}])
   };
-  export const imgFind = async () => {
+  let res = gql(query, variables);
+  return res;
+}
+
+export const imgFind = async () => {
     return await gql(`query fhbg{
       ImageFind(query:"[{}]"){
         url owner{
@@ -80,8 +86,9 @@ export const snippetById = async(id) => {
         }
       }
     }`);
-  };
-  export const ava = async (idUser, id) => {
+};
+
+export const ava = async (idUser, id) => {
     let query = `mutation setAvatar($idUser:String , $idAvatar:ID){ 
       UserUpsert(user:{_id: $idUser, avatar: {_id: $idAvatar}}){
           _id, avatar{
@@ -89,43 +96,67 @@ export const snippetById = async(id) => {
           }
       }
   }`;
-    let qVariables = { idUser: idUser, idAvatar: id };
-  
+    let qVariables = { 
+        idUser: idUser, 
+        idAvatar: id 
+    };
     let res = await gql(query, qVariables);
     return res;
-  };
-  export const snippetAdd = async (title, description, files , idSnippet) => {
+};
+
+export const snippetAdd = async (title, description, files , idSnippet) => {
     let query = `mutation newSnippet($snippet:SnippetInput) {
       SnippetUpsert(snippet:$snippet){
         _id
       }
     }`;
-  
-    let qVariables = { snippet: { title, description, files, _id: idSnippet }  };
-  
+    let qVariables = { 
+        snippet:{ 
+            title, 
+            description, 
+            files, 
+            _id: idSnippet 
+        }  
+    };
     let res = await gql(query, qVariables);
     return res;
-  };
+};
+
+export const changePass = async (login, password, newPassword) => {
+    let query = `mutation change($login:String!, $password:String!, $newPassword:String!){
+                      changePassword(login: $login,
+                                    password: $password, 
+                                    newPassword: $newPassword){
+                          _id login
+                      }
+                }`;
+    let qVariables = {
+        l:login,
+        p:password,
+        n:newPassword
+    };
+    let result = await gql(query, qVariables);
+    return result;
+};
+
+export const snippetById = async(id) => {
+    let query = `query snippetFind($query:String){
+      SnippetFind(query:$query){
+                        owner{
+                          _id 
+                        }
+            title description _id files {
+             type text name
+           }
+        }
+    }`;
+    let variables = {
+        query: JSON.stringify([{_id: id }])
+    };
+    let res = gql(query, variables);
+    return res;
+}
+
 
-  export const search = async (string) => {
-    return gql(
-      `query snippetFind($query:String){
-        SnippetFind(query:$query){
-          owner {
-            _id login
-          }
-              title description _id files {
-               type text name
-             }
-          }
-    }`,
-      { query: JSON.stringify([
-        {
-            $or: [{title: `/${string.trim().split(" ").join('|')}/`},{description: `/${string.trim().split(" ").join('|')}/`}] 
-        },
-        {
-          sort: [{title: 1}]}]) }
-    );
-  };
 
   

React/CodePen/src/components/editor.js

@@ -0,0 +1,55 @@
+import Langs from "./select";
+import AceEditor from "react-ace";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-css";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-java";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/mode-xml";
+import "ace-builds/src-noconflict/mode-sass";
+import "ace-builds/src-noconflict/mode-ruby";
+import "ace-builds/src-noconflict/mode-markdown";
+import "ace-builds/src-noconflict/mode-mysql";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-handlebars";
+import "ace-builds/src-noconflict/mode-golang";
+import "ace-builds/src-noconflict/mode-csharp";
+import "ace-builds/src-noconflict/mode-elixir";
+import "ace-builds/src-noconflict/mode-typescript";
+import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/ext-language_tools";
+import"ace-builds/src-noconflict/snippets/javascript";
+import"ace-builds/src-noconflict/snippets/html";
+import"ace-builds/src-noconflict/snippets/css";
+import"ace-builds/src-noconflict/snippets/json";
+import"ace-builds/src-noconflict/worker-javascript";
+import"ace-builds/src-noconflict/worker-html";
+import"ace-builds/src-noconflict/worker-css";
+
+
+const Editor = ({data = {type: "html", text: "", name: ""}, onChange, onDelete}) => {
+    return (
+        <div style={{display: "inline-block", width: "calc(95%/3)", marginBottom: "10px", marginTop: "40px", backgroundColor: "#FFE8DB", marginLeft:"1%", border:"1px solid #FF5A00", borderRadius: "30px 15px 90px 15px"}}>
+            <button type="button" className="close mr-4 " aria-label="Close" onClick={onDelete} style={{fontSize:"40px", backgroundColor:"black"}}>
+                <span className="text-danger" aria-hidden="true">
+                    &times;
+                </span>
+            </button>
+            <AceEditor className="editor" width="calc(100%)" height="300px" value={data.text} onChange={(text) => onChange({type: data.type, text, name: data.name })}
+                placeholder="Your Code" mode={data.type} theme="monokai" name="blah2" fontSize={13} showPrintMargin={true}
+                showGutter={true} highlightActiveLine={true} wrapEnabled={true} enableBasicAutocompletion={true} enableLiveAutocompletion={true} 
+                enableSnippets={true} showLineNumbers={true}/>
+            <br/> 
+            <div className="input-group ml-4" style={{paddingBottom: "10px"}}>
+                <div className="input-group-prepend">
+                    <span className="input-group-text" id="basic-addon1">Name of file</span>
+                </div>
+                <input type="text" className="form-control w-25" placeholder="Name of file" aria-label="Name of file"
+                    aria-describedby="basic-addon1" value={data.name} onChange={(e) => onChange({type: data.type, text: data.text, name: e.target.value })}/>
+                <Langs onChange={(type)=> onChange({type, text: data.text, name: data.name})} value={data.type}/>{" "}
+            </div>
+        </div>
+    );
+};
+
+export default Editor;

React/CodePen/src/components/footer.js

@@ -0,0 +1,13 @@
+import {useRef, useState} from "react";
+import {connect} from "react-redux";
+import {Redirect} from "react-router";
+
+const Footer = () => {
+	return(
+		<div className='foot'>
+			<span><u>CODEPEN</u></span>
+		</div>
+	)
+}
+
+export default Footer

React/CodePen/src/components/logo.js

@@ -3,9 +3,9 @@ import logo from "../logo.png";
 
 function ImgLogo({props}) {
   return (
-    <a href="/">
-      {" "}
-      <img src={logo} alt="Logo" style={props} />{" "}
+    <a href="/" style={{paddingTop: '30xp', marginLeft: "10px"}}>
+      	{" "}
+      	<img src={logo} alt="Logo" style={props}/>{" "}
     </a>
   );
 }

React/CodePen/src/components/nickHeader.js

@@ -9,23 +9,27 @@ const NickName = ({nick, onLogOut}) => {
     <>
       <div className="container">
         <div className="">
-           <div>
-                <span style={{color: "black"}}>Your nickname </span>
+           <div style={{ paddingLeft: "64%", marginTop: "-55px",width: "100%", paddingBottom: "20px"}}>
+                <span style={{color: "black", left:"50px"}}>Your nickname </span>
                 <a href="/cabinet" style={{textDecoration: "none", color: "dark"}}>
                     {nick} &nbsp;&nbsp;
                     <ConnectedAvaLogo px={"50px"} mrgn={"10px"} />
                 </a>
-                <button className="btn btn-secondary btn-sm" onClick={() => onLogOut()}>
+                <button className="btn btn-danger btn-sm" onClick={() => onLogOut()}>
                     Log out
                 </button>
             </div>
-            <div style={{}}>
-                <Link to = "/search"> 
+            <div>
+                <Link to= "/changePass" style={{paddingLeft: "84%"}}>
+                  <button className="btn btn-warning btn-sm">Change pass</button>
+                </Link>
+            </div>
+            <div>
+                <Link to = "/search" style={{paddingLeft: "86.5%"}}> 
                     <button className="btn btn-info btn-sm">Search</button> 
                 </Link>
             </div>
-        </div>
-         
+        </div>  
       </div>
     </>
   );

React/CodePen/src/components/routes.js

@@ -1,16 +1,16 @@
 import React from "react";
 import createHistory from "history/createBrowserHistory";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
 import RegForm from "../pages/reg";
-import { LogForm } from "../pages/login";
+import {LogForm} from "../pages/login";
 import Home from "../pages/homePage";
 import ConnectCabinet from "../pages/cabinet";
 import Search from "../pages/search";
 import ConnectedPrivateRoute from "./privateRoute";
-import { Redirect } from "react-router";
+import {Redirect} from "react-router";
 import {useEffect, useState, useRef} from "react";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-
+import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
+import ChangePass from "../pages/changePass";
 
 const LoginForm = ({onLogin}) =>{
   const [login, setLogin] = useState(''); //braunvlad4
@@ -30,14 +30,14 @@ const Routes = ({ isAuth }) => {
   return (
     <div className="App">
       <div className="contentDiv">
-          // <LoginForm onLogin={(l,p)=>console.log(l,p)} />
             <Switch>
-              <ConnectedPrivateRoute exact path="/" roles = {['user']} component={Home} />
-              <ConnectedPrivateRoute path="/cabinet" roles = {['user']} component={ConnectCabinet} />
-              <ConnectedPrivateRoute path="/search" roles = {['user']} component={Search} />
-              <ConnectedPrivateRoute path="/login" roles = {['unknown']} component={LogForm} /> 
-              <ConnectedPrivateRoute path="/registration" roles = {['unknown']} component={RegForm} />
-              </Switch>
+                <ConnectedPrivateRoute exact path="/" roles = {['user']} component={Home} />
+                <ConnectedPrivateRoute path="/cabinet" roles = {['user']} component={ConnectCabinet} />
+                <ConnectedPrivateRoute path="/search" roles = {['user']} component={Search} />
+                <ConnectedPrivateRoute path="/changePass" roles={['user']} component={ChangePass} />
+                <ConnectedPrivateRoute path="/login" roles = {['unknown']} component={LogForm} /> 
+                <ConnectedPrivateRoute path="/registration" roles = {['unknown']} component={RegForm} />
+            </Switch>
       </div>
     </div>
   );

React/CodePen/src/components/select.js

@@ -0,0 +1,39 @@
+let languages = {
+  html: "HTML",
+  css: "CSS",
+  javascript: "JavaScript",
+  java: "Java",
+  python: "Python",
+  xml: "XML",
+  ruby: "Ruby",
+  sass: "Sass",
+  markdown: "Markdown",
+  mysql: "MySql",
+  json: "JSON",
+  handlebars: "Handlebars",
+  golang: "Golang",
+  csharp: "C Sharp",
+  elixir: "Elixir",
+  typescript: "TypeScript",
+};
+
+const SelectLang = ({ list = languages, onChange, value }) => {
+  return (
+    <>
+      <select
+        style={{ marginBottom: "10px", marginLeft: "15px" }}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="select"
+      >
+        {Object.entries(list).map(([value, text]) => (
+          <option value={value} key={value}>
+            {text}
+          </option>
+        ))}
+      </select>
+    </>
+  );
+};
+
+export default SelectLang;

React/CodePen/src/components/snippet.js

@@ -0,0 +1,144 @@
+import {useRef, useState} from "react";
+import {connect} from "react-redux";
+import {Redirect} from "react-router";
+import {useEffect} from "react";
+import Editor from "./editor";
+import {actionSnippetAdd} from "../actions/actionSnippetAdd";
+
+const Snippets = ({onSave}) => {
+    const [files, setFiles] = useState([
+        {type: "html", text:`
+<div id='area'>⚠ achtung ⚠</div> 
+<div>
+    <button id='greek'>Change color</button>
+    <button id='bluek'>Change color</button>
+</div>`, name:'main.html'},
+        {type: "css", text:`
+@import url(https://fonts.googleapis.com/css?family=Open+Sans);
+body {
+    background: #111;
+    font-family: 'Open Sans',  Impact;
+}
+#area {
+  margin-bottom:70px;
+    text-align: center;
+    font-size: 6.5em;
+    color: #fff;
+    letter-spacing: -7px;
+    font-weight: 700;
+    text-transform: uppercase;
+    animation: blur .75s ease-out infinite;
+    text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
+}
+@keyframes blur {
+  from {
+    text-shadow:0px 0px 10px #fff,
+      0px 0px 10px #fff, 
+      0px 0px 25px #fff,
+      0px 0px 25px #fff,
+      0px 0px 25px #fff,
+      0px 0px 25px #fff,
+      0px 0px 25px #fff,
+      0px 0px 25px #fff,
+      0px 0px 50px #fff,
+      0px 0px 50px #fff,
+      0px 0px 50px #7B96B8,
+      0px 0px 150px #7B96B8,
+      0px 10px 100px #7B96B8,
+      0px 10px 100px #7B96B8,
+      0px 10px 100px #7B96B8,
+      0px 10px 100px #7B96B8,
+      0px -10px 100px #7B96B8,
+      0px -10px 100px #7B96B8;
+}`, name:'style.css'},
+        {type: "javascript",text:`
+greek.style.color='white'
+greek.style.background='green'
+greek.style.borderRadius='40px'
+bluek.style.color='white'
+bluek.style.background='blue'
+bluek.style.borderRadius='40px'
+
+greek.onclick = () => {
+    document.getElementById('area').style.color = 'green'
+}
+bluek.onclick = () => {
+    document.getElementById('area').style.color = 'blue'
+}`,name:'main.js'},
+    ]);
+    const [name, setName] = useState("");
+    const [title, setTitle] = useState("");
+    const [description, setDescription] = useState("");
+    const [srcDoc, setSrcDoc] = useState("");
+
+    const html = files.filter((elem) => {
+       return elem?.type === "html";
+    })[0]?.text;
+
+    const css = files.filter((elem) => {
+        return elem?.type === "css";
+    })[0]?.text;
+
+    const js = files.filter((elem) => {
+        return elem?.type === "javascript";
+    })[0]?.text;
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setSrcDoc(`
+                <html>
+                  <body>${html || ""}</body>
+                  <style>${css || ""}</style>
+                  <script>${js || ""}</script>
+                </html>
+            `);
+        }, 250);
+
+        return () => clearTimeout(timeout);
+    }, [html, css, js]);
+
+  return (
+    <div>
+        <iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%"
+                height="100%" style={{height: "280px", marginLeft: "2%",marginTop: "10px", border: "5px solid green"}}/>
+
+        {files.map((data, index) => (
+            <>
+                <Editor onDelete={() => setFiles(files.filter((item) => item !== data))} data={data}
+                    onChange={({type, name, text}) => setFiles([...files.slice(0, index),{type, name, text},...files.slice(index + 1),])}
+                />
+            </>
+        ))}
+        <br />
+        <div style={{alignItems: "center", textAlign: "center", marginTop: "20px", marginBottom: "20px"}}>
+          <div>
+              <button className="btn btn-primary" style={{}} onClick={()=> setFiles([...files, { type: "html" }])} key={files} style={{marginTop: "10px"}}>
+                Add editor
+              </button>       
+          </div>
+          <div className="input-group mb-3 mt-5 ml-auto mr-auto w-50">
+              <div className="input-group-prepend">
+                <span className="input-group-text" id="basic-addon1">
+                    Name of your project
+                </span>
+              </div>
+              <input value={title} onChange={(e) => setTitle(e.target.value)} type="text" className="form-control"
+                placeholder="Name of project" aria-label="Name of project" aria-describedby="basic-addon1"/>
+          </div>
+          <div className="input-group ml-auto mr-auto w-50">
+              <div className="input-group-prepend">
+                  <span className="input-group-text ">Description</span>
+              </div>
+              <textarea value={description} onChange={(e) => setDescription(e.target.value)} className="form-control "
+                aria-label="With textarea" placeholder="Your description"></textarea> 
+          </div>
+          <button className="btn btn-success float-center mr-5 mb-5" onClick={() => onSave(title, description, files)} style={{marginTop: '30px'}}>
+                  Save project
+              </button>
+        </div>
+    </div>
+  );
+};
+
+const CSnippets = connect(null, {onSave: actionSnippetAdd})(Snippets);
+export default CSnippets;

React/CodePen/src/pages/cabinet.js

@@ -3,10 +3,18 @@ import { connect } from "react-redux";
 import ConnectNickName from "../components/nick";
 import ImgProfile from "../components/profile";
 import { actionAuthLogout } from "../actions/actionAuthLogout";
+import { Link } from "react-router-dom";
 
 const Cabinet = ({onLogOut}) => {
   return (
     <>
+      <Link to="/">
+          <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
+                Back to Main Page
+          </button>
+      </Link>
+      <br/>
+      <br/>
       <div className="container" >
         <div className="card">
           <div className="upper">

React/CodePen/src/pages/changePass.js

@@ -0,0 +1,52 @@
+import {Link} from "react-router-dom";
+import {connect} from "react-redux";
+import {useState} from "react";
+import {actionChangePass} from "../actions/actionChangePassword";
+
+const ChangePass = ({onChangePass}) => {
+	const [log, setLog] 		= useState('')
+	const [pass, setPass] 		= useState('')
+	const [newPass, setNewPass] = useState('')
+	console.log(onChangePass);
+	return (
+		<>
+			<Link to="/">
+	        	<button className="float-left btn-secondary d-inline-block mt-2 ml-2">
+	          		Back to Main Page
+	        	</button>
+	      	</Link>
+	      	<br/>
+	      	<br/>
+	      	<div className="container">
+	      		<div style ={{textAlign: "center" , alignItems:"center", justifyContent:'center'}}>
+	      			<p>
+	      				<input value={log} placeholder='your login' onChange={(e)=>setLog(e.target.value)}
+	      					style={{borderColor: log.length > 0 ? 'green' : 'red'}}/>
+	      			</p>
+	      			<p>
+	      				<input value={pass} placeholder='your old password' 
+	      					onChange={e=>setPass(e.target.value)}
+	      					style={{borderColor: pass.length > 0 ? 'green' : 'red'}} 
+	      				/>
+	      			</p>
+	      			<p>
+	      				<input placeholder='your new password' 
+	      					style={{borderColor: pass.length > 0 ? 'green' : 'red'}}
+		      				onChange={e=>{
+		      					setNewPass(e.target.value)
+		      				}} 
+		      			/>
+	      			</p>
+	      			<p>
+	      				<button onClick={()=>onChangePass(log, pass, newPass)} 
+	      					disabled={(log.length!==0 && pass.length!==0 && newPass!==0)?false:true}>Сменить пароль</button>
+	      			</p>
+	      		</div>
+	      	</div>
+	    </>
+	)
+};
+
+const CChangePass = connect(state=>({}),{onChangePass: actionChangePass})(ChangePass)
+
+export default CChangePass;

React/CodePen/src/pages/homePage.js

@@ -1,12 +1,17 @@
 import React from "react";
 import Header from "../components/header";
-
+import CSnippets from "../components/snippet";
+import Footer from "../components/footer";
 
 const Home = () => {
   	return (
-    	<div>
-      		<Header />
-    	</div>
+  		<>
+	    	<div>
+	      		<Header/>
+				<CSnippets/>
+				<Footer/>
+	    	</div>
+    	</>
   	);
 };
 

React/CodePen/src/pages/login.js

@@ -17,8 +17,8 @@ const Log = ({ onLog, LogedIn }) => {
               <div style={{backgroundColor:'pink'}}>Авторизация</div>
             </div>
 
-            <div style={{ paddingTop: "30px" }}>
-              <div style={{ display: "none" }}></div>
+            <div style={{paddingTop: "30px"}}>
+              <div style={{display: "none"}}></div>
 
               <form id="loginform" className="form-horizontal" role="form">
                 <div style={{ "marginBottom": "25px" }} className="input-group">
@@ -34,14 +34,13 @@ const Log = ({ onLog, LogedIn }) => {
                       } 
                   />
                 </div>
-                <div style={{ marginBottom: "25px" }} className="input-group">
+                <div style={{marginBottom: "25px"}} className="input-group">
                   <span className="">
-                    <i className=""></i>
+                      <i className=""></i>
                   </span>
                   <input id="login-password" type="password" className="form-control"
-                    name="password" placeholder="Password" value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  />
+                      name="password" placeholder="Password" value={password}
+                      onChange={(e) => setPassword(e.target.value)}/>
                 </div>
                 <div style={{ marginTop: "10px" }} className="form-group">
                   <div className="">
@@ -52,7 +51,7 @@ const Log = ({ onLog, LogedIn }) => {
                 </div>
                 <div className="form-group">
                   <div>
-                    <div style={{borderTop: "1px solid#888",paddingTop: "15px",fontSize: "85%",}}>
+                    <div style={{borderTop: "1px solid#888",paddingTop: "15px",fontSize: "85%"}}>
                       <a href="/registration">Зарегестрироваться</a>
                     </div>
                   </div>

React/CodePen/src/pages/reg.js

@@ -4,53 +4,52 @@ import { actionFullRegister } from "../actions/actionFullRegister";
 import { Redirect } from "react-router";
 
 const Reg = ({ onReg, LogedIn }) => {
-  const [login, setLogin] = useState("");
-  const [password, setPassword] = useState("");
-  return (
-    <>
-      <div className="container">
-        <div id="loginbox" style={{ marginTop: "120px", border:"1px solid black"}}>
-          <div>
-            <div  style = {{backgroundColor:'pink'}}>
-              <div>Registration</div>
-            </div>
+    const [login, setLogin] = useState("");
+    const [password, setPassword] = useState("");
+    return (
+      <>
+        <div className="container">
+          <div id="loginbox" style={{ marginTop: "120px", border:"1px solid black"}}>
+            <div>
+              <div  style = {{backgroundColor:'pink'}}>
+                <div>Registration</div>
+              </div>
 
-            <div style={{paddingTop: "30px"}} className="panel-body">
-              <form id="loginform" role="form">
-                <div style={{marginBottom: "25px"}}>
-                  <input id="login-username" type="text" className="form-control" name="username"
-                    value={login} onChange={(e) => setLogin(e.target.value)} placeholder="Login"/>
-                </div>
+              <div style={{paddingTop: "30px"}} className="panel-body">
+                <form id="loginform" role="form">
+                  <div style={{marginBottom: "25px"}}>
+                    <input id="login-username" type="text" className="form-control" name="username"
+                      value={login} onChange={(e) => setLogin(e.target.value)} placeholder="Login"/>
+                  </div>
 
-                <div style={{marginBottom: "25px"}}>
-                  <input id="login-password" type="password" className="form-control"
-                    name="password" placeholder="Password" value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                  />
-                </div>
+                  <div style={{marginBottom: "25px"}}>
+                    <input id="login-password" type="password" className="form-control"
+                        name="password" placeholder="Password" value={password}
+                        onChange={(e) => setPassword(e.target.value)}/>
+                  </div>
 
-                <div style={{marginTop: "10px"}} className="form-group">
-                  <div className="">
-                    <a id="btn-login" href="#" onClick={() => onReg(login, password)}>
-                      Зарегестрироваться
-                    </a>
+                  <div style={{marginTop: "10px"}} className="form-group">
+                    <div className="">
+                      <a id="btn-login" href="#" onClick={() => onReg(login, password)}>
+                        Зарегестрироваться
+                      </a>
+                    </div>
                   </div>
-                </div>
 
-                <div className="form-group">
-                  <div className="">
-                    <div style={{borderTop: "1px solid#888",paddingTop: "15px",fontSize: "85%",}}>
-                      <a href="/login">Авторизоваться</a>
+                  <div className="form-group">
+                    <div className="">
+                      <div style={{borderTop: "1px solid#888",paddingTop: "15px",fontSize: "85%"}}>
+                        <a href="/login">Авторизоваться</a>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </form>
+                </form>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </>
-  );
+      </>
+    );
 };
 
 const RegForm = connect((state) => ({ LogedIn: state?.auth?.token }), {

React/CodePen/src/pages/search.js

@@ -7,33 +7,28 @@ const Search = ({onSearch , snippets}) => {
     const [request, setRequest] = useState('');
   return (
     <>
-    <Link to="/">
-        <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
-          Back to Main Page
-        </button>
+      <Link to="/">
+          <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
+            Back to Main Page
+          </button>
       </Link>
+        <br/>
+        <br/>
+        <div style ={{textAlign: "center" , alignItems:"center", justifyContent:'center'}}>
+        <input value={request} onChange={(e) => setRequest(e.target.value)} className="form-control d-inline-block w-50 mt-2"
+        type="search" placeholder="Name of project" aria-label="Search"
+        />
       <br/>
-      <br/>
-      <div style ={{textAlign: "center" , alignItems:"center", justifyContent:'center'}}>
-    <input
-    value={request}
-    onChange={(e) => setRequest(e.target.value)}
-      className="form-control d-inline-block w-50 mt-2"
-      type="search"
-      placeholder="Name of project"
-      aria-label="Search"
-    />
-    <br/>
-    <button
-      className="btn btn-outline-success border-success mt-4 mb-4" onClick = {() => onSearch(request)}
-    >
-      Search
-    </button>
+      <button
+        className="btn btn-outline-success border-success mt-4 mb-4" onClick = {() => onSearch(request)}
+      >
+        Search
+      </button>
     </div>
 
   {snippets?.map((key, index) => (
     <div style={{ textAlign: "center", alignItems: "center" }}>
-      <div className="card w-50 ml-auto mr-auto mt-3 mb-5" style = {{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.2)'}}>
+      <div className="card w-50 ml-auto mr-auto mt-3 mb-5">
         <div className="card-body" style={{ textAlign: "center" }}>
           <h3 className="card-title mb-4 text-info">
             {snippets?.[index]?.title || "Project without name"}