vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-12-22 03:33:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Google OAuth support

Browse Source
This commit is contained in:
Gustavo Fuhr 2022-12-16 03:32:22 +00:00 committed by Paulo Veiga
parent fb4568a817
commit d7159760e8
36 changed files with 2361 additions and 1123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor/cypress/e2e/renderAll.cy.ts
View File

@ -9,7 +9,7 @@ context('Render all sample maps', () => {
'icon-sample',
'img-support',
'order',
'rel-error',
//'rel-error',
'sample1',
'sample2',
'sample3',
@ -24,7 +24,7 @@ context('Render all sample maps', () => {
cy.reload();
cy.get('svg > path').should('be.visible');
cy.get('[aria-label="vortex-loading"]', { timeout: 60000 }).should('not.exist');
cy.get('[aria-label="vortex-loading"]', { timeout: 120000 }).should('not.exist');
cy.matchImageSnapshot(`map-${mapId}`);
});
});

41
packages/webapp/lang/de.json
View File

@ -515,5 +515,44 @@
},
"dialog.loading": {
"defaultMessage": "Wird geladen ..."
}
},
"registration.google.button": {
"defaultMessage": "Melden Sie sich bei Google an"
},
"login.google.button": {
"defaultMessage": "Anmeldung mit Google"
},
"registration.division": {
"defaultMessage": "oder"
},
"login.division": {
"defaultMessage": "oder"
},
"registration.callback.confirm.title": {
"defaultMessage": "Bestätigen"
},
"registration.callback.waiting.title": {
"defaultMessage": "Fertigstellung ..."
},
"registration.callback.confirm.description": {
"defaultMessage": "Ein Konto mit derselben E-Mail-Adresse wurde zuvor registriert. Möchten Sie Ihr Google-Konto mit diesem WiseMapping-Konto verknüpfen?"
},
"registration.callback.waiting.description": {
"defaultMessage": "Bitte warten Sie, während wir Ihre Identität überprüfen"
},
"registation.callback.error.message": {
"defaultMessage": "Beim Überprüfen Ihrer Identität bei Google ist ein Fehler aufgetreten. Sie können es auf der Anmeldeseite erneut versuchen"
},
"registration.callback.back": {
"defaultMessage": "Zurück zur Anmeldung"
},
"registration.callback.sync": {
"defaultMessage": "Konto synchronisieren"
},
"forgot.oauth.message": {
"defaultMessage": "Sie benötigen kein Passwort, bitte melden Sie sich mit Google an"
},
"forgot.oauth.back": {
"defaultMessage": "Zurück zur Anmeldung"
}
}

39
packages/webapp/lang/en.json
View File

@ -188,6 +188,12 @@
"forgot.email": {
"defaultMessage": "Email"
},
"forgot.oauth.back": {
"defaultMessage": "Back to login"
},
"forgot.oauth.message": {
"defaultMessage": "You dont need password, please login using Google."
},
"forgot.page-title": {
"defaultMessage": "Forgot Password | WiseMapping"
},
@ -305,6 +311,9 @@
"login.desc": {
"defaultMessage": "Log into your account"
},
"login.division": {
"defaultMessage": "or"
},
"login.email": {
"defaultMessage": "Email"
},
@ -314,6 +323,9 @@
"login.forgotpwd": {
"defaultMessage": "Forgot Password ?"
},
"login.google.button": {
"defaultMessage": "Sign in with Google"
},
"login.page-title": {
"defaultMessage": "Login | WiseMapping"
},
@ -440,18 +452,45 @@
"publish.title": {
"defaultMessage": "Publish"
},
"registation.callback.error.message": {
"defaultMessage": "An error occurred validating your identity with Google, you can try again from the login page"
},
"registation.success-title": {
"defaultMessage": "Registation Success | WiseMapping"
},
"registration.callback.back": {
"defaultMessage": "Back to login"
},
"registration.callback.confirm.description": {
"defaultMessage": "An account with the same email was previously registered. Do you want to link your google account to that WiseMapping account?"
},
"registration.callback.confirm.title": {
"defaultMessage": "Confirm"
},
"registration.callback.sync": {
"defaultMessage": "Sync account"
},
"registration.callback.waiting.description": {
"defaultMessage": "Please wait while we validate your identity"
},
"registration.callback.waiting.title": {
"defaultMessage": "Finishing..."
},
"registration.desc": {
"defaultMessage": "Signing up is free and just take a moment"
},
"registration.division": {
"defaultMessage": "or"
},
"registration.email": {
"defaultMessage": "Email"
},
"registration.firstname": {
"defaultMessage": "First Name"
},
"registration.google.button": {
"defaultMessage": "Sign up with Google"
},
"registration.lastname": {
"defaultMessage": "Last Name"
},

41
packages/webapp/lang/es.json
View File

@ -491,5 +491,44 @@
},
"dialog.loading": {
"defaultMessage": "Cargando ..."
}
},
"registration.google.button": {
"defaultMessage": "Regístrate con Google"
},
"login.google.button": {
"defaultMessage": "Ingresar con Google"
},
"registration.division": {
"defaultMessage": "ó"
},
"login.division": {
"defaultMessage": "ó"
},
"registration.callback.confirm.title": {
"defaultMessage": "Confirmación"
},
"registration.callback.waiting.title": {
"defaultMessage": "Finalizando ..."
},
"registration.callback.confirm.description": {
"defaultMessage": "Una cuenta con el mismo email fue registrada previamente. ¿Quieres asociar tu cuenta de Google con esa cuenta de WiseMapping?"
},
"registration.callback.waiting.description": {
"defaultMessage": "Por favor espera mientras validamos tu identidad"
},
"registation.callback.error.message": {
"defaultMessage": "Ocurrió un error al validar tu identidad con Google, puedes volver a intentarlo desde la página de inicio de sesión"
},
"registration.callback.back": {
"defaultMessage": "Volver"
},
"registration.callback.sync": {
"defaultMessage": "Sincronizar cuenta"
},
"forgot.oauth.message": {
"defaultMessage": "No necesitas contraseña, por favor ingresa usando Google"
},
"forgot.oauth.back": {
"defaultMessage": "Volver"
}
}

41
packages/webapp/lang/fr.json
View File

@ -518,5 +518,44 @@
},
"dialog.loading": {
"defaultMessage": "Chargement ..."
}
},
"registration.google.button": {
"defaultMessage": "S'inscrire avec Google"
},
"login.google.button": {
"defaultMessage": "Connectez-vous avec Google"
},
"registration.division": {
"defaultMessage": "ou"
},
"login.division": {
"defaultMessage": "ou"
},
"registration.callback.confirm.title": {
"defaultMessage": "Confirmer"
},
"registration.callback.waiting.title": {
"defaultMessage": "Finition ..."
},
"registration.callback.confirm.description": {
"defaultMessage": "Un compte avec le même e-mail a déjà été enregistré. Voulez-vous lier votre compte Google à ce compte WiseMapping ?"
},
"registration.callback.waiting.description": {
"defaultMessage": "Veuillez patienter pendant que nous validons votre identité"
},
"registation.callback.error.message": {
"defaultMessage": "Une erreur s'est produite lors de la validation de votre identité auprès de Google, vous pouvez réessayer depuis la page de connexion"
},
"registration.callback.back": {
"defaultMessage": "Retour connexion"
},
"registration.callback.sync": {
"defaultMessage": "Compte de synchronisation"
},
"forgot.oauth.message": {
"defaultMessage": "Vous n'avez pas besoin de mot de passe, veuillez vous connecter en utilisant Google"
},
"forgot.oauth.back": {
"defaultMessage": "Retour connexion"
}
}

1013
packages/webapp/lang/ru.json
View File

File diff suppressed because it is too large Load Diff

1067
packages/webapp/lang/zh.json
View File

File diff suppressed because it is too large Load Diff

2
packages/webapp/src/app.tsx
View File

@ -16,6 +16,7 @@ import ReactGA from 'react-ga4';
import AppConfig from './classes/app-config';
import withSessionExpirationHandling from './components/HOCs/withSessionExpirationHandling';
import RegistrationSuccessPage from './components/registration-success-page';
import RegistrationCallbackPage from './components/registration-callback';
const EditorPage = React.lazy(() => import('./components/editor-page'));
const MapsPage = React.lazy(() => import('./components/maps-page'));
@ -70,6 +71,7 @@ const App = (): ReactElement => {
<Route path="/" element={<Redirect to="/c/login" />} />
<Route path="/c/login" element={<LoginPage />} />
<Route path="/c/registration" element={<RegistationPage />} />
<Route path="/c/registration-google" element={<RegistrationCallbackPage />} />
<Route path="/c/registration-success" element={<RegistrationSuccessPage />} />
<Route path="/c/forgot-password" element={<ForgotPasswordPage />} />
<Route

7
packages/webapp/src/classes/app-config/index.ts
View File

@ -27,6 +27,7 @@ interface Config {
recaptcha2Enabled: boolean;
recaptcha2SiteKey?: string;
clientType: 'mock' | 'rest';
googleOauth2Url: string;
}
class _AppConfig {
@ -35,6 +36,7 @@ class _AppConfig {
clientType: 'mock',
recaptcha2Enabled: true,
recaptcha2SiteKey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
googleOauth2Url: '/c/registration-google?code=aFakeCode',
};
isDevelopEnv(): boolean {
@ -73,6 +75,11 @@ class _AppConfig {
return config.analyticsAccount;
}
getGoogleOauth2Url(): string | undefined {
const config = this.getInstance();
return config.googleOauth2Url;
}
buildClient(): Client {
const config = this.getInstance();
let result: Client;

12
packages/webapp/src/classes/client/cache-decorator-client/index.ts
View File

@ -7,6 +7,8 @@ import Client, {
MapInfo,
NewUser,
Permission,
Oauth2CallbackResult,
ForgotPasswordResult,
} from '..';
import { LocaleCode } from '../../app-i18n';
@ -17,6 +19,14 @@ class CacheDecoratorClient implements Client {
this.client = client;
}
processGoogleCallback(code: string): Promise<Oauth2CallbackResult> {
return this.client.processGoogleCallback(code);
}
confirmAccountSync(email: string, code: string): Promise<void> {
return this.client.confirmAccountSync(email, code);
}
fetchStarred(id: number): Promise<boolean> {
return this.client.fetchStarred(id);
}
@ -117,7 +127,7 @@ class CacheDecoratorClient implements Client {
return this.client.registerNewUser(user);
}
resetPassword(email: string): Promise<void> {
resetPassword(email: string): Promise<ForgotPasswordResult> {
return this.client.resetPassword(email);
}

17
packages/webapp/src/classes/client/index.ts
View File

@ -58,11 +58,14 @@ export type ErrorInfo = {
fields?: Map<string, string>;
};
export type AuthenticationType = 'GOOGLE_OAUTH2' | 'DATABASE' | 'LDAP';
export type AccountInfo = {
firstname: string;
lastname: string;
email: string;
locale?: Locale;
authenticationType: AuthenticationType;
};
export type Permission = {
@ -71,6 +74,16 @@ export type Permission = {
role: Role;
};
export type Oauth2CallbackResult = {
email: string;
googleSync: boolean;
syncCode?: string;
};
export type ForgotPasswordResult = {
action: 'EMAIL_SENT' | 'OAUTH2_USER';
};
interface Client {
deleteAccount(): Promise<void>;
importMap(model: ImportMapInfo): Promise<number>;
@ -103,7 +116,9 @@ interface Client {
fetchAccountInfo(): Promise<AccountInfo>;
registerNewUser(user: NewUser): Promise<void>;
resetPassword(email: string): Promise<void>;
resetPassword(email: string): Promise<ForgotPasswordResult>;
processGoogleCallback(code: string): Promise<Oauth2CallbackResult>;
confirmAccountSync(email: string, code: string): Promise<void>;
fetchHistory(id: number): Promise<ChangeHistory[]>;
revertHistory(id: number, cid: number): Promise<void>;

27
packages/webapp/src/classes/client/mock-client/index.ts
View File

@ -24,6 +24,8 @@ import Client, {
MapInfo,
NewUser,
Permission,
Oauth2CallbackResult,
ForgotPasswordResult,
} from '..';
import { LocaleCode, localeFromStr } from '../../app-i18n';
@ -204,6 +206,7 @@ class MockClient implements Client {
lastname: 'Fulanito',
email: 'test@example.com',
locale: localeFromStr(locale),
authenticationType: 'DATABASE',
});
}
@ -402,8 +405,30 @@ class MockClient implements Client {
return Promise.resolve(this.maps);
}
resetPassword(email: string): Promise<void> {
resetPassword(email: string): Promise<ForgotPasswordResult> {
console.log('email:' + email);
return Promise.resolve({ action: 'EMAIL_SENT' });
}
processGoogleCallback(): Promise<Oauth2CallbackResult> {
// artificial delay for more realistic mock experience
const handler = (success: (result: Oauth2CallbackResult) => void) => {
setTimeout(() => {
success({
email: 'test@email.com',
// -- use case 1) user must confirm if he wants to link accounts
// googleSync: false,
// syncCode: "834580239598234650234578"
// -- use case 2) user already confirmed
googleSync: true,
syncCode: undefined,
});
}, 3000);
};
return new Promise(handler);
}
confirmAccountSync(): Promise<void> {
return Promise.resolve();
}
}

57
packages/webapp/src/classes/client/rest-client/index.ts
View File

@ -9,6 +9,8 @@ import Client, {
AccountInfo,
ImportMapInfo,
Permission,
Oauth2CallbackResult,
ForgotPasswordResult,
} from '..';
import { getCsrfToken } from '../../../utils';
import { LocaleCode, localeFromStr } from '../../app-i18n';
@ -262,6 +264,7 @@ export default class RestClient implements Client {
firstname: account.firstname ? account.firstname : '',
email: account.email,
locale: locale ? localeFromStr(locale) : undefined,
authenticationType: account.authenticationType,
});
})
.catch((error) => {
@ -472,8 +475,11 @@ export default class RestClient implements Client {
return new Promise(handler);
}
resetPassword(email: string): Promise<void> {
const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
resetPassword(email: string): Promise<ForgotPasswordResult> {
const handler = (
success: (result: ForgotPasswordResult) => void,
reject: (error: ErrorInfo) => void,
) => {
this.axios
.put(
`${this.baseUrl}/service/users/resetPassword?email=${encodeURIComponent(email)}`,
@ -482,9 +488,9 @@ export default class RestClient implements Client {
headers: { 'Content-Type': 'application/json' },
},
)
.then(() => {
// All was ok, let's sent to success page ...;
success();
.then((response) => {
// All was ok, lets return if an email was sent or the user should login with oauth
success({ action: response.data.action });
})
.catch((error) => {
const response = error.response;
@ -628,6 +634,47 @@ export default class RestClient implements Client {
return new Promise(handler);
}
processGoogleCallback(code: string): Promise<Oauth2CallbackResult> {
const handler = (
success: (result: Oauth2CallbackResult) => void,
reject: (error: ErrorInfo) => void,
) => {
this.axios
.post(`${this.baseUrl}/service/oauth2/googlecallback?code=${code}`, {
headers: { 'Content-Type': 'application/json' },
})
.then((response) => {
success({
email: response.data.email,
googleSync: response.data.googleSync,
syncCode: response.data.syncCode,
});
})
.catch((error) => {
const errorInfo = this.parseResponseOnError(error.response);
reject(errorInfo);
});
};
return new Promise(handler);
}
confirmAccountSync(email: string, code: string): Promise<void> {
const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
this.axios
.put(`${this.baseUrl}/service/oauth2/confirmaccountsync?email=${email}&code=${code}`, {
headers: { 'Content-Type': 'application/json' },
})
.then(() => {
success();
})
.catch((error) => {
const errorInfo = this.parseResponseOnError(error.response);
reject(errorInfo);
});
};
return new Promise(handler);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private parseResponseOnError = (response: any): ErrorInfo => {
console.error(`Performing backend action error: ${JSON.stringify(response)}`);

78
packages/webapp/src/compiled-lang/de.json
View File

@ -383,6 +383,18 @@
"value": "E-Mail"
}
],
"forgot.oauth.back": [
{
"type": 0,
"value": "Zurück zur Anmeldung"
}
],
"forgot.oauth.message": [
{
"type": 0,
"value": "Sie benötigen kein Passwort, bitte melden Sie sich mit Google an"
}
],
"forgot.page-title": [
{
"type": 0,
@ -615,6 +627,12 @@
"value": "Melde dich mit deinem Konto an"
}
],
"login.division": [
{
"type": 0,
"value": "oder"
}
],
"login.email": [
{
"type": 0,
@ -633,6 +651,12 @@
"value": "Passwort vergessen?"
}
],
"login.google.button": [
{
"type": 0,
"value": "Anmeldung mit Google"
}
],
"login.hsqldbcofig": [
{
"type": 0,
@ -903,18 +927,66 @@
"value": "Veröffentlichen"
}
],
"registation.callback.error.message": [
{
"type": 0,
"value": "Beim Überprüfen Ihrer Identität bei Google ist ein Fehler aufgetreten. Sie können es auf der Anmeldeseite erneut versuchen"
}
],
"registation.success-title": [
{
"type": 0,
"value": "Registrierung erfolgreich | WiseMapping"
}
],
"registration.callback.back": [
{
"type": 0,
"value": "Zurück zur Anmeldung"
}
],
"registration.callback.confirm.description": [
{
"type": 0,
"value": "Ein Konto mit derselben E-Mail-Adresse wurde zuvor registriert. Möchten Sie Ihr Google-Konto mit diesem WiseMapping-Konto verknüpfen?"
}
],
"registration.callback.confirm.title": [
{
"type": 0,
"value": "Bestätigen"
}
],
"registration.callback.sync": [
{
"type": 0,
"value": "Konto synchronisieren"
}
],
"registration.callback.waiting.description": [
{
"type": 0,
"value": "Bitte warten Sie, während wir Ihre Identität überprüfen"
}
],
"registration.callback.waiting.title": [
{
"type": 0,
"value": "Fertigstellung ..."
}
],
"registration.desc": [
{
"type": 0,
"value": "Nimm dir einen Moment Zeit. Die Anmeldung ist kostenlos."
}
],
"registration.division": [
{
"type": 0,
"value": "oder"
}
],
"registration.email": [
{
"type": 0,
@ -927,6 +999,12 @@
"value": "Vorname"
}
],
"registration.google.button": [
{
"type": 0,
"value": "Melden Sie sich bei Google an"
}
],
"registration.lastname": [
{
"type": 0,

72
packages/webapp/src/compiled-lang/en.json
View File

@ -377,6 +377,18 @@
"value": "Email"
}
],
"forgot.oauth.back": [
{
"type": 0,
"value": "Back to login"
}
],
"forgot.oauth.message": [
{
"type": 0,
"value": "You dont need password, please login using Google"
}
],
"forgot.page-title": [
{
"type": 0,
@ -637,6 +649,12 @@
"value": "Forgot Password ?"
}
],
"login.google.button": [
{
"type": 0,
"value": "Sign in with Google"
}
],
"login.page-title": [
{
"type": 0,
@ -901,18 +919,66 @@
"value": "Publish"
}
],
"registation.callback.error.message": [
{
"type": 0,
"value": "An error occurred validating your identity with Google, you can try again from the login page"
}
],
"registation.success-title": [
{
"type": 0,
"value": "Registation Success | WiseMapping"
}
],
"registration.callback.back": [
{
"type": 0,
"value": "Back to login"
}
],
"registration.callback.confirm.description": [
{
"type": 0,
"value": "An account with the same email was previously registered. Do you want to link your google account to that WiseMapping account?"
}
],
"registration.callback.confirm.title": [
{
"type": 0,
"value": "Confirm"
}
],
"registration.callback.sync": [
{
"type": 0,
"value": "Sync account"
}
],
"registration.callback.waiting.description": [
{
"type": 0,
"value": "Please wait while we validate your identity"
}
],
"registration.callback.waiting.title": [
{
"type": 0,
"value": "Finishing ..."
}
],
"registration.desc": [
{
"type": 0,
"value": "Signing up is free and just take a moment"
}
],
"registration.division": [
{
"type": 0,
"value": "or"
}
],
"registration.email": [
{
"type": 0,
@ -925,6 +991,12 @@
"value": "First Name"
}
],
"registration.google.button": [
{
"type": 0,
"value": "Sign up with Google"
}
],
"registration.lastname": [
{
"type": 0,

78
packages/webapp/src/compiled-lang/es.json
View File

@ -377,6 +377,18 @@
"value": "Correo electrónico"
}
],
"forgot.oauth.back": [
{
"type": 0,
"value": "Volver"
}
],
"forgot.oauth.message": [
{
"type": 0,
"value": "No necesitas contraseña, por favor ingresa usando Google"
}
],
"forgot.page-title": [
{
"type": 0,
@ -561,6 +573,12 @@
"value": "Ingrese a su cuenta"
}
],
"login.division": [
{
"type": 0,
"value": "ó"
}
],
"login.email": [
{
"type": 0,
@ -579,6 +597,12 @@
"value": "Has olvidado tu contraseña ?"
}
],
"login.google.button": [
{
"type": 0,
"value": "Ingresar con Google"
}
],
"login.hsqldbcofig": [
{
"type": 0,
@ -849,18 +873,66 @@
"value": "Publicar"
}
],
"registation.callback.error.message": [
{
"type": 0,
"value": "Ocurrió un error al validar tu identidad con Google, puedes volver a intentarlo desde la página de inicio de sesión"
}
],
"registation.success-title": [
{
"type": 0,
"value": "Éxito de registro | WiseMapping"
}
],
"registration.callback.back": [
{
"type": 0,
"value": "Volver"
}
],
"registration.callback.confirm.description": [
{
"type": 0,
"value": "Una cuenta con el mismo email fue registrada previamente. ¿Quieres asociar tu cuenta de Google con esa cuenta de WiseMapping?"
}
],
"registration.callback.confirm.title": [
{
"type": 0,
"value": "Confirmación"
}
],
"registration.callback.sync": [
{
"type": 0,
"value": "Sincronizar cuenta"
}
],
"registration.callback.waiting.description": [
{
"type": 0,
"value": "Por favor espera mientras validamos tu identidad"
}
],
"registration.callback.waiting.title": [
{
"type": 0,
"value": "Finalizando ..."
}
],
"registration.desc": [
{
"type": 0,
"value": "Registrarse es gratis y solo tómese un momento"
}
],
"registration.division": [
{
"type": 0,
"value": "ó"
}
],
"registration.email": [
{
"type": 0,
@ -873,6 +945,12 @@
"value": "Primer nombre"
}
],
"registration.google.button": [
{
"type": 0,
"value": "Regístrate con Google"
}
],
"registration.lastname": [
{
"type": 0,

78
packages/webapp/src/compiled-lang/fr.json
View File

@ -375,6 +375,18 @@
"value": "E-mail"
}
],
"forgot.oauth.back": [
{
"type": 0,
"value": "Retour connexion"
}
],
"forgot.oauth.message": [
{
"type": 0,
"value": "Vous n'avez pas besoin de mot de passe, veuillez vous connecter en utilisant Google"
}
],
"forgot.page-title": [
{
"type": 0,
@ -607,6 +619,12 @@
"value": "Connectez-vous à votre compte"
}
],
"login.division": [
{
"type": 0,
"value": "ou"
}
],
"login.email": [
{
"type": 0,
@ -625,6 +643,12 @@
"value": "Mot de passe oublié ?"
}
],
"login.google.button": [
{
"type": 0,
"value": "Connectez-vous avec Google"
}
],
"login.hsqldbcofig": [
{
"type": 0,
@ -895,18 +919,66 @@
"value": "Publier"
}
],
"registation.callback.error.message": [
{
"type": 0,
"value": "Une erreur s'est produite lors de la validation de votre identité auprès de Google, vous pouvez réessayer depuis la page de connexion"
}
],
"registation.success-title": [
{
"type": 0,
"value": "Inscription réussie | WiseMapping"
}
],
"registration.callback.back": [
{
"type": 0,
"value": "Retour connexion"
}
],
"registration.callback.confirm.description": [
{
"type": 0,
"value": "Un compte avec le même e-mail a déjà été enregistré. Voulez-vous lier votre compte Google à ce compte WiseMapping ?"
}
],
"registration.callback.confirm.title": [
{
"type": 0,
"value": "Confirmer"
}
],
"registration.callback.sync": [
{
"type": 0,
"value": "Compte de synchronisation"
}
],
"registration.callback.waiting.description": [
{
"type": 0,
"value": "Veuillez patienter pendant que nous validons votre identité"
}
],
"registration.callback.waiting.title": [
{
"type": 0,
"value": "Finition ..."
}
],
"registration.desc": [
{
"type": 0,
"value": "L'inscription est gratuite et ne prends qu'un instant"
}
],
"registration.division": [
{
"type": 0,
"value": "ou"
}
],
"registration.email": [
{
"type": 0,
@ -919,6 +991,12 @@
"value": "Prénom"
}
],
"registration.google.button": [
{
"type": 0,
"value": "S'inscrire avec Google"
}
],
"registration.lastname": [
{
"type": 0,

78
packages/webapp/src/compiled-lang/ru.json
View File

@ -371,6 +371,18 @@
"value": "Email"
}
],
"forgot.oauth.back": [
{
"type": 0,
"value": "Вернуться на страницу авторизации"
}
],
"forgot.oauth.message": [
{
"type": 0,
"value": "Вам не нужен пароль, пожалуйста, войдите с помощью Google"
}
],
"forgot.page-title": [
{
"type": 0,
@ -555,6 +567,12 @@
"value": "Войдите в свой аккаунт"
}
],
"login.division": [
{
"type": 0,
"value": "или же"
}
],
"login.email": [
{
"type": 0,
@ -573,6 +591,12 @@
"value": "Забыли пароль?"
}
],
"login.google.button": [
{
"type": 0,
"value": "Войти через Google"
}
],
"login.hsqldbcofig": [
{
"type": 0,
@ -843,18 +867,66 @@
"value": "Опубликовать"
}
],
"registation.callback.error.message": [
{
"type": 0,
"value": "Произошла ошибка при подтверждении вашей личности в Google. Повторите попытку со страницы входа."
}
],
"registation.success-title": [
{
"type": 0,
"value": "Успешная регистрация | WiseMapping"
}
],
"registration.callback.back": [
{
"type": 0,
"value": "Вернуться на страницу авторизации"
}
],
"registration.callback.confirm.description": [
{
"type": 0,
"value": "Учетная запись c таким же адресом электронной почты была ранее зарегистрирована. Вы хотите связать свою учетную запись Google с этой учетной записью WiseMapping?"
}
],
"registration.callback.confirm.title": [
{
"type": 0,
"value": "Подтверждать"
}
],
"registration.callback.sync": [
{
"type": 0,
"value": "Синхронизировать учетную запись"
}
],
"registration.callback.waiting.description": [
{
"type": 0,
"value": "Подождите, пока мы подтвердим вашу личность"
}
],
"registration.callback.waiting.title": [
{
"type": 0,
"value": "Отделка ..."
}
],
"registration.desc": [
{
"type": 0,
"value": "Регистрация бесплатна и займет всего минуту"
}
],
"registration.division": [
{
"type": 0,
"value": "или же"
}
],
"registration.email": [
{
"type": 0,
@ -867,6 +939,12 @@
"value": "Имя"
}
],
"registration.google.button": [
{
"type": 0,
"value": "Зарегистрируйтесь в Google"
}
],
"registration.lastname": [
{
"type": 0,

78
packages/webapp/src/compiled-lang/zh.json
View File

@ -371,6 +371,18 @@
"value": "电子邮件"
}
],
"forgot.oauth.back": [
{
"type": 0,
"value": "回到登入"
}
],
"forgot.oauth.message": [
{
"type": 0,
"value": "您不需要密码，请使用谷歌登录"
}
],
"forgot.page-title": [
{
"type": 0,
@ -603,6 +615,12 @@
"value": "登录您的账号"
}
],
"login.division": [
{
"type": 0,
"value": "或者"
}
],
"login.email": [
{
"type": 0,
@ -621,6 +639,12 @@
"value": "忘记密码？"
}
],
"login.google.button": [
{
"type": 0,
"value": "使用 Google 登錄"
}
],
"login.hsqldbcofig": [
{
"type": 0,
@ -891,18 +915,66 @@
"value": "发布"
}
],
"registation.callback.error.message": [
{
"type": 0,
"value": "使用 Google 验证您的身份时出错，您可以从登录页面重试"
}
],
"registation.success-title": [
{
"type": 0,
"value": "注册成功|WiseMapping"
}
],
"registration.callback.back": [
{
"type": 0,
"value": "回到登入"
}
],
"registration.callback.confirm.description": [
{
"type": 0,
"value": "之前注册了一个具有相同电子邮件地址的帐户。你想将你的谷歌账户链接到那个 WiseMapping 账户吗？"
}
],
"registration.callback.confirm.title": [
{
"type": 0,
"value": "确认"
}
],
"registration.callback.sync": [
{
"type": 0,
"value": "同步账户"
}
],
"registration.callback.waiting.description": [
{
"type": 0,
"value": "我们正在验证您的身份，请稍候"
}
],
"registration.callback.waiting.title": [
{
"type": 0,
"value": "整理 ..."
}
],
"registration.desc": [
{
"type": 0,
"value": "注册免费，分分钟就好"
}
],
"registration.division": [
{
"type": 0,
"value": "或者"
}
],
"registration.email": [
{
"type": 0,
@ -915,6 +987,12 @@
"value": "名字"
}
],
"registration.google.button": [
{
"type": 0,
"value": "註冊谷歌"
}
],
"registration.lastname": [
{
"type": 0,

31
packages/webapp/src/components/common/google-button/index.tsx Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import { css } from '@emotion/react';
import { Button } from '@mui/material';
import GoogleIcon from '../google-icon';
const googleButtonStyle = css({
color: '#000000',
fontWeight: '300',
border: '1px solid black',
'&:hover': {
border: '1px solid black',
},
});
type GoogleButtonProps = {
text: string;
onClick: React.MouseEventHandler<HTMLButtonElement>;
};
const GoogleButton: React.FunctionComponent<GoogleButtonProps> = ({
text,
onClick,
}: GoogleButtonProps) => {
return (
<Button variant="outlined" css={googleButtonStyle} startIcon={GoogleIcon} onClick={onClick}>
{text}
</Button>
);
};
export default GoogleButton;

31
packages/webapp/src/components/common/google-icon/index.tsx Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import { SvgIcon } from '@mui/material';
const GoogleIconSvg = () => {
return (
<SvgIcon>
<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
<path
fill="#4285F4"
d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
/>
<path
fill="#34A853"
d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
/>
<path
fill="#FBBC05"
d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
/>
<path
fill="#EA4335"
d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
/>
</g>
</SvgIcon>
);
};
const GoogleIcon = <GoogleIconSvg />;
export default GoogleIcon;

29
packages/webapp/src/components/common/separator/index.tsx Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import { useTheme } from '@mui/material/styles';
import { containerStyle, lineStyle, textStyle } from './style';
type SeparatorProps = {
responsive: boolean;
text: string;
maxWidth?: number;
};
const Separator: React.FunctionComponent<SeparatorProps> = ({
responsive,
text,
maxWidth = undefined,
}: SeparatorProps) => {
const theme = useTheme();
return (
// eslint-disable-next-line react/no-unknown-property
<div css={containerStyle(responsive, maxWidth, theme.breakpoints.down('md'))}>
{/* eslint-disable-next-line react/no-unknown-property */}
<div css={lineStyle(responsive, theme.breakpoints.up('md'))}></div>
{/* eslint-disable-next-line react/no-unknown-property */}
<div css={textStyle(responsive, theme.breakpoints.up('md'))}>{text}</div>
</div>
);
};
export default Separator;

73
packages/webapp/src/components/common/separator/style.ts Normal file
View File

@ -0,0 +1,73 @@
import { css, SerializedStyles } from '@emotion/react';
export const containerStyle = (
responsive: boolean,
maxWidth: number,
breakPointDownMd: string,
): SerializedStyles => {
return css([
{
position: 'relative',
width: '100%',
height: '90%',
top: '5%',
display: 'inline-block',
},
responsive && {
[breakPointDownMd]: {
paddingTop: '25px',
paddingBottom: '25px',
},
},
!responsive && {
paddingTop: '25px',
paddingBottom: '25px',
},
maxWidth && {
maxWidth: maxWidth,
},
]);
};
export const lineStyle = (responsive: boolean, breakPointUpMd: string): SerializedStyles => {
return css([
{
backgroundColor: '#dce2e6',
position: 'absolute',
left: '50%',
height: '1px',
width: '100%',
transform: 'translateX(-50%)',
},
responsive && {
[breakPointUpMd]: {
height: '100%',
width: '1px',
transform: 'translateX(0%) translateY(0%)',
},
},
]);
};
export const textStyle = (responsive: boolean, breakPointUpMd: string): SerializedStyles => {
return css([
{
backgroundColor: '#DCE2E6',
padding: '5px 10px',
minWidth: '36px',
borderRadius: '18px',
fontSize: '18px',
color: 'white',
textAlign: 'center',
display: 'inline-block',
position: 'absolute',
transform: 'translateX(-50%) translateY(-50%)',
left: '50%',
},
responsive && {
[breakPointUpMd]: {
top: '15%',
},
},
]);
};

35
packages/webapp/src/components/forgot-password-page/index.tsx
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import Client, { ErrorInfo } from '../../classes/client';
import Client, { ErrorInfo, ForgotPasswordResult } from '../../classes/client';
import Header from '../layout/header';
import Footer from '../layout/footer';
@ -12,22 +12,28 @@ import Input from '../form/input';
import GlobalError from '../form/global-error';
import SubmitButton from '../form/submit-button';
import ReactGA from 'react-ga4';
import { Link as RouterLink } from 'react-router-dom';
import Typography from '@mui/material/Typography';
import { getCsrfToken, getCsrfTokenParameter } from '../../utils';
import { useNavigate } from 'react-router-dom';
import { Button } from '@mui/material';
const ForgotPassword = () => {
const [email, setEmail] = useState<string>('');
const [error, setError] = useState<ErrorInfo>();
const [showOauthMessage, setShowOauthMessage] = useState<boolean>(false);
const navigate = useNavigate();
const intl = useIntl();
const service: Client = useSelector(activeInstance);
const mutation = useMutation<void, ErrorInfo, string>(
const mutation = useMutation<ForgotPasswordResult, ErrorInfo, string>(
(email: string) => service.resetPassword(email),
{
onSuccess: () => navigate('/c/forgot-password-success'),
onSuccess: (result) => {
if (result.action === 'EMAIL_SENT') navigate('/c/forgot-password-success');
if (result.action === 'OAUTH2_USER') setShowOauthMessage(true);
},
onError: (error) => {
setError(error);
},
@ -39,6 +45,29 @@ const ForgotPassword = () => {
mutation.mutate(email);
};
if (showOauthMessage) {
return (
<FormContainer>
<Typography>
<FormattedMessage
id="forgot.oauth.message"
defaultMessage="You dont need password, please login using Google."
/>
</Typography>
<Button
color="primary"
size="medium"
variant="contained"
component={RouterLink}
to="/c/login"
disableElevation={true}
>
<FormattedMessage id="forgot.oauth.back" defaultMessage="Back to login" />
</Button>
</FormContainer>
);
}
return (
<FormContainer>
<Typography variant="h4" component="h1">

2
packages/webapp/src/components/form/submit-button/index.tsx
View File

@ -24,7 +24,7 @@ const SubmitButton = (props: SubmitButton): React.ReactElement => {
disableElevation={true}
disabled={disabled}
style={{
width: '350px',
width: '300px',
height: '53px',
padding: '0px 20px',
margin: '7px 0px',

1
packages/webapp/src/components/layout/footer/styled.ts
View File

@ -8,6 +8,7 @@ export const StyledFooter = styled.footer`
background-color: #f9a826;
display: grid;
grid-template-columns: 200px 1fr 1fr 1fr 3fr;
overflow: hidden;
& a {
font-size: 14px;

24
packages/webapp/src/components/login-page/index.tsx
View File

@ -12,6 +12,9 @@ import FormControl from '@mui/material/FormControl';
import Link from '@mui/material/Link';
import ReactGA from 'react-ga4';
import { getCsrfToken, getCsrfTokenParameter } from '../../utils';
import Separator from '../common/separator';
import GoogleButton from '../common/google-button';
import AppConfig from '../../classes/app-config';
const LoginError = () => {
// @Todo: This must be reviewed to be based on navigation state.
@ -32,7 +35,7 @@ const LoginError = () => {
default:
msg = intl.formatMessage({
id: 'login.error',
defaultMessage: 'The email address or password you entered is not valid.',
defaultMessage: 'The email address or password you entered is not valid.',
});
}
}
@ -54,7 +57,7 @@ const LoginPage = (): React.ReactElement => {
<div>
<Header type="only-signup" />
<FormContainer maxWidth="xs">
<FormContainer>
<Typography variant="h4" component="h1">
<FormattedMessage id="login.title" defaultMessage="Welcome" />
</Typography>
@ -102,10 +105,25 @@ const LoginPage = (): React.ReactElement => {
/>
</form>
</FormControl>
<Link component={RouterLink} to="/c/forgot-password">
<FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" />
</Link>
<Separator
responsive={false}
text={intl.formatMessage({
id: 'login.division',
defaultMessage: 'or',
})}
/>
<GoogleButton
text={intl.formatMessage({
id: 'login.google.button',
defaultMessage: 'Sign in with Google',
})}
onClick={() => {
window.location.href = AppConfig.getGoogleOauth2Url();
}}
/>
</FormContainer>
<Footer />

22
packages/webapp/src/components/maps-page/account-menu/index.tsx
View File

@ -71,16 +71,18 @@ const AccountMenu = (): React.ReactElement => {
<FormattedMessage id="menu.account" defaultMessage="Account" />
</MenuItem>
<MenuItem
onClick={() => {
handleClose(), setAction('change-password');
}}
>
<ListItemIcon>
<LockOpenOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="menu.change-password" defaultMessage="Change password" />
</MenuItem>
{account?.authenticationType !== 'GOOGLE_OAUTH2' && (
<MenuItem
onClick={() => {
handleClose(), setAction('change-password');
}}
>
<ListItemIcon>
<LockOpenOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="menu.change-password" defaultMessage="Change password" />
</MenuItem>
)}
<MenuItem onClick={handleClose}>
<form action="/c/logout" method="POST" id="logoutFrom"></form>

159
packages/webapp/src/components/registration-callback/index.tsx Normal file
View File

@ -0,0 +1,159 @@
import React, { useEffect, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import FormContainer from '../layout/form-container';
import Header from '../layout/header';
import Footer from '../layout/footer';
import { Link as RouterLink } from 'react-router-dom';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import ReactGA from 'react-ga4';
import Client, { Oauth2CallbackResult } from '../../classes/client';
import { useSelector } from 'react-redux';
import { activeInstance } from '../../redux/clientSlice';
import { useNavigate } from 'react-router-dom';
import { CircularProgress } from '@mui/material';
import GlobalError from '../form/global-error';
import { buttonsStyle } from './style';
const RegistrationCallbackPage = (): React.ReactElement => {
const intl = useIntl();
const client: Client = useSelector(activeInstance);
const [showError, setShowError] = useState(false);
const [callbackResult, setCallbackResult] = useState<Oauth2CallbackResult>(undefined);
const navigate = useNavigate();
useEffect(() => {
document.title = intl.formatMessage({
id: 'registation.success-title',
defaultMessage: 'Registation Success | WiseMapping',
});
ReactGA.send({
hitType: 'pageview',
page: window.location.pathname,
title: 'Registration:Success',
});
});
useEffect(() => {
const googleOauthCode = new URLSearchParams(window.location.search).get('code');
client
.processGoogleCallback(googleOauthCode)
.then((result) => {
if (result.googleSync) {
// if service reports that user already has sync accounts, go to maps page
navigate('/c/maps');
}
setCallbackResult(result);
})
.catch((error) => {
console.log('ERROR', error);
setShowError(true);
window.newrelic?.noticeError(error);
});
}, []);
const confirmAccountSynching = () => {
client
.confirmAccountSync(callbackResult.email, callbackResult.syncCode)
.then(() => {
navigate('/c/maps');
})
.catch((error) => {
console.log('ERROR', error);
window.newrelic?.noticeError(error);
});
};
// if service reports that user doesnt sync accounts yet, we need to show the options
const needConfirmLinking = !showError && callbackResult?.email && !callbackResult?.googleSync;
return (
<div>
<Header type="none" />
<FormContainer>
<Typography variant="h4" component="h1">
{needConfirmLinking ? (
<FormattedMessage id="registration.callback.confirm.title" defaultMessage="Confirm" />
) : (
<FormattedMessage
id="registration.callback.waiting.title"
defaultMessage="Finishing..."
/>
)}
</Typography>
<Typography paragraph>
{needConfirmLinking ? (
<FormattedMessage
id="registration.callback.confirm.description"
defaultMessage="An account with the same email was previously registered. Do you want to link your google account to that WiseMapping account?"
/>
) : (
<FormattedMessage
id="registration.callback.waiting.description"
defaultMessage="Please wait while we validate your identity"
/>
)}
</Typography>
{showError && (
<>
<GlobalError
error={{
msg: intl.formatMessage({
id: 'registation.callback.error.message',
defaultMessage:
'An error occurred validating your identity with Google, you can try again from the login page',
}),
}}
/>
<Button
color="primary"
size="medium"
variant="contained"
component={RouterLink}
to="/c/login"
disableElevation={true}
css={buttonsStyle}
>
<FormattedMessage id="registration.callback.back" defaultMessage="Back to login" />
</Button>
</>
)}
{!needConfirmLinking && !showError && <CircularProgress />}
{needConfirmLinking && (
<>
<Button
color="secondary"
size="medium"
variant="contained"
component={RouterLink}
to="/c/login"
disableElevation={true}
css={buttonsStyle}
>
<FormattedMessage id="registration.callback.back" defaultMessage="Back to login" />
</Button>
<Button
onClick={() => {
confirmAccountSynching();
}}
color="primary"
size="medium"
variant="contained"
disableElevation={true}
css={buttonsStyle}
>
<FormattedMessage id="registration.callback.sync" defaultMessage="Sync account" />
</Button>
</>
)}
</FormContainer>
<Footer />
</div>
);
};
export default RegistrationCallbackPage;

6
packages/webapp/src/components/registration-callback/style.ts Normal file
View File

@ -0,0 +1,6 @@
import { css } from '@emotion/react';
export const buttonsStyle = css({
marginLeft: '10px',
marginRight: '10px',
});

212
packages/webapp/src/components/registration-page/index.tsx
View File

@ -3,7 +3,6 @@ import { FormattedMessage, useIntl } from 'react-intl';
import ReCAPTCHA from 'react-google-recaptcha';
import { useNavigate } from 'react-router-dom';
import Client, { ErrorInfo } from '../../classes/client';
import FormContainer from '../layout/form-container';
import Header from '../layout/header';
import Footer from '../layout/footer';
@ -18,6 +17,11 @@ import Typography from '@mui/material/Typography';
import FormControl from '@mui/material/FormControl';
import AppConfig from '../../classes/app-config';
import ReactGA from 'react-ga4';
import Separator from '../common/separator';
import GoogleButton from '../common/google-button';
import { Grid, Link } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import { recaptchaContainerStyle } from './style';
export type Model = {
email: string;
@ -28,6 +32,7 @@ export type Model = {
};
const defaultModel: Model = { email: '', lastname: '', firstname: '', password: '', recaptcha: '' };
const RegistrationForm = () => {
const [model, setModel] = useState<Model>(defaultModel);
const [error, setError] = useState<ErrorInfo>();
@ -61,99 +66,130 @@ const RegistrationForm = () => {
setModel({ ...model, [name as keyof Model]: value });
};
const maxFormWidth = 350;
const handleRegisterWithGoogleClick = () => {
window.location.href = AppConfig.getGoogleOauth2Url();
};
return (
<FormContainer>
<Typography variant="h4" component="h1">
<FormattedMessage id="registration.title" defaultMessage="Become a member" />
</Typography>
<Grid container justifyContent="center">
<Grid container spacing={0} justifyContent="center" alignItems="scretch" textAlign="center">
<Grid item md={5} xs={12} justifyContent="center">
<Typography variant="h4" component="h1">
<FormattedMessage id="registration.title" defaultMessage="Become a member" />
</Typography>
<Typography paragraph>
<FormattedMessage
id="registration.desc"
defaultMessage="Signing up is free and just take a moment "
/>
</Typography>
<FormControl>
<form onSubmit={handleOnSubmit}>
<GlobalError error={error} />
<Input
name="email"
type="email"
onChange={handleOnChange}
label={intl.formatMessage({
id: 'registration.email',
defaultMessage: 'Email',
})}
autoComplete="email"
error={error}
/>
<Input
name="firstname"
type="text"
onChange={handleOnChange}
label={intl.formatMessage({
id: 'registration.firstname',
defaultMessage: 'First Name',
})}
autoComplete="given-name"
error={error}
/>
<Input
name="lastname"
type="text"
onChange={handleOnChange}
label={intl.formatMessage({
id: 'registration.lastname',
defaultMessage: 'Last Name',
})}
autoComplete="family-name"
error={error}
/>
<Input
name="password"
type="password"
onChange={handleOnChange}
label={intl.formatMessage({
id: 'registration.password',
defaultMessage: 'Password',
})}
autoComplete="new-password"
error={error}
/>
{AppConfig.isRecaptcha2Enabled() && (
<div style={{ width: '330px', padding: '5px 0px 5px 20px' }}>
<ReCAPTCHA
ref={(el) => setCaptcha(el)}
sitekey={AppConfig.getRecaptcha2SiteKey()}
onChange={(value: string) => {
model.recaptcha = value;
setModel(model);
}}
/>
</div>
)}
<div style={{ fontSize: '12px', padding: '10px 0px' }}>
<Typography paragraph>
<FormattedMessage
id="registration.termandconditions"
defaultMessage="Terms of Client: Please check the WiseMapping Account information you've entered above, and review the Terms of Client here. By clicking on 'Register' below you are agreeing to the Terms of Client above and the Privacy Policy"
id="registration.desc"
defaultMessage="Signing up is free and just take a moment "
/>
</div>
<SubmitButton
value={intl.formatMessage({
id: 'registration.register',
defaultMessage: 'Register',
</Typography>
<GoogleButton
text={intl.formatMessage({
id: 'registration.google.button',
defaultMessage: 'Sign up with Google',
})}
onClick={handleRegisterWithGoogleClick}
/>
</Grid>
<Grid item md={2} xs={12}>
<Separator
responsive={true}
maxWidth={maxFormWidth}
text={intl.formatMessage({
id: 'registration.division',
defaultMessage: 'or',
})}
/>
</form>
</FormControl>
</FormContainer>
</Grid>
<Grid item md={5} xs={12}>
<FormControl css={{ maxWidth: maxFormWidth }}>
<form onSubmit={handleOnSubmit}>
<GlobalError error={error} />
<Input
name="email"
type="email"
onChange={handleOnChange}
label={intl.formatMessage({
id: 'registration.email',
defaultMessage: 'Email',
})}
autoComplete="email"
error={error}
/>
<Input
name="firstname"
type="text"
onChange={handleOnChange}
label={intl.formatMessage({
id: 'registration.firstname',
defaultMessage: 'First Name',
})}
autoComplete="given-name"
error={error}
/>
<Input
name="lastname"
type="text"
onChange={handleOnChange}
label={intl.formatMessage({
id: 'registration.lastname',
defaultMessage: 'Last Name',
})}
autoComplete="family-name"
error={error}
/>
<Input
name="password"
type="password"
onChange={handleOnChange}
label={intl.formatMessage({
id: 'registration.password',
defaultMessage: 'Password',
})}
autoComplete="new-password"
error={error}
/>
{AppConfig.isRecaptcha2Enabled() && (
<>
{/* eslint-disable-next-line react/no-unknown-property */}
<div css={recaptchaContainerStyle}>
<ReCAPTCHA
ref={(el) => setCaptcha(el)}
sitekey={AppConfig.getRecaptcha2SiteKey()}
onChange={(value: string) => {
model.recaptcha = value;
setModel(model);
}}
/>
</div>
</>
)}
<div style={{ fontSize: '12px', padding: '10px 0px' }}>
<FormattedMessage
id="registration.termandconditions"
defaultMessage="Terms of Client: Please check the WiseMapping Account information you've entered above, and review the Terms of Client here. By clicking on 'Register' below you are agreeing to the Terms of Client above and the Privacy Policy"
/>
</div>
<SubmitButton
value={intl.formatMessage({
id: 'registration.register',
defaultMessage: 'Register',
})}
/>
</form>
</FormControl>
</Grid>
</Grid>
<Grid item>
<Link component={RouterLink} to="/c/login">
<FormattedMessage id="header.haveaccount" defaultMessage="Already have an account?" />
</Link>
</Grid>
</Grid>
);
};

10
packages/webapp/src/components/registration-page/style.ts Normal file
View File

@ -0,0 +1,10 @@
import { css } from '@emotion/react';
export const recaptchaContainerStyle = css({
paddingTop: '10px',
// override captcha size, without this the component is not shown horizontally centered
'& div div div': {
width: '100% !important',
height: '100% !important',
},
});

6
packages/webapp/src/index.tsx
View File

@ -4,6 +4,12 @@ import React from 'react';
import App from './app';
import { createRoot } from 'react-dom/client';
declare global {
interface Window {
newrelic: { noticeError: (Error) => void };
}
}
const container = document.getElementById('root') as HTMLElement;
const root = createRoot(container!);
root.render(<App />);

1
packages/webapp/src/theme/index.ts
View File

@ -51,6 +51,7 @@ const theme = createTheme({
h4: {
color: '#ffa800',
fontWeight: 600,
marginBottom: '10px',
},
h6: {
fontSize: '25px',

6
packages/webapp/src/tsconfig.json
View File

@ -1,6 +1,5 @@
{
"compilerOptions": {
"jsx": "react",
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": false,
@ -10,7 +9,10 @@
"target": "es6",
"allowJs": true,
"esModuleInterop": true,
"declaration": true
"declaration": true,
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"
}
}

6
packages/webapp/tsconfig.json
View File

@ -5,9 +5,11 @@
"noImplicitAny": false,
"module": "es6",
"target": "es6",
"jsx": "react",
"allowJs": true,
"esModuleInterop": true
"esModuleInterop": true,
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"
},
"exclude": ["node_modules"]
}