mirror of
https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git
synced 2025-10-12 23:52:30 +00:00
Added routing and structure to the login and register
This commit is contained in:
@@ -6,6 +6,9 @@
|
||||
justify-content: center;
|
||||
height: 17vh;
|
||||
}
|
||||
.header-main-page a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.header-main-page h1 {
|
||||
color: #ffffff;
|
||||
font-size: 7vh;
|
||||
@@ -68,6 +71,7 @@
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
height: 6vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
.banner-login .button-container .register {
|
||||
border: solid 1px #ffffff;
|
||||
|
||||
@@ -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"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;ECXJ;EACA;EAQA;EACA;EACA;;ADKA;EACI;EAEA;ECnBJ;EACA;EAQA;EACA;EACA;;ADYI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AE5CpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFsBO;;AEnBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFMG;EELH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFJG;EEMH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFnBO;EEoBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHsBO;EGrBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHXL;EGYK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH/CE;;;AGwDN;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,kBNwBU;;AMtBV;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,OPCD;EOAC,kBPCF;;;AAYd;EACI;EACA;;;AAGJ;EACI;EACA,kBAvBe","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"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;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,OFsBO;;AEnBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFMG;EELH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFJG;EEMH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFnBO;EEoBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHsBO;EGrBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHXL;EGYK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH/CE;;;AGwDN;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,kBNwBU;;AMtBV;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,OPCD;EOAC,kBPCF;;;AAYd;EACI;EACA;;;AAGJ;EACI;EACA,kBAvBe","file":"styles.css"}
|
||||
@@ -32,7 +32,7 @@
|
||||
color: #ffffff;
|
||||
|
||||
height: 6vh;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.register {
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
|
||||
height: 17vh;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ffffff;
|
||||
|
||||
|
||||
32
src/App.js
32
src/App.js
@@ -4,15 +4,33 @@ import GoDownArrow from "./components/GoDownArrow";
|
||||
import Header from "./components/Header";
|
||||
import MainPomodoro from "./components/MainPomodoro";
|
||||
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route,
|
||||
Link
|
||||
} from "react-router-dom";
|
||||
|
||||
import Identify from "./components/Identify";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<BannerLogin />
|
||||
<MainPomodoro />
|
||||
<GoDownArrow />
|
||||
<AboutThis />
|
||||
</>
|
||||
<Router>
|
||||
<>
|
||||
<Header />
|
||||
<Switch>
|
||||
<Route path="/identify">
|
||||
<Identify />
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<BannerLogin />
|
||||
<MainPomodoro />
|
||||
<GoDownArrow />
|
||||
<AboutThis />
|
||||
</Route>
|
||||
</Switch>
|
||||
</>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -8,8 +8,8 @@ const BannerLogin = () => {
|
||||
<div className="banner-login">
|
||||
<p>Access to integrate and save your progress with Clockify!</p>
|
||||
<div className="button-container">
|
||||
<button className="register">Register</button>
|
||||
<button className="login">Login</button>
|
||||
<button className="register" onClick={() => {window.location = '/identify?act=r'}}>Register</button>
|
||||
<button className="login" onClick={() => {window.location = '/identify?act=l'}}>Login</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -8,7 +8,7 @@ const Header = () => {
|
||||
|
||||
return (
|
||||
<header className="header-main-page">
|
||||
<h1>Pomodoro Timer</h1>
|
||||
<a href="/"><h1>Pomodoro Timer</h1></a>
|
||||
<h3>Made By <span className="selectable"><a target="_blank" href="https://www.behance.net/franpessano" rel="noreferrer">Francisco Pessano</a></span></h3>
|
||||
</header>
|
||||
)
|
||||
|
||||
13
src/components/Identify Childrens/LoginForm.jsx
Normal file
13
src/components/Identify Childrens/LoginForm.jsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react'
|
||||
|
||||
const LoginForm = () => {
|
||||
return (
|
||||
<form>
|
||||
<input type="email" placeholder="email"></input>
|
||||
<input type="password" placeholder="password"></input>
|
||||
<input type="submit"></input>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default LoginForm
|
||||
14
src/components/Identify Childrens/RegisterForm.jsx
Normal file
14
src/components/Identify Childrens/RegisterForm.jsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import React from 'react'
|
||||
|
||||
const RegisterForm = () => {
|
||||
return (
|
||||
<form>
|
||||
<input type="email" placeholder="email"></input>
|
||||
<input type="password" placeholder="password"></input>
|
||||
<input type="password" placeholder="confirm password"></input>
|
||||
<input type="submit"></input>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default RegisterForm
|
||||
33
src/components/Identify.jsx
Normal file
33
src/components/Identify.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import React, {useState} from 'react'
|
||||
import LoginForm from './Identify Childrens/LoginForm'
|
||||
import RegisterForm from './Identify Childrens/RegisterForm'
|
||||
|
||||
|
||||
const Identify = () => {
|
||||
const [act, setAct] = useState('register')
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<nav>
|
||||
<div>
|
||||
<h2>LOGIN</h2>
|
||||
</div>
|
||||
<div>
|
||||
<h2>REGISTER</h2>
|
||||
</div>
|
||||
</nav>
|
||||
<div>
|
||||
{
|
||||
act === 'login' ? <LoginForm /> : null
|
||||
}
|
||||
{
|
||||
act === 'register' ? <RegisterForm /> : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Identify
|
||||
Reference in New Issue
Block a user