Without antd

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "antd": "^3.22.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.1.1"
   },
   "scripts": {

public/index.html

@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.22.0/antd.min.css" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -1,26 +1,36 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import SignIn from './Components/SignIn';
+import Details from './Components/Details';
+import {HashRouter,Route} from 'react-router-dom';
+import 'antd/dist/antd.css';
 
-function App() {
+const signIn =()=>{
+  return <SignIn/>
+}
+const details = (props) =>{
+  //console.log(props.location.state)
+  return <Details value ={props.location.state}/>
+
+}
+
+class App extends React.Component{
+  state = {
+    path:"/"
+  }
+
+  render(){
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <HashRouter>
+        <div>
+          <Route path ="/" exact component={signIn}/>
+          <Route path="/details" component = {details}/>
+        </div>
+      </HashRouter>
     </div>
   );
+  }
 }
 
 export default App;

src/Components/Details.js

@@ -0,0 +1,16 @@
+import React from 'react';
+//import {Form,Input, Tooltip,Icon,Select,Button,} from 'antd';
+const Details = (props) =>{
+    return(
+        <div>
+        <h1>Details</h1> 
+        <h2>First Name:{props.value.firstName}</h2>
+        <h2>Last Name:{props.value.lastName}</h2>
+        <h2>User Name:{props.value.userName}</h2>
+        <h2>Password Name:{props.value.password}</h2>
+        </div>
+    );
+};
+
+
+export default Details;

src/Components/SignIn.css

@@ -0,0 +1,59 @@
+.back{
+    height:100vh;
+    width:100vw;
+    background-image: url('https://cdn.pixabay.com/photo/2015/09/07/17/25/right-curve-background-928802_960_720.png');
+    background-repeat: no-repeat;
+    background-size:cover;
+
+}
+
+.box{   
+    background-image: url('https://cdn4.vectorstock.com/i/1000x1000/96/88/abstract-blue-curve-line-shape-background-design-vector-15709688.jpg');
+    background-repeat:round;
+    background-size:cover;
+        border-radius: 1em;
+        padding: 1em;
+        height:80vh;
+        left:75vw;
+        top:15vh;
+        transform: translate(-60%,-10%);
+        display: flex;
+        flex-direction: column;
+        position:fixed;
+
+
+}
+.signin{
+    text-align: center;
+    color: #224699;
+    font-family: serif;
+}
+.box div{
+    margin:1em;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+
+.input{
+    height:45px;
+    width: 250px;
+    color:rgb(54, 50, 50);
+    background-color:inherit;
+    margin-bottom: 1px solid blue;
+    -webkit-border-radius: 10px;
+    outline:none;
+    border-radius: 50px;
+    text-align: center;
+}
+.butt{
+    align-content: center;
+    justify-content: center;
+    margin-left:2em;
+    width: 70%;
+    padding: 12px 0px;
+    border-radius: 30px;
+    background-color: #888899;
+    color: aliceblue;
+    outline: none;
+}

src/Components/SignIn.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import './SignIn.css';
+import {Link} from 'react-router-dom';
+
+
+
+class SignIn extends React.Component{
+    constructor(props){
+        super(props);
+        this.state ={
+            firstName:'vivek',
+            lastName:'',
+            password:'',
+            userName:''
+        }
+    }
+
+    inputFirstName=(event)=>{
+        this.setState({firstName:event.target.value})
+    }
+    inputLastName=(event)=>{
+        this.setState({lastName:event.target.value})
+    }
+    inputPassword=(event)=>{
+        this.setState({password:event.target.value})
+    }
+    inputUserName=(event)=>{
+        this.setState({userName:event.target.value})
+    }
+
+    render(){
+
+        return(
+
+            <div className = 'back'>
+
+            <div className = 'box'>
+                 <h1 className = 'signin'>Form</h1>
+
+               <div> 
+                    <input className = 'input' onChange ={this.inputFirstName} type = 'textholder' placeholder = 'Enter First Name'></input>
+
+               </div>
+               <div> 
+                    <input className = 'input' onChange ={this.inputLastName} type = 'textholder' placeholder = 'Enter Last Name'></input>
+
+               </div>
+               <div> 
+                    <input className = 'input' onChange ={this.inputUserName} type = 'textholder' placeholder = 'Enter UserName'></input>
+
+               </div>
+               <div> 
+                    <input className = 'input' type = 'password' onChange={this.inputPassword} placeholder = 'Password'></input>
+               </div>
+               <div> 
+                     <Link className ='butt' 
+                     to ={{pathname:'/details',
+                     state:{firstName:this.state.firstName,
+                     lastName:this.state.lastName,
+                     password:this.state.password,
+                     userName:this.state.userName}
+                     }}>Submit</Link>
+               </div>
+
+            </div>
+            </div>
+
+        );
+    }
+}
+
+export default SignIn;

src/Components/extra.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import {Form,Input, Tooltip,Icon,Cascader,Select,Row,Col,Checkbox,Button,AutoComplete,} from 'antd';
+// const Details = (props) =>{
+//     //console.log("about",props.location)
+//     return(
+//         <div>
+//         DETAILS
+//         </div>
+//     );
+// }
+const { Option } = Select;
+
+class RegistrationForm extends React.Component{
+    state = {
+        confirmDirty: false,
+        autoCompleteResult: [],
+      };
+
+      handleSubmit = e => {
+        e.preventDefault();
+        this.props.form.validateFieldsAndScroll((err, values) => {
+          if (!err) {
+            console.log('Received values of form: ', values);
+          }
+        });
+      };
+
+      handleConfirmBlur = e => {
+        const { value } = e.target;
+        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
+      };
+
+      compareToFirstPassword = (rule, value, callback) => {
+        const { form } = this.props;
+        if (value && value !== form.getFieldValue('password')) {
+          callback('Two passwords that you enter is inconsistent!');
+        } else {
+          callback();
+        }
+      };
+
+      validateToNextPassword = (rule, value, callback) => {
+        const { form } = this.props;
+        if (value && this.state.confirmDirty) {
+          form.validateFields(['confirm'], { force: true });
+        }
+        callback();
+      };
+    render() {
+        const { getFieldDecorator } = this.props.form;
+
+        const formItemLayout = {
+          labelCol: {
+            xs: { span: 24 },
+            sm: { span: 8 },
+          },
+          wrapperCol: {
+            xs: { span: 24 },
+            sm: { span: 16 },
+          },
+        };
+        const tailFormItemLayout = {
+          wrapperCol: {
+            xs: {
+              span: 24,
+              offset: 0,
+            },
+            sm: {
+              span: 16,
+              offset: 8,
+            },
+          },
+        };
+        const prefixSelector = getFieldDecorator('prefix', {
+          initialValue: '91',
+        })(
+          <Select style={{ width: 70 }}>
+            <Option value="91">+91</Option>
+          </Select>,
+        );
+
+
+
+        return (
+          <Form {...formItemLayout} onSubmit={this.handleSubmit}>
+            <Form.Item label="E-mail">
+              {getFieldDecorator('email', {
+                rules: [
+                  {
+                    type: 'email',
+                    message: 'The input is not valid E-mail!',
+                  },
+                  {
+                    required: true,
+                    message: 'Please input your E-mail!',
+                  },
+                ],
+              })(<Input />)}
+            </Form.Item>
+            <Form.Item label="Password" hasFeedback>
+              {getFieldDecorator('password', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please input your password!',
+                  },
+                  {
+                    validator: this.validateToNextPassword,
+                  },
+                ],
+              })(<Input.Password />)}
+            </Form.Item>
+            <Form.Item label="Confirm Password" hasFeedback>
+              {getFieldDecorator('confirm', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please confirm your password!',
+                  },
+                  {
+                    validator: this.compareToFirstPassword,
+                  },
+                ],
+              })(<Input.Password onBlur={this.handleConfirmBlur} />)}
+            </Form.Item>
+            <Form.Item
+              label={
+                <span>
+                  Nickname&nbsp;
+                  <Tooltip title="What do you want others to call you?">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+            >
+              {getFieldDecorator('nickname', {
+                rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
+              })(<Input />)}
+            </Form.Item>
+
+            <Form.Item label="Phone Number">
+              {getFieldDecorator('phone', {
+                rules: [{ required: true, message: 'Please input your phone number!' }],
+              })(<Input addonBefore={prefixSelector} style={{ width: '100%' }} />)}
+            </Form.Item>
+
+
+
+            <Form.Item {...tailFormItemLayout}>
+              <Button type="primary" htmlType="submit">
+                Register
+              </Button>
+            </Form.Item>
+          </Form>
+        );
+      }
+}
+
+const WrappedRegistrationForm = Form.create({ name: 'register' })(RegistrationForm);
+
+export default WrappedRegistrationForm;