Bbuddy
/
bbuddy-ui
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

demo

This commit is contained in:
norton81 2024-06-30 17:51:56 +03:00
parent b6d11a5b30
commit 6a9bed479a
9 changed files with 317 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -38,3 +38,5 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
certificates

64
package-lock.json generated
View File

@ -11,6 +11,8 @@
"@ant-design/cssinjs": "^1.18.1",
"@ant-design/icons": "^5.2.6",
"@ant-design/nextjs-registry": "^1.0.0",
"@greatsumini/react-facebook-login": "^3.3.3",
"@react-oauth/google": "^0.12.1",
"antd": "^5.12.1",
"antd-img-crop": "^4.21.0",
"axios": "^1.6.5",
@ -19,6 +21,7 @@
"next": "14.0.3",
"next-intl": "^3.3.1",
"react": "^18",
"react-apple-login": "^1.1.6",
"react-dom": "^18",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
@ -309,6 +312,14 @@
"tslib": "^2.4.0"
}
},
"node_modules/@greatsumini/react-facebook-login": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/@greatsumini/react-facebook-login/-/react-facebook-login-3.3.3.tgz",
"integrity": "sha512-Y5D7EncR3iy/X/OfWwjjpM5OW0XV6PCE08RZUV/yhAE413PEBIlML7S6z69BcpUPWO5XzEt7cytHChUdwXO4Dw==",
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.13",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@ -638,6 +649,15 @@
"react-dom": ">=16.9.0"
}
},
"node_modules/@react-oauth/google": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz",
"integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==",
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@rushstack/eslint-patch": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz",
@ -3498,7 +3518,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -3784,7 +3803,6 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@ -4419,6 +4437,20 @@
"node": ">=0.10.0"
}
},
"node_modules/react-apple-login": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/react-apple-login/-/react-apple-login-1.1.6.tgz",
"integrity": "sha512-ySV6ax0aB+ksA7lKzhr4MvsgjwSH068VtdHJXS+7rL380IJnNQNl14SszR31k3UqB8q8C1H1oyjJFGq4MyO6tw==",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"peerDependencies": {
"prop-types": "^15.5.4",
"react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -4452,8 +4484,7 @@
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-slick": {
"version": "0.29.0",
@ -5582,6 +5613,12 @@
"tslib": "^2.4.0"
}
},
"@greatsumini/react-facebook-login": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/@greatsumini/react-facebook-login/-/react-facebook-login-3.3.3.tgz",
"integrity": "sha512-Y5D7EncR3iy/X/OfWwjjpM5OW0XV6PCE08RZUV/yhAE413PEBIlML7S6z69BcpUPWO5XzEt7cytHChUdwXO4Dw==",
"requires": {}
},
"@humanwhocodes/config-array": {
"version": "0.11.13",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@ -5772,6 +5809,12 @@
"rc-util": "^5.38.0"
}
},
"@react-oauth/google": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz",
"integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==",
"requires": {}
},
"@rushstack/eslint-patch": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz",
@ -7881,8 +7924,7 @@
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
},
"object-inspect": {
"version": "1.13.1",
@ -8079,7 +8121,6 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@ -8507,6 +8548,12 @@
"loose-envify": "^1.1.0"
}
},
"react-apple-login": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/react-apple-login/-/react-apple-login-1.1.6.tgz",
"integrity": "sha512-ySV6ax0aB+ksA7lKzhr4MvsgjwSH068VtdHJXS+7rL380IJnNQNl14SszR31k3UqB8q8C1H1oyjJFGq4MyO6tw==",
"requires": {}
},
"react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -8535,8 +8582,7 @@
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-slick": {
"version": "0.29.0",

3
package.json
View File

@ -12,6 +12,8 @@
"@ant-design/cssinjs": "^1.18.1",
"@ant-design/icons": "^5.2.6",
"@ant-design/nextjs-registry": "^1.0.0",
"@greatsumini/react-facebook-login": "^3.3.3",
"@react-oauth/google": "^0.12.1",
"antd": "^5.12.1",
"antd-img-crop": "^4.21.0",
"axios": "^1.6.5",
@ -20,6 +22,7 @@
"next": "14.0.3",
"next-intl": "^3.3.1",
"react": "^18",
"react-apple-login": "^1.1.6",
"react-dom": "^18",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",

40
src/app/[locale]/apple-registration/page.tsx Normal file
View File

@ -0,0 +1,40 @@
'use client'
import React from 'react';
import { useEffect, useRef } from 'react';
import { apiClient } from '../../../lib/apiClient';
export default function BbAppleLogIn() {
const urlParams = new URLSearchParams(location.search);
var code = urlParams.getAll('code')[0];
const ref = useRef(false);
var makeRequest = async (c) => {
if(ref.current) {
return;
}
ref.current = true;
try {
var result = await apiClient.post('http://192.168.0.106:5090/api/auth/registerexternalappleweb', {
code: c
});
localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
window.location.href="/";
}
catch (err) {
/*process*/
}
}
useEffect(() => {
makeRequest(code);
},[code]);
return (
<>
</>
);
};

40
src/app/[locale]/apple-sign-in/page.tsx Normal file
View File

@ -0,0 +1,40 @@
'use client'
import React from 'react';
import { useEffect, useRef } from 'react';
import { apiClient } from '../../../lib/apiClient';
export default function BbAppleLogIn() {
const urlParams = new URLSearchParams(location.search);
var code = urlParams.getAll('code')[0];
const ref = useRef(false);
var makeRequest = async (c) => {
if(ref.current) {
return;
}
ref.current = true;
try {
var result = await apiClient.post('http://192.168.0.106:5090/api/auth/tryloginexternalappleweb', {
code: c
});
localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
window.location.href="/";
}
catch (err) {
/*process*/
}
}
useEffect(() => {
makeRequest(code);
},[code]);
return (
<>
</>
);
};

5
src/app/[locale]/layout.tsx
View File

@ -8,6 +8,9 @@ import theme from '../../constants/theme';
import { ALLOWED_LOCALES } from '../../constants/locale';
import { Header, Footer } from '../../components/Page';
import { GoogleOAuthProvider } from '@react-oauth/google';
import { SessionProvider } from "next-auth/react"
type LayoutProps = {
children: ReactNode;
params: { locale: string };
@ -28,6 +31,7 @@ export default function LocaleLayout({ children, params: { locale } }: LayoutPro
return (
<AntdRegistry>
<GoogleOAuthProvider clientId='909563069647-03rivr8k1jmirf382bcfehegamthcfg4.apps.googleusercontent.com'>
<ConfigProvider theme={theme}>
<div className="b-wrapper">
<div className="b-content">
@ -37,6 +41,7 @@ export default function LocaleLayout({ children, params: { locale } }: LayoutPro
<Footer locale={locale} />
</div>
</ConfigProvider>
</GoogleOAuthProvider>
</AntdRegistry>
);
};

100
src/components/Modals/authModalContent/EnterContent.tsx
View File

@ -1,4 +1,4 @@
import React, { FC, useState } from 'react';
import React, { FC, useState, useEffect } from 'react';
import { Form, FormInstance, notification } from 'antd';
import Image from 'next/image';
import { Social } from '../../../types/social';
@ -13,6 +13,15 @@ import { FilledButton } from '../../view/FilledButton';
import { OutlinedButton } from '../../view/OutlinedButton';
import { LinkButton } from '../../view/LinkButton';
import { apiClient } from 'lib/apiClient';
import { useGoogleLogin } from '@react-oauth/google';
import { FacebookLoginClient, SuccessResponse } from '@greatsumini/react-facebook-login';
import FacebookLogin from '@greatsumini/react-facebook-login';
import AppleLogin from 'react-apple-login'
const appId = '581373996992475';
type EnterProps = {
form: FormInstance;
updateMode: (mode: 'enter' | 'register' | 'reset' | 'finish') => void;
@ -58,7 +67,51 @@ export const EnterContent: FC<EnterProps> = ({
});
};
const googleLogin = useGoogleLogin({
onError: (err) => {
console.log(err);
},
onSuccess: async (tokenResponse) => {
var result = await apiClient.post('http://192.168.0.106:5090/api/auth/tryloginexternal', {
platform: 0,
provider: 4,
accesstoken: tokenResponse.access_token
});
localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
console.log(result);
}
});
const facebookLogin = async (response: SuccessResponse) => {
console.log('Login Success!', response);
var result = await apiClient.post('http://192.168.0.106:5090/api/auth/tryloginexternal', {
platform: 0,
provider: 1,
accesstoken: response.accessToken
});
localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
console.log(result);
}
const authRequest = async () => {
try {
await apiClient.post('/home/userdata');
console.log('success');
}
catch(err) {
console.log(err);
}
}
const logout = () => {
localStorage.removeItem('bbuddy_token_test');
}
const onSocialEnter = (type: Social) => {
const url = SocialConfig[type].oauthUrl;
if (!url) return;
@ -154,24 +207,45 @@ export const EnterContent: FC<EnterProps> = ({
Forgot password?
</LinkButton>
<span>or</span>
<OutlinedButton
icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
onClick={() => onSocialEnter(Social.FACEBOOK)}
<FacebookLogin
initParams={{
version: 'v16.0',
}}
loginOptions={{
return_scopes: true,
auth_type: 'rerequest'
}}
appId={appId}
onSuccess={facebookLogin}
>
Facebook account
</OutlinedButton>
<OutlinedButton
icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
onClick={() => onSocialEnter(Social.APPLE)}
>
Apple account
</OutlinedButton>
</FacebookLogin>
<AppleLogin
clientId="bbuddy.expert"
redirectURI="https://local.apple-sigin.mydomain.com/en/apple-sign-in"
responseType='code'
responseMode = 'query'
/>
<OutlinedButton
icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
onClick={() => onSocialEnter(Social.GOOGLE)}
onClick={() => googleLogin()}
>
Google account
</OutlinedButton>
<OutlinedButton
onClick={() => authRequest()}
>
Test Request
</OutlinedButton>
<OutlinedButton
onClick={() => logout()}
>
Log Out
</OutlinedButton>
</>
);
};

69
src/components/Modals/authModalContent/RegisterContent.tsx
View File

@ -12,6 +12,15 @@ import { CustomInputPassword } from '../../view/CustomInputPassword';
import { FilledButton } from '../../view/FilledButton';
import { OutlinedButton } from '../../view/OutlinedButton';
import { apiClient } from 'lib/apiClient';
import { useGoogleLogin } from '@react-oauth/google';
import { FacebookLoginClient, SuccessResponse } from '@greatsumini/react-facebook-login';
import FacebookLogin from '@greatsumini/react-facebook-login';
import AppleLogin from 'react-apple-login';
const appId = '581373996992475';
type RegisterProps = {
form: FormInstance;
locale: string;
@ -30,6 +39,17 @@ export const RegisterContent: FC<RegisterProps> = ({
const [isLoading, setIsLoading] = useState<boolean>(false);
const { openOauthWindow } = useOauthWindow();
const facebookLogin = async (response: SuccessResponse) => {
console.log('Login Success!', response);
var result = await apiClient.post('http://192.168.0.106:5090/api/auth/registerexternal', {
platform: 0,
provider: 1,
accesstoken: response.accessToken
});
localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
console.log(result);
}
const onRegister = () => {
form.validateFields().then(() => {
const { login, password } = form.getFieldsValue();
@ -63,6 +83,22 @@ export const RegisterContent: FC<RegisterProps> = ({
});
};
const googleLogin = useGoogleLogin({
onError: (err) => {
console.log(err);
},
onSuccess: async (tokenResponse) => {
var result = await apiClient.post('http://192.168.0.106:5090/api/auth/registerexternal', {
platform: 0,
provider: 4,
accesstoken: tokenResponse.access_token
});
localStorage.setItem('bbuddy_token_test', result.data.jwtToken);
console.log(result);
}
});
const onSocialRegister = (type: Social) => {
const url = SocialConfig[type].oauthUrl;
@ -176,21 +212,30 @@ export const RegisterContent: FC<RegisterProps> = ({
</FilledButton>
<OutlinedButton onClick={() => updateMode('enter')}>Enter</OutlinedButton>
<span>or</span>
<OutlinedButton
icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
onClick={() => onSocialRegister(Social.FACEBOOK)}
<FacebookLogin
initParams={{
version: 'v16.0',
}}
loginOptions={{
return_scopes: true,
auth_type: 'rerequest'
}}
appId={appId}
onSuccess={facebookLogin}
>
Facebook account
</OutlinedButton>
<OutlinedButton
icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
onClick={() => onSocialRegister(Social.APPLE)}
>
Apple account
</OutlinedButton>
</FacebookLogin>
<AppleLogin
clientId="bbuddy.expert"
redirectURI="https://local.apple-sigin.mydomain.com/en/apple-registration"
responseType='code'
responseMode = 'query'
/>
<OutlinedButton
icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
onClick={() => onSocialRegister(Social.GOOGLE)}
onClick={() => googleLogin()}
>
Google account
</OutlinedButton>

24
src/lib/apiClient.ts
View File

@ -17,6 +17,27 @@ export const onSuccessRequestCallback = (config: InternalAxiosRequestConfig) =>
return newConfig;
};
export const onSuccessRequestJwtCallback = (config: InternalAxiosRequestConfig) => {
const newConfig = { ...config };
if (typeof window !== 'undefined') {
var jwt = localStorage.getItem('bbuddy_token_test');
if(jwt) {
newConfig.headers.set('Authorization', `Bearer ${jwt}`);
}
}
return newConfig;
};
export const onSuccessResponseJwtCallback = (response: AxiosResponse) => {
var header = response.headers['x-new-token'];
if(header) {
localStorage.setItem('bbuddy_token_test', header);
}
return response;
};
export const onSuccessResponseCallback = (response: AxiosResponse) => response;
export const onErrorResponseCallback = (error: any) => Promise.reject(error);
@ -31,3 +52,6 @@ apiClient.interceptors.response.use(
onSuccessResponseCallback,
onErrorResponseCallback
);
apiClient.interceptors.response.use(onSuccessResponseJwtCallback);
apiClient.interceptors.request.use(onSuccessRequestJwtCallback);