registration UI components are added

hipstagram/.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

hipstagram/.idea/hipstagram.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

hipstagram/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

hipstagram/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/hipstagram.iml" filepath="$PROJECT_DIR$/.idea/hipstagram.iml" />
+    </modules>
+  </component>
+</project>

hipstagram/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

hipstagram/src/Components/RegistrationError/ConfirmPasswordError.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './RegistrationError.css';
+
+const ConfirmPasswordError = () => {
+    return (
+        <div className='confirmPassword-error__wrapper'>
+            <b>Password</b> and <b>Confirm Password</b> fields should have the same value
+        </div>
+    )
+}
+
+export default ConfirmPasswordError;

hipstagram/src/Components/RegistrationError/ExistingLoginError.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './RegistrationError.css';
+
+const ExistingLoginError = () => {
+    return (
+        <div className='registration-error__wrapper'>
+            Login you try to add is already
+            <b> exist</b>. Please try to <b>add</b> another one
+        </div>
+    )
+}
+
+export default ExistingLoginError;

hipstagram/src/Components/RegistrationError/RegistrationError.css

@@ -0,0 +1,29 @@
+.registration-error__wrapper {
+    background: rgb(236, 109, 136);
+    border: 2px solid #990808;
+    border-radius: 5px;
+    padding: 15px 35px;
+    margin: 15px 0;
+    text-align: center;
+    font-size: 21px;
+    color: #000000;
+}
+
+.registration-error__wrapper b {
+    color: #a81111;
+}
+
+.confirmPassword-error__wrapper {
+    background: rgb(236, 109, 136);
+    border: 2px solid #990808;
+    border-radius: 5px;
+    padding: 15px 35px;
+    margin: 15px 0;
+    text-align: center;
+    font-size: 21px;
+    color: #000000;
+}
+
+.confirmPassword-error__wrapper b {
+    color: #a81111;
+}

hipstagram/src/Content/Registration/Registration.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import './Registration.css';
+import ExistingLoginError from "../../Components/RegistrationError/ExistingLoginError";
+import ConfirmPasswordError from "../../Components/RegistrationError/ConfirmPasswordError";
 
 const Registration = () => {
     return (
@@ -14,6 +16,9 @@ const Registration = () => {
             <nav>
                 <NavLink to="/login">Login</NavLink>
             </nav>
+
+            <ExistingLoginError />
+            <ConfirmPasswordError />
         </div>
     )
 }