/
index.js
128 lines (111 loc) · 3.63 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import clsx from 'clsx';
import { useRouter } from 'next/router';
import { useCallback, useState } from 'react';
import { useQueryClient } from 'react-query';
import GithubSVG from '../../assets/icons/github.js';
import Button from '../../components/button/button.js';
import { loginEmail, loginSocial } from '../../lib/magic.js';
import countly, { trackEvent } from '../../lib/countly.js';
import LoginData from '../../content/pages/app/login.json';
const LoginType = {
GITHUB: 'github',
EMAIL: 'email',
};
/**
* Get the first thing
* @template T
* @param {T | T[] | undefined} thingOrThings
*/
function first(thingOrThings) {
if (Array.isArray(thingOrThings)) {
return thingOrThings[0];
}
return thingOrThings;
}
const Login = () => {
// App query client
const queryClient = useQueryClient();
// App wide methods
const { push, query } = useRouter();
// Error states
const [errors, setErrors] = useState(/** @type {{email?: string}} */ ({}));
// User form data binding
const [{ email }, setFormData] = useState(/** @type {{email?: string}} */ ({}));
// Redirecting state
const [isLoggingIn, setIsLoggingIn] = useState('');
const pageContent = LoginData.page_content;
// Callback for email login logic
const onLoginWithEmail = useCallback(async () => {
setErrors({ email: undefined });
setIsLoggingIn(LoginType.EMAIL);
const finalRedirectUri = first(query.redirect_uri) ?? '/account';
try {
await loginEmail(email || '', finalRedirectUri);
await queryClient.invalidateQueries('magic-user');
push(finalRedirectUri);
} catch (error) {
setIsLoggingIn('');
console.error('An unexpected error happened occurred:', error);
// @ts-ignore Catch clause variable type annotation must be 'any' or 'unknown' if specified.ts(1196)
setErrors({ email: error.message });
}
}, [email, push, queryClient, query.redirect_uri]);
// Callback for github login logic
const onGithubLogin = useCallback(async () => {
// Tracking event
trackEvent(countly.events.LOGIN_CLICK, {
ui: countly.ui.LOGIN,
action: 'Github',
link: '',
});
// Logging in
setIsLoggingIn(LoginType.GITHUB);
loginSocial(LoginType.GITHUB);
}, [setIsLoggingIn]);
return (
<div className="page-container login-container">
<div className="login-content">
<h3>{pageContent.heading}</h3>
<button className="section section-github" onClick={onGithubLogin}>
<GithubSVG /> {isLoggingIn === LoginType.GITHUB ? 'Redirecting...' : 'Github'}
</button>
<h3 className="login-type-divider">or</h3>
<div className="section section-email">
<input
className={clsx('login-email', errors.email && 'error')}
placeholder={pageContent.form_placeholder}
onChange={useCallback(e => setFormData({ email: e.currentTarget.value }), [])}
/>
<Button
variant={pageContent.cta.theme}
onClick={onLoginWithEmail}
tracking={{
event: countly.events[pageContent.cta.event],
ui: countly.ui[pageContent.cta.ui],
action: pageContent.cta.action,
}}
disabled={isLoggingIn === LoginType.EMAIL}
>
{pageContent.cta.text}
</Button>
</div>
</div>
</div>
);
};
/**
* Static Props
*
* @returns {{ props: import('components/types').PageProps}}
*/
export function getStaticProps() {
return {
props: {
title: LoginData.seo.title,
redirectTo: '/account',
redirectIfFound: true,
authOnLoad: false,
},
};
}
export default Login;