signup UI

src/App.js

@@ -7,6 +7,7 @@ import Home from "./views/home/Home";
 import Navbar from "./components/common/navbar/navbar.component";
 import SubNavbar from "./components/common/sub_navbar/sub_navbar.component";
 import Sidebar from "./components/common/sidebar/sidebar.component";
+import Signup from "./views/singup/Signup";
 // import MainComponent from "./views/main/Main";
 
 const App = styled.div`
@@ -59,6 +60,13 @@ class AppComponent extends Component {
                   );
                 }}
               />
+              <Route
+              exact
+              path="/sign-up"
+              render={routerProps => {
+                return <Signup {...routerProps} />;
+              }}
+              />
             </Switch>
           </MainView>
         </Content>

src/views/singup/GoogleLogin.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import { Button, Icon } from 'antd';
+class GoogleLogin extends Component{
+    constructor(props) {
+        super(props)
+    }
+
+    componentDidMount(){
+        (function() {
+            var e = document.createElement("script");
+            e.type = "text/javascript";
+            e.async = true;
+            e.src = "https://apis.google.com/js/client:platform.js?onload=gPOnLoad";
+            var t = document.getElementsByTagName("script")[0];
+            t.parentNode.insertBefore(e, t)
+        })();    
+    }
+
+    googleLogin = () => {
+        let response = null;
+        window.gapi.auth.signIn({
+            callback: function(authResponse) {
+                this.googleSignInCallback( authResponse )
+            }.bind( this ),
+            clientid: "", //Google client Id
+            cookiepolicy: "single_host_origin",
+            requestvisibleactions: "http://schema.org/AddAction",
+            scope: "https://www.googleapis.com/auth/plus.login email"
+        });
+    }
+
+    googleSignInCallback = (e) => {
+        console.log( e )
+        if (e["status"]["signed_in"]) {
+            window.gapi.client.load("plus", "v1", function() {
+                if (e["access_token"]) {
+                    this.getUserGoogleProfile( e["access_token"] )
+                } else if (e["error"]) {
+                    console.log('Import error', 'Error occured while importing data')
+                }
+            }.bind(this));
+        } else {
+            console.log('Oops... Error occured while importing data')
+        }
+    }
+
+    getUserGoogleProfile = accesstoken => {
+        var e = window.gapi.client.plus.people.get({
+            userId: "me"
+        });
+        e.execute(function(e) {
+            if (e.error) {
+                console.log(e.message);
+                console.log('Import error - Error occured while importing data')
+                return
+
+            } else if (e.id) {
+                //Profile data
+                console.log( e );
+                return;
+            }
+        }.bind(this));
+    }
+
+    render(){
+        return(
+            <div>
+            <Button block onClick={() => this.googleLogin()} ><Icon style={{ fontSize: '25px', color: "red" }} type="google-plus" /></Button>
+            </div>
+        )
+    }
+
+}
+
+export default GoogleLogin;

src/views/singup/LinkedinLogin.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import { Button, Icon } from 'antd';
+
+class LinkedinLogin extends Component{
+    constructor(props) {
+        super(props)
+    }
+
+    componentDidMount(){
+        (function() {
+            var e = document.createElement("script");
+            e.type = "text/javascript";
+            e.async = true;
+            e.src = "http://platform.linkedin.com/in.js?async=true";
+            var t = document.getElementsByTagName("script")[0];
+            t.parentNode.insertBefore(e, t)
+        })();   
+    } 
+
+    linkedinLogin = () => {
+        window.IN.init({
+            api_key : ""
+        });
+        setTimeout(function(){
+                this.getUserDetails()
+            }.bind(this),1000);   
+        console.log( "Loaded" )
+    }
+
+    getUserDetails = () => {
+        window.IN.User.authorize( function(){ 
+            window.IN.API.Profile("me")
+                .fields(["id", "firstName", "lastName", "pictureUrl", "publicProfileUrl"])
+                .result(function(result) {
+                    console.log(result);
+                    alert("Successfull login from linkedin : "+ result.values[0].firstName + " " + result.values[0].lastName);
+                })
+                .error(function(err) {
+                    console.log('Import error - Error occured while importing data')
+                });
+        });
+    }
+    render(){
+        return(
+            <Button block onClick={ () => this.linkedinLogin()}><Icon style={{ fontSize: '25px', color: "#4E98C9" }} type="linkedin" /></Button>
+        )
+    }
+}
+
+export default LinkedinLogin;

src/views/singup/Signup.js

@@ -0,0 +1,133 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { Row, Col, Button, Icon, Input, Form, Tooltip } from 'antd';
+import GoogleLogin from './GoogleLogin';
+import LinkedinLogin from './LinkedinLogin';
+const FormItem = Form.Item;
+class Signup extends Component {
+    state = { username: "", email: "", password: "" }
+    setValue = (type, value) => {
+        this.setState({ [type]: value }, () => {
+        });
+    };
+    handleUsername = e => {
+        e.preventDefault();
+        this.setValue("username", e.target.value);
+    };
+
+    handlePassword = e => {
+        e.preventDefault();
+        this.setValue("password", e.target.value);
+    };
+    handleEmail = e => {
+        e.preventDefault();
+        this.setValue("email", e.target.value)
+    }
+    handleSubmit = e => {
+        e.preventDefault();
+        console.log("submitted");
+
+    };
+    handleGoogle = () => {
+        console.log("Google btn clicked");
+    }
+    handleGithub = () => {
+        console.log("Github btn clicked");
+    }
+    handleLinkedin = () => {
+        console.log("LinkedIn btn clicked");
+    }
+    render() {
+        return (
+            <Form onSubmit={this.handleSubmit}>
+                <FormItem >
+                    <Row type="flex" justify="center">
+                        <Col type="primary" xs={20} lg={7} style={{ fontSize: '37px', color: "#4E98C9" }}>
+                            <div style={{ textAlign: "center" }}>
+                                <label style={{ fontSize: "30px", fontWeight: "bolder" }}>Sign Up </label>
+                            </div>
+                        </Col>
+                    </Row>
+                </FormItem>
+
+                <Row type="flex" justify="center">
+                    <Col xs={20} sm={16} md={12} lg={7}>
+                        <FormItem>
+                            <Tooltip placement="right" title='Max 20 Chars, No special symbols'>
+                                <Input
+                                    prefix={<Icon type="user" style={{ fontSize: '16px' }} />}
+                                    size="large"
+                                    id="error"
+                                    type="text"
+                                    placeholder="Enter Username"
+                                    onBlur={this.handleUsername}
+                                    required
+                                    pattern="[A-Za-z]{0,20}"
+                                />
+                            </Tooltip>
+                        </FormItem>
+                    </Col>
+                </Row>
+                <FormItem>
+                    <Row type="flex" justify="center">
+                        <Col xs={20} sm={16} md={12} lg={7}>
+                            <Input
+                                prefix={<Icon block type="mail" style={{ fontSize: '16px' }} />}
+                                size="large"
+                                type="email"
+                                placeholder="Enter Email"
+                                required
+                                onBlur={this.handleEmail}
+                            />
+                        </Col>
+                    </Row>
+                </FormItem>
+                <FormItem><Row type="flex" justify="center">
+                    <Col xs={20} sm={16} md={12} lg={7}>
+                        <Input
+                            prefix={<Icon style={{ fontSize: '16px' }} type="unlock" />}
+                            size="large"
+                            type="password"
+                            placeholder="Enter Password"
+                            required
+                            onBlur={this.handlePassword}
+                        />
+                    </Col>
+                </Row></FormItem>
+                <FormItem>
+                    <Row type="flex" justify="center">
+                        <Col xs={20} sm={16} md={12} lg={7}>
+                            <Button type="primary" style={{ fontWeight: "bold" }} size="large" htmlType="submit" block> Sign Up </Button>
+                        </Col>
+                    </Row>
+                </FormItem>
+                <FormItem><Row type="flex" justify="center">
+                    <Col xs={6.5} sm={4} md={3} lg={2}>
+
+                        <GoogleLogin/>
+                    </Col>
+                    <Col xs={6.5} sm={4} md={3} lg={2}>
+                        <Button block onClick={this.handleGithub}><Icon style={{ fontSize: '25px' }} type="github" /></Button>
+                    </Col>
+                    <Col xs={6.5} sm={4} md={3} lg={2}>
+                        <LinkedinLogin/>
+                    </Col>
+                </Row></FormItem>
+                <FormItem>
+                    <Row type="flex" justify="center">
+                        <Col xs={24}>
+                            <div style={{ textAlign: "center" }}>
+                                <Link as={Link} to="/sign-in">
+                                    Already a user? Login here</Link>
+                            </div>
+                        </Col>
+                    </Row>
+                </FormItem>
+            </Form>
+
+        )
+    }
+}
+
+export default Signup;