From 36ceb825d645865a9c577ef279f7d2b9a0404870 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Mon, 27 Sep 2021 18:42:11 -0300 Subject: [PATCH] Upload API and Change API options done --- public/css_styles/styles.css | 88 ++++++++++++ public/css_styles/styles.css.map | 2 +- public/sass_styles/_account.scss | 119 ++++++++++++++++ public/sass_styles/styles.scss | 1 + src/components/Account Childrens/Message.jsx | 2 +- src/components/Account.jsx | 142 +++++++++++++------ src/components/Identify.jsx | 2 +- 7 files changed, 310 insertions(+), 46 deletions(-) create mode 100644 public/sass_styles/_account.scss diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css index 056441b..8c2c8d8 100644 --- a/public/css_styles/styles.css +++ b/public/css_styles/styles.css @@ -428,6 +428,94 @@ background-color: #b632eb; } +.account-container #message { + padding-left: 5vw; + background-color: #ff6a6a; +} +.account-container #message h1 { + font-family: "Raleway", sans-serif; + font-weight: 700; + margin: 0; + padding: 0; + user-select: none; + color: #ffffff; + padding: 2vh 0px; +} +.account-container .successfully { + background-color: #75b7ff !important; +} +.account-container .successfully h1 { + color: #3a3a3a !important; +} +.account-container .next-step .disabled { + user-select: none; + cursor: initial; + pointer-events: none; + opacity: 30%; +} +.account-container .next-step .next-step-title { + padding-left: 5vw; + padding-top: 5vh; + background-color: #9DF3C4; +} +.account-container .next-step .next-step-title h1, .account-container .next-step .next-step-title h2 { + margin: 0; + padding: 0; + user-select: none; + font-family: "Raleway", sans-serif; + font-weight: 700; + color: #1FAB89; + padding-bottom: 3vh; +} +.account-container .next-step form { + width: 50vw; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 1vh; +} +.account-container .next-step form input { + height: 4vh; + width: 60%; + margin-bottom: 1vh; + border: none; + border-bottom: 1px solid #969696; + outline: none; +} +.account-container .next-step form input[type=submit] { + width: 50%; + border: #969696 solid 1px; +} +.account-container .next-step .flex-container-change-api-container { + padding-left: 5vw; +} +.account-container .next-step .flex-container-change-api-container .change-api-container { + width: 50vw; + background-color: #D7FBE8; + display: flex; + flex-direction: column; + padding-top: 1vh; + border-radius: 5%; +} +.account-container .next-step .flex-container-change-api-container .change-api-container .api-preview-container .title { + margin: 0; + padding: 0; + user-select: none; + font-family: "Raleway", sans-serif; + font-weight: 700; +} +.account-container .next-step .flex-container-change-api-container .change-api-container .api-preview-container .api-preview { + font-weight: bold; +} +.account-container .next-step .flex-container-change-api-container .change-api-container #change-API-button { + height: 4vh; + width: 20vw; + margin-bottom: 1vh; + border: none; + outline: none; + border: #969696 solid 1px; +} + html, body { margin: 0; padding: 0; diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map index 4054a95..808b483 100644 --- a/public/css_styles/styles.css.map +++ b/public/css_styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss"],"names":[],"mappings":"AACA;EACI,kBCsCS;EDpCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFuBO;;AEpBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFOG;EENH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFHG;EEKH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFlBO;EEmBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHuBO;EGtBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHVL;EGWK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH7CE;;;AGsDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN0BU;;AMxBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPED;EODC,kBPGF;;;AQ3Cd;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRwBD;EQtBC;EAEA;;AAEA;ERpBZ;EACA;EAQA;EACA;EACA;EQagB;;AAIR;EACI;EACA,kBRSM;;AQLd;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;AClEpB;EAEI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA,kBT6BS;ES5BT;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EAEA,kBTKS;;ASFb;EACI;;;ATmBR;EACI;EACA;;;AAGJ;EACI;EACA,kBAhCe","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file diff --git a/public/sass_styles/_account.scss b/public/sass_styles/_account.scss new file mode 100644 index 0000000..b22fe2a --- /dev/null +++ b/public/sass_styles/_account.scss @@ -0,0 +1,119 @@ +.account-container { + + #message { + padding-left: 5vw; + + background-color: #ff6a6a; + + h1 { + @include titleFont(); + @include normalizeTitle(); + + color: #ffffff; + padding: 2vh 0px; + } + } + + .successfully { + background-color: #75b7ff !important; + + h1 {color: #3a3a3a !important;} + } + + .next-step { + + .disabled { + user-select: none; + cursor: initial; + pointer-events: none; + opacity: 30%; + } + + .next-step-title { + padding-left: 5vw; + + padding-top: 5vh; + + background-color: $light-color; + + h1, h2 { + + @include normalizeTitle(); + @include titleFont(); + + color: $second-color; + + padding-bottom: 3vh; + } + } + + form { + width: 50vw; + + display: flex; + flex-direction: column; + align-items: center; + + padding-top: 1vh; + + + input { + height: 4vh; + width: 60%; + + margin-bottom: 1vh; + + border: none; + border-bottom: 1px solid $border-color; + outline: none; + + } + + input[type=submit] { + width: 50%; + border: $border-color solid 1px; + } + } + + .flex-container-change-api-container { + padding-left: 5vw; + + .change-api-container { + width: 50vw; + background-color: $lightest-color; + + display: flex; + flex-direction: column; + + padding-top: 1vh; + + border-radius: 5%; + + .api-preview-container { + + + .title { + @include normalizeTitle(); + @include titleFont(); + } + + .api-preview { + font-weight: bold; + } + } + + #change-API-button { + height: 4vh; + width: 20vw; + + margin-bottom: 1vh; + + border: none; + outline: none; + + border: $border-color solid 1px; + } + } + } + } +} \ No newline at end of file diff --git a/public/sass_styles/styles.scss b/public/sass_styles/styles.scss index 175c269..473fb86 100644 --- a/public/sass_styles/styles.scss +++ b/public/sass_styles/styles.scss @@ -59,6 +59,7 @@ $lightest-color-dark: #EEEEEE; @import 'pomodoro-counter'; @import 'identify'; @import 'dark-mode_toogle-switch'; +@import 'account'; html, body { margin: 0; diff --git a/src/components/Account Childrens/Message.jsx b/src/components/Account Childrens/Message.jsx index da6bee1..e50ecbc 100644 --- a/src/components/Account Childrens/Message.jsx +++ b/src/components/Account Childrens/Message.jsx @@ -25,7 +25,7 @@ const Message = (props) => { }, []) return ( -
+

{message}

) diff --git a/src/components/Account.jsx b/src/components/Account.jsx index 1b6c598..5ea97c4 100644 --- a/src/components/Account.jsx +++ b/src/components/Account.jsx @@ -1,7 +1,7 @@ import React, {useState} from 'react' import {firebase} from './Firebase/firebase' import {getAuth, onAuthStateChanged} from 'firebase/auth' -import { doc, updateDoc, getFirestore } from "firebase/firestore"; +import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore"; import Message from './Account Childrens/Message'; const Account = () => { @@ -27,6 +27,10 @@ const Account = () => { }) + React.useEffect( () => { + checkApiKey() + }) + const submitApiKey = async (e) => { e.preventDefault() e.target.reset() @@ -102,61 +106,113 @@ const Account = () => { return false } } + + const checkApiKey = async () => { + + try { + const db = await getFirestore(firebase) + const referenceDocument = await doc(db, 'users', userUID) + const document = await getDoc(referenceDocument) + const data = await document.data() + + await applyApiState(data) + } catch (error) { + console.log(error) + } + } + + const applyApiState = (data) => { + if (data.keyClockify !== '') { + + setActualState('API UPLOADED') + setApiKey(data.keyClockify) + setFristThreeApiKey(apiKey[0] + apiKey[1] + apiKey[2]) + } + } + + const deleteApiKey = async () => { + + try { + const db = await getFirestore(firebase) + const referenceDocument = await doc(db, 'users', userUID) + + await updateDoc(referenceDocument, { + keyClockify: '' + }) + + } catch (error) { + console.log(error) + } + + setActualState('') + setApiKey('aa') + setApiKey('') + } return ( -
+
{ actualState === 'API NOT VALID' || actualState === 'API NOT UPLOADED' || actualState === 'API UPLOADED' ? : null } { signIn ? -
-

One more step...

-

Insert your Clockify API here

-
- {setApiKey(e.target.value)} - } - /> +
+
+
+

One more step...

+

Insert your Clockify API here

+
+ + + {setApiKey(e.target.value)} + } + placeholder="API Key" + value= + { + actualState === '' ? apiKey : '' + } + /> + + + +
- - { actualState === 'API UPLOADED' ? -
+
+
+ + - - - + +
: null } diff --git a/src/components/Identify.jsx b/src/components/Identify.jsx index 0603573..8e019d4 100644 --- a/src/components/Identify.jsx +++ b/src/components/Identify.jsx @@ -62,7 +62,7 @@ const Identify = (props) => { console.log(response) console.log(response.user) - //props.history.push('/config-account') + props.history.push('/config-account') } catch (error) { console.log(error)