https://emit-beta-v2.replit.app/routes/landing.js

1import parallax from '../modules/parallax.js';
2
3export default {
4    template: '#landing',
5    data() {
6        var vPass = (rule, value, callback) => {
7            if (!RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^_&*-]).{8,12}$').test(value)) {
8                callback(new Error('Password does not meet requirements'));
9            } else { callback() }
10        };
11        return {
12            terms: false,
13            privacy: false,
14            capsTooltip: false,
15            isPwd: true,
16            username: '',
17            passcode: '',
18            resetDialog: false,     
19            rules: { 
20                username: [ val => val && val.length > 0 || 'Username is required' ],
21                passcode: [ val => val && val.length > 0 || 'Passcode is required' ],
22            }
23        }
24    }, 
25    mounted() {
26        if (emit.getProp('start-up')) {
27            // this.$q.loading.show({ message: 'Running start-up processes<br/><span class="text-primary">Hang on...</span>' });
28        }
29        particlesJS('particles-js', {                
30            "particles": {
31                "number": {
32                    "value": 80,
33                    "density": {
34                        "enable": true,
35                        "value_area": 800
36                    }
37                },
38                "color": {
39                    "value": "#ffffff"
40                },
41                "shape": {
42                    "type": "circle",
43                    "stroke": {
44                        "width": 0,
45                        "color": "#000000"
46                    },
47                    "polygon": {
48                        "nb_sides": 5
49                    },
50                    "image": {
51                        "src": "img/github.svg",
52                        "width": 100,
53                        "height": 100
54                    }
55                },
56                "opacity": {
57                    "value": 0.5,
58                    "random": true,
59                    "anim": {
60                        "enable": true,
61                        "speed": 1,
62                        "opacity_min": 0.1,
63                        "sync": false
64                    }
65                },
66                "size": {
67                    "value": 2,
68                    "random": true,
69                    "anim": {
70                        "enable": false,
71                        "speed": 40,
72                        "size_min": 0.1,
73                        "sync": false
74                    }
75                },
76                "line_linked": {
77                    "enable": false,
78                    "distance": 150,
79                    "color": "#ffffff",
80                    "opacity": 0.4,
81                    "width": 1
82                },
83                "move": {
84                    "enable": true,
85                    "speed": 1,
86                    "direction": "top",
87                    "random": false,
88                    "straight": true,
89                    "out_mode": "out",
90                    "bounce": false,
91                    "attract": {
92                        "enable": false,
93                        "rotateX": 600,
94                        "rotateY": 1200
95                    }
96                }
97            },
98            "interactivity": {
99                "detect_on": "canvas",
100                "events": {
101                    "onhover": {
102                        "enable": false,
103                        "mode": "repulse"
104                    },
105                    "onclick": {
106                        "enable": false,
107                        "mode": "push"
108                    },
109                    "resize": true
110                },
111                "modes": {
112                    "grab": {
113                        "distance": 400,
114                        "line_linked": {
115                        "opacity": 1
116                        }
117                    },
118                    "bubble": {
119                        "distance": 400,
120                        "size": 40,
121                        "duration": 2,
122                        "opacity": 8,
123                        "speed": 3
124                    },
125                    "repulse": {
126                        "distance": 200,
127                        "duration": 0.4
128                    },
129                    "push": {
130                        "particles_nb": 4
131                    },
132                    "remove": {
133                        "particles_nb": 2
134                    }
135                }
136            },
137            "retina_detect": true
138        });
139        window.addEventListener('scroll', parallax);
140    },
141    methods: {
142        checkCapslock({ shiftKey, key } = {}) {
143            if (key && key.length === 1) {
144                if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
145                    this.capsTooltip = true
146                } else {
147                    this.capsTooltip = false
148                }
149            }
150            if (key === 'CapsLock' && this.capsTooltip === true) { alert('caps lock working'); this.capsTooltip = false }
151        },
152        confirm() {
153            if (this.username == '') {
154                this.$q.notify({ icon: 'error_outline', color: 'red-5', message: 'Please provide your username' });
155                return;
156            }
157            this.resetDialog = true;
158        },
159        resetPass() { emit.fb({ op: 'reset_passcode', user: this.username }) },
160        login() { 
161            window.scrollTo({ top: 0 });
162            // emit.fb({ op: 'sign_in', username: this.username, passcode: this.passcode }) 
163        },
164        guest() { 
165            window.scrollTo({ top: 0 });
166            // emit.fb({ op: 'sign_in', username: '[email protected]', passcode: 'EMIT!guest1' }) 
167        }
168    },
169    beforeDestroy() { window.removeEventListener('scroll', parallax) }
170}