Basic registration form and GDPR page

website/src/app/osobni-udaje/page.tsx

@@ -0,0 +1,32 @@
+import MainLayout from 'components/MainLayout';
+import Panel from 'components/Panel';
+
+const GdprPage = (): JSX.Element => {
+  return (
+    <MainLayout>
+      <div className="container">
+        <Panel title="Správa osobních údajů" wide transparent>
+          <p>
+            Vaše osobní údaje jsou shromažďovány a zpracovávány organizcí Kódím.cz v souladu se směrnicí GDPR a to pouze k účelům uvedeným níže. Zpracováváme pouze osobní údaje, které nám sdělíte v souvislosti s registrací a účastí na našich kurzech a jiných akcích
+          </p>
+
+          <h2>Jaké údaje zpracováváme</h2>
+
+          <ul>
+            <li>Jméno a příjmení: za účelem identifikace uživatele</li>
+            <li>E-mail: za účelem identifikace uživatele a informování o nových kurzech a akcích</li>
+            <li>Adresa bydliště: pouze za účelem vystavení faktury za účast na kurzu či jiné akci</li>
+          </ul>
+
+          <h2>Přístup k údajům</h2>
+          <p>Kódím.cz zajišťuje bezpečnost a důvěrnost vašich údajů. Žádné ze zpracovávaných údajů nebudou zveřejněny nikde na webu Kódím.cz ani nebudou poskytovány třetím stranám.</p>
+
+          <h2>Délka zpracování</h2>
+          <p>Vaše osobní údaje zpracováváme po dobu trvání vašeho souhlasu vyjádřeného při registraci na webové stránky nebo při prihlášení na kurz nebo jinou akci. Svůj souhlas můžete kdykoliv odvolat odesláním požadavku na e-mail <a href="mailto:[email protected]">[email protected]</a>.</p>
+        </Panel>
+      </div>
+    </MainLayout>
+  );
+};
+
+export default GdprPage;

website/src/app/registrace/page.tsx

@@ -0,0 +1,55 @@
+import { redirect } from 'next/navigation';
+import { session } from 'app/session';
+import MainLayout from 'components/MainLayout';
+import Panel from 'components/Panel';
+import Icon from 'components/Icon';
+import css from './styles.module.scss';
+
+export const dynamic = 'force-dynamic';
+
+const RegisterPage = async (): Promise<JSX.Element> => {
+  const { user } = await session();
+
+  if (user !== null) {
+    redirect('/');
+  }
+
+  return (
+    <MainLayout>
+      <div className="container">
+        <Panel title="Registrace" transparent>
+          <p>
+            Žádný z těchto údajů nebude zobrazen nikde na webu ani nebude sdílen s třetími stranami.
+          </p>
+          <form>
+            <div className={css.fields}>
+              <label htmlFor="name">Celé jméno:</label>
+              <input type="text" id="name" />
+              <label htmlFor="email">Email:</label>
+              <input type="email" id="email" />
+            </div>
+            <div className={css.checkfield}>
+              <input type="checkbox" id="gdpr" />
+              <label htmlFor="gdpr">
+                Souhlasím se <a href="osobni-udaje">zpracováním osobních údajů</a>
+              </label>
+            </div>
+            <div className={css.checkfield}>
+              <input type="checkbox" id="newsletter" />
+              <label htmlFor="newsletter">
+                Nepřeji si dostávat e-maily s novinkami ohledně nových kurzů a akcí na Kódím.cz
+              </label>
+            </div>
+            <div className={css.controls}>
+              <button type="submit" className="btn">
+                Registrovat
+              </button>
+            </div>
+          </form>
+        </Panel>
+      </div>
+    </MainLayout>
+  );
+};
+
+export default RegisterPage;

website/src/app/registrace/styles.module.scss

@@ -0,0 +1,34 @@
+@import "styles/variables.scss";
+@import "styles/mixins.scss";
+
+.providers {
+  margin-bottom: 1rem;
+}
+
+.providerLink {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1rem;
+}
+
+.fields {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.25rem;
+  align-items: baseline;
+  margin-bottom: 1rem;
+
+  @include breakpoint-md {
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+  }
+}
+
+.checkfield {
+  margin-bottom: 1rem;
+}
+
+.controls {
+  text-align: right;
+}

website/src/components/Panel/index.tsx

@@ -1,17 +1,20 @@
+import clsx from 'clsx';
 import styles from './styles.module.scss';
 
 interface Props {
   title: string;
+  wide?: boolean;
+  transparent?: boolean;
   children: React.ReactNode;
 }
 
-const Panel = ({ title, children }: Props) => {
+const Panel = ({ title, wide = false, transparent = false, children }: Props) => {
   return (
-    <div className={styles.panel}>
+    <div className={clsx(styles.panel, wide && styles.wide)}>
       <div className={styles.panelHead}>
         {title}
       </div>
-      <div className={styles.panelBody}>
+      <div className={clsx(styles.panelBody, transparent && styles.transparent)}>
         {children}
       </div>
     </div>

website/src/components/Panel/styles.module.scss

@@ -20,3 +20,12 @@
     border-radius: 0.5rem;
   }
 }
+
+.wide {
+  max-width: 40rem;
+}
+
+.transparent {
+  background-color: transparent;
+  padding-top: 0;
+}

website/src/styles/global.scss

@@ -40,3 +40,42 @@ body {
 h1, h2, h3, h4, h5, h6 {
   line-height: 1.25;
 }
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="url"],
+textarea {
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid $palette-1;
+  background-color: white;
+  color: $color-text;
+  transition: border-color 0.2s ease-in-out;
+}
+
+input[type="checkbox"] {
+  transform: scale(1.5);
+  margin-right: 0.5rem;
+}
+
+
+.btn {
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 0.5rem 1rem;
+  border: none;
+  outline: none;
+  border-radius: 0.25rem;
+  background-color: $palette-1;
+  color: white;
+  cursor: pointer;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+}