) => {
const { type, className, children, ...rest } = props;
return (
-
-
- {props.children}
-
+
+
+
+ {props.children}
+
+
{name}
{description && {description}
}
diff --git a/website/components/MailTemplate/index.tsx b/website/components/MailTemplate/index.tsx
new file mode 100644
index 00000000..8a9e0889
--- /dev/null
+++ b/website/components/MailTemplate/index.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import { useStore } from '@tdev-hooks/useStore';
+import Button from '@tdev-components/shared/Button';
+import Page from '@tdev-models/Page';
+import { mdiSend } from '@mdi/js';
+import Alert from '@tdev-components/shared/Alert';
+import SolutionStyles from '@tdev-components/documents/Solution/styles.module.scss';
+
+export interface ValidationResult {
+ valid: boolean;
+ message?: string;
+}
+interface Props {
+ to: string;
+ subject?: string | ((page: Page) => string);
+ text?: string;
+ icon?: string;
+ color?: string;
+ body: string | ((page: Page) => string);
+ validate?: (page: Page) => () => ValidationResult;
+}
+
+export const alignLeft = (text: string) =>
+ text
+ .split('\n')
+ .map((line) => line.trimStart())
+ .join('\n');
+
+const MailTemplate = observer((props: Props) => {
+ const pageStore = useStore('pageStore');
+ const { current } = pageStore;
+ if (!current) {
+ return null;
+ }
+ const validate = props.validate ? props.validate(current) : () => ({ valid: true });
+ const validation = validate() as { valid: boolean; message?: string };
+
+ return (
+
+
+
+
+
+ {
+ const name = page.dynamicValues.get('name');
+ const klasse = page.dynamicValues.get('klasse');
+ if (!name || !klasse) {
+ return () => ({
+ valid: false,
+ message: translate(
+ { id: 'validation.missing-field' },
+ { field: !name ? 'Name' : 'Klasse' }
+ )
+ });
+ }
+ return () => ({ valid: true });
+ }}
+ body={(page) => {
+ const name = page.dynamicValues.get('name') ?? '';
+ const klasse = page.dynamicValues.get('klasse') ?? '';
+ return alignLeft(`Guten Tag
+
+ Ich habe eine Frage zum Schülerausweis:
+
+
+ Freundlichen Grüsse
+
+ ${name}, ${klasse}`);
+ }}
+ />
+
+ );
+});
+
+export default FrageSchuelerausweis;
diff --git a/website/components/MailTemplate/templates/ResetOfficeAccount.tsx b/website/components/MailTemplate/templates/ResetOfficeAccount.tsx
new file mode 100644
index 00000000..5f1d2a8d
--- /dev/null
+++ b/website/components/MailTemplate/templates/ResetOfficeAccount.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import clsx from 'clsx';
+import { observer } from 'mobx-react-lite';
+import { DynamicInput } from '@tdev-components/DynamicValues';
+import MailTemplate, { alignLeft } from '..';
+import { translate } from '@docusaurus/Translate';
+import { validateEmail, validatePhoneNumber } from '../validations';
+import { capitalize } from 'es-toolkit/string';
+
+const anrede = translate({ id: 'support.edubern.anrede' });
+const name = translate({ id: 'support.edubern.name' });
+
+interface Props {}
+
+const ResetOfficeAccount = observer((props: Props) => {
+ return (
+
+
+
+
+ {
+ const email = page.dynamicValues.get('email');
+ const emailValidation = validateEmail(email);
+ if (!emailValidation.valid) {
+ return () => emailValidation;
+ }
+ const phone = page.dynamicValues.get('phone');
+ return () => validatePhoneNumber(phone);
+ }}
+ body={(page) => {
+ const email = page.dynamicValues.get('email') ?? '';
+ const student = email
+ .split('@')[0]
+ .split('.')
+ .map((p) => capitalize(p))
+ .join(' ');
+ const phone = page.dynamicValues.get('phone');
+ return alignLeft(`Guten Tag ${anrede} ${name}
+
+ Bitte setzen Sie meinen Account zurück:
+
+ Mail: ${email}
+ Telefon: ${phone}
+
+ Besten Dank und freundliche Grüsse
+
+ ${student}`);
+ }}
+ />
+
+ );
+});
+
+export default ResetOfficeAccount;
diff --git a/website/components/MailTemplate/validations.ts b/website/components/MailTemplate/validations.ts
new file mode 100644
index 00000000..c109f0d5
--- /dev/null
+++ b/website/components/MailTemplate/validations.ts
@@ -0,0 +1,32 @@
+import { translate } from '@docusaurus/Translate';
+
+const EMAIL_REGEX = new RegExp(
+ `.+\\..+@(edu\\.)?${translate({ id: 'validation.email.domain' }).replace('.', '\\.')}$`,
+ 'i'
+);
+
+export const validateEmail = (email?: string) => {
+ if (!email) {
+ return { valid: false, message: translate({ id: 'validation.missing-field' }, { field: 'E-Mail' }) };
+ }
+ const isValid = EMAIL_REGEX.test(email);
+ if (isValid) {
+ return { valid: true };
+ }
+ return { valid: false, message: translate({ id: 'validation.email.domain.error' }) };
+};
+
+export const validatePhoneNumber = (phoneNumber?: string) => {
+ if (!phoneNumber) {
+ return {
+ valid: false,
+ message: translate({ id: 'validation.missing-field' }, { field: 'Telefon' })
+ };
+ }
+ const cleaned = phoneNumber.replace(/\s+/g, '');
+ const isValid = /^07\d{8}$/.test(cleaned);
+ if (isValid) {
+ return { valid: true };
+ }
+ return { valid: false, message: translate({ id: 'validation.phone.error' }) };
+};
diff --git a/website/components/TLink/index.tsx b/website/components/TLink/index.tsx
new file mode 100644
index 00000000..005921e5
--- /dev/null
+++ b/website/components/TLink/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { translate } from '@docusaurus/Translate';
+
+interface Props {
+ /**
+ * id is the translation key for the href and the link text.
+ */
+ id: string;
+ children?: React.ReactNode;
+ protocol?: 'mailto' | 'tel';
+}
+
+const TLink = (props: Props) => {
+ const { id } = props;
+ const value = translate({ id: id });
+ if (!value) {
+ return props.children || id;
+ }
+ let protocol = props.protocol;
+ if (!protocol) {
+ if (value.includes('@')) {
+ protocol = 'mailto';
+ } else if (value.replace(/\s/g, '').match(/^\+?\d+$/)) {
+ protocol = 'tel';
+ }
+ }
+ let sanitized = value.trim();
+ if (protocol === 'tel') {
+ sanitized = sanitized.replace(/\s/g, '');
+ if (!sanitized.startsWith('+')) {
+ sanitized = '+41' + sanitized.replace(/^0/, '');
+ }
+ }
+ const href = `${protocol}:${sanitized}`;
+ return {props.children || value};
+};
+
+export default TLink;
diff --git a/website/components/documents/Solution/styles.module.scss b/website/components/documents/Solution/styles.module.scss
index 5c4095e0..a8308b29 100644
--- a/website/components/documents/Solution/styles.module.scss
+++ b/website/components/documents/Solution/styles.module.scss
@@ -10,6 +10,7 @@ html[data-theme='dark'] {
position: relative;
--current-alert-padding-vertical: var(--ifm-alert-padding-vertical);
--current-alert-padding-horizontal: var(--ifm-alert-padding-horizontal);
+ --wrapper-border-left-width: var(--ifm-alert-border-left-width);
&:not(.standalone) {
:global(.alert) {
border-top-left-radius: 0;
@@ -21,11 +22,11 @@ html[data-theme='dark'] {
-1 * calc(var(--current-alert-padding-vertical) + var(--ifm-alert-border-left-width))
);
border-width: 0;
- border-left-width: var(--ifm-alert-border-left-width) !important;
+ border-left-width: var(--wrapper-border-left-width) !important;
.wrapper {
:global(.alert) {
margin-left: 0;
- border-left-width: 0 !important;
+ --wrapper-border-left-width: 0;
margin-bottom: 0.25rem;
border-top-left-radius: var(--ifm-alert-border-radius);
border-bottom-left-radius: var(--ifm-alert-border-radius);
diff --git a/website/pages/index.tsx b/website/pages/index.tsx
index 2e015f28..f0964b30 100644
--- a/website/pages/index.tsx
+++ b/website/pages/index.tsx
@@ -43,7 +43,7 @@ const IndexPages: React.ComponentProps[] = [
id: 'main.link.infrastructure.name'
}),
icon: 'mdi-home-circle',
- route: '/infrastructure',
+ route: 'https://ict.gbsl.website/infra/',
description: translate({
message: 'Unterrichtszimmer, Drucker, Infrastruktur',
id: 'main.link.infrastructure.description'