diff --git a/digital-course-file/Capture.JPG b/digital-course-file/Capture.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..0178f1ef2087b67b3311d44faf2cc83f5aaf8afd
Binary files /dev/null and b/digital-course-file/Capture.JPG differ
diff --git a/digital-course-file/package-lock.json b/digital-course-file/package-lock.json
index ad82d933a6845413350877d80fc4e519432391ef..566586a14156438fdfc06bf14c0d6d18686ff017 100644
--- a/digital-course-file/package-lock.json
+++ b/digital-course-file/package-lock.json
@@ -11,8 +11,11 @@
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.7.1",
"firebase": "^8.2.9",
+ "firebaseui": "^4.7.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
+ "react-github-login-button": "^1.0.1",
+ "react-google-button": "^0.7.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
@@ -6934,6 +6937,11 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
},
+ "node_modules/dialog-polyfill": {
+ "version": "0.4.10",
+ "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz",
+ "integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw=="
+ },
"node_modules/diff-sequences": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
@@ -8858,6 +8866,18 @@
"node": "^8.13.0 || >=10.10.0"
}
},
+ "node_modules/firebaseui": {
+ "version": "4.7.3",
+ "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-4.7.3.tgz",
+ "integrity": "sha512-KKeZQS2fO2SrZFIsEmG6GrTm/+Na8Vk+OM9wnNgP8FtUw6h4S5oCPtebBREr9ETlDFvIK88gaHvp5bvF96yogA==",
+ "dependencies": {
+ "dialog-polyfill": "^0.4.7",
+ "material-design-lite": "^1.2.0"
+ },
+ "peerDependencies": {
+ "firebase": ">=8.2.4"
+ }
+ },
"node_modules/flat-cache": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -13290,6 +13310,14 @@
"node": ">=0.10.0"
}
},
+ "node_modules/material-design-lite": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
+ "integrity": "sha1-0ATOP+6Zoe63Sni4oyUTSl8RcdM=",
+ "engines": {
+ "node": ">=0.12.0"
+ }
+ },
"node_modules/md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -16524,6 +16552,28 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
},
+ "node_modules/react-github-login-button": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/react-github-login-button/-/react-github-login-button-1.0.1.tgz",
+ "integrity": "sha512-HXtYwgy8EwR9i+W5HgP1d/Ndf28AXLgc2l7TQwDQfn3Tf6PeS7xD0vqF+xGAfvqKOx6rFWP5E5wpAaoC8wzirw==",
+ "dependencies": {
+ "prop-types": "^15.7.2"
+ },
+ "peerDependencies": {
+ "react": "*"
+ }
+ },
+ "node_modules/react-google-button": {
+ "version": "0.7.2",
+ "resolved": "https://registry.npmjs.org/react-google-button/-/react-google-button-0.7.2.tgz",
+ "integrity": "sha512-LPIqU2hIlc212kqks8MtKjRstquVkP3SIjxlK5B1nIfg2R7YqSusJAxZUkJA5dv/z6QeSuGyI9ujwV/VWMTyAA==",
+ "dependencies": {
+ "prop-types": "^15.7.2"
+ },
+ "peerDependencies": {
+ "react": "*"
+ }
+ },
"node_modules/react-icons": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
@@ -27507,6 +27557,11 @@
}
}
},
+ "dialog-polyfill": {
+ "version": "0.4.10",
+ "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz",
+ "integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw=="
+ },
"diff-sequences": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
@@ -29015,6 +29070,15 @@
"@firebase/util": "0.3.4"
}
},
+ "firebaseui": {
+ "version": "4.7.3",
+ "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-4.7.3.tgz",
+ "integrity": "sha512-KKeZQS2fO2SrZFIsEmG6GrTm/+Na8Vk+OM9wnNgP8FtUw6h4S5oCPtebBREr9ETlDFvIK88gaHvp5bvF96yogA==",
+ "requires": {
+ "dialog-polyfill": "^0.4.7",
+ "material-design-lite": "^1.2.0"
+ }
+ },
"flat-cache": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -32380,6 +32444,11 @@
"object-visit": "^1.0.0"
}
},
+ "material-design-lite": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
+ "integrity": "sha1-0ATOP+6Zoe63Sni4oyUTSl8RcdM="
+ },
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -34971,6 +35040,22 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
},
+ "react-github-login-button": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/react-github-login-button/-/react-github-login-button-1.0.1.tgz",
+ "integrity": "sha512-HXtYwgy8EwR9i+W5HgP1d/Ndf28AXLgc2l7TQwDQfn3Tf6PeS7xD0vqF+xGAfvqKOx6rFWP5E5wpAaoC8wzirw==",
+ "requires": {
+ "prop-types": "^15.7.2"
+ }
+ },
+ "react-google-button": {
+ "version": "0.7.2",
+ "resolved": "https://registry.npmjs.org/react-google-button/-/react-google-button-0.7.2.tgz",
+ "integrity": "sha512-LPIqU2hIlc212kqks8MtKjRstquVkP3SIjxlK5B1nIfg2R7YqSusJAxZUkJA5dv/z6QeSuGyI9ujwV/VWMTyAA==",
+ "requires": {
+ "prop-types": "^15.7.2"
+ }
+ },
"react-icons": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
diff --git a/digital-course-file/package.json b/digital-course-file/package.json
index 466e1ca0f0270a9e078a153fcaed7e6d6209ce26..3da98cbde53417bea4fa831c876b2362718cd63f 100644
--- a/digital-course-file/package.json
+++ b/digital-course-file/package.json
@@ -7,8 +7,11 @@
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.7.1",
"firebase": "^8.2.9",
+ "firebaseui": "^4.7.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
+ "react-github-login-button": "^1.0.1",
+ "react-google-button": "^0.7.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
diff --git a/digital-course-file/src/App.css b/digital-course-file/src/App.css
index 3b4fd8cf8146bde8a51dafb5934c3d7c38fc4bcf..4b3da7d64ff0ff3ba777561f5ae0d6c8fcde9957 100644
--- a/digital-course-file/src/App.css
+++ b/digital-course-file/src/App.css
@@ -123,3 +123,8 @@ button {
padding: 8px 0;
background: #3a2b58;
}
+
+.Google {
+ padding-top: 10px;
+ text-align: center;
+}
diff --git a/digital-course-file/src/user/Login.js b/digital-course-file/src/user/Login.js
index 70361d07a4d6a1e3603a041f7ae6b017113f438d..579d82dc63d2593313109b376345e0ad6fbb0037 100644
--- a/digital-course-file/src/user/Login.js
+++ b/digital-course-file/src/user/Login.js
@@ -1,4 +1,6 @@
import React from 'react'
+import GoogleButton from 'react-google-button'
+import GithubButton from 'react-github-login-button'
const Login = (props) => {
const {
@@ -12,36 +14,64 @@ const Login = (props) => {
setHasAccount,
emailError,
passwordError,
+ googlesignin,
+ githubsignin,
} = props
return (
- <section className='login'>
- <div className="loginContainer">
- <label>UserName</label>
- <input type="text" autoFocus required value={email} onChange={(e)=>setEmail(e.target.value)}>
- </input>
- <p className="errorMsg">{emailError}</p>
- <label>Password</label>
- <input type="password" required value={password} onChange={(e)=>setPassword(e.target.value)}/>
- <p className="errorMsg">{passwordError}</p>
- <div className="btnContainer">
- {hasAccount?(
- <>
- <button onClick={handleLogin}>
- Sign In
- </button>
- <p>Don't have an account ? <span onClick={()=>setHasAccount(!hasAccount)}>Sign up</span></p>
- </>
- ):(
- <>
- <button onClick={handleSignup}>
- Sign up
- </button>
- <p>Have an account ? <span onClick={()=>setHasAccount(!hasAccount)}>Sign in</span></p>
- </>
- )}
- </div>
+ <section className='login'>
+ <div className='loginContainer'>
+ <label>UserName</label>
+ <input
+ type='text'
+ autoFocus
+ required
+ value={email}
+ onChange={(e) => setEmail(e.target.value)}
+ ></input>
+ <p className='errorMsg'>{emailError}</p>
+ <label>Password</label>
+ <input
+ type='password'
+ required
+ value={password}
+ onChange={(e) => setPassword(e.target.value)}
+ />
+ <p className='errorMsg'>{passwordError}</p>
+ <div className='btnContainer'>
+ {hasAccount ? (
+ <>
+ <button onClick={handleLogin}>Sign In</button>
+ <p>
+ Don't have an account ?{' '}
+ <span onClick={() => setHasAccount(!hasAccount)}>Sign up</span>
+ </p>
+ <p></p>
+ <GoogleButton onClick={googlesignin} />
+ <p></p>
+
+ <GithubButton
+ onClick={githubsignin}
+ />
+ </>
+ ) : (
+ <>
+ <button onClick={handleSignup}>Sign up</button>
+ <p>
+ Have an account ?{' '}
+ <span onClick={() => setHasAccount(!hasAccount)}>Sign in</span>
+ </p>
+ <p></p>
+ <GoogleButton onClick={googlesignin} />
+ <p></p>
+
+ <GithubButton
+ onClick={githubsignin}
+ />
+ </>
+ )}
+ </div>
</div>
- </section>
+ </section>
)
}
export default Login
diff --git a/digital-course-file/src/user/Signin.js b/digital-course-file/src/user/Signin.js
index 78e6357e75c33d0af2dab04921a5607cb18641ad..1cc6cbbd3842368cfcf7c3cf4552a2f33f92bc03 100644
--- a/digital-course-file/src/user/Signin.js
+++ b/digital-course-file/src/user/Signin.js
@@ -3,6 +3,7 @@ import '../App.css'
import fire from '../fire'
import Login from './Login'
import Hero from './Hero'
+import firebase from 'firebase'
const Signin = () => {
const [user, setUser] = useState('')
@@ -12,6 +13,64 @@ const Signin = () => {
const [passwordError, setPasswordError] = useState('')
const [hasAccount, setHasAccount] = useState(false)
+ const githubsignin = () => {
+ var provider = new firebase.auth.GithubAuthProvider()
+ firebase
+ .auth()
+ .signInWithPopup(provider)
+ .then((result) => {
+ /** @type {firebase.auth.OAuthCredential} */
+ var credential = result.credential
+
+ // This gives you a GitHub Access Token. You can use it to access the GitHub API.
+ var token = credential.accessToken
+
+ // The signed-in user info.
+ setUser(result.user)
+ // ...
+ })
+ .catch((error) => {
+ // Handle Errors here.
+ var errorCode = error.code
+ var errorMessage = error.message
+ // The email of the user's account used.
+ var email = error.email
+ // The firebase.auth.AuthCredential type that was used.
+ var credential = error.credential
+ setEmailError(error.message)
+ // ...
+ })
+ }
+
+ const googlesignin = () => {
+ clearErrors()
+ var provider = new firebase.auth.GoogleAuthProvider()
+ firebase
+ .auth()
+ .signInWithPopup(provider)
+ .then((result) => {
+ /** @type {firebase.auth.OAuthCredential} */
+ var credential = result.credential
+
+ // This gives you a Google Access Token. You can use it to access the Google API.
+ var token = credential.accessToken
+ // The signed-in user info.
+ setUser(result.user)
+ // ...
+ })
+ .catch((error) => {
+ // Handle Errors here.
+ var errorCode = error.code
+ var errorMessage = error.message
+ // The email of the user's account used.
+ var email = error.email
+ // The firebase.auth.AuthCredential type that was used.
+ var credential = error.credential
+ setEmailError(error.message)
+ // ...
+ })
+ }
+
const clearInputs = () => {
setEmail('')
setPassword('')
@@ -80,22 +139,24 @@ const Signin = () => {
return (
<div className='App'>
- {user?(
- <Hero handleLogout={handleLogout}/>
- ):(
- <Login
- email={email}
- setEmail={setEmail}
- password={password}
- setPassword={setPassword}
- handleLogin={handleLogin}
- handleSignup={handleSignup}
- hasAccount={hasAccount}
- setHasAccount={setHasAccount}
- emailError={emailError}
- passwordError={passwordError}
- />
- )}
+ {user ? (
+ <Hero handleLogout={handleLogout} />
+ ) : (
+ <Login
+ email={email}
+ setEmail={setEmail}
+ password={password}
+ setPassword={setPassword}
+ handleLogin={handleLogin}
+ handleSignup={handleSignup}
+ hasAccount={hasAccount}
+ setHasAccount={setHasAccount}
+ emailError={emailError}
+ passwordError={passwordError}
+ googlesignin={googlesignin}
+ githubsignin={githubsignin}
+ />
+ )}
</div>
)
}