Skip to content

Commit

Permalink
Fix login page background
Browse files Browse the repository at this point in the history
  • Loading branch information
SamuelTallet authored Mar 3, 2025
1 parent 1eadd42 commit a3fada4
Showing 1 changed file with 0 additions and 70 deletions.
70 changes: 0 additions & 70 deletions source/js/login.esm.js
Original file line number Diff line number Diff line change
@@ -1,86 +1,17 @@
/**
* @see https://unsplash.com/
*/
class UnsplashImage {

constructor(imageID, authorID, authorName) {

this.imageID = imageID
this.imageURL = `https://source.unsplash.com/${imageID}/1920x1080`
this.authorID = authorID
this.authorName = authorName
this.authorURL = `https://unsplash.com/@${authorID}`

}

static getRandom() {

const images = [
new UnsplashImage('pVq6YhmDPtk', 'danranwanghao', 'hao wang'),
new UnsplashImage('E8Ufcyxz514', 'fakurian', 'Fakurian Design'),
new UnsplashImage('PGdW_bHDbpI', 'fakurian', 'Fakurian Design'),
new UnsplashImage('26WixHTutxc', 'gradienta', 'Gradienta'),
new UnsplashImage('u8Jn2rzYIps', 'fakurian', 'Fakurian Design'),
new UnsplashImage('FBQcPsBL2Zo', 'fakurian', 'Fakurian Design'),
new UnsplashImage('Hlkuojv_P6I', 'enginakyurt', 'engin akyurt'),
new UnsplashImage('YWIOwHvRBvU', 'pawel_czerwinski', 'Pawel Czerwinski')
]
// Select a random image from the list above.
const image = images[Math.floor(Math.random() * images.length)]

return image

}

}

/**
* MongoDB PHP GUI login.
*/
class Login {

constructor() {

this.background = document.getElementById('mpg-background')
this.backgroundCreditLink = this.background.querySelector('.credit-link')
this.cardsContainer = document.getElementById('mpg-cards')
this.flipCardButtons = document.querySelectorAll('.mpg-flip-card-button')
this.requiredInputs = document.querySelectorAll('input[required]')
this.forms = document.querySelectorAll('form')

}

/**
* Defines background.
*/
setBackground() {

const randomImage = UnsplashImage.getRandom()
const abortController = new AbortController()

// We will abort fetch request if it takes more than one second.
const timeoutID = setTimeout(() => abortController.abort(), 1000)

fetch(randomImage.imageURL, { signal: abortController.signal })
.then(response => {
clearTimeout(timeoutID)
return response.blob()
})
.then(blob => {
const blobURL = URL.createObjectURL(blob)
this.background.style.backgroundImage = `url(${blobURL})`
this.backgroundCreditLink.textContent = `Image by ${randomImage.authorName}`
this.backgroundCreditLink.href = randomImage.authorURL
this.cardsContainer.classList.add('reveal')
})
.catch(_error => {
console.warn('Failed to fetch unsplash.com. Fallback to local image.')
this.background.classList.add('fallback')
this.cardsContainer.classList.add('reveal')
})

}

/**
* Adds an event listener on each "Flip card" button.
*/
Expand Down Expand Up @@ -138,7 +69,6 @@ class Login {

const login = new Login()

login.setBackground()
login.listenFlipCardButtons()
login.listenRequiredInputs()
login.listenForms()
Expand Down

0 comments on commit a3fada4

Please sign in to comment.