Merge pull request #4295 from serlo/staging

Deployment

apps/web/package.json

@@ -47,6 +47,7 @@
     "@serlo/editor": "workspace:*",
     "@serlo/katex-styles": "1.0.1",
     "@tippyjs/react": "^4.2.6",
+    "@vidstack/react": "next",
     "array-move": "^4.0.0",
     "autoprefixer": "^10.4.20",
     "canvas-confetti": "^1.9.3",
@@ -131,7 +132,7 @@
     "prettier-plugin-packagejson": "^2.5.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "prop-types": "^15.8.1",
-    "slate": "^0.103.0",
+    "slate": "0.110.2",
     "tailwindcss": "^3.4.15",
     "tailwindcss-animate": "^1.0.7",
     "ts-unused-exports": "^10.1.0",

apps/web/src/assets-webkit/styles/serlo-tailwind.css

@@ -3,6 +3,7 @@
 @import 'tailwindcss/components';
 
 @import '../../../../../packages/editor/src/tailwind/components.css';
+@import '../../../../../packages/editor/src/tailwind/utilities.css';
 @import './components.css';
 
 @import 'tailwindcss/utilities';

apps/web/src/components/auth/message.tsx

@@ -57,8 +57,7 @@ export function Message({
         ? (typedContext.reason as string)
         : ''
     const searchString = reason + text
-    if (searchString.includes('password length'))
-      return strings.auth.passwordTooShort
+
     if (searchString.includes('passwords are limited to a maximum length'))
       return strings.auth.passwordTooLong
     if (searchString.includes('does not match pattern'))

apps/web/src/components/modal-with-close-button.tsx

@@ -17,7 +17,7 @@ export interface ModalWithCloseButtonProps {
   extraCloseButtonClassName?: string
   extraOverlayClassName?: string
   onEscapeKeyDown?: (event: KeyboardEvent) => void
-  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void
+  onKeyDown?: (event: React.KeyboardEvent) => void
 }
 
 export function ModalWithCloseButton({

apps/web/src/components/pages/editor/education-plugins.tsx

@@ -210,10 +210,9 @@ const pluginData = [
     title: 'Video',
     titleDe: 'Video',
     icon: faFilm,
-    description:
-      'Embed videos directly from YouTube, Vimeo or Wikimedia Commons in your content.',
+    description: 'Embed videos directly from YouTube or Vimeo in your content.',
     descriptionDe:
-      'Du kannst Videos direkt von YouTube, Vimeo oder Wikimedia Commons in deinen Inhalt einbetten.',
+      'Du kannst Videos direkt von YouTube oder Vimeo in deinen Inhalt einbetten.',
     example: null,
     image: 'video.png',
     category: 'basic',

apps/web/src/components/user/profile-settings.tsx

@@ -77,25 +77,22 @@ export function ProfileSettings({ rawDescription }: ProfileSettingsProps) {
     )
 
     return (
-      <SpoilerRenderer
-        title={<>{buttonText}</>}
-        content={
-          <>
-            <p className="serlo-p mt-5">
-              {replacePlaceholders(description, { chatLink })}
-            </p>
-            <ol className="serlo-ol">
-              <li>{replacePlaceholders(steps.goToChat, { chatLink })}</li>
-              <li>{steps.signIn}</li>
-              <li>
-                {replacePlaceholders(steps.goToMyAccount, { myAccountLink })}
-              </li>
-              <li>{steps.uploadPicture}</li>
-              <li>{replacePlaceholders(steps.refreshPage, { refreshLink })}</li>
-            </ol>
-          </>
-        }
-      />
+      <SpoilerRenderer title={<>{buttonText}</>}>
+        <>
+          <p className="serlo-p mt-5">
+            {replacePlaceholders(description, { chatLink })}
+          </p>
+          <ol className="serlo-ol">
+            <li>{replacePlaceholders(steps.goToChat, { chatLink })}</li>
+            <li>{steps.signIn}</li>
+            <li>
+              {replacePlaceholders(steps.goToMyAccount, { myAccountLink })}
+            </li>
+            <li>{steps.uploadPicture}</li>
+            <li>{replacePlaceholders(steps.refreshPage, { refreshLink })}</li>
+          </ol>
+        </>
+      </SpoilerRenderer>
     )
   }
 
@@ -105,20 +102,17 @@ export function ProfileSettings({ rawDescription }: ProfileSettingsProps) {
     const editUrl = `https://docs.google.com/forms/d/e/1FAIpQLSdb_My7YAVNA7ha9XnBcYCZDk36cOqgcWkBqowatbefX0IzEg/viewform?usp=pp_url&entry.14483495=${username}`
 
     return (
-      <SpoilerRenderer
-        title={<>{buttonText}</>}
-        content={
-          <>
-            <p className="serlo-p mt-5">{intro}</p>
-            <p className="serlo-p">{privacy}</p>
-            <p className="serlo-p">
-              <a href={editUrl} className="serlo-button-learner-primary">
-                {toForm}
-              </a>
-            </p>
-          </>
-        }
-      />
+      <SpoilerRenderer title={<>{buttonText}</>}>
+        <>
+          <p className="serlo-p mt-5">{intro}</p>
+          <p className="serlo-p">{privacy}</p>
+          <p className="serlo-p">
+            <a href={editUrl} className="serlo-button-learner-primary">
+              {toForm}
+            </a>
+          </p>
+        </>
+      </SpoilerRenderer>
     )
   }
 

apps/web/src/data/de/index.ts

@@ -354,6 +354,7 @@ export const instanceData = {
         code1060002: "Wir haben dir eine E-Mail mit einem Link zum Wiederherstellen an die angegebene Adresse geschickt. %break% Schau in deine Mailbox und benutze den Link.",
         code1070003: "Speichern",
         code1070005: "Absenden",
+        code1070009: "Weiter",
         code1080001: "Eine E-Mail mit einem Bestätigungslink wurde an die angegebene E-Mail-Adresse gesendet.",
         code1080002: "Du hast deine E-Mail-Adresse erfolgreich bestätigt.",
         code4000001: '%reason%',
@@ -365,6 +366,7 @@ export const instanceData = {
         code4000007: "Ein Account mit der selben E-Mailadresse oder dem selben Benutzernamen existiert schon.",
         code4000008: "Der Bestätigungscode ist ungültig. Bitte versuche es nochmal.",
         code4000010: "Hast du deine E-Mailadresse schon bestätigt?.%break% %verificationLinkText%",
+        code4000032: "Dein Passwort hat weniger als 8 Zeichen.",
         code4060004: "Der Link zum Wiederherstellen ist nicht gültig oder wurde schon benutzt. Bitte versuche dir noch mal einen Link zuschicken zu lassen.",
         code4070001: "Der Bestätigungslink ist nicht gültig oder wurde schon benutzt. Bitte versuche dir noch mal einen Link zuschicken zu lassen.",
         code4070005: "Dieser Bestätigungslink ist leider nicht mehr gültig. Bitte versuche eine neue E-Mail anzufordern."

apps/web/src/data/en/index.ts

@@ -384,6 +384,7 @@ export const instanceData = {
           'An email containing a recovery link has been sent to the email address you provided. %break% Check your mailbox and click on the provided link it contains.',
         code1070003: 'Save',
         code1070005: 'Submit',
+        code1070009: 'Continue',
         code1080001:
           'An email containing a verification link has been sent to the email address you provided.',
         code1080002: 'You have successfully verified your email address.',
@@ -400,6 +401,7 @@ export const instanceData = {
           'The provided authentication code is invalid, please try again.',
         code4000010:
           'Have you already verified your email address?.%break% %verificationLinkText%',
+        code4000032: "You inserted less than 8 characters.",
         code4060004:
           'The recovery link is not valid or has already been used. Please try requesting an email again',
         code4070001:

apps/web/src/data/es/index.ts

@@ -354,6 +354,7 @@ export const instanceData = {
         code1060002: "Se ha enviado un correo con un enlace de recuperación a la dirección de correo electrónico que proporcionaste. %break% Comprueba tu buzón y haz clic en el enlace que contiene.",
         code1070003: "Guardar",
         code1070005: "Enviar",
+        code1070009: "Continuar",
         code1080001: "Se ha enviado un correo electrónico con un enlace de verificación a la dirección de correo electrónico que proporcionaste.",
         code1080002: "Has verificado correctamente tu dirección de correo electrónico.",
         code4000001: '%reason%',
@@ -365,6 +366,7 @@ export const instanceData = {
         code4000007: "Ya existe una cuenta con el mismo correo electrónico o nombre de usuario.",
         code4000008: "El código de autentificación proporcionado no es válido, por favor, inténtalo de nuevo.",
         code4000010: "¿Has verificado ya tu dirección de correo electrónico?%break%%verificationLinkText%",
+        code4000032: "You inserted less than 8 characters.",
         code4060004: "El enlace de recuperación no es válido o ya ha sido utilizado. Por favor, intenta solicitar un correo electrónico de nuevo",
         code4070001: "El enlace de verificación no es válido o ya ha sido utilizado. Por favor, intenta solicitar un correo electrónico de nuevo.",
         code4070005: "Lo sentimos, este enlace de verificación ya no es válido. Por favor, intenta solicitar un correo electrónico de nuevo."

apps/web/src/data/fr/index.ts

@@ -354,6 +354,7 @@ export const instanceData = {
         code1060002: 'An email containing a recovery link has been sent to the email address you provided. %break% Check your mailbox and click on the provided link it contains.',
         code1070003: "Sauvegarder",
         code1070005: "Soumettre",
+        code1070009: 'Continue',
         code1080001: 'An email containing a verification link has been sent to the email address you provided.',
         code1080002: 'You have successfully verified your email address.',
         code4000001: '%reason%',
@@ -365,6 +366,7 @@ export const instanceData = {
         code4000007: 'An account with the same email or username exists already.',
         code4000008: 'The provided authentication code is invalid, please try again.',
         code4000010: 'Have you already verified your email address?.%break% %verificationLinkText%',
+        code4000032: "You inserted less than 8 characters.",
         code4060004: 'The recovery link is not valid or has already been used. Please try requesting an email again',
         code4070001: 'The verification link is not valid or has already been used. Please try requesting an email again.',
         code4070005: 'Sorry, this verification link is not valid any more. Please try requesting an email again.'

apps/web/src/data/hi/index.ts

@@ -354,6 +354,7 @@ export const instanceData = {
         code1060002: 'An email containing a recovery link has been sent to the email address you provided. %break% Check your mailbox and click on the provided link it contains.',
         code1070003: "सहेजें",
         code1070005: "जमा करें",
+        code1070009: 'Continue',
         code1080001: 'An email containing a verification link has been sent to the email address you provided.',
         code1080002: 'You have successfully verified your email address.',
         code4000001: '%reason%',
@@ -365,6 +366,7 @@ export const instanceData = {
         code4000007: 'An account with the same email or username exists already.',
         code4000008: 'The provided authentication code is invalid, please try again.',
         code4000010: 'Have you already verified your email address?.%break% %verificationLinkText%',
+        code4000032: "You inserted less than 8 characters.",
         code4060004: 'The recovery link is not valid or has already been used. Please try requesting an email again',
         code4070001: 'The verification link is not valid or has already been used. Please try requesting an email again.',
         code4070005: 'Sorry, this verification link is not valid any more. Please try requesting an email again.'

apps/web/src/data/ta/index.ts

@@ -354,6 +354,7 @@ export const instanceData = {
         code1060002: 'An email containing a recovery link has been sent to the email address you provided. %break% Check your mailbox and click on the provided link it contains.',
         code1070003: "சேமி",
         code1070005: "இணைக்க",
+        code1070009: 'Continue',
         code1080001: 'An email containing a verification link has been sent to the email address you provided.',
         code1080002: 'You have successfully verified your email address.',
         code4000001: '%reason%',
@@ -365,6 +366,7 @@ export const instanceData = {
         code4000007: 'An account with the same email or username exists already.',
         code4000008: 'The provided authentication code is invalid, please try again.',
         code4000010: 'Have you already verified your email address?.%break% %verificationLinkText%',
+        code4000032: "You inserted less than 8 characters.",
         code4060004: 'The recovery link is not valid or has already been used. Please try requesting an email again',
         code4070001: 'The verification link is not valid or has already been used. Please try requesting an email again.',
         code4070005: 'Sorry, this verification link is not valid any more. Please try requesting an email again.'

apps/web/src/helper/use-consent.ts

@@ -1,6 +1,5 @@
 export enum ExternalProvider {
   YouTube = 'YouTube',
-  WikimediaCommons = 'WikimediaCommons',
   Vimeo = 'Vimeo',
   GeoGebra = 'GeoGebra',
   Twingle = 'Twingle',

apps/web/src/pages/___editor_preview.tsx

@@ -105,7 +105,7 @@ function Content() {
         value={{ editorVariant: 'serlo-org', userId: 'serlo-preview-user' }}
       >
         <main id="content" className="flex">
-          <section className="min-h-screen w-[50vw] border-4 border-r-0 border-editor-primary">
+          <section className="min-h-screen w-1/2 border-4 border-r-0 border-editor-primary">
             <header className="mx-side flex justify-between align-middle font-bold">
               <h2 className="mb-12 text-editor-primary">Edit</h2>
               <div>
@@ -153,7 +153,7 @@ function Content() {
             </header>
             <div className="px-2">{editor}</div>
           </section>
-          <section className="min-h-screen w-[50vw] border-4 border-editor-primary">
+          <section className="min-h-screen w-1/2 border-4 border-editor-primary">
             <h2 className="mx-side mb-12 font-bold text-editor-primary">
               Preview
             </h2>

apps/web/src/pages/api/frontend/injection-content.ts

@@ -6,6 +6,7 @@ import type { NextApiRequest, NextApiResponse } from 'next'
 
 import { endpoint } from '@/api/endpoint'
 import { InjectionOnlyContentQuery } from '@/fetcher/graphql-types/operations'
+import { isProduction } from '@/helper/is-production'
 
 /**
  * Allows frontend (and later other) instances to get content of injected entity
@@ -134,6 +135,7 @@ export default async function handler(
   function respondWithContent(content: any) {
     const twoDaysInSeconds = 172800
     res.setHeader('Cache-Control', `maxage=${twoDaysInSeconds}`)
+    if (!isProduction) res.setHeader('Access-Control-Allow-Origin', '*')
     res.status(200).json(content)
   }
 }

apps/web/src/pages/content-only/[...slug].tsx

@@ -1,6 +1,6 @@
 import { GetStaticPaths, GetStaticProps } from 'next'
+import Script from 'next/script'
 
-import { LazyIframeResizer } from '@/components/content/lazy-iframe-resizer'
 import { Entity } from '@/components/entity/entity'
 import { FrontendClientBase } from '@/components/frontend-client-base/frontend-client-base'
 import { HeadTags } from '@/components/head-tags'
@@ -52,7 +52,10 @@ export default renderedPageNoHooks<SlugProps>(({ pageData }) => {
       serloEntityData={{ entityId }}
       authorization={pageData.authorization}
     >
-      <LazyIframeResizer />
+      <Script
+        src="https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@1.2.1/dist/index.min.js"
+        strategy="lazyOnload"
+      />
       {pageData.metaData ? (
         <HeadTags
           data={pageData.metaData}