Adding a math check for logins (until we get a proper captcha).

pull/885/head
Dessalines 2020-07-01 21:48:29 -04:00
parent 8d49dc958e
commit d22152eefd
2 changed files with 49 additions and 3 deletions

View File

@ -20,6 +20,11 @@ interface State {
loginLoading: boolean; loginLoading: boolean;
registerLoading: boolean; registerLoading: boolean;
enable_nsfw: boolean; enable_nsfw: boolean;
mathQuestion: {
a: number;
b: number;
answer: number;
};
} }
export class Login extends Component<any, State> { export class Login extends Component<any, State> {
@ -40,6 +45,11 @@ export class Login extends Component<any, State> {
loginLoading: false, loginLoading: false,
registerLoading: false, registerLoading: false,
enable_nsfw: undefined, enable_nsfw: undefined,
mathQuestion: {
a: Math.floor(Math.random() * 10) + 1,
b: Math.floor(Math.random() * 10) + 1,
answer: undefined,
},
}; };
constructor(props: any, context: any) { constructor(props: any, context: any) {
@ -215,6 +225,23 @@ export class Login extends Component<any, State> {
/> />
</div> </div>
</div> </div>
<div class="form-group row">
<label class="col-sm-10 col-form-label" htmlFor="register-math">
{i18n.t('what_is')}{' '}
{`${this.state.mathQuestion.a} + ${this.state.mathQuestion.b}?`}
</label>
<div class="col-sm-2">
<input
type="number"
id="register-math"
class="form-control"
value={this.state.mathQuestion.answer}
onInput={linkEvent(this, this.handleMathAnswerChange)}
required
/>
</div>
</div>
{this.state.enable_nsfw && ( {this.state.enable_nsfw && (
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-10"> <div class="col-sm-10">
@ -235,7 +262,11 @@ export class Login extends Component<any, State> {
)} )}
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-10"> <div class="col-sm-10">
<button type="submit" class="btn btn-secondary"> <button
type="submit"
class="btn btn-secondary"
disabled={this.mathCheck}
>
{this.state.registerLoading ? ( {this.state.registerLoading ? (
<svg class="icon icon-spinner spin"> <svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use> <use xlinkHref="#icon-spinner"></use>
@ -272,7 +303,9 @@ export class Login extends Component<any, State> {
i.state.registerLoading = true; i.state.registerLoading = true;
i.setState(i.state); i.setState(i.state);
WebSocketService.Instance.register(i.state.registerForm); if (!i.mathCheck) {
WebSocketService.Instance.register(i.state.registerForm);
}
} }
handleRegisterUsernameChange(i: Login, event: any) { handleRegisterUsernameChange(i: Login, event: any) {
@ -303,6 +336,11 @@ export class Login extends Component<any, State> {
i.setState(i.state); i.setState(i.state);
} }
handleMathAnswerChange(i: Login, event: any) {
i.state.mathQuestion.answer = event.target.value;
i.setState(i.state);
}
handlePasswordReset(i: Login) { handlePasswordReset(i: Login) {
event.preventDefault(); event.preventDefault();
let resetForm: PasswordResetForm = { let resetForm: PasswordResetForm = {
@ -311,6 +349,13 @@ export class Login extends Component<any, State> {
WebSocketService.Instance.passwordReset(resetForm); WebSocketService.Instance.passwordReset(resetForm);
} }
get mathCheck(): boolean {
return (
this.state.mathQuestion.answer !=
this.state.mathQuestion.a + this.state.mathQuestion.b
);
}
parseMessage(msg: WebSocketJsonResponse) { parseMessage(msg: WebSocketJsonResponse) {
let res = wsJsonToRes(msg); let res = wsJsonToRes(msg);
if (msg.error) { if (msg.error) {

View File

@ -264,5 +264,6 @@
"time": "Time", "time": "Time",
"action": "Action", "action": "Action",
"emoji_picker": "Emoji Picker", "emoji_picker": "Emoji Picker",
"block_leaving": "Are you sure you want to leave?" "block_leaving": "Are you sure you want to leave?",
"what_is": "What is"
} }