mirror of
https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git
synced 2025-10-12 23:52:30 +00:00
Upload API and Change API options done
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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"}
|
||||
119
public/sass_styles/_account.scss
Normal file
119
public/sass_styles/_account.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -59,6 +59,7 @@ $lightest-color-dark: #EEEEEE;
|
||||
@import 'pomodoro-counter';
|
||||
@import 'identify';
|
||||
@import 'dark-mode_toogle-switch';
|
||||
@import 'account';
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
||||
@@ -25,7 +25,7 @@ const Message = (props) => {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div id="message" className={props.message === 'API UPLOADED' ? 'successfully' : null}>
|
||||
<h1>{message}</h1>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -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 (
|
||||
<div>
|
||||
<div className="account-container">
|
||||
{
|
||||
actualState === 'API NOT VALID' || actualState === 'API NOT UPLOADED' || actualState === 'API UPLOADED' ? <Message message={actualState}/> : null
|
||||
}
|
||||
{
|
||||
signIn ?
|
||||
<div>
|
||||
<h1>One more step...</h1>
|
||||
<h2>Insert your Clockify API here</h2>
|
||||
<form
|
||||
onSubmit={submitApiKey}
|
||||
className=
|
||||
{
|
||||
actualState === 'API UPLOADED' ? 'disabled' : null
|
||||
}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
onChange=
|
||||
{
|
||||
(e) => {setApiKey(e.target.value)}
|
||||
}
|
||||
/>
|
||||
<div className="next-step">
|
||||
<div className={actualState === 'API UPLOADED' ? 'disabled' : null}>
|
||||
<div className="next-step-title">
|
||||
<h1>One more step...</h1>
|
||||
<h2>Insert your <a href="https://clockify.me/help/faq/where-can-find-api-information">Clockify API</a> here</h2>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={submitApiKey}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
onChange=
|
||||
{
|
||||
(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
|
||||
for="change-API-button">
|
||||
<div className="api-preview-container">
|
||||
<p className="title">
|
||||
Change the API Key
|
||||
</p>
|
||||
<p className="api-preview">
|
||||
{fristThreeApiKey}*******************
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
<label
|
||||
for="change-API-button">
|
||||
<div>
|
||||
<p>
|
||||
Change the API Key
|
||||
</p>
|
||||
<p>
|
||||
{fristThreeApiKey}*******************
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
<button
|
||||
id="change-API-button"
|
||||
onClick={() => setActualState('')}
|
||||
> Change
|
||||
|
||||
</button>
|
||||
<button
|
||||
id="change-API-button"
|
||||
onClick={() => deleteApiKey()}
|
||||
> Change
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user