hecate 0.62.0

OpenStreetMap Inspired Data Storage Backend Focused on Performance and GeoJSON Interchange
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

<template>
<div class='absolute top left bottom right z3' style="pointer-events: none;">
    <div class='flex-parent flex-parent--center-main flex-parent--center-cross h-full' style="pointer-events: auto;">
        <template v-if='modal_error'>
            <div class="flex-child px12 py12 w600 h80 bg-white round-ml shadow-darken10">
                <div class='grid w-full'>
                    <div class='col col--8'>
                        <h3 class='fl py6 txt-m txt-bold w-full'>Login Error!</h3>
                        <p class='color-red' v-text='modal_error'></p>
                    </div>

                    <div class='col col--4'>
                        <button @click='modal_error = ""' class='mt24 btn round w-full'>OK</button>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="flex-child px12 py12 w600 h180 bg-white round-ml shadow-darken10">
                <div class='grid w-full'>
                    <div class='col col--8'>
                        <h3 class='fl py6 txt-m txt-bold w-full'>Hecate Login</h3>
                    </div>
                    <div class='col col--4'>
                        <button @click='close()' class='fr btn round bg-white color-black bg-darken25-on-hover'><svg class='icon'><use href='#icon-close'/></svg></button>
                    </div>

                    <div class='col col--12'>
                        <div class='grid grid--gut12'>
                            <div class='col col--6'>
                                <label>
                                    Username:
                                    <input v-model='modal_username' class='input py12' placeholder='username'/>
                                </label>
                            </div>
                            <div class='col col--6'>
                                <label>
                                    Password:
                                    <input v-model='modal_password' type='password' class='input py12' placeholder='password'/>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class='col col--12'>
                        <div class='grid grid--gut12'>
                            <div class='col col--6 py12'>
                                <button @click='register()' class='btn round bg-gray w-full'>Register</button>
                            </div>

                            <div class='col col--6 py12'>
                                <button @click='login' class='btn round w-full'>Login</button>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: 'login',
    data: function() {
        return {
            modal_error: '',
            modal_username: '',
            modal_password: ''
        }
    },
    methods: {
        register: function() {
            this.$emit('register');
        },
        close: function() {
            this.$emit('close');
        },
        login: function() {
            const self = this; 

            fetch(`${window.location.protocol}//${window.location.host}/api/user/session`, {
                method: 'GET',
                credentials: 'same-origin',
                headers: new Headers({
                    'Authorization': 'Basic '+ btoa(`${this.modal_username}:${this.modal_password}`)
                })
            }).then((response) => {
                if (response.status === 200) {
                    response.json().then((response) => {
                        self.$emit('uid', parseInt(response));
                        self.$emit('username', self.modal_username);

                        self.modal_password = '';
                        self.modal_username = '';
                        self.modal_error = '';

                        self.$emit('login');
                    }).catch((err) => {
                        self.modal_password = '';
                        self.modal_error = 'Failed to parse login response';
                    });
                } else {
                    self.modal_password = '';
                    self.modal_error = 'Incorrect Username/Password';
                }
            }).catch((err) => {
                self.modal_password = '';
                self.modal_error = 'Incorrect Username/Password';
            });
        }
    },
    render: h => h(App),
    props: ['uid', 'username', 'authed' ]
}
</script>