All files / components LoginForm.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
export default {
    template: `
        <div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-8">
            <h2 class="text-2xl font-bold mb-6 text-center text-indigo-600">Witaj w EduApp!</h2>
            <form @submit.prevent="login" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Nazwa użytkownika</label>
                    <input 
                        type="text" 
                        v-model="username" 
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                        required
                    >
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">PIN (4 cyfry)</label>
                    <input 
                        type="password" 
                        v-model="pin" 
                        maxlength="4" 
                        pattern="[0-9]{4}"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                        required
                    >
                </div>
                <button 
                    type="submit" 
                    class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                    Zaloguj się
                </button>
            </form>
            
            <div class="mt-4">
                <button 
                    @click="enterAsGuest" 
                    class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                    Wejdź jako gość
                </button>
            </div>
            
            <router-link 
                to="/register" 
                class="mt-4 block text-center text-sm text-indigo-600 hover:text-indigo-500"
            >
                Utwórz nowe konto
            </router-link>
        </div>
    `,
    data() {
        return {
            username: '',
            pin: '',
            errorMessage: ''
        }
    },
    methods: {
        validatePin() {
            const pinRegex = /^[0-9]{4}$/;
            if (!pinRegex.test(this.pin)) {
                alert('PIN musi składać się z 4 cyfr');
                return false;
            }
            return true;
        },
        async login() {
            if (!this.validatePin()) return;
 
            try {
                const response = await fetch('/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: this.username,
                        pin: this.pin
                    })
                });
 
                const data = await response.json();
                console.log('Login response:', data);
 
                if (data.success) {
                    this.$root.handleLoginSuccess(data.user);
                    this.$router.push('/menu');
                } else {
                    alert(data.error || 'Nieprawidłowa nazwa użytkownika lub PIN');
                }
            } catch (error) {
                console.error('Błąd logowania:', error);
                alert('Wystąpił błąd podczas logowania');
            }
        },
        enterAsGuest() {
            this.$root.handleGuestMode();
            this.$router.push('/menu');
        }
    }
};