fixed centering issue with radius.
Signed-off-by: boris <boris@borishub.co.uk>
This commit is contained in:
boris
369
public/js/auth.js
Normal file
369
public/js/auth.js
Normal file
@@ -0,0 +1,369 @@
|
||||
/**
|
||||
* Authentication Worker
|
||||
*
|
||||
* I admit JWT is unnecessary, but I did it anyway because it was interesting
|
||||
* and I wanted to try it out.
|
||||
*/
|
||||
class Auth {
|
||||
/**
|
||||
* initialise the authentication helper
|
||||
*/
|
||||
constructor() {
|
||||
this.token = localStorage.getItem('token');
|
||||
this.user = JSON.parse(localStorage.getItem('user') || 'null');
|
||||
this.loginAttempts = parseInt(localStorage.getItem('loginAttempts') || '0');
|
||||
this.isValidating = false;
|
||||
this.validationPromise = null;
|
||||
|
||||
// Generate a browser fingerprint
|
||||
this.browserFingerprint = this._generateFingerprint();
|
||||
|
||||
// Check if the stored fingerprint matches the current browser
|
||||
const storedFingerprint = localStorage.getItem('browserFingerprint');
|
||||
if (this.token && (!storedFingerprint || storedFingerprint !== this.browserFingerprint)) {
|
||||
// Fingerprint mismatch - potential token theft
|
||||
console.warn('Browser fingerprint mismatch - clearing authentication');
|
||||
this.logout(false); // Silent logout (no redirect)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a simple browser fingerprint, super unnecessary and out of scope
|
||||
* but it was simple and hardens the authentication a bit.
|
||||
* @private
|
||||
* @returns {string} A fingerprint based on browser properties
|
||||
*/
|
||||
_generateFingerprint() {
|
||||
const components = [
|
||||
navigator.userAgent,
|
||||
navigator.language,
|
||||
screen.colorDepth,
|
||||
screen.width + 'x' + screen.height,
|
||||
new Date().getTimezoneOffset()
|
||||
];
|
||||
|
||||
// Create a hash of the components
|
||||
let hash = 0;
|
||||
const str = components.join('|');
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
hash = ((hash << 5) - hash) + str.charCodeAt(i);
|
||||
hash |= 0; // Convert to 32bit integer
|
||||
}
|
||||
|
||||
return hash.toString(16);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate token on page load, this is to prevent XSS attacks. (During testing
|
||||
* copying the tokens and userdata, and setting the localStorage manually on a
|
||||
* new browser automatically logged me in.)
|
||||
* This should be called when the page loads to ensure the token is valid
|
||||
* @returns {Promise<boolean>} True if token is valid, false otherwise
|
||||
*/
|
||||
async validateOnLoad() {
|
||||
// If already validating, return the existing promise
|
||||
if (this.isValidating) {
|
||||
return this.validationPromise;
|
||||
}
|
||||
|
||||
// If no token, no need to validate since not logged in
|
||||
if (!this.token) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Set validating flag and create promise
|
||||
this.isValidating = true;
|
||||
this.validationPromise = (async () => {
|
||||
try {
|
||||
const isValid = await this.validateToken();
|
||||
|
||||
if (!isValid) {
|
||||
// Token is invalid, try to refresh it
|
||||
const refreshed = await this.refreshToken();
|
||||
|
||||
if (!refreshed) {
|
||||
// Refresh failed, logout
|
||||
this.logout(false); // Silent logout (no redirect)
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return isValid;
|
||||
} catch (error) {
|
||||
console.error('Token validation error:', error);
|
||||
this.logout(false); // Silent logout (no redirect)
|
||||
return false;
|
||||
} finally {
|
||||
this.isValidating = false;
|
||||
this.validationPromise = null;
|
||||
}
|
||||
})();
|
||||
|
||||
return this.validationPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a JWT token to extract its payload
|
||||
* @param {string} token - The JWT token to parse
|
||||
* @returns {object|null} The decoded payload or null if invalid
|
||||
*/
|
||||
parseJwt(token) {
|
||||
try {
|
||||
const base64Url = token.split('.')[1];
|
||||
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
|
||||
const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
|
||||
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
|
||||
}).join(''));
|
||||
|
||||
return JSON.parse(jsonPayload);
|
||||
} catch (e) {
|
||||
console.error('Error parsing JWT token:', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a new CAPTCHA
|
||||
* @returns {Promise<string>} The generated CAPTCHA code
|
||||
*/
|
||||
async generateCaptcha() {
|
||||
try {
|
||||
const response = await fetch('/auth.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: 'generateCaptcha'
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (data.captcha) {
|
||||
return data.captcha;
|
||||
}
|
||||
throw new Error('Failed to generate CAPTCHA');
|
||||
} catch (error) {
|
||||
console.error('Error generating CAPTCHA:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if CAPTCHA is needed for login
|
||||
* @returns {boolean} True if CAPTCHA is needed, false otherwise
|
||||
*/
|
||||
needsCaptcha() {
|
||||
return this.loginAttempts >= 3;
|
||||
}
|
||||
|
||||
/**
|
||||
* Login a user based on credentials.
|
||||
* @param {object} credentials - The user credentials (username, password, captchaInput)
|
||||
* @returns {Promise<object>} The login result
|
||||
*/
|
||||
async login(credentials) {
|
||||
try {
|
||||
const response = await fetch('/auth.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(credentials)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
// If CAPTCHA is required, include it in the error
|
||||
if (data.captcha) {
|
||||
throw new Error(data.error || 'Login failed');
|
||||
} else {
|
||||
throw new Error(data.error || 'Login failed');
|
||||
}
|
||||
}
|
||||
|
||||
// Store token and user data
|
||||
this.token = data.token;
|
||||
localStorage.setItem('token', data.token);
|
||||
|
||||
// Store refresh token if available
|
||||
if (data.refreshToken) {
|
||||
localStorage.setItem('refreshToken', data.refreshToken);
|
||||
}
|
||||
|
||||
// Reset login attempts
|
||||
this.loginAttempts = 0;
|
||||
localStorage.setItem('loginAttempts', '0');
|
||||
|
||||
// Store user data
|
||||
this.user = data.user;
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
|
||||
// Store browser fingerprint
|
||||
localStorage.setItem('browserFingerprint', this.browserFingerprint);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
user: this.user
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
|
||||
// Increment login attempts
|
||||
this.loginAttempts++;
|
||||
localStorage.setItem('loginAttempts', this.loginAttempts.toString());
|
||||
|
||||
return {
|
||||
success: false,
|
||||
error: error.message,
|
||||
captcha: error.captcha
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Logout the current user
|
||||
* @param {boolean} redirect - Whether to redirect to home page after logout (default: true)
|
||||
*/
|
||||
logout(redirect = true) {
|
||||
this.token = null;
|
||||
this.user = null;
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('refreshToken');
|
||||
localStorage.removeItem('user');
|
||||
localStorage.removeItem('browserFingerprint');
|
||||
|
||||
// Redirect to home page if requested
|
||||
if (redirect) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the user is authenticated
|
||||
* @returns {boolean} True if authenticated, false otherwise
|
||||
*/
|
||||
isAuthenticated() {
|
||||
return !!this.token && !!this.user;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the user is an admin
|
||||
* @returns {boolean} True if admin, false otherwise
|
||||
*/
|
||||
isAdmin() {
|
||||
return this.isAuthenticated() && (this.user.accessLevel === 1 || this.user.accessLevel === 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current user
|
||||
* @returns {object|null} The current user or null if not authenticated
|
||||
*/
|
||||
getUser() {
|
||||
return this.user;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the authentication token
|
||||
* @returns {string|null} The token or null if not authenticated
|
||||
*/
|
||||
getToken() {
|
||||
return this.token;
|
||||
}
|
||||
|
||||
/**
|
||||
* Make an authenticated API request
|
||||
* @param {string} url - The URL to fetch
|
||||
* @param {object} options - Fetch options
|
||||
* @returns {Promise<Response>} The fetch response
|
||||
*/
|
||||
async fetchAuth(url, options = {}) {
|
||||
if (!this.token) {
|
||||
throw new Error('Not authenticated');
|
||||
}
|
||||
|
||||
const headers = {
|
||||
...options.headers,
|
||||
'Authorization': `Bearer ${this.token}`
|
||||
};
|
||||
|
||||
return fetch(url, {
|
||||
...options,
|
||||
headers
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate the current token
|
||||
* @returns {Promise<boolean>} True if token is valid, false otherwise
|
||||
*/
|
||||
async validateToken() {
|
||||
try {
|
||||
if (!this.token) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const response = await fetch('/auth.php', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${this.token}`
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
return data.valid === true;
|
||||
} catch (error) {
|
||||
console.error('Token validation error:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the access token using the refresh token
|
||||
* @returns {Promise<boolean>} True if token was refreshed, false otherwise
|
||||
*/
|
||||
async refreshToken() {
|
||||
try {
|
||||
const refreshToken = localStorage.getItem('refreshToken');
|
||||
if (!refreshToken) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const response = await fetch('/auth.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: 'refresh',
|
||||
refreshToken
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.token) {
|
||||
this.token = data.token;
|
||||
localStorage.setItem('token', data.token);
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('Token refresh error:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create a global instance and expose it
|
||||
window.auth = new Auth();
|
||||
|
||||
// Log that auth is ready
|
||||
console.log('auth is ready and exposed to window');
|
||||
|
||||
// Dispatch a custom event to notify other scripts
|
||||
window.dispatchEvent(new Event('authReady'));
|
||||
Reference in New Issue
Block a user