Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 5031f06

Browse files
mydearxymmydearxym
committed
feat: prettfiy oauth callback window
1 parent 9312855 commit 5031f06

File tree

7 files changed

+224
-25
lines changed

7 files changed

+224
-25
lines changed

‎components/OauthHinter/index.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
*
3+
* OauthHinter
4+
*
5+
*/
6+
7+
import React from 'react'
8+
9+
import { withTheme } from 'styled-components'
10+
11+
import { ICON_ASSETS } from '../../config'
12+
13+
import {
14+
Container,
15+
HintWrapper,
16+
IconsWrapper,
17+
TextWrapper,
18+
HintTitle,
19+
HintDesc,
20+
CPSMdLogoWrapper,
21+
CPSMdLogo,
22+
CPSLogoIcon,
23+
LinkIcon,
24+
GithubLogoIcon,
25+
FooterWrapper,
26+
IssueLink,
27+
} from './styles'
28+
import { makeDebugger } from '../../utils'
29+
/* eslint-disable no-unused-vars */
30+
const debug = makeDebugger('c:OauthHinter:index')
31+
/* eslint-enable no-unused-vars */
32+
33+
const OauthHinter = () => {
34+
return (
35+
<Container>
36+
<CPSMdLogoWrapper>
37+
<CPSMdLogo src={`${ICON_ASSETS}/cmd/cps_logo_md.png`} />
38+
</CPSMdLogoWrapper>
39+
<HintWrapper>
40+
<IconsWrapper>
41+
<CPSLogoIcon src={`${ICON_ASSETS}/cmd/keyboard_logo.svg`} />
42+
<LinkIcon src={`${ICON_ASSETS}/cmd/oauth_link.svg`} />
43+
<GithubLogoIcon src={`${ICON_ASSETS}/cmd/github.svg`} />
44+
</IconsWrapper>
45+
<TextWrapper>
46+
<HintTitle>绑定成功，请稍等</HintTitle>
47+
<HintDesc>如果长时间未响应，请关闭页面重新尝试</HintDesc>
48+
</TextWrapper>
49+
</HintWrapper>
50+
<FooterWrapper>
51+
please{' '}
52+
<IssueLink
53+
href="https://github.com/coderplanets/coderplanets_server/issues/new"
54+
rel="noopener noreferrer"
55+
target="_blank"
56+
>
57+
report issue
58+
</IssueLink>{' '}
59+
if you think sth goes wrong.
60+
</FooterWrapper>
61+
</Container>
62+
)
63+
}
64+
65+
export default withTheme(OauthHinter)

‎components/OauthHinter/styles/index.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import styled, { keyframes } from 'styled-components'
2+
3+
import { Img } from '../..'
4+
import { theme } from '../../../utils'
5+
6+
export const Container = styled.div`
7+
display: flex;
8+
justify-content: space-between;
9+
align-items: center;
10+
flex-direction: column;
11+
height: 100vh;
12+
background: ${theme('banner.bg')};
13+
background-image: url('https://www.transparenttextures.com/patterns/transparent-square-tiles.png');
14+
border-top: 4px solid;
15+
border-top-color: ${theme('preview.topLine')};
16+
`
17+
18+
export const CPSMdLogoWrapper = styled.div`
19+
align-self: center;
20+
margin-right: -5px;
21+
margin-top: 5px;
22+
`
23+
export const CPSMdLogo = styled(Img)`
24+
width: 200px;
25+
`
26+
export const IconsWrapper = styled.div`
27+
display: flex;
28+
justify-content: center;
29+
`
30+
31+
export const TextWrapper = styled.div`
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
margin-top: 15px;
36+
`
37+
export const HintTitle = styled.div`
38+
color: ${theme('thread.articleTitle')};
39+
font-size: 1.2rem;
40+
`
41+
export const HintDesc = styled.div`
42+
color: ${theme('thread.articleDigest')};
43+
margin-top: 4px;
44+
`
45+
46+
// fill: ${theme('font')};
47+
export const CPSLogoIcon = styled(Img)`
48+
width: 53px;
49+
height: 53px;
50+
margin-top: -5px;
51+
`
52+
53+
const rotate360 = keyframes`
54+
from {
55+
transform: rotate(0deg);
56+
}
57+
58+
to {
59+
transform: rotate(360deg);
60+
}
61+
`
62+
63+
export const LinkIcon = styled(Img)`
64+
fill: #6e967f;
65+
width: 23px;
66+
height: 23px;
67+
margin-left: 25px;
68+
margin-right: 25px;
69+
margin-top: 16px;
70+
animation: ${rotate360} 2s linear infinite;
71+
`
72+
73+
export const GithubLogoIcon = styled(Img)`
74+
fill: ${theme('sidebar.bg')};
75+
width: 50px;
76+
height: 50px;
77+
`
78+
79+
export const HintWrapper = styled.div`
80+
display: flex;
81+
flex-direction: column;
82+
margin-top: -15%;
83+
color: ${theme('banner.title')};
84+
`
85+
86+
export const FooterWrapper = styled.div`
87+
color: ${theme('thread.articleDigest')};
88+
margin-bottom: 10px;
89+
`
90+
91+
export const IssueLink = styled.a`
92+
text-decoration: underline;
93+
font-weight: bolder;
94+
transition: color 0.3s;
95+
color: ${theme('thread.articleDigest')};
96+
97+
&:hover {
98+
color: ${theme('banner.title')};
99+
cursor: pointer;
100+
}
101+
`

‎components/OauthHinter/tests/index.test.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import OauthHinter from '../index'
5+
6+
describe('TODO <OauthHinter />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(true)
9+
})
10+
})

‎components/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export { default as Popover } from './Popover'
99
export { Space, SpaceGrow } from './BaseStyled'
1010

1111
// Utils component
12+
export { default as OauthHinter } from './OauthHinter'
1213
export { default as MarkDownRender } from './MarkDownRender'
1314
export { default as ContentFilter } from './ContentFilter'
1415
export { default as FileUploader } from './FileUploader'

‎containers/Doraemon/logic.js

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -48,38 +48,17 @@ function queryPocket() {
4848
pockect$.query(store.inputValue)
4949
}
5050

51-
/*
52-
function simuUserLogin() {
53-
const data = {
54-
id: '112',
55-
token:
56-
'eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJtYXN0YW5pX3NlcnZlciIsImV4cCI6MTUyNTI2Nzc3NCwiaWF0IjoxNTI0MDU4MTc0LCJpc3MiOiJtYXN0YW5pX3NlcnZlciIsImp0aSI6IjdiNjdhYzJmLTIwMjYtNDMzNy04MjcyLTVmYjY0ZDMxMGVjNyIsIm5iZiI6MTUyNDA1ODE3Mywic3ViIjoiMTEyIiwidHlwIjoiYWNjZXNzIn0.mm0GuOhzs8UYikPZGnIKQpnGYJQiwzEtCx2xeRn1qcT3sOT6Yg3GvM303OxDoGHnrNf72HSjwVxiCO6mXkq8mg',
57-
nickname: 'mydearxym',
58-
avatar: 'https://avatars2.githubusercontent.com/u/6184465?v=4',
59-
bio:
60-
"everyday is the opportunity you can't get back,so live life to the fullest",
61-
fromGithub: true,
62-
}
63-
64-
BStore.set('user', data)
65-
66-
store.updateAccount(data)
67-
}
68-
69-
*/
70-
7151
export function githubLoginHandler() {
7252
// header.openPreview(type)
7353
debug('just previewAccount ..', process.env.GITHUB_CLIENT_ID)
7454

7555
const clientId = process.env.GITHUB_CLIENT_ID
7656
const info = 'from_github'
7757
// TODO: prettify signin page
78-
const cb = 'http://www.coderplanets.com'
58+
const cb = 'http://www.coderplanets.com/oauth'
7959
const github = 'https://github.com/login/oauth/authorize'
8060
const url = `${github}?client_id=${clientId}&state=${info}&redirect_uri=${cb}`
8161

82-
console.log('oauthPopup url', url)
8362
oauthPopup(url)
8463

8564
Global.addEventListener('message', e => {

‎pages/oauth.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
import { Provider } from 'mobx-react'
3+
4+
import GAWraper from '../components/GAWraper'
5+
import initRootStore from '../stores/init'
6+
import ThemeWrapper from '../containers/ThemeWrapper'
7+
8+
import { OauthHinter } from '../components'
9+
10+
export default class Index extends React.Component {
11+
static getInitialProps() {
12+
return {}
13+
}
14+
15+
constructor(props) {
16+
super(props)
17+
this.store = initRootStore({ langSetup: '' })
18+
}
19+
20+
// <Doraemon />
21+
22+
render() {
23+
return (
24+
<Provider store={this.store}>
25+
<GAWraper>
26+
<ThemeWrapper>
27+
<OauthHinter />
28+
</ThemeWrapper>
29+
</GAWraper>
30+
</Provider>
31+
)
32+
}
33+
}

‎stores/AccountStore/index.js

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ const AccountStore = t
3636
},
3737

3838
get subscribedCommunities() {
39-
const { user: { subscribedCommunities } } = self
39+
const {
40+
user: { subscribedCommunities },
41+
} = self
4042
return {
4143
...stripMobx(subscribedCommunities),
4244
}
@@ -72,7 +74,11 @@ const AccountStore = t
7274
self.user.subscribedCommunities = data
7375
},
7476
addSubscribedCommunity(community) {
75-
const { user: { subscribedCommunities: { entries } } } = self
77+
const {
78+
user: {
79+
subscribedCommunities: { entries },
80+
},
81+
} = self
7682

7783
self.user.subscribedCommunities.entries = R.insert(0, community, entries)
7884
self.user.subscribedCommunities.totalCount += 1
@@ -81,7 +87,11 @@ const AccountStore = t
8187
},
8288

8389
removeSubscribedCommunity(community) {
84-
const { user: { subscribedCommunities: { entries } } } = self
90+
const {
91+
user: {
92+
subscribedCommunities: { entries },
93+
},
94+
} = self
8595

8696
const index = R.findIndex(R.propEq('id', community.id), entries)
8797
self.user.subscribedCommunities.entries = R.remove(index, 1, entries)

0 commit comments

Comments
 (0)