Skip to content

Commit a57de18

Browse files
SamuelTalletSamuelTallet
committed
Randomize login background
1 parent d3399dd commit a57de18

File tree

4 files changed

+150
-108
lines changed

4 files changed

+150
-108
lines changed

‎source/css/login.css‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,27 @@
5050
* @see https://bootsnipp.com/snippets/vl4R7
5151
*/
5252

53-
html, body {
53+
#mpg-background {
5454

55-
background-image: url('../../assets/images/login-background.jpg');
56-
background-size: cover;
55+
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); /* Transition hack */
5756
background-repeat: no-repeat;
57+
background-size: cover;
58+
height: 100%;
59+
left: 0;
60+
position: absolute;
61+
top: 0;
62+
transition: background-image 1s;
63+
width: 100%;
64+
65+
}
66+
67+
#mpg-background.fallback {
68+
69+
background-image: url("../../assets/images/login-background.jpg");
70+
71+
}
72+
73+
html, body {
5874

5975
height: 100%;
6076

@@ -76,10 +92,17 @@ body {
7692
#mpg-cards {
7793

7894
min-height: 191px;
95+
opacity: 0;
96+
perspective: 1000px;
97+
transform-style: preserve-3d;
98+
transition: opacity 1s;
7999
width: 322px;
80100

81-
transform-style: preserve-3d;
82-
perspective: 1000px;
101+
}
102+
103+
#mpg-cards.reveal {
104+
105+
opacity: 1;
83106

84107
}
85108

@@ -91,11 +114,9 @@ body {
91114

92115
.mpg-card-front, .mpg-card-back {
93116

94-
position: absolute;
95-
96-
-webkit-backface-visibility: hidden; /* Safari fix */
117+
-webkit-backface-visibility: hidden; /* For Safari */
97118
backface-visibility: hidden;
98-
119+
position: absolute;
99120
transition: transform 0.6s;
100121

101122
}

‎source/js/login.js‎

Lines changed: 0 additions & 89 deletions
This file was deleted.

‎source/js/login.mjs‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
2+
/**
3+
* MongoDB PHP GUI login.
4+
*/
5+
class Login {
6+
7+
constructor() {
8+
9+
this.background = document.getElementById('mpg-background')
10+
this.cardsContainer = document.getElementById('mpg-cards')
11+
this.flipCardButtons = document.querySelectorAll('.mpg-flip-card-button')
12+
this.requiredInputs = document.querySelectorAll('input[required]')
13+
this.forms = document.querySelectorAll('form')
14+
15+
}
16+
17+
/**
18+
* Defines background. It's a random abstract image from Unsplash.
19+
*/
20+
setBackground() {
21+
22+
const sourceURL = 'https://source.unsplash.com/1920x1080/?abstract'
23+
const abortController = new AbortController()
24+
25+
// We will abort fetch request if it takes more than one second.
26+
const timeoutID = setTimeout(() => abortController.abort(), 1000)
27+
28+
fetch(sourceURL, { signal: abortController.signal })
29+
.then(response => {
30+
clearTimeout(timeoutID)
31+
return response.blob()
32+
})
33+
.then(blob => {
34+
const blobURL = URL.createObjectURL(blob)
35+
this.background.style.backgroundImage = `url(${blobURL})`
36+
this.cardsContainer.classList.add('reveal')
37+
})
38+
.catch(_error => {
39+
console.warn('Failed to fetch unsplash.com. Fallback to local image.')
40+
this.background.classList.add('fallback')
41+
this.cardsContainer.classList.add('reveal')
42+
})
43+
44+
}
45+
46+
/**
47+
* Adds an event listener on each "Flip card" button.
48+
*/
49+
listenFlipCardButtons() {
50+
51+
this.flipCardButtons.forEach(flipCardButton => {
52+
flipCardButton.addEventListener('click', event => {
53+
event.preventDefault()
54+
this.cardsContainer.classList.toggle('flipped')
55+
})
56+
})
57+
58+
}
59+
60+
/**
61+
* Adds an event listener on each required input field.
62+
*/
63+
listenRequiredInputs() {
64+
65+
this.cardsContainer.addEventListener('animationend', _event => {
66+
this.cardsContainer.classList.remove('shake')
67+
})
68+
69+
this.requiredInputs.forEach(requiredInput => {
70+
requiredInput.addEventListener('invalid', _event => {
71+
this.cardsContainer.classList.add('shake')
72+
})
73+
})
74+
75+
}
76+
77+
/**
78+
* Adds an event listener on each form.
79+
*/
80+
listenForms() {
81+
82+
this.forms.forEach(form => {
83+
form.addEventListener('submit', event => {
84+
event.preventDefault()
85+
86+
/**
87+
* TODO: Submit form if credentials are good.
88+
*
89+
* @see https://github.com/SamuelTS/MongoDB-PHP-GUI/issues/21
90+
*/
91+
form.submit()
92+
})
93+
})
94+
95+
}
96+
97+
}
98+
99+
(function onDocumentReady() {
100+
101+
const login = new Login()
102+
103+
login.setBackground()
104+
login.listenFlipCardButtons()
105+
login.listenRequiredInputs()
106+
login.listenForms()
107+
108+
})()

‎views/login.view.php‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,23 @@
77

88
<title><?php echo MPG_APP_NAME; ?></title>
99

10-
<link rel="icon" href="<?php echo MPG_BASE_URL; ?>/assets/images/mpg-icon.svg">
11-
<link rel="mask-icon" href="<?php echo MPG_BASE_URL; ?>/assets/images/mpg-safari-icon.svg" color="#6eb825">
12-
<link rel="apple-touch-icon" href="<?php echo MPG_BASE_URL; ?>/assets/images/mpg-ios-icon.png">
10+
<link rel="icon" href="assets/images/mpg-icon.svg">
11+
<link rel="mask-icon" href="assets/images/mpg-safari-icon.svg" color="#6eb825">
12+
<link rel="apple-touch-icon" href="assets/images/mpg-ios-icon.png">
1313

14-
<link rel="stylesheet" href="<?php echo MPG_BASE_URL; ?>/assets/css/ubuntu-font.css">
15-
<link rel="stylesheet" href="<?php echo MPG_BASE_URL; ?>/assets/css/fontawesome-custom.css">
16-
<link rel="stylesheet" href="<?php echo MPG_BASE_URL; ?>/assets/css/bootstrap.min.css">
17-
<link rel="stylesheet" href="<?php echo MPG_BASE_URL; ?>/source/css/login.css">
14+
<link rel="stylesheet" href="assets/css/ubuntu-font.css">
15+
<link rel="stylesheet" href="assets/css/fontawesome-custom.css">
16+
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
17+
<link rel="stylesheet" href="source/css/login.css">
1818

19-
<script src="<?php echo MPG_BASE_URL; ?>/source/js/login.js"></script>
19+
<script type="module" src="source/js/login.mjs"></script>
2020

2121
</head>
2222

2323
<body>
2424

25+
<div id="mpg-background"></div>
26+
2527
<div class="container h-100">
2628

2729
<?php
@@ -43,7 +45,7 @@
4345
<div class="card mpg-card-front">
4446

4547
<div class="card-header text-center text-nowrap">
46-
<img src="<?php echo MPG_BASE_URL; ?>/assets/images/mpg-icon.svg" width="32" height="32" />
48+
<img src="assets/images/mpg-icon.svg" width="32" height="32" />
4749
<h3 class="mpg-card-header-title d-inline align-middle"><?php echo MPG_APP_NAME; ?></h3>
4850
</div>
4951

@@ -70,7 +72,7 @@
7072
<div class="card mpg-card-back">
7173

7274
<div class="card-header text-center text-nowrap">
73-
<img src="<?php echo MPG_BASE_URL; ?>/assets/images/mpg-icon.svg" width="32" height="32" />
75+
<img src="assets/images/mpg-icon.svg" width="32" height="32" />
7476
<h3 class="mpg-card-header-title d-inline align-middle"><?php echo MPG_APP_NAME; ?></h3>
7577
</div>
7678

0 commit comments

Comments
 (0)