Add user login.

client/.env.prod

@@ -1 +1,2 @@
-REACT_APP_API_BASE_URL=https://api.kmdcodes.com/
+REACT_APP_GOOGLE_OAUTH_CLIENT_ID=15612832563-g5u8g2lmsrkgtac3kf7tqva65c0so62j.apps.googleusercontent.com
+REACT_APP_API_BASE_URL=https://api.kmdcodes.com

client/package.json

@@ -2,7 +2,9 @@
   "name": "client",
   "version": "0.2.0",
   "private": true,
+  "proxy": "http://localhost:8000/",
   "dependencies": {
+    "@react-oauth/google": "^0.12.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",

client/src/App.css

@@ -39,6 +39,6 @@
 
 
 .Painting {
-    border: solid #000;
-    margin: 2px;
-}
+    display: inline;
+    margin: 1em;
+}

client/src/App.js

@@ -1,21 +1,29 @@
 import React, { useEffect, useState } from "react";
 import './App.css';
-import {VotingApi} from './api'
+import { VotingApi } from './api'
+import GoogleButton from './google';
 
 function App() {
-  const [paintingsData, setData] = useState([]);
+  const [ paintingsData, setData ] = useState([]);
 
   useEffect(() => {
     VotingApi
-      .get()
+      .getArt()
       .then(data => setData(data['art']))
   }, []);
 
-  return (<div className="App">
-    <div>{ paintingsData ? paintingsData.map(
-      pd =>
-        <Painting key={pd.artist_id} props={pd} />)  :  'Loading...'}</div>
-    </div>);
+  return (
+    <div className="App">
+    <GoogleButton />
+    <div className="container">
+    <h2 className="card">Rendered Art</h2>
+    </div>
+
+    <div className="container">{ paintingsData ? paintingsData.map(
+      pd => <Painting key={pd.artist_id} props={pd} />)  :  'Loading...' }
+    </div>
+    </div>
+  );
 }
 
 
@@ -30,11 +38,14 @@ class Painting extends React.Component {
 
   render() {
     return (
+      <div className="Painting">
       <img
-      className="Painting"
+      className="card"
       src={this.state.publicUrl}
       alt={"Computer generated abstract art by " + this.state.artistId}
+      onClick={VotingApi.vote}
       />
+      </div>
     );
   }
 }

client/src/App.test.js

@@ -5,8 +5,11 @@ import App from './App';
 
 jest.mock("./api", () => {
   const VotingApi = {
-    get: async function () {
-      console.log('here');
+    me: async function() {
+      return ({});
+    },
+
+    getArt: async function () {
       return ({art: [{
         artist_id: "mock-artist-id",
         generation: "0",

client/src/api.js

@@ -3,10 +3,18 @@ function getUrl(path) {
   return baseUrl + path;
 }
 
+export const LoginUri = getUrl('/accounts/google/login/');
+
 export const VotingApi = {
-  get: async function () {
+  me: async function() {
+    const response = await fetch(getUrl('/me'), {
+      credentials: "include",
+    });
+    return response.json();
+  },
+
+  getArt: async function () {
     const response = await fetch(getUrl('/art'));
-    const paintingsData = await response.json();
-    return paintingsData;
+    return await response.json();
   }
 }

client/src/google.css

@@ -0,0 +1,109 @@
+.gsi-material-button {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -webkit-appearance: none;
+  background-color: #131314;
+  background-image: none;
+  border: 1px solid #747775;
+  -webkit-border-radius: 20px;
+  border-radius: 20px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #e3e3e3;
+  cursor: pointer;
+  font-family: 'Roboto', arial, sans-serif;
+  font-size: 14px;
+  height: 40px;
+  letter-spacing: 0.25px;
+  outline: none;
+  overflow: hidden;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
+  transition: background-color .218s, border-color .218s, box-shadow .218s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+  max-width: 400px;
+  min-width: min-content;
+  border-color: #8e918f;
+}
+
+.gsi-material-button .gsi-material-button-icon {
+  height: 20px;
+  margin-right: 12px;
+  min-width: 20px;
+  width: 20px;
+}
+
+.gsi-material-button .gsi-material-button-content-wrapper {
+  -webkit-align-items: center;
+  align-items: center;
+  display: flex;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  height: 100%;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+}
+
+.gsi-material-button .gsi-material-button-contents {
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  font-family: 'Roboto', arial, sans-serif;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+.gsi-material-button .gsi-material-button-state {
+  -webkit-transition: opacity .218s;
+  transition: opacity .218s;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.gsi-material-button:disabled {
+  cursor: default;
+  background-color: #13131461;
+  border-color: #8e918f1f;
+}
+
+.gsi-material-button:disabled .gsi-material-button-state {
+  background-color: #e3e3e31f;
+}
+
+.gsi-material-button:disabled .gsi-material-button-contents {
+  opacity: 38%;
+}
+
+.gsi-material-button:disabled .gsi-material-button-icon {
+  opacity: 38%;
+}
+
+.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
+.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
+  background-color: white;
+  opacity: 12%;
+}
+
+.gsi-material-button:not(:disabled):hover {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+}
+
+.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
+  background-color: white;
+  opacity: 8%;
+}
+

client/src/google.js

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import { GoogleOAuthProvider } from '@react-oauth/google';
+import './google.css'
+import { LoginUri, VotingApi } from './api'
+
+const GOOGLE_OAUTH_CLIENT_ID = process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_ID;
+
+function GoogleButton() {
+
+  const [ userData, setUserData ] = useState([]);
+
+  useEffect(() => {
+    VotingApi
+      .me()
+      .then(userdata => setUserData(userdata))
+  }, []);
+
+  const urlParams = new URLSearchParams({
+    'next': `${window.location}`
+  }).toString();
+
+  return (
+    <GoogleOAuthProvider clientId={GOOGLE_OAUTH_CLIENT_ID}>
+
+    <div className="container">
+    {userData.email ? (
+      <h3 className="card text-left">Welcome, {userData.name}</h3>
+    ) : (
+      <>
+      <div id="g_id_onload"
+      data-client_id={GOOGLE_OAUTH_CLIENT_ID}
+      data-login_uri={LoginUri + '?' + urlParams}
+      data-auto_prompt="false">
+      </div>
+
+      <h2>
+      <div className="g_id_signin"
+      data-type="standard"
+      data-size="large"
+      data-theme="outline"
+      data-text="sign_in_with"
+      data-shape="rectangular"
+      data-logo_alignment="left">
+      </div>
+      </h2>
+      </>
+    )}
+    </div>
+    </GoogleOAuthProvider>
+  );
+}
+
+export default GoogleButton;

client/src/index.css

@@ -1,3 +1,11 @@
+@import "chota.min.css";
+
+:root {
+  --color-primary: #2a1d50;
+  --grid-maxWidth: 138rem;
+  --bd-primary: --color-priary;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -7,7 +15,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+.Painting .card {
+    padding: 0;
 }

client/src/index.js

@@ -6,9 +6,12 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
+  <>
+  <script src="https://accounts.google.com/gsi/client" async></script>
   <React.StrictMode>
     <App />
   </React.StrictMode>
+  </>
 );
 
 // If you want to start measuring performance in your app, pass a function

infra/app/variables.tf

@@ -1,7 +1,7 @@
 variable "app_versions" {
   type = map(string)
   default = {
-    client : "0.2.2",
+    client : "0.3.0",
     api : "0.2.0",
   }