Upload API and Change API options done

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;

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"}
+{"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"}

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;
+                }
+            }
+        }
+    }
+}

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;

src/components/Account Childrens/Message.jsx

@@ -25,7 +25,7 @@ const Message = (props) => {
     }, [])
 
     return (
-        <div>
+        <div id="message" className={props.message === 'API UPLOADED' ? 'successfully' : null}>
             <h1>{message}</h1>
         </div>
     )

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()
@@ -103,60 +107,112 @@ const Account = () => {
         }
     }
 
+    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 (
-        <div>
+        <div className="account-container">
             {
                 actualState === 'API NOT VALID' || actualState === 'API NOT UPLOADED' || actualState === 'API UPLOADED' ? <Message message={actualState}/> : null
             }
             {
                 signIn ?
-                    <div>
+                    <div className="next-step">
-                        <h1>One more step...</h1>
+                        <div className={actualState === 'API UPLOADED' ? 'disabled' : null}>
-                        <h2>Insert your Clockify API here</h2>
+                            <div className="next-step-title">
-                        <form
+                                <h1>One more step...</h1>
-                            onSubmit={submitApiKey}
+                                <h2>Insert your <a href="https://clockify.me/help/faq/where-can-find-api-information">Clockify API</a> here</h2>
-                            className=
+                            </div>
-                            {
+
-                                actualState === 'API UPLOADED' ? 'disabled' : null
+                            <form
-                            }
+                                onSubmit={submitApiKey}
-                        >
+                            >
-                            <input
+                                <input
-                                type="text"
+                                    type="text"
-                                onChange=
+                                    onChange=
-                                {
+                                    {
-                                    (e) => {setApiKey(e.target.value)}
+                                        (e) => {setApiKey(e.target.value)}
-                                }
+                                    }
-                            />
+                                    placeholder="API Key"
+                                    value=
+                                    {
+                                        actualState === '' ? apiKey : ''
+                                    }
+                                />
+
+                                <input
+                                    type="submit"
+                                    value="Send API"
+                                />
+                            </form>
+                        </div>
 
-                            <input
-                                type="submit"
-                            />
-                        </form>
                         {
                             actualState === 'API UPLOADED' ?
 
-                            <div>
+                            <div className="flex-container-change-api-container">
+                                <div className="change-api-container">
                                     
-                                <label
+                                    <label
-                                    for="change-API-button">
+                                        for="change-API-button">
-                                        <div>
+                                            <div className="api-preview-container">
-                                            <p>
+                                                <p className="title">
-                                                Change the API Key
+                                                    Change the API Key
-                                            </p>
+                                                </p>
-                                            <p>
+                                                <p className="api-preview">
-                                                {fristThreeApiKey}*******************
+                                                    {fristThreeApiKey}*******************
-                                            </p>
+                                                </p>
-                                        </div>
+                                            </div>
                                         
-                                </label>
+                                    </label>
                                 
-                                <button
+                                    <button
-                                    id="change-API-button"
+                                        id="change-API-button"
-                                    onClick={() => setActualState('')}
+                                        onClick={() => deleteApiKey()}
-                                    > Change
+                                        > Change
                                         
-                                </button>
+                                    </button>
 
+                                </div>
                             </div>
                             : null
                         }

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)