diff --git a/cypress/e2e/SignUp.cy.ts b/cypress/e2e/SignUp.cy.ts
index 7fe2d433..df74f22f 100644
--- a/cypress/e2e/SignUp.cy.ts
+++ b/cypress/e2e/SignUp.cy.ts
@@ -9,7 +9,7 @@ import {
SUCCESS_CONTENT_ID,
} from '../../src/config/selectors';
import { MEMBERS } from '../fixtures/members';
-import { checkInvitationFields } from './util';
+import { checkInvitationFields, fillSignUpLayout } from './util';
describe('SignUp', () => {
describe('Must Accept All Terms To Sign Up', () => {
@@ -26,6 +26,9 @@ describe('SignUp', () => {
cy.get(`#${SIGN_UP_BUTTON_ID}`).should('be.disabled');
});
it('Sign Up Is Available When Accepting All Terms', () => {
+ fillSignUpLayout({ name: 'name', email: 'email' });
+ cy.get(`#${SIGN_UP_BUTTON_ID}`).should('be.disabled');
+
cy.agreeWithAllTerms();
cy.get(`#${SIGN_UP_BUTTON_ID}`).should('not.be.disabled');
});
diff --git a/src/components/BrandingLogo.tsx b/src/components/BrandingLogo.tsx
new file mode 100644
index 00000000..63ac585f
--- /dev/null
+++ b/src/components/BrandingLogo.tsx
@@ -0,0 +1,18 @@
+import { GraaspLogo } from '@graasp/ui';
+
+import { Stack, Typography, useTheme } from '@mui/material';
+
+export const BrandingLogo = () => {
+ const theme = useTheme();
+
+ return (
+
+
+
+
+ Graasp
+
+
+
+ );
+};
diff --git a/src/components/LeftContentContainer.tsx b/src/components/LeftContentContainer.tsx
index 21388a63..ae390d8c 100644
--- a/src/components/LeftContentContainer.tsx
+++ b/src/components/LeftContentContainer.tsx
@@ -1,67 +1,108 @@
-import { Stack } from '@mui/material';
+import {
+ AccentColors,
+ AnalyticsIcon,
+ BuildIcon,
+ LibraryIcon,
+ PlayIcon,
+} from '@graasp/ui';
+import { Box, Stack } from '@mui/material';
+
+import { BACKGROUND_PATTERN } from '../config/constants';
+import { useAuthTranslation } from '../config/i18n';
+import { AUTH } from '../langs/constants';
import APIChecker from './APIChecker';
+import { BrandingLogo } from './BrandingLogo';
import Footer from './Footer';
-import { AnalyticsContent } from './leftContent/AnalyticsContent';
-import { BuilderContent } from './leftContent/BuilderContent';
-import { LibraryContent } from './leftContent/LibraryContent';
-import { PlayerContent } from './leftContent/PlayerContent';
+import { PlatformContent } from './leftContent/PlatformContent';
type Props = {
children: JSX.Element | JSX.Element[];
};
-const PLATFORMS = [
- { content: },
- { content: },
- { content: },
- { content: },
-];
-
const LeftContentContainer = ({ children }: Props): JSX.Element => {
- const platform = PLATFORMS[Math.floor(Math.random() * PLATFORMS.length)];
+ const { t } = useAuthTranslation();
return (
-
-
+
-
- {platform.content}
-
+
+
+
+
+
+
+
+
+
+
+
- {children}
+
+ {children}
+
+
-
-
+ >
);
};
diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
index 56af8dc2..ce9d45ce 100644
--- a/src/components/SignIn.tsx
+++ b/src/components/SignIn.tsx
@@ -27,7 +27,12 @@ const SignIn = () => {
-
diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
index ea38e68c..4516a825 100644
--- a/src/components/SignUp.tsx
+++ b/src/components/SignUp.tsx
@@ -214,7 +214,7 @@ const SignUp = () => {
loading={isLoadingSignUp || isLoadingMobileSignUp}
onClick={handleRegister}
fullWidth
- disabled={!userHasAcceptedAllTerms}
+ disabled={!userHasAcceptedAllTerms || !email.length || !name.length}
>
{t(SIGN_UP_BUTTON)}
diff --git a/src/components/leftContent/AnalyticsContent.tsx b/src/components/leftContent/AnalyticsContent.tsx
deleted file mode 100644
index e1f8c009..00000000
--- a/src/components/leftContent/AnalyticsContent.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { AnalyticsIcon } from '@graasp/ui';
-
-import { Stack, Typography } from '@mui/material';
-
-import { useAuthTranslation } from '../../config/i18n';
-import { AUTH } from '../../langs/constants';
-
-export const AnalyticsContent = () => {
- const { t } = useAuthTranslation();
-
- return (
-
-
-
-
- {t(AUTH.ANALYTICS_BACKGROUND_TEXT)}
-
-
-
- {t(AUTH.ANALYTICS_BACKGROUND_TEXT_PLATFORM)}
-
-
-
- );
-};
diff --git a/src/components/leftContent/BuilderContent.tsx b/src/components/leftContent/BuilderContent.tsx
deleted file mode 100644
index 13a35cf6..00000000
--- a/src/components/leftContent/BuilderContent.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { BuildIcon } from '@graasp/ui';
-
-import { Stack, Typography } from '@mui/material';
-
-import { useAuthTranslation } from '../../config/i18n';
-import { AUTH } from '../../langs/constants';
-
-export const BuilderContent = () => {
- const { t } = useAuthTranslation();
-
- return (
-
-
-
-
- {t(AUTH.BUILDER_BACKGROUND_TEXT)}
-
-
- {t(AUTH.BUILDER_BACKGROUND_TEXT_PLATFORM)}
-
-
-
- );
-};
diff --git a/src/components/leftContent/LibraryContent.tsx b/src/components/leftContent/LibraryContent.tsx
deleted file mode 100644
index 42ac8161..00000000
--- a/src/components/leftContent/LibraryContent.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { LibraryIcon } from '@graasp/ui';
-
-import { Stack, Typography } from '@mui/material';
-
-import { useAuthTranslation } from '../../config/i18n';
-import { AUTH } from '../../langs/constants';
-
-export const LibraryContent = () => {
- const { t } = useAuthTranslation();
-
- return (
-
-
-
-
- {t(AUTH.LIBRARY_BACKGROUND_TEXT)}
-
-
- {t(AUTH.LIBRARY_BACKGROUND_TEXT_PLATFORM)}
-
-
-
- );
-};
diff --git a/src/components/leftContent/PlatformContent.tsx b/src/components/leftContent/PlatformContent.tsx
new file mode 100644
index 00000000..c3421a64
--- /dev/null
+++ b/src/components/leftContent/PlatformContent.tsx
@@ -0,0 +1,25 @@
+import { Stack, Typography } from '@mui/material';
+
+type Props = {
+ Icon: (args: { size: number; primaryColor: string }) => JSX.Element;
+ name: string;
+ text: string;
+ color: string;
+};
+
+export const PlatformContent = ({ Icon, name, text, color }: Props) => {
+ return (
+
+
+
+
+ {text}
+
+
+
+ {name}
+
+
+
+ );
+};
diff --git a/src/components/leftContent/PlayerContent.tsx b/src/components/leftContent/PlayerContent.tsx
deleted file mode 100644
index 841b0350..00000000
--- a/src/components/leftContent/PlayerContent.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { PlayIcon } from '@graasp/ui';
-
-import { Stack, Typography } from '@mui/material';
-
-import { useAuthTranslation } from '../../config/i18n';
-import { AUTH } from '../../langs/constants';
-
-export const PlayerContent = () => {
- const { t } = useAuthTranslation();
-
- return (
-
-
-
-
- {t(AUTH.PLAYER_BACKGROUND_TEXT)}
-
-
- {t(AUTH.PLAYER_BACKGROUND_TEXT_PLATFORM)}
-
-
-
- );
-};
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 6fd71057..37fc4638 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -1 +1,3 @@
export const MAX_CHECKBOX_LABEL_WITH_PX_SIGN_UP = 330;
+
+export const BACKGROUND_PATTERN = `url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23f2f2ff' fill-opacity='0.82' fill-rule='evenodd'/%3E%3C/svg%3E")`;
diff --git a/src/langs/ar.json b/src/langs/ar.json
index 333585f8..e596d35b 100644
--- a/src/langs/ar.json
+++ b/src/langs/ar.json
@@ -1,12 +1,10 @@
{
"BACK_BUTTON": "إلى الخلف",
- "EMAIL_FIELD_TEXT": "بريد إلكتروني",
"EMAIL_SIGN_IN_METHOD": "تسجيل الدخول عبر البريد الإلكتروني",
"MOBILE_APP_NOT_INSTALLED_MESSAGE": "يبدو أنك طلبت رابطًا للهاتف المحمول ولكن لم يتم تثبيت تطبيقنا على هذا الجهاز.",
"MOBILE_BACK_TO_LOGIN": "العودة لتسجيل الدخول",
"MOBILE_GET_APP_FROM_APPLE_STORE": "احصل عليه من متجر تطبيقات أبل",
"MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "احصل عليه من متجر Google Play",
- "NAME_FIELD_LABEL": "الأسم",
"NOT_SIGNED_IN_TOOLTIP": "أنت غير مسجل الدخول.",
"PASSWORD_FIELD_LABEL": "كلمة المرور",
"PASSWORD_SIGN_IN_METHOD": "تسجيل الدخول عبر كلمة المرور",
diff --git a/src/langs/de.json b/src/langs/de.json
index 21f52e90..b5ea5569 100644
--- a/src/langs/de.json
+++ b/src/langs/de.json
@@ -1,12 +1,11 @@
{
"BACK_BUTTON": "Zurück",
- "EMAIL_FIELD_TEXT": "Email",
"EMAIL_SIGN_IN_METHOD": "E-Mail Anmeldung",
"MOBILE_APP_NOT_INSTALLED_MESSAGE": "Sie haben einen mobilen Link angefordert, aber unsere App ist auf diesem Gerät nicht installiert.",
"MOBILE_BACK_TO_LOGIN": "Zurück zur Anmeldung",
"MOBILE_GET_APP_FROM_APPLE_STORE": "Im Apple App Store herunterladen",
"MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "Im Google Play Store herunterladen",
- "NAME_FIELD_LABEL": "Name",
+ "NAME_FIELD_LABEL": "Name*",
"NOT_SIGNED_IN_TOOLTIP": "Sie sind nicht eingeloggt.",
"PASSWORD_FIELD_LABEL": "Passwort",
"PASSWORD_SIGN_IN_METHOD": "Passwort Anmeldung",
diff --git a/src/langs/en.json b/src/langs/en.json
index c47b6f49..fa9fd220 100644
--- a/src/langs/en.json
+++ b/src/langs/en.json
@@ -1,6 +1,5 @@
{
"BACK_BUTTON": "Back",
- "EMAIL_FIELD_TEXT": "Email",
"EMAIL_SIGN_IN_METHOD": "Email Sign In",
"MOBILE_APP_NOT_INSTALLED_MESSAGE": "It looks like you requested a mobile link but you do not have our app installed on this device.",
"MOBILE_BACK_TO_LOGIN": "Back to login",
@@ -15,7 +14,7 @@
"RESEND_EMAIL_BUTTON": "Resend Email",
"SIGN_IN_BUTTON": "Receive a link to log in",
"SIGN_IN_PASSWORD_BUTTON": "Log in",
- "SIGN_IN_HEADER": "Log In to Graasp",
+ "SIGN_IN_HEADER": "Log In",
"SIGN_IN_LINK_TEXT": "Already have an account? Click here to log in",
"SIGN_IN_SUCCESS_EMAIL_PROBLEM": "If you did not receive any email, check your spam. If you used an institutional email (ie. school, company), it might have been blocked and will have to wait until the email is released by your spam system.",
"SIGN_IN_SUCCESS_TEXT": "Please check your inbox {{email}} to retrieve your personal login link to access Graasp. This can take several minutes.",
@@ -44,12 +43,12 @@
"PASSWORD_EMPTY_ERROR": "The password can not be empty",
"PASSWORD_SUCCESS_ALERT": "You successfully signed in. You will be redirected soon.",
"PASSWORD_INPUT_PLACEHOLDER": "Password",
- "BUILDER_BACKGROUND_TEXT": "Create your own learning activities with",
- "BUILDER_BACKGROUND_TEXT_PLATFORM": "Graasp Builder",
- "PLAYER_BACKGROUND_TEXT": "Learn with interactive content in",
- "PLAYER_BACKGROUND_TEXT_PLATFORM": "Graasp Player",
- "LIBRARY_BACKGROUND_TEXT": "Publish and Explore Open Educational Resources in",
- "LIBRARY_BACKGROUND_TEXT_PLATFORM": "Graasp Library",
- "ANALYTICS_BACKGROUND_TEXT": "Get insights of the activity in your resources in",
- "ANALYTICS_BACKGROUND_TEXT_PLATFORM": "Graasp Analytics"
+ "BUILDER_BACKGROUND_TEXT": "Create your own learning activities with the",
+ "BUILDER_BACKGROUND_TEXT_PLATFORM": "Builder",
+ "PLAYER_BACKGROUND_TEXT": "Engage your students in your activities with the",
+ "PLAYER_BACKGROUND_TEXT_PLATFORM": "Player",
+ "LIBRARY_BACKGROUND_TEXT": "Discover and share Open Educational Resources in our",
+ "LIBRARY_BACKGROUND_TEXT_PLATFORM": "Library",
+ "ANALYTICS_BACKGROUND_TEXT": "Gain valuable insights and explore dashboards with",
+ "ANALYTICS_BACKGROUND_TEXT_PLATFORM": "Analytics"
}
diff --git a/src/langs/es.json b/src/langs/es.json
index a0b53e26..970de063 100644
--- a/src/langs/es.json
+++ b/src/langs/es.json
@@ -1,12 +1,11 @@
{
"BACK_BUTTON": "Atrás",
- "EMAIL_FIELD_TEXT": "Correo electrónico",
"EMAIL_SIGN_IN_METHOD": "Iniciar sesión por correo electrónico",
"MOBILE_APP_NOT_INSTALLED_MESSAGE": "Parece que solicitaste un enlace móvil pero no tienes nuestra aplicación instalada en este dispositivo.",
"MOBILE_BACK_TO_LOGIN": "Atrás para iniciar sesión",
"MOBILE_GET_APP_FROM_APPLE_STORE": "Obtener de la tienda de aplicaciones de Apple",
"MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "Obtener de Google Play Store",
- "NAME_FIELD_LABEL": "Nombre",
+ "NAME_FIELD_LABEL": "Nombre*",
"NOT_SIGNED_IN_TOOLTIP": "No has iniciado sesión.",
"PASSWORD_FIELD_LABEL": "Contraseña",
"PASSWORD_SIGN_IN_METHOD": "Contraseña Iniciar sesión",
diff --git a/src/langs/fr.json b/src/langs/fr.json
index 71eba421..1c494232 100644
--- a/src/langs/fr.json
+++ b/src/langs/fr.json
@@ -1,12 +1,11 @@
{
"BACK_BUTTON": "Retour",
- "EMAIL_FIELD_TEXT": "Email",
"EMAIL_SIGN_IN_METHOD": "Connexion avec email",
"MOBILE_APP_NOT_INSTALLED_MESSAGE": "Vous avez requis un lien de connexion pour mobile mais il semble que l'application ne soit pas installée sur votre appareil.",
"MOBILE_BACK_TO_LOGIN": "Retour à l'écran de connexion",
"MOBILE_GET_APP_FROM_APPLE_STORE": "Téléchargez l'app sur l'Apple App Store",
"MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "Téléchargez l'app sur le Google Play Store",
- "NAME_FIELD_LABEL": "Nom",
+ "NAME_FIELD_LABEL": "Nom*",
"NOT_SIGNED_IN_TOOLTIP": "Vous n'êtes pas connecté.",
"PASSWORD_FIELD_LABEL": "Mot de passe",
"PASSWORD_SIGN_IN_METHOD": "Connexion avec mot de passe",
@@ -39,12 +38,12 @@
"INVALID_EMAIL_ERROR": "Cela ne ressemble pas à une adresse e-mail valide",
"EMPTY_EMAIL_ERROR": "Une adresse email est obligatoire, ce champ ne peut pas être vide",
"PASSWORD_EMPTY_ERROR": "Le mot de passe ne peut pas être vide",
- "BUILDER_BACKGROUND_TEXT": "Créez des activités éducatives avec",
- "BUILDER_BACKGROUND_TEXT_PLATFORM": "Graasp Builder",
- "PLAYER_BACKGROUND_TEXT": "Apprenez avec des contenus interactifs dans",
- "PLAYER_BACKGROUND_TEXT_PLATFORM": "Graasp Player",
- "LIBRARY_BACKGROUND_TEXT": "Publiez et Explorez des Ressources Educatives Libres dans",
- "LIBRARY_BACKGROUND_TEXT_PLATFORM": "Graasp Library",
- "ANALYTICS_BACKGROUND_TEXT": "Analysez l'activités de vos ressources dans",
- "ANALYTICS_BACKGROUND_TEXT_PLATFORM": "Graasp Analytics"
+ "BUILDER_BACKGROUND_TEXT": "Créer vos propres activités d'apprentissage dans le",
+ "BUILDER_BACKGROUND_TEXT_PLATFORM": "Builder",
+ "PLAYER_BACKGROUND_TEXT": "Impliquez vos étudiants dans des activités interactives avec le",
+ "PLAYER_BACKGROUND_TEXT_PLATFORM": "Player",
+ "LIBRARY_BACKGROUND_TEXT": "Découvrir et partager des Resources éducatives libres dans notre",
+ "LIBRARY_BACKGROUND_TEXT_PLATFORM": "Library",
+ "ANALYTICS_BACKGROUND_TEXT": "Obtenez des perspectives et explorez les tableaux de bord avec",
+ "ANALYTICS_BACKGROUND_TEXT_PLATFORM": "Analytics"
}
diff --git a/src/langs/it.json b/src/langs/it.json
index 16d17ef7..5fea5692 100644
--- a/src/langs/it.json
+++ b/src/langs/it.json
@@ -1,12 +1,11 @@
{
"BACK_BUTTON": "Indietro",
- "EMAIL_FIELD_TEXT": "E-mail",
"EMAIL_SIGN_IN_METHOD": "Accedi via e-mail",
"MOBILE_APP_NOT_INSTALLED_MESSAGE": "Sembra che tu abbia richiesto un collegamento mobile ma non hai la nostra app installata su questo dispositivo.",
"MOBILE_BACK_TO_LOGIN": "Torna al login",
"MOBILE_GET_APP_FROM_APPLE_STORE": "Ottieni dall'App Store di Apple",
"MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "Ottieni dal Google Play Store",
- "NAME_FIELD_LABEL": "Nome",
+ "NAME_FIELD_LABEL": "Nome*",
"NOT_SIGNED_IN_TOOLTIP": "Non sei registrato.",
"PASSWORD_FIELD_LABEL": "Parola d'ordine",
"PASSWORD_SIGN_IN_METHOD": "Accedi con password",