started to make the interface

329fcc13 · Sami Spets · ff2b59dc · 329fcc13 · 329fcc13 · 329fcc13
Commit 329fcc13 authored 5 years ago by Sami Spets
--- a/web-service/client/.gitignore
+++ b/web-service/client/.gitignore
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
--- a/web-service/client/package.json
+++ b/web-service/client/package.json
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-scripts": "0.9.5"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
\ No newline at end of file
--- a/web-service/client/public/index.html
+++ b/web-service/client/public/index.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
--- a/web-service/client/src/App.css
+++ b/web-service/client/src/App.css
+b {
+  vertical-align: center;
+}
+a {
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+ }
+ 
+ .button {
+  display: inline-block;
+  max-width: 300px;
+  margin-top: 50px;
+  border: 0;
+  padding: 0 18px;
+  text-align: left;
+  width: 100%;
+  height: 37px;
+  border-radius: 4px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-font-feature-settings: "liga" on;
+  color: rgba(0, 0, 0, 0.84) !important;
+  fill: rgba(0, 0, 0, 0.84) !important;
+  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
+  font: inherit;
+  outline: none;
+ }
+ 
+ .button .svgIcon {
+  vertical-align: middle;
+  fill: rgba(0, 0, 0, 0.54);
+  padding-right: 4px;
+  height: 37px;
+  display: inline-block;
+ }
+
+.div {
+  vertical-align: center;
+  text-align: center
+}
\ No newline at end of file
--- a/web-service/client/src/App.js
+++ b/web-service/client/src/App.js
+import React, { useState } from 'react';
+import './App.css'
+//import Streams from 'Streams'
+
+const App = () => {
+
+    const [user, setUser] = useState(null);
+    const [username, setUsername] = useState('');
+
+    const handleLogin = async (event) => {
+        /* User clicks on the image of either Haka login or Google Oauth
+        This will  */
+    }
+
+    if(user === null){
+        return (
+            <div>
+                <h2>Welcome to Future Technology Lab</h2>
+                <h3>Please login!</h3>
+                <a href="/auth/google" class="button">
+                    <div>
+                        <span class="svgIcon t-popup-svg">
+                            <svg
+                                class="svgIcon-use"
+                                width="25"
+                                height="37"
+                                viewBox="0 0 25 25"
+                            >
+                                <g fill="none" fill-rule="evenodd">
+                                <path
+                                    d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
+                                    fill="#4285F4"
+                                />
+                                <path
+                                    d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
+                                    fill="#34A853"
+                                />
+                                <path
+                                    d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
+                                    fill="#FBBC05"
+                                />
+                                <path
+                                    d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
+                                    fill="#EA4335"
+                                />
+                                </g>
+                            </svg>
+                        </span>
+                        <span class="button-label">Sign in with Google</span>
+                    </div>
+                </a>
+            </div>
+            
+        )
+    }else {
+        return
+        <div>
+            {/* <Streams /> */}
+        </div>
+    }
+}
+export default App;   
\ No newline at end of file
--- a/web-service/client/src/Streams.js
+++ b/web-service/client/src/Streams.js
+
+
+/* This file will contain list of streams.
+The user is able to select which stream he/she will WebAuthentication.
+
+The user will be redirected to Stream.js file  
+*/
\ No newline at end of file
--- a/web-service/client/src/index.js
+++ b/web-service/client/src/index.js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);