Skip to content

Commit f6f21c8

Browse files
TRomeshTRomesh
committed
#12 load user info in front-end and save spaces
1 parent 6a0735c commit f6f21c8

File tree

14 files changed

+132
-133
lines changed

14 files changed

+132
-133
lines changed

‎platform/auth/Auth.go

+2-1
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,12 @@ func GetAuthClient(w http.ResponseWriter, r *http.Request) {
3030

3131
}
3232

33-
func GenerateToken(id string, username string) (string, error) {
33+
func GenerateToken(id string, username string, avatar string) (string, error) {
3434
signingKey := []byte(os.Getenv("JWT_KEY"))
3535
token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
3636
"id": id,
3737
"username": username,
38+
"avatar": avatar,
3839
})
3940
tokenString, err := token.SignedString(signingKey)
4041
return tokenString, err

‎platform/auth/Github.go

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ func GithubCallback(w http.ResponseWriter, r *http.Request) {
7676
user.CreateUser(githubUser)
7777
}
7878

79-
if userInfo["token"], err = GenerateToken(githubUser.Id, githubUser.Username); err != nil {
79+
if userInfo["token"], err = GenerateToken(githubUser.Id, githubUser.Username, githubUser.Avatar); err != nil {
8080
fmt.Fprint(w, "An error couldn't generate token", err)
8181
w.WriteHeader(http.StatusBadGateway)
8282
}

‎platform/auth/Google.go

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ func GoogleCallback(w http.ResponseWriter, r *http.Request) {
5353
user.CreateUser(googleUser)
5454
}
5555

56-
if userInfo["token"], err = GenerateToken(googleUser.Id, googleUser.Username); err != nil {
56+
if userInfo["token"], err = GenerateToken(googleUser.Id, googleUser.Username, googleUser.Avatar); err != nil {
5757
fmt.Println("An error couldn't generate token", err)
5858
}
5959

‎raven.go

+4-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,8 @@ func main() {
1111
fmt.Println("Starting Raven ...")
1212
r := routes.Route()
1313
http.Handle("/", r)
14-
http.ListenAndServe(":3003", handlers.CORS()(r))
14+
headers:= handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type", "Authorization"})
15+
methods:= handlers.AllowedMethods([]string{"GET", "POST", "PUT", "HEAD", "OPTIONS","DELETE"})
16+
origins:= handlers.AllowedOrigins([]string{"*"})
17+
http.ListenAndServe(":3003", handlers.CORS(headers,methods ,origins)(r))
1518
}

‎web/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"dependencies": {
66
"axios": "^0.19.2",
77
"bootstrap": "^4.5.0",
8+
"jwt-decode": "^2.2.0",
89
"lodash": "^4.17.15",
910
"node-sass": "^4.14.1",
1011
"react": "^16.13.0",

‎web/src/App.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { Suspense } from "react";
22
import { isAuthenticated } from "./utils/Auth";
3-
// import Login from "./components/Login";
43
import Space from "./components/Space";
54
import Loading from "./components/Loading";
65
import Error from "./components/Error";
@@ -30,10 +29,15 @@ function App() {
3029
path="/space"
3130
render={(props) => <PrivateRoute component={Space} {...props} />}
3231
/>
32+
<Route
33+
exact
34+
path="/home"
35+
render={(props) => <PrivateRoute component={Home} {...props} />}
36+
/>
3337
<Route
3438
exact
3539
path="/login"
36-
render={(props) => <PrivateRoute component={Login} {...props} />}
40+
render={(props) => <PublicRoute component={Login} {...props} />}
3741
/>
3842
<Route exact path="*" render={(props) => <Error {...props} />} />
3943
</Switch>

‎web/src/components/Home.jsx

+1-52
Original file line numberDiff line numberDiff line change
@@ -5,58 +5,7 @@ function Home() {
55
<div className="container">
66
<div className="row">
77
<div className="col-1 col-sm-2 col-md-2"></div>
8-
<div className="col-10 col-sm-8 col-md-8">
9-
<div className="login">
10-
<div className="row">
11-
<div className="col-2"></div>
12-
<div className="col-8">
13-
<div>
14-
<h3 className="tilte">Welcome</h3>
15-
</div>
16-
</div>
17-
<div className="col-2"></div>
18-
</div>
19-
<div className="row">
20-
<div className="col-2"></div>
21-
<div className="col-8">
22-
<div>
23-
<div className="sub-title">
24-
Sign in to create personalized spaces
25-
</div>
26-
</div>
27-
</div>
28-
<div className="col-2"></div>
29-
</div>
30-
<div className="row">
31-
<div className="col-2"></div>
32-
<div className="col-8">
33-
<button className="google">
34-
<img
35-
className="logo-icon"
36-
alt="google"
37-
src="assets/google.svg"
38-
/>
39-
Google
40-
</button>
41-
</div>
42-
<div className="col-2"></div>
43-
</div>
44-
<div className="row">
45-
<div className="col-2"></div>
46-
<div className="col-8">
47-
<button className="github">
48-
<img
49-
className="logo-icon"
50-
alt="github"
51-
src="assets/github.svg"
52-
/>
53-
Github
54-
</button>
55-
</div>
56-
<div className="col-2"></div>
57-
</div>
58-
</div>
59-
</div>
8+
<div className="col-10 col-sm-8 col-md-8"></div>
609
<div className="col-1 col-sm-2 col-md-2"></div>
6110
</div>
6211
</div>

‎web/src/components/Login.jsx

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import React, { useEffect } from "react";
22
import { GetTokenAuthUrl, setLocalStoage } from "../utils/Auth";
3-
import { withRouter, useLocation } from "react-router-dom";
3+
import { withRouter, useLocation, useHistory } from "react-router-dom";
4+
import { useToasts } from "react-toast-notifications";
45

56
const GITHUB_CLIENT_ID = process.env.REACT_APP_GITHUB_CLIENT_ID;
67
const GOOGLE_CLIENT_ID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
78
const REDIRECT_URL = process.env.REACT_APP_REDIRECT_URL;
89

910
function Login() {
1011
let location = useLocation();
12+
let history = useHistory();
13+
let { addToast } = useToasts();
1114

1215
useEffect(() => {
1316
getAuth();
@@ -17,7 +20,17 @@ function Login() {
1720
let code = new URLSearchParams(location.search).get("code");
1821
let state = new URLSearchParams(location.search).get("state");
1922
if (code) {
20-
GetTokenAuthUrl(code, state);
23+
GetTokenAuthUrl(code, state, (error, user) => {
24+
if (error) {
25+
addToast("Unable to login! Please try again", {
26+
appearance: "error",
27+
autoDismiss: true,
28+
});
29+
}
30+
if (user) {
31+
history.push("/space");
32+
}
33+
});
2134
}
2235
};
2336

‎web/src/components/Navigation.jsx

+36-66
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,51 @@
11
import React, { Fragment } from "react";
2+
import { withRouter, useHistory, Link } from "react-router-dom";
3+
import { isAuthenticated, getUserInfo, LogOut } from "../utils/Auth";
24

35
function Navigation({ children }) {
6+
let history = useHistory();
47
return (
58
<Fragment>
6-
<div id="header" className="container d-flex align-items-center">
9+
<div
10+
id="header"
11+
className="container d-flex align-items-center raven-navigation"
12+
>
713
<div className="logo mr-auto">
814
<h1 className="text-light">
9-
<a href="/#">
15+
<Link to="/home">
1016
<span>Raven</span>
11-
</a>
17+
</Link>
1218
</h1>
1319
</div>
1420

1521
<nav className="nav-menu d-none d-lg-block">
1622
<ul>
17-
<li className="active">
18-
<a href="/#header">Home</a>
19-
</li>
20-
<li>
21-
<a href="/#about">About</a>
22-
</li>
23-
<li>
24-
<a href="/#services">Services</a>
25-
</li>
26-
<li>
27-
<a href="/#portfolio">Portfolio</a>
28-
</li>
29-
<li>
30-
<a href="/#team">Team</a>
31-
</li>
32-
<li>
33-
<a href="/#pricing">Pricing</a>
34-
</li>
35-
<li className="drop-down">
36-
<a href="/#">Drop Down</a>
37-
<ul>
38-
<li>
39-
<a href="/#">Drop Down 1</a>
40-
</li>
41-
<li className="drop-down">
42-
<a href="/#">Drop Down 2</a>
43-
<ul>
44-
<li>
45-
<a href="/#">Deep Drop Down 1</a>
46-
</li>
47-
<li>
48-
<a href="/#">Deep Drop Down 2</a>
49-
</li>
50-
<li>
51-
<a href="/#">Deep Drop Down 3</a>
52-
</li>
53-
<li>
54-
<a href="/#">Deep Drop Down 4</a>
55-
</li>
56-
<li>
57-
<a href="/#">Deep Drop Down 5</a>
58-
</li>
59-
</ul>
60-
</li>
61-
<li>
62-
<a href="/#">Drop Down 3</a>
63-
</li>
64-
<li>
65-
<a href="/#">Drop Down 4</a>
66-
</li>
67-
<li>
68-
<a href="/#">Drop Down 5</a>
69-
</li>
70-
</ul>
71-
</li>
72-
<li>
73-
<a href="/#contact">Contact</a>
74-
</li>
75-
76-
<li className="get-started">
77-
<a href="/#about">Get Started</a>
78-
</li>
23+
{isAuthenticated() ? (
24+
<li className="drop-down">
25+
<img
26+
src={getUserInfo().avatar}
27+
alt="avatar"
28+
className="raven-avatar"
29+
/>
30+
<ul>
31+
<li>
32+
<a href="/#">Account</a>
33+
</li>
34+
<li>
35+
<a
36+
href="/#"
37+
onClick={() =>
38+
LogOut(() => {
39+
history.push("/login");
40+
})
41+
}
42+
>
43+
Logout
44+
</a>
45+
</li>
46+
</ul>
47+
</li>
48+
) : null}
7949
</ul>
8050
</nav>
8151
</div>
@@ -84,4 +54,4 @@ function Navigation({ children }) {
8454
);
8555
}
8656

87-
export default Navigation;
57+
export default withRouter(Navigation);

‎web/src/components/Space.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Headers from "./Spaces/Headers";
55
import Tab from "./Common/Tab/Tab";
66
import Tabs from "./Common/Tab/Tabs";
77
import { v4 as uuid } from "uuid";
8+
import { CreateSpace } from "../services/Services";
89

910
function Space() {
1011
const [headers, setHeaders] = useState([
@@ -19,8 +20,7 @@ function Space() {
1920
});
2021

2122
const createSpace = () => {
22-
let space = { ...basic, headers, body };
23-
console.log("space", space);
23+
CreateSpace({ ...basic, headers, body });
2424
};
2525

2626
return (

‎web/src/index.scss

+24
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,20 @@ body {
55
-moz-osx-font-smoothing: grayscale;
66
}
77

8+
body::-webkit-scrollbar {
9+
width: 0.8em;
10+
}
11+
12+
body::-webkit-scrollbar-track {
13+
box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.3);
14+
}
15+
16+
body::-webkit-scrollbar-thumb {
17+
background-color: darkgrey;
18+
outline: 1px solid slategrey;
19+
border-radius: 10px;
20+
}
21+
822
code {
923
font-family: "Roboto", source-code-pro, Menlo, Monaco, Consolas, "Courier New",
1024
monospace;
@@ -1744,4 +1758,14 @@ section {
17441758
}
17451759
}
17461760

1761+
.raven-navigation {
1762+
.raven-avatar {
1763+
width: 40px;
1764+
height: 40px;
1765+
border-radius: 10px;
1766+
}
1767+
.raven-avatar-name {
1768+
}
1769+
}
1770+
17471771
@import "~bootstrap/scss/bootstrap.scss";

‎web/src/services/Services.js

+14
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
11
import axios from "axios";
2+
import { AuthToken } from "../utils/Auth";
3+
axios.defaults.headers.common["Authorization"] = AuthToken();
4+
axios.defaults.baseURL = process.env.REACT_APP_SERVER_URL;
5+
6+
export const CreateSpace = (data) => {
7+
axios
8+
.post(`/space`, data)
9+
.then((data) => {
10+
console.log(data);
11+
})
12+
.catch((error) => {
13+
console.log(error);
14+
});
15+
};

0 commit comments

Comments
 (0)