mirror of https://github.com/muety/wakapi.git
133 lines
8.9 KiB
HTML
133 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
{{ template "head.tpl.html" . }}
|
|
|
|
<body class="bg-gray-900 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-lg mx-auto justify-center">
|
|
|
|
{{ template "header.tpl.html" . }}
|
|
|
|
{{ template "alerts.tpl.html" . }}
|
|
|
|
<main class="mt-10 flex-grow flex justify-center w-full">
|
|
<div class="flex-grow max-w-lg mt-10">
|
|
<div class="mb-8">
|
|
<h1 class="font-semibold text-2xl text-white m-0 mb-2">Sign up to Wakapi</h1>
|
|
<p class="text-sm text-gray-600">
|
|
Welcome to Wakapi! Your first step is to create an account.
|
|
Afterwards, make sure to set up the <a href="https://wakatime.com" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-gray-400">WakaTime</a> client tools.
|
|
Instruction can be found in our <a href="https://github.com/muety/wakapi#-client-setup" target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-gray-300 hover:text-gray-400">README</a>.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
|
|
</div>
|
|
|
|
<form class="mt-10" action="signup" method="post">
|
|
<input type="hidden" name="location" id="input-location">
|
|
|
|
<div class="flex space-x-4">
|
|
<div class="mt-1">
|
|
<img id="avatar" src="assets/images/unknown.svg" width="96px" class="rounded-full border-4 border-green-700 cursor-pointer" alt="User Profile Avatar" title="Your Avatar"/>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="mb-4">
|
|
<input class="appearance-none bg-gray-850 focus:bg-gray-800 text-gray-300 outline-none rounded w-full py-2 px-4"
|
|
type="text" id="username"
|
|
name="username" placeholder="Choose a username" minlength="1"
|
|
onkeyup="updateAvatar()"
|
|
required autofocus>
|
|
</div>
|
|
<div class="mb-4">
|
|
<input class="appearance-none bg-gray-850 focus:bg-gray-800 text-gray-300 outline-none rounded w-full py-2 px-4"
|
|
type="email" id="email"
|
|
name="email" onkeyup="updateAvatar()" placeholder="Your e-mail address">
|
|
<div class="text-xs text-gray-600 mt-2">E-Mail address is optional, but required for some weekly reports and password reset.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<input class="appearance-none bg-gray-850 focus:bg-gray-800 text-gray-300 outline-none rounded w-full py-2 px-4"
|
|
type="password" id="password"
|
|
name="password" placeholder="Choose a password" minlength="6" required>
|
|
</div>
|
|
<div class="mb-4">
|
|
<input class="appearance-none bg-gray-850 focus:bg-gray-800 text-gray-300 outline-none rounded w-full py-2 px-4"
|
|
type="password" id="password_repeat"
|
|
name="password_repeat" placeholder="And again..." minlength="6" required>
|
|
</div>
|
|
|
|
{{ if eq .TotalUsers 0 }}
|
|
<p class="text-sm text-gray-300 mt-4 mb-8">
|
|
⚠️ <strong>Please note: </strong> Since there are no users registered in the system, yet, the first user will have administrative privileges, while additional users won't.
|
|
</p>
|
|
{{ end }}
|
|
|
|
<div class="flex space-x-2 justify-end">
|
|
<a href="login">
|
|
<button type="button" class="py-2 px-4 font-semibold rounded bg-gray-800 hover:bg-gray-850 text-white text-sm">Log in</button>
|
|
</a>
|
|
<button type="submit" class="py-2 px-4 font-semibold rounded bg-green-700 hover:bg-green-800 text-white text-sm">
|
|
Create Account
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
{{ template "footer.tpl.html" . }}
|
|
|
|
{{ template "foot.tpl.html" . }}
|
|
|
|
<script type="text/javascript">
|
|
// @formatter:off
|
|
const MD5 = function(d){var r = M(V(Y(X(d),8*d.length)));return r.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function V(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){var h=m,t=f,g=r,e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){var m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}
|
|
|
|
function guessTimezone() {
|
|
return Intl.DateTimeFormat().resolvedOptions().timeZone
|
|
}
|
|
|
|
document.getElementById('input-location').setAttribute('value', guessTimezone())
|
|
|
|
// Avatar
|
|
|
|
let debounceTimeout
|
|
const avatarEl = document.getElementById('avatar')
|
|
const usernameInput = document.getElementById('username')
|
|
const emailInput = document.getElementById('email')
|
|
const defaultAvatarUrl = 'assets/images/unknown.svg'
|
|
const avatarUrlTemplate = {{ avatarUrlTemplate }}
|
|
|
|
function updateAvatar() {
|
|
if (!avatarUrlTemplate) return
|
|
|
|
if (debounceTimeout) {
|
|
clearTimeout(debounceTimeout)
|
|
}
|
|
|
|
debounceTimeout = setTimeout(() => {
|
|
let url = avatarUrlTemplate
|
|
|
|
if ((url.includes('{username') && !usernameInput.value) || (url.includes('{email') && !emailInput.value)) {
|
|
url = defaultAvatarUrl
|
|
} else {
|
|
url = url.replaceAll('{username}', usernameInput.value)
|
|
url = url.replaceAll('{email}', emailInput.value)
|
|
url = url.replaceAll('{username_hash}', MD5(usernameInput.value))
|
|
url = url.replaceAll('{email_hash}', MD5(emailInput.value))
|
|
url = url.includes('{') ? defaultAvatarUrl : url
|
|
}
|
|
|
|
avatarEl.src = url
|
|
}, 500)
|
|
|
|
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |