Skip to content

Commit 81cafdc

Browse files
NilumilakNilumilak
committed
feat: auth page
1 parent bca9bee commit 81cafdc

File tree

5 files changed

+100
-1
lines changed

5 files changed

+100
-1
lines changed

‎frontend/src/components/AuthPage/SignIn/OAuthSignIn/AuthCard/AuthCard.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { ElementType } from 'react';
22
import ServiceImage from 'components/common/Icons/ServiceImage';
3+
import { useNavigate } from 'react-router-dom';
34

45
import * as S from './AuthCard.styled';
56

@@ -10,6 +11,8 @@ interface Props {
1011
}
1112

1213
function AuthCard({ serviceName, authPath, Icon = ServiceImage }: Props) {
14+
const navigate = useNavigate();
15+
1316
return (
1417
<S.AuthCardStyled>
1518
<S.ServiceData>
@@ -24,7 +27,7 @@ function AuthCard({ serviceName, authPath, Icon = ServiceImage }: Props) {
2427
<S.ServiceButton
2528
buttonSize="L"
2629
buttonType="primary"
27-
to={`${window.basePath}${authPath}`}
30+
onClick={() => navigate(`${window.basePath}${authPath}`)}
2831
>
2932
Log in with {serviceName}
3033
</S.ServiceButton>

‎frontend/src/components/AuthPage/SignIn/OAuthSignIn/OAuthSignIn.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React, { ElementType } from 'react';
22
import GitHubIcon from 'components/common/Icons/GitHubIcon';
33
import GoogleIcon from 'components/common/Icons/GoogleIcon';
4+
import CognitoIcon from 'components/common/Icons/CognitoIcon';
5+
import OktaIcon from 'components/common/Icons/OktaIcon';
6+
import KeycloakIcon from 'components/common/Icons/KeycloakIcon';
47
import ServiceImage from 'components/common/Icons/ServiceImage';
58
import { OAuthProvider } from 'generated-sources';
69

@@ -14,6 +17,9 @@ interface Props {
1417
const ServiceIconMap: Record<string, ElementType> = {
1518
github: GitHubIcon,
1619
google: GoogleIcon,
20+
cognito: CognitoIcon,
21+
keycloak: KeycloakIcon,
22+
okta: OktaIcon,
1723
unknownService: ServiceImage,
1824
};
1925

‎frontend/src/components/common/Icons/CognitoIcon.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
4+
function CognitoIcon() {
5+
return (
6+
<svg
7+
width="80px"
8+
height="80px"
9+
viewBox="0 0 80 80"
10+
version="1.1"
11+
xmlns="http://www.w3.org/2000/svg"
12+
xmlnsXlink="http://www.w3.org/1999/xlink"
13+
>
14+
<defs>
15+
<linearGradient
16+
x1="0%"
17+
y1="100%"
18+
x2="100%"
19+
y2="0%"
20+
id="linearGradient-1"
21+
>
22+
<stop stopColor="#BD0816" offset="0%" />
23+
<stop stopColor="#FF5252" offset="100%" />
24+
</linearGradient>
25+
</defs>
26+
<g
27+
id="Icon-Architecture/64/Arch_Amazon-Cognito_64"
28+
stroke="none"
29+
strokeWidth="1"
30+
fill="none"
31+
fillRule="evenodd"
32+
>
33+
<g
34+
id="Icon-Architecture-BG/64/Security-Identity-Compliance"
35+
fill="url(#linearGradient-1)"
36+
>
37+
<rect id="Rectangle" x="0" y="0" width="80" height="80" />
38+
</g>
39+
<path
40+
d="M16.9635609,35.8079225 L29.8688192,35.8079225 L29.8688192,33.8253841 L16.9635609,33.8253841 L16.9635609,35.8079225 Z M61.3755183,50.2308895 L62.7792133,51.6325441 L55.4073327,58.9937093 C55.2127611,59.1870067 54.9586268,59.2841511 54.7054852,59.2841511 C54.4513509,59.2841511 54.1972166,59.1870067 54.0036377,58.9937093 L50.294865,55.2913188 L51.69856,53.8896641 L54.7054852,56.8912273 L61.3755183,50.2308895 Z M65.9439798,55.6937741 C65.7176414,57.5573602 64.9592093,59.29109 63.7471077,60.708605 C62.8864262,61.7157345 61.7994064,62.5484006 60.604181,63.1154066 C59.0009508,63.8757101 57.2200251,64.1641694 55.4460485,63.9480727 C53.7207147,63.7379237 52.0946522,63.057913 50.7396,61.9823859 C48.1367087,59.9155896 46.8223578,56.7108163 47.2224208,53.4088985 C47.6006441,50.2883831 49.4917608,47.5663578 52.2802893,46.127035 C53.6164799,45.4381029 55.0797377,45.0842198 56.5697987,45.0842198 C56.9519928,45.0842198 57.3371652,45.1080102 57.7213448,45.1545999 C60.8344902,45.534256 63.549558,47.4365016 64.9810489,50.2427847 C65.839745,51.9259598 66.1723036,53.8113538 65.9439798,55.6937741 L65.9439798,55.6937741 Z M66.750062,49.3437035 C65.0177793,45.9476152 61.731902,43.6458881 57.9615811,43.1869305 C55.6813213,42.9083838 53.4030468,43.3167868 51.3689796,44.3655496 C47.9957436,46.1062183 45.7085347,49.3982233 45.2508944,53.1709939 C44.7684363,57.1608525 46.3577685,61.0357238 49.5046661,63.5347135 C51.1456193,64.8372412 53.1171457,65.6609859 55.2048194,65.9157421 C55.6674233,65.9722445 56.1300272,66 56.5916383,66 C58.2713073,66 59.9301294,65.6292653 61.455928,64.9056388 C62.9023096,64.2196805 64.2176533,63.212551 65.2570229,61.9952724 C66.7232588,60.2803767 67.6425103,58.1838423 67.9155061,55.9316787 C68.1914801,53.6567158 67.788439,51.3787792 66.750062,49.3437035 L66.750062,49.3437035 Z M26.8906827,41.7555378 L30.8615314,41.7555378 L30.8615314,39.7729994 L26.8906827,39.7729994 L26.8906827,41.7555378 Z M16.9635609,41.7555378 L24.9052583,41.7555378 L24.9052583,39.7729994 L16.9635609,39.7729994 L16.9635609,41.7555378 Z M16.1058576,15.9825384 L60.5078879,15.9825384 C61.6773028,15.9825384 62.6283211,17.1393496 62.6283211,18.5608296 L62.6283211,25.8952305 L59.6501845,25.8952305 L59.6501845,20.9388844 C59.6501845,20.3917038 59.2064422,19.9476152 58.6574724,19.9476152 L35.8250923,19.9476152 C35.2761224,19.9476152 34.8323801,20.3917038 34.8323801,20.9388844 L34.8323801,25.8952305 L13.9854244,25.8952305 L13.9854244,18.5608296 C13.9854244,17.16314 14.9572896,15.9825384 16.1058576,15.9825384 L16.1058576,15.9825384 Z M47.256173,25.6077624 C49.5612507,25.6077624 51.436484,27.4614358 51.436484,29.7393725 C51.436484,31.2411453 50.6075693,32.6229746 49.2733642,33.3466011 C48.0066634,34.0335507 46.4798721,34.0246292 45.2300474,33.3475924 C43.9008058,32.6219833 43.075862,31.240154 43.075862,29.7393725 C43.075862,27.4614358 44.9501026,25.6077624 47.256173,25.6077624 L47.256173,25.6077624 Z M13.9854244,47.1083915 L13.9854244,27.8777689 L34.8323801,27.8777689 L34.8323801,44.7293454 C34.8323801,45.2775173 35.2761224,45.7206146 35.8250923,45.7206146 L46.2029054,45.7206146 L46.2029054,43.7380762 L37.9117733,43.7380762 C37.9981392,39.7710168 40.6357755,36.3441992 44.4338923,35.249838 C46.1890074,36.0696176 48.2846228,36.0775478 50.0665412,35.2488467 C52.2286683,35.8733463 54.1207777,37.3176255 55.2931708,39.2535743 L56.9917013,38.2266194 C55.7885342,36.2430897 53.9629365,34.6947272 51.8454814,33.7946548 C52.8381936,32.694346 53.4219083,31.2629532 53.4219083,29.7393725 C53.4219083,26.3680659 50.6552195,23.625224 47.256173,23.625224 C43.8561338,23.625224 41.0904377,26.3680659 41.0904377,29.7393725 C41.0904377,31.2570056 41.6681962,32.683442 42.6539593,33.7837508 C40.0004397,34.8999199 37.9276567,36.9924892 36.8178045,39.572763 L36.8178045,21.9301536 L57.6647602,21.9301536 L57.6647602,37.7904609 L59.6501845,37.7904609 L59.6501845,27.8777689 L62.6283211,27.8777689 L62.6293138,42.746807 L64.6147382,42.746807 L64.6137454,18.5608296 C64.6137454,16.0459796 62.7722643,14 60.5078879,14 L16.1058576,14 C13.8414811,14 12,16.0459796 12,18.5608296 L12,47.1083915 C12,49.6232415 13.8414811,51.6682298 16.1058576,51.6682298 L42.7740775,51.6682298 L42.7740775,49.6856914 L16.1058576,49.6856914 C14.9572896,49.6856914 13.9854244,48.5060811 13.9854244,47.1083915 L13.9854244,47.1083915 Z"
41+
id="Amazon-Cognito_Icon_64_Squid"
42+
fill="#FFFFFF"
43+
/>
44+
</g>
45+
</svg>
46+
);
47+
}
48+
49+
export default styled(CognitoIcon)``;

‎frontend/src/components/common/Icons/KeycloakIcon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
4+
function KeycloakIcon() {
5+
return (
6+
<svg
7+
width="800px"
8+
height="800px"
9+
viewBox="0 0 1024 1024"
10+
xmlns="http://www.w3.org/2000/svg"
11+
>
12+
<circle cx="512" cy="512" r="512" fill="#008aaa" />
13+
<path
14+
d="M786.2 395.5h-80.6c-1.5 0-3-.8-3.7-2.1l-64.7-112.2c-.8-1.3-2.2-2.1-3.8-2.1h-264c-1.5 0-3 .8-3.7 2.1l-67.3 116.4-64.8 112.2c-.7 1.3-.7 2.9 0 4.3l64.8 112.2 67.2 116.5c.7 1.3 2.2 2.2 3.7 2.1h264.1c1.5 0 3-.8 3.8-2.1L702 630.6c.7-1.3 2.2-2.2 3.7-2.1h80.6c2.7 0 4.8-2.2 4.8-4.8V400.4c-.1-2.7-2.3-4.9-4.9-4.9zM477.5 630.6l-20.3 35c-.3.5-.8 1-1.3 1.3-.6.3-1.2.5-1.9.5h-40.3c-1.4 0-2.7-.7-3.3-2l-60.1-104.3-5.9-10.3-21.6-36.9c-.3-.5-.5-1.1-.4-1.8 0-.6.2-1.3.5-1.8l21.7-37.6 65.9-114c.7-1.2 2-2 3.3-2H454c.7 0 1.4.2 2.1.5.5.3 1 .7 1.3 1.3l20.3 35.2c.6 1.2.5 2.7-.2 3.8l-65.1 112.8c-.3.5-.4 1.1-.4 1.6 0 .6.2 1.1.4 1.6l65.1 112.7c.9 1.5.8 3.1 0 4.4zm202.1-116.7L658 550.8l-5.9 10.3L592 665.4c-.7 1.2-1.9 2-3.3 2h-40.3c-.7 0-1.3-.2-1.9-.5-.5-.3-1-.7-1.3-1.3l-20.3-35c-.9-1.3-.9-2.9-.1-4.2l65.1-112.7c.3-.5.4-1.1.4-1.6 0-.6-.2-1.1-.4-1.6l-65.1-112.8c-.7-1.2-.8-2.6-.2-3.8l20.3-35.2c.3-.5.8-1 1.3-1.3.6-.4 1.3-.5 2.1-.5h40.4c1.4 0 2.7.7 3.3 2l65.9 114 21.7 37.6c.3.6.5 1.2.5 1.8 0 .4-.2 1-.5 1.6z"
15+
fill="#fff"
16+
/>
17+
</svg>
18+
);
19+
}
20+
21+
export default styled(KeycloakIcon)``;

‎frontend/src/components/common/Icons/OktaIcon.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
4+
function OktaIcon() {
5+
return (
6+
<svg
7+
height="842"
8+
viewBox="0 0 400 134.7"
9+
width="2500"
10+
xmlns="http://www.w3.org/2000/svg"
11+
>
12+
<path
13+
d="m50.3 33.8c-27.8 0-50.3 22.5-50.3 50.3s22.5 50.3 50.3 50.3 50.3-22.5 50.3-50.3-22.5-50.3-50.3-50.3zm0 75.5c-13.9 0-25.2-11.3-25.2-25.2s11.3-25.2 25.2-25.2 25.2 11.3 25.2 25.2-11.3 25.2-25.2 25.2zm88.4-8.3c0-4 4.8-5.9 7.6-3.1 12.6 12.8 33.4 34.8 33.5 34.9.3.3.6.8 1.8 1.2.5.2 1.3.2 2.2.2h22.7c4.1 0 5.3-4.7 3.4-7.1l-37.6-38.5-2-2c-4.3-5.1-3.8-7.1 1.1-12.3l29.8-33.3c1.9-2.4.7-7-3.5-7h-20.6c-.8 0-1.4 0-2 .2-1.2.4-1.7.8-2 1.2-.1.1-16.6 17.9-26.8 28.8-2.8 3-7.8 1-7.8-3.1v-57.1c0-2.9-2.4-4-4.3-4h-16.8c-2.9 0-4.3 1.9-4.3 3.6v126.6c0 2.9 2.4 3.7 4.4 3.7h16.8c2.6 0 4.3-1.9 4.3-3.8v-29.1zm137.2 28.6-1.8-16.8c-.2-2.3-2.4-3.9-4.7-3.5-1.3.2-2.6.3-3.9.3-13.4 0-24.3-10.5-25.1-23.8v-22c0-2.7 2-4.9 4.7-4.9h22.5c1.6 0 4-1.4 4-4.3v-15.9c0-3.1-2-4.7-3.8-4.7h-22.7c-2.6 0-4.7-1.9-4.8-4.5v-25.5c0-1.6-1.2-4-4.3-4h-16.7c-2.1 0-4.1 1.3-4.1 3.9v81.9c.7 27.2 23 48.9 50.3 48.9 2.3 0 4.5-.2 6.7-.5 2.4-.3 4-2.3 3.7-4.6zm121.2-21.1c-14.2 0-16.4-5.1-16.4-24.2v-46.1c0-1.6-1.2-4.3-4.4-4.3h-16.8c-2.1 0-4.4 1.7-4.4 4.3v2.1c-7.3-4.2-15.8-6.6-24.8-6.6-27.8 0-50.3 22.5-50.3 50.3s22.5 50.3 50.3 50.3c12.5 0 23.9-4.6 32.7-12.1 4.7 7.2 12.3 12 24.2 12.1 2 0 12.8.4 12.8-4.7v-17.9c0-1.5-1.2-3.2-2.9-3.2zm-66.7.8c-13.9 0-25.2-11.3-25.2-25.2s11.3-25.2 25.2-25.2 25.2 11.3 25.2 25.2c-.1 13.9-11.4 25.2-25.2 25.2z"
14+
fill="#007dc1"
15+
/>
16+
</svg>
17+
);
18+
}
19+
20+
export default styled(OktaIcon)``;

0 commit comments

Comments
 (0)