updated register form to new layout

This one was very old

frontend/src/components/RegisterForm.vue

@@ -1,16 +1,81 @@
 <template>
-  <form @submit.prevent="register">
-    <h2>Register</h2>
-    <input v-model="username" placeholder="Username" required />
-    <input v-model="email" type="email" placeholder="Email" required />
-    <input v-model="password" type="password" placeholder="Password" required />
-    <button type="submit">Register</button>
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-if="success" class="success">{{ success }}</p>
-    <p class="back-to-login">
-      <router-link to="/">Back to Login</router-link>
-    </p>
-  </form>
+  <div class="fullwidth-page" style="display: flex; justify-content: center; align-items: center; min-height: 100vh;">
+    <div class="card" style="max-width: 400px; width: 100%; margin: 20px;">
+      <div class="page-header">
+        <h2>{{ $t('auth.register') }}</h2>
+      </div>
+      
+      <form @submit.prevent="register">
+        <div class="form-group">
+          <label for="username">{{ $t('auth.username') }}</label>
+          <input
+            v-model="username"
+            type="text"
+            id="username"
+            name="username"
+            class="form-control"
+            :placeholder="$t('auth.username')"
+            required
+          />
+        </div>
+        
+        <div class="form-group">
+          <label for="email">{{ $t('auth.email') }}</label>
+          <input
+            v-model="email"
+            type="email"
+            id="email"
+            name="email"
+            class="form-control"
+            :placeholder="$t('auth.email')"
+            required
+          />
+        </div>
+        
+        <div class="form-group">
+          <label for="password">{{ $t('auth.password') }}</label>
+          <input
+            v-model="password"
+            type="password"
+            id="password"
+            name="password"
+            class="form-control"
+            :placeholder="$t('auth.password')"
+            required
+          />
+        </div>
+        
+        <div class="form-group">
+          <label for="confirmPassword">{{ $t('auth.confirmPassword') }}</label>
+          <input
+            v-model="confirmPassword"
+            type="password"
+            id="confirmPassword"
+            name="confirmPassword"
+            class="form-control"
+            :placeholder="$t('auth.confirmPassword')"
+            required
+          />
+        </div>
+        
+        <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 10px;">
+          {{ $t('auth.register') }}
+        </button>
+      </form>
+      
+      <div v-if="error" class="badge badge-danger" style="width: 100%; margin-top: 15px; text-align: center; display: block;">
+        {{ error }}
+      </div>
+      
+      <div v-if="success" class="badge badge-success" style="width: 100%; margin-top: 15px; text-align: center; display: block;">
+        {{ success }}
+      </div>
+      
+      <div style="text-align: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid #dee2e6;">
+        <p>{{ $t('auth.alreadyHaveAccount') }} <router-link to="/" class="btn btn-secondary">{{ $t('auth.loginHere') }}</router-link></p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -22,23 +87,32 @@ export default {
       username: "",
       email: "",
       password: "",
+      confirmPassword: "",
       error: "",
       success: "",
     };
   },
   methods: {
     async register() {
+      // Validate passwords match
+      if (this.password !== this.confirmPassword) {
+        this.error = this.$t('auth.passwordsDontMatch');
+        this.success = "";
+        return;
+      }
+      
       try {
         const response = await API.post('/register', {
           username: this.username,
           password: this.password,
           email: this.email
         });
-        this.success = "Registration successful!";
+        this.success = this.$t('auth.registrationSuccess');
         this.error = "";
         this.password = "";
+        this.confirmPassword = "";
       } catch (err) {
-        this.error = err.response?.data?.error || "Registration failed.";
+        this.error = err.response?.data?.error || this.$t('auth.registrationFailed');
         this.success = "";
       }
     },
@@ -46,24 +120,6 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 /* All common styles moved to main.css */
-
-.error {
-  color: red;
-}
-.success {
-  color: green;
-}
-.back-to-login {
-  margin-top: 15px;
-  text-align: center;
-}
-.back-to-login a {
-  color: #1da766;
-  text-decoration: none;
-}
-.back-to-login a:hover {
-  text-decoration: underline;
-}
 </style>

frontend/src/locales/de

@@ -6,6 +6,21 @@ export default {
     next: 'Weiter',
     back: 'Zurück',
   },
+  auth: {
+    login: 'Anmelden',
+    register: 'Registrieren',
+    username: 'Benutzername',
+    email: 'E-Mail',
+    password: 'Passwort',
+    confirmPassword: 'Passwort bestätigen',
+    passwordsDontMatch: 'Passwörter stimmen nicht überein.',
+    registrationSuccess: 'Registrierung erfolgreich!',
+    registrationFailed: 'Registrierung fehlgeschlagen.',
+    alreadyHaveAccount: 'Bereits ein Konto?',
+    loginHere: 'Hier anmelden',
+    dontHaveAccount: 'Noch kein Konto?',
+    registerHere: 'Hier registrieren'
+  },
   DatasheetView:'Datenblatt',
   SkillView: 'Fertigkeiten',
   WeaponView: 'Waffen',

frontend/src/locales/en

@@ -6,6 +6,21 @@ export default {
     next: 'Weiter',
     back: 'Back'
   },
+  auth: {
+    login: 'Login',
+    register: 'Register',
+    username: 'Username',
+    email: 'Email',
+    password: 'Password',
+    confirmPassword: 'Confirm Password',
+    passwordsDontMatch: 'Passwords do not match.',
+    registrationSuccess: 'Registration successful!',
+    registrationFailed: 'Registration failed.',
+    alreadyHaveAccount: 'Already have an account?',
+    loginHere: 'Login here',
+    dontHaveAccount: "Don't have an account?",
+    registerHere: 'Register here'
+  },
   DatasheetView:'Datasheet',
   SkillView: 'Skills',
   WeaponView: 'Weapons',