diff options
author | Dessalines <tyhou13@gmx.com> | 2019-04-16 16:04:23 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-04-16 16:04:23 -0700 |
commit | 3f33cf8dcb53d20e67d8abc9214c7192a28dca94 (patch) | |
tree | aab1da1b0eb54d6d0cb1e00f4f38cb218901ac53 /ui/src/components/setup.tsx | |
parent | e94885eb97b3240ed9cec7f97d0f405b2819e922 (diff) |
Before big moderation merge
Diffstat (limited to 'ui/src/components/setup.tsx')
-rw-r--r-- | ui/src/components/setup.tsx | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/ui/src/components/setup.tsx b/ui/src/components/setup.tsx new file mode 100644 index 00000000..94480ee8 --- /dev/null +++ b/ui/src/components/setup.tsx @@ -0,0 +1,147 @@ +import { Component, linkEvent } from 'inferno'; +import { Subscription } from "rxjs"; +import { retryWhen, delay, take } from 'rxjs/operators'; +import { RegisterForm, LoginResponse, UserOperation } from '../interfaces'; +import { WebSocketService, UserService } from '../services'; +import { msgOp } from '../utils'; +import { SiteForm } from './site-form'; + +interface State { + userForm: RegisterForm; + doneRegisteringUser: boolean; + userLoading: boolean; +} + +export class Setup extends Component<any, State> { + private subscription: Subscription; + + private emptyState: State = { + userForm: { + username: undefined, + password: undefined, + password_verify: undefined, + admin: true, + }, + doneRegisteringUser: false, + userLoading: false, + } + + + constructor(props: any, context: any) { + super(props, context); + + this.state = this.emptyState; + + this.subscription = WebSocketService.Instance.subject + .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) + .subscribe( + (msg) => this.parseMessage(msg), + (err) => console.error(err), + () => console.log("complete") + ); + } + + componentWillUnmount() { + this.subscription.unsubscribe(); + } + + render() { + return ( + <div class="container"> + <div class="row"> + <div class="col-12 offset-lg-3 col-lg-6"> + <h3>Lemmy Instance Setup</h3> + {!this.state.doneRegisteringUser ? this.registerUser() : <SiteForm />} + </div> + </div> + </div> + ) + } + + registerUser() { + return ( + <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}> + <h4>Set up Site Administrator</h4> + <div class="form-group row"> + <label class="col-sm-2 col-form-label">Username</label> + <div class="col-sm-10"> + <input type="text" class="form-control" value={this.state.userForm.username} onInput={linkEvent(this, this.handleRegisterUsernameChange)} required minLength={3} pattern="[a-zA-Z0-9_]+" /> + </div> + </div> + <div class="form-group row"> + <label class="col-sm-2 col-form-label">Email</label> + <div class="col-sm-10"> + <input type="email" class="form-control" placeholder="Optional" value={this.state.userForm.email} onInput={linkEvent(this, this.handleRegisterEmailChange)} minLength={3} /> + </div> + </div> + <div class="form-group row"> + <label class="col-sm-2 col-form-label">Password</label> + <div class="col-sm-10"> + <input type="password" value={this.state.userForm.password} onInput={linkEvent(this, this.handleRegisterPasswordChange)} class="form-control" required /> + </div> + </div> + <div class="form-group row"> + <label class="col-sm-2 col-form-label">Verify Password</label> + <div class="col-sm-10"> + <input type="password" value={this.state.userForm.password_verify} onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)} class="form-control" required /> + </div> + </div> + <div class="form-group row"> + <div class="col-sm-10"> + <button type="submit" class="btn btn-secondary">{this.state.userLoading ? + <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : 'Sign Up'}</button> + + </div> + </div> + </form> + ); + } + + + handleRegisterSubmit(i: Setup, event: any) { + event.preventDefault(); + i.state.userLoading = true; + i.setState(i.state); + event.preventDefault(); + WebSocketService.Instance.register(i.state.userForm); + } + + handleRegisterUsernameChange(i: Setup, event: any) { + i.state.userForm.username = event.target.value; + i.setState(i.state); + } + + handleRegisterEmailChange(i: Setup, event: any) { + i.state.userForm.email = event.target.value; + i.setState(i.state); + } + + handleRegisterPasswordChange(i: Setup, event: any) { + i.state.userForm.password = event.target.value; + i.setState(i.state); + } + + handleRegisterPasswordVerifyChange(i: Setup, event: any) { + i.state.userForm.password_verify = event.target.value; + i.setState(i.state); + } + + parseMessage(msg: any) { + let op: UserOperation = msgOp(msg); + if (msg.error) { + alert(msg.error); + this.state.userLoading = false; + this.setState(this.state); + return; + } else if (op == UserOperation.Register) { + this.state.userLoading = false; + this.state.doneRegisteringUser = true; + let res: LoginResponse = msg; + UserService.Instance.login(res); + console.log(res); + this.setState(this.state); + } else if (op == UserOperation.CreateSite) { + this.props.history.push('/'); + } + } +} |