55 lines
2.3 KiB
JavaScript
55 lines
2.3 KiB
JavaScript
import Phaser from 'phaser';
|
|
import { GAME_HEIGHT, GAME_WIDTH, COLORS } from '../config.js';
|
|
import { auth } from '../services/auth.js';
|
|
import { Button } from '../ui/Button.js';
|
|
import { TextInput } from '../ui/TextInput.js';
|
|
import { Modal } from '../ui/Modal.js';
|
|
|
|
export default class RegisterScene extends Phaser.Scene {
|
|
constructor() { super('Register'); }
|
|
|
|
create() {
|
|
const cx = GAME_WIDTH / 2;
|
|
|
|
this.add.text(cx, 180, 'Create account', {
|
|
fontFamily: 'system-ui, sans-serif',
|
|
fontSize: '64px',
|
|
color: COLORS.textHex,
|
|
}).setOrigin(0.5);
|
|
|
|
this.add.text(cx - 180, 300, 'Email', { fontSize: '22px', color: COLORS.mutedHex }).setOrigin(0, 0.5);
|
|
const emailInput = new TextInput(this, cx, 340, { width: 480, type: 'email', autocomplete: 'email' });
|
|
|
|
this.add.text(cx - 180, 420, 'Username', { fontSize: '22px', color: COLORS.mutedHex }).setOrigin(0, 0.5);
|
|
const usernameInput = new TextInput(this, cx, 460, { width: 480, autocomplete: 'username' });
|
|
|
|
this.add.text(cx - 180, 540, 'Password (min 8 chars)', { fontSize: '22px', color: COLORS.mutedHex }).setOrigin(0, 0.5);
|
|
const passwordInput = new TextInput(this, cx, 580, { width: 480, type: 'password', autocomplete: 'new-password' });
|
|
|
|
const submit = new Button(this, cx, 700, 'Create account', () => this.attempt(emailInput, usernameInput, passwordInput, submit));
|
|
new Button(this, cx, 780, 'Already have an account?', () => this.scene.start('Login'), { variant: 'ghost' });
|
|
new Button(this, cx, 860, 'Back', () => this.scene.start('Landing'), { variant: 'ghost' });
|
|
|
|
this.input.keyboard.on('keydown-ENTER', () => this.attempt(emailInput, usernameInput, passwordInput, submit));
|
|
}
|
|
|
|
async attempt(emailInput, usernameInput, passwordInput, button) {
|
|
button.setEnabled(false);
|
|
try {
|
|
const result = await auth.register({
|
|
email: emailInput.value.trim(),
|
|
username: usernameInput.value.trim(),
|
|
password: passwordInput.value,
|
|
});
|
|
this.scene.start('Verify', { verification: result.verification });
|
|
} catch (err) {
|
|
const messages = err.data?.errors
|
|
? Object.values(err.data.errors).join('\n')
|
|
: err.message ?? 'Sign up failed.';
|
|
new Modal(this, messages, { color: COLORS.dangerHex, autoCloseMs: 3000 });
|
|
} finally {
|
|
button.setEnabled(true);
|
|
}
|
|
}
|
|
}
|