Google login

Author: alaaltoros

.gitignore

@@ -118,4 +118,5 @@ fabric.properties
 /target
 **/*.rs.bk
 
-enigma-types.h
+enigma-types.h
+UIcode/client/.env.development

UIcode/client/.env.example

@@ -0,0 +1,2 @@
+REACT_APP_API_URL=
+REACT_APP_GOOGLE_CLIENT_ID=

UIcode/client/jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}

UIcode/client/package-lock.json

@@ -3,14 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.18.0",
+    "axios": "^0.18.1",
     "bootstrap": "^4.4.1",
+    "js-cookie": "^2.2.1",
     "react": "^16.8.6",
     "react-bootstrap": "^1.0.0",
     "react-dom": "^16.8.6",
+    "react-google-login": "^5.1.2",
     "react-router": "^5.1.2",
     "react-router-dom": "^4.1.2",
-    "react-scripts": "2.1.8"
+    "react-scripts": "^3.4.1",
+    "styled-components": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

UIcode/client/package.json

@@ -0,0 +1,4 @@
+.centeralign {
+  margin-top: 29px;
+  padding-left: 106px;
+}

UIcode/client/src/App.css

@@ -0,0 +1,21 @@
+import React from "react";
+import "./App.css";
+import { BrowserRouter as Router, Switch } from "react-router-dom";
+import DefaultLayout from "Layouts/Default";
+import Home from "Pages/Home";
+import API from "Pages/API";
+import Contribute from "Pages/Contribute";
+
+const App = () => {
+  return (
+    <Router>
+      <Switch>
+        <DefaultLayout exact path="/" component={Home} />
+        <DefaultLayout exact path="/API" component={API} />
+        <DefaultLayout exact path="/contribute" component={Contribute} />
+      </Switch>
+    </Router>
+  );
+};
+
+export default App;

UIcode/client/src/App.js

@@ -0,0 +1,57 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import colors from "Theme/colors";
+
+const colorStyles = {
+  primary: css`
+    background-color: ${colors.primary.main};
+    color: white;
+    &:hover {
+      background-color: ${colors.primary.light};
+    }
+    &:active {
+      background-color: ${colors.primary.dark};
+    }
+  `,
+  secondary: css`
+    background-color: white;
+    color: ${colors.primary.main};
+    border-color: ${colors.grey.light};
+    &:hover {
+      border-color: ${colors.primary.main};
+    }
+  `
+};
+
+const StyledButton = styled.button`
+  height: ${props =>
+    props.size === "big" ? "56px" : props.size === "default" ? "48px" : "32px"};
+  font-size: 24px;
+  border-width: 1px;
+  border-style: solid;
+  outline: none;
+  padding: auto 24px;
+  min-width: 200px;
+  transition: 0.5s;
+  box-sizing: content-box;
+  cursor: pointer;
+  font-weight: bold;
+  margin: 0 9px;
+
+  ${props => colorStyles[props.color]}
+`;
+
+const Button = ({
+  children,
+  color = "secondary",
+  size = "default",
+  ...restProps
+}) => {
+  return (
+    <StyledButton color={color} size={size} {...restProps}>
+      {children}
+    </StyledButton>
+  );
+};
+
+export default Button;