company registration

frontend/app/components/NavBar.vue

@@ -3,7 +3,7 @@
         <v-app-bar color="rgb(46, 125, 50)" style="color: white" :elevation="2">
             <v-btn variant="text" dense to="/">Domov</v-btn>
             <v-btn variant="text" dense to="/register">Register</v-btn>
-            <v-btn variant="text" dense>Login</v-btn>
+            <v-btn variant="text" dense to="/login">Login</v-btn>
 
             <v-spacer></v-spacer>
         </v-app-bar>

frontend/app/pages/login.vue

@@ -0,0 +1,23 @@
+<template>
+
+  <v-row class="pc" align="stretch" justify="start">
+    <PageCard
+      title="Registrácia študenta"
+      description="Zaregistruj sa a začni svoju odbornú prax."
+      link="/registerStudent"
+      icon="mdi mdi-account"
+    />
+    <PageCard
+      title="Registrácia firmy"
+      description="Staň sa partnerskou firmou a pomôž študentom získať prax vo svojom odbore."
+      link="/registerCompany"
+      icon="mdi mdi-office-building"
+    />
+  </v-row>
+</template>
+
+<style scoped>
+.pc {
+    margin: 0 0 24px 0;
+}
+</style>

frontend/app/pages/registerCompany.vue

@@ -1,39 +1,119 @@
 <template>
-    <v-container fluid>
+  <div class="page-container form-wrap">
-        <v-card id="footer-card">
+    <h4 class="page-title">Registrácia firmy</h4>
-            <h1>O aplikácii</h1>
 
-            <br />
+    <v-form v-model="isValid" @submit.prevent="onSubmit">
+      <v-text-field
+        v-model="form.companyName"
+        :rules="[rules.required]"
+        label="Názov firmy:"
+        variant="outlined"
+        density="compact"
+      />
+      <v-text-field
+        v-model="form.companyAddress"
+        :rules="[rules.required]"
+        label="Adresa:"
+        variant="outlined"
+        density="compact"
+      />
 
-            <p>Táto aplikácia slúži na zaznamenávanie a správu odbornej praxe študentov.</p>
+      <h4 class="section-heading mt-4">Kontaktná osoba</h4>
-            <p>Systém spravuje Fakulta prírodných vied a informatiky, UKF v Nitre.</p>
 
-            <br />
+      <v-text-field
+        v-model="form.contactName"
+        :rules="[rules.required]"
+        label="Meno:"
+        variant="outlined"
+        density="compact"
+      />
+      <v-text-field
+        v-model="form.contactEmail"
+        :rules="[rules.required, rules.email]"
+        label="Email:"
+        variant="outlined"
+        density="compact"
+      />
+      <v-text-field
+        v-model="form.contactPhone"
+        :rules="[rules.phone]"
+        label="Telefón:"
+        variant="outlined"
+        density="compact"
+      />
 
-            <p>Autori aplikácie:</p>
+      <v-checkbox
-            <ul id="authors-list">
+        v-model="form.consent"
-                <li>Bc. Sofia Reháková</li>
+        :rules="[rules.mustAgree]"
-                <li>Bc. Veronika Fehérvíziová</li>
+        label="Súhlasím s podmienkami spracúvania osobných údajov"
-                <li>Bc. Fábián Varga</li>
+        density="compact"
-                <li>Bc. Dávid Kecskés</li>
+      />
-                <li>Bc. Andrej Kraslan</li>
+
-            </ul>
+      <v-btn
-        </v-card>
+        type="submit"
-    </v-container>
+        color="success"
+        size="large"
+        block
+        :disabled="!isValid || !form.consent"
+      >
+        Registrovať
+      </v-btn>
+    </v-form>
+  </div>
 </template>
 
+<script setup>
+import { reactive, ref } from 'vue'
+
+const isValid = ref(false)
+
+const form = reactive({
+  companyName: '',
+  companyAddress: '',
+  contactName: '',
+  contactEmail: '',
+  contactPhone: '',
+  consent: false,
+})
+
+const rules = {
+  required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole',
+  email: v => /.+@.+\..+/.test(v) || 'Zadajte platný email',
+  phone: v => (!v || /^[0-9 +()-]{6,}$/.test(v)) || 'Zadajte platné telefónne číslo',
+  mustAgree: v => v === true || 'Je potrebné súhlasiť',
+}
+
+function onSubmit() {
+
+}
+</script>
+
 <style scoped>
-#footer-card {
+.page-container {
-    padding-left: 10px;
+  max-width: 1120px;
-    padding-bottom: 10px;
+  margin: 0 auto;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.form-wrap {
+  max-width: 640px; 
+}
+.page-title {
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+  margin: 24px 0 16px;
+  color: #1f1f1f;
+}
+.section-heading {
+  font-size: 18px;
+  font-weight: 700;
+  margin: 8px 0 8px;
+  color: #1f1f1f;
 }
 
-#authors-list {
+.mb-2 { margin-bottom: 8px; }
-    margin-left: 20px;
+.mb-3 { margin-bottom: 12px; }
-}
+.mt-4 { margin-top: 16px; }
-
-#authors-list li {
-    display: list-item;
-    list-style-type: disc;
-}
 </style>
+

frontend/app/pages/registerStudent.vue

@@ -118,7 +118,7 @@ const rules = {
 }
 
 function onSubmit() {
-  console.log('FORM SUBMIT', { ...form })
+
 }
 </script>