mirror/mCaptcha
1
0
Fork 1
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2026-02-11 10:05:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

frontend toolchain config and registration

Browse Source
This commit is contained in:
realaravinth
2021-04-02 20:35:06 +05:30
parent 584d43c34a
commit ecc0076cdd
23 changed files with 9320 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/img/icon-trans.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

BIN
static/img/icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 455 KiB

193
static/login/index.html
View File

@@ -1,193 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login | mCaptcha</title>
</head>
<body>
<img src="/img/icon-trans.png" class="form__logo" alt="" />
<h2 class="form__brand">Sign in to mCaptcha</h2>
<div class="form-container">
<form class="form__box">
<label class="form__in-group" for="username"
>Username
<input
class="form__in-field"
id="username"
type="text"
name="username"
id="username"
required
/>
</label>
<label for="password" class="form__in-group"
>Password
<input
class="form__in-field"
type="password"
id="password"
name="password"
id="password"
required
/>
<!--
<a class="form__pw-recovery" -href="/recovert/password"
>Forgot password?</a
>
-->
</label>
<button class="form__submit-button" type="submit">
Submit
</button>
</form>
<div class="form__secondary-action">
<p class="form__secondary-action__banner">New to mCaptcha? <a href="/signup" class="form__secondary-action__link">Create account</a></p>
</div>
</div>
<script>
export const SUBMIT = '/api/v1/signup';
export const isBlankString = (event, value, field) => {
if (!value.replace(/\s/g, '').length) {
event.preventDefautl()
alert(`${field} can't be empty`);
}
};
const genJsonPayload = payload => {
let value = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(payload),
};
return value;
};
const submit = async e => {
let name = document.getElementById('username').value;
isBlankString(e, name, 'username');
let password = document.getElementById('password').value;
isBlankString(e, email, 'email');
let payload = {
username,
password
}
fetch(SUBMIT, genJsonPayload(payload)).then(resp => {
if (resp.ok) {
aslert('signed in');
} else {
resp.json().then(err => alert(`Error ${resp.error}`));
}
});
};
let form = document.getElementById('form');
form.addEventListener('submit', submit, true);
</script>
</body>
<style>
* {
padding: 0;
margin: 0;
}
.form__logo {
width: 120px;
padding-top: 50px;
display: block;
margin: auto;
}
.form__brand {
padding: 10px 0;
text-align: center;
}
.form-container {
max-width: 40%;
min-width: 20%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -49.9%);
box-sizing: border-box;
margin: auto;
padding: 20px 0;
}
.form__box {
border: 1px solid #eaecef;
background-color: #f6f8fa;
border-radius: 5px;
padding: 20px 0;
}
.form__in-group {
display: block;
position: relative;
margin: auto;
max-width: 80%;
padding: 10px 0px;
box-sizing: content-box;
align-items: center;
align-content: center;
}
.form__in-field {
display: block;
box-sizing: border-box;
margin: 10px 0;
padding: 10px 0;
width: 100%;
}
.form__pw-recovery {
text-decoration: none;
color: rgb(3, 102, 214);
font-size: 0.8rem;
}
.form__submit-button {
display: block;
border: 1px solid skyblue;
background: #2ea44f;
color: white;
height: 40px;
border-radius: 5px;
width: 80%;
margin: auto;
}
.form__secondary-action {
display: block;
margin-top: 10px;
}
.form__secondary-action__banner {
display: block;
margin: auto;
max-width: 80%;
text-align: center;
}
.form__secondary-action__link{
text-decoration: none;
color: rgb(3, 102, 214);
}
</style>
</html>