migration of the register page to the dedicated panel
This commit is contained in:
Nicolas Constant
parent
0c9994849c
commit
89f4483bc2
|
|
@ -1,3 +1,12 @@
|
|||
<p>
|
||||
add-new-account works!
|
||||
</p>
|
||||
<div class="panel">
|
||||
<h3 class="panel__title">Add new account</h3>
|
||||
|
||||
<form (ngSubmit)="onSubmit()">
|
||||
<label>Please provide your account:</label>
|
||||
<input type="text" class="form-control form-control-sm" [(ngModel)]="mastodonFullHandle" name="mastodonFullHandle"
|
||||
placeholder="@nickname@mastodon.social" />
|
||||
<br />
|
||||
<button type="submit" class="btn btn-success btn-sm">Submit</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import "variables";
|
||||
@import "panel";
|
||||
|
|
@ -1,15 +1,82 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { RegisteredAppsStateModel, AppInfo, AddRegisteredApp } from '../../../states/registered-apps.state';
|
||||
import { AuthService, CurrentAuthProcess } from '../../../services/auth.service';
|
||||
import { Store } from '@ngxs/store';
|
||||
import { AppData } from '../../../services/models/mastodon.interfaces';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-new-account',
|
||||
templateUrl: './add-new-account.component.html',
|
||||
styleUrls: ['./add-new-account.component.scss']
|
||||
selector: 'app-add-new-account',
|
||||
templateUrl: './add-new-account.component.html',
|
||||
styleUrls: ['./add-new-account.component.scss']
|
||||
})
|
||||
export class AddNewAccountComponent implements OnInit {
|
||||
@Input() mastodonFullHandle: string;
|
||||
|
||||
constructor() { }
|
||||
constructor(
|
||||
private readonly authService: AuthService,
|
||||
private readonly store: Store) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
onSubmit(): boolean {
|
||||
let fullHandle = this.mastodonFullHandle.split('@').filter(x => x != null && x !== '');
|
||||
|
||||
const username = fullHandle[0];
|
||||
const instance = fullHandle[1];
|
||||
|
||||
this.checkAndCreateApplication(instance)
|
||||
.then((appData: AppData) => {
|
||||
this.redirectToInstanceAuthPage(username, instance, appData);
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
private checkAndCreateApplication(instance: string): Promise<AppData> {
|
||||
const alreadyRegisteredApps = this.getAllSavedApps();
|
||||
const instanceApps = alreadyRegisteredApps.filter(x => x.instance === instance);
|
||||
|
||||
if (instanceApps.length !== 0) {
|
||||
console.log('instance already registered');
|
||||
return Promise.resolve(instanceApps[0].app);
|
||||
} else {
|
||||
console.log('instance not registered');
|
||||
const redirect_uri = this.getLocalHostname() + '/register';
|
||||
return this.authService.createNewApplication(instance, 'Sengi', redirect_uri, 'read write follow', 'https://github.com/NicolasConstant/sengi')
|
||||
.then((appData: AppData) => {
|
||||
return this.saveNewApp(instance, appData)
|
||||
.then(() => { return appData; });
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
private getAllSavedApps(): AppInfo[] {
|
||||
const snapshot = <RegisteredAppsStateModel>this.store.snapshot().registeredapps;
|
||||
return snapshot.apps;
|
||||
}
|
||||
|
||||
private redirectToInstanceAuthPage(username: string, instance: string, app: AppData) {
|
||||
const appDataTemp = new CurrentAuthProcess(username, instance);
|
||||
localStorage.setItem('tempAuth', JSON.stringify(appDataTemp));
|
||||
|
||||
let instanceUrl = this.authService.getInstanceLoginUrl(instance, app.client_id, app.redirect_uri);
|
||||
|
||||
window.location.href = instanceUrl;
|
||||
}
|
||||
|
||||
private getLocalHostname(): string {
|
||||
let localHostname = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
|
||||
return localHostname;
|
||||
}
|
||||
|
||||
private saveNewApp(instance: string, app: AppData): Promise<any> {
|
||||
const appInfo = new AppInfo();
|
||||
appInfo.instance = instance;
|
||||
appInfo.app = app;
|
||||
|
||||
return this.store.dispatch([
|
||||
new AddRegisteredApp(appInfo)
|
||||
]).toPromise();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<p>
|
||||
message-editor works!
|
||||
</p>
|
||||
<div class="panel">
|
||||
<h3 class="panel__title">new message</h3>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import "variables";
|
||||
@import "panel";
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="account-editor">
|
||||
<h3 class="account-editor__title">Manage Account</h3>
|
||||
<div class="panel">
|
||||
<h3 class="panel__title">Manage Account</h3>
|
||||
|
||||
<div class="account-editor__display-avatar">
|
||||
<img class="account-editor__avatar" src="{{account.avatar}}" title="{{ account.username }} " />
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
@import "variables";
|
||||
@import "panel";
|
||||
.account-editor {
|
||||
padding: 10px 10px 0 7px;
|
||||
font-size: $small-font-size;
|
||||
&__title {
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
margin: 6px 0 12px 0;
|
||||
}
|
||||
// padding: 10px 10px 0 7px;
|
||||
// font-size: $small-font-size;
|
||||
// &__title {
|
||||
// font-size: 13px;
|
||||
// text-transform: uppercase;
|
||||
// margin: 6px 0 12px 0;
|
||||
// }
|
||||
&__display-avatar {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<p>
|
||||
search works!
|
||||
</p>
|
||||
<div class="panel">
|
||||
<h3 class="panel__title">search</h3>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import "variables";
|
||||
@import "panel";
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
<p>
|
||||
settings works!
|
||||
</p>
|
||||
<div class="panel">
|
||||
<h3 class="panel__title">settings</h3>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import "variables";
|
||||
@import "panel";
|
||||
|
|
@ -3,18 +3,12 @@
|
|||
<a class="btn btn-info btn-sm" href title="close" [routerLink]="['/home']" role="button" style="float: right;">close</a>
|
||||
<h3>Add new account</h3>
|
||||
<br/>
|
||||
<form (ngSubmit)="onSubmit()">
|
||||
<!-- <form (ngSubmit)="onSubmit()">
|
||||
<label>Mastodon account</label>
|
||||
<input type="text" class="form-control form-control-sm" [(ngModel)]="mastodonFullHandle" name="mastodonFullHandle" placeholder="@nickname@mastodon.social"/>
|
||||
<!-- <br />
|
||||
<label>Email</label>
|
||||
<input type="text" class="form-control form-control-sm" [(ngModel)]="email" name="email" />
|
||||
<br />
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control form-control-sm" [(ngModel)]="password" name="password" />-->
|
||||
<br/>
|
||||
<button type="submit" class="btn btn-success btn-sm">Submit</button>
|
||||
</form>
|
||||
</form> -->
|
||||
|
||||
<!-- <p>
|
||||
<br/>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Store, Select } from '@ngxs/store';
|
|||
import { ActivatedRoute } from "@angular/router";
|
||||
import { Observable } from "rxjs";
|
||||
|
||||
import { AuthService } from "../../services/auth.service";
|
||||
import { AuthService, CurrentAuthProcess } from "../../services/auth.service";
|
||||
import { TokenData, AppData } from "../../services/models/mastodon.interfaces";
|
||||
import { AddRegisteredApp, RegisteredAppsState, RegisteredAppsStateModel, AppInfo } from "../../states/registered-apps.state";
|
||||
import { AccountInfo, AddAccount } from "../../states/accounts.state";
|
||||
|
|
@ -17,7 +17,6 @@ import { MastodonService } from "../../services/mastodon.service";
|
|||
export class RegisterNewAccountComponent implements OnInit {
|
||||
@Input() mastodonFullHandle: string;
|
||||
result: string;
|
||||
// registeredApps$: Observable<RegisteredAppsStateModel>;
|
||||
|
||||
private authStorageKey: string = 'tempAuth';
|
||||
|
||||
|
|
@ -26,8 +25,6 @@ export class RegisterNewAccountComponent implements OnInit {
|
|||
private readonly store: Store,
|
||||
private readonly activatedRoute: ActivatedRoute) {
|
||||
|
||||
// this.registeredApps$ = this.store.select(state => state.registeredapps.registeredApps);
|
||||
|
||||
this.activatedRoute.queryParams.subscribe(params => {
|
||||
const code = params['code'];
|
||||
if (!code) return;
|
||||
|
|
@ -51,81 +48,14 @@ export class RegisterNewAccountComponent implements OnInit {
|
|||
localStorage.removeItem(this.authStorageKey);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// this.registeredApps$.subscribe(x => {
|
||||
// console.error('registeredApps$')
|
||||
// console.warn(x);
|
||||
// });
|
||||
}
|
||||
|
||||
onSubmit(): boolean {
|
||||
let fullHandle = this.mastodonFullHandle.split('@').filter(x => x != null && x !== '');
|
||||
|
||||
const username = fullHandle[0];
|
||||
const instance = fullHandle[1];
|
||||
|
||||
this.checkAndCreateApplication(instance)
|
||||
.then((appData: AppData) => {
|
||||
this.redirectToInstanceAuthPage(username, instance, appData);
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
private checkAndCreateApplication(instance: string): Promise<AppData> {
|
||||
const alreadyRegisteredApps = this.getAllSavedApps();
|
||||
const instanceApps = alreadyRegisteredApps.filter(x => x.instance === instance);
|
||||
|
||||
if (instanceApps.length !== 0) {
|
||||
console.log('instance already registered');
|
||||
return Promise.resolve(instanceApps[0].app);
|
||||
} else {
|
||||
console.log('instance not registered');
|
||||
const redirect_uri = this.getLocalHostname() + '/register';
|
||||
return this.authService.createNewApplication(instance, 'Sengi', redirect_uri, 'read write follow', 'https://github.com/NicolasConstant/sengi')
|
||||
.then((appData: AppData) => {
|
||||
return this.saveNewApp(instance, appData)
|
||||
.then(() => { return appData; });
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
private getLocalHostname(): string {
|
||||
let localHostname = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
|
||||
return localHostname;
|
||||
}
|
||||
|
||||
private getAllSavedApps(): AppInfo[] {
|
||||
const snapshot = <RegisteredAppsStateModel>this.store.snapshot().registeredapps;
|
||||
return snapshot.apps;
|
||||
}
|
||||
|
||||
private saveNewApp(instance: string, app: AppData): Promise<any> {
|
||||
const appInfo = new AppInfo();
|
||||
appInfo.instance = instance;
|
||||
appInfo.app = app;
|
||||
|
||||
return this.store.dispatch([
|
||||
new AddRegisteredApp(appInfo)
|
||||
]).toPromise();
|
||||
}
|
||||
|
||||
private redirectToInstanceAuthPage(username: string, instance: string, app: AppData) {
|
||||
const appDataTemp = new CurrentAuthProcess(username, instance);
|
||||
localStorage.setItem('tempAuth', JSON.stringify(appDataTemp));
|
||||
|
||||
let instanceUrl = this.authService.getInstanceLoginUrl(instance, app.client_id, app.redirect_uri);
|
||||
// let instanceUrl = `https://${instance}/oauth/authorize?scope=${encodeURIComponent('read write follow')}&response_type=code&redirect_uri=${encodeURIComponent(app.redirect_uri)}&client_id=${app.client_id}`;
|
||||
|
||||
window.location.href = instanceUrl;
|
||||
}
|
||||
}
|
||||
|
||||
class CurrentAuthProcess {
|
||||
constructor(public username: string, public instance: string) { }
|
||||
}
|
||||
|
|
@ -34,3 +34,7 @@ export class AuthService {
|
|||
return this.httpClient.post<AppData>(url, formData).toPromise();
|
||||
}
|
||||
}
|
||||
|
||||
export class CurrentAuthProcess {
|
||||
constructor(public username: string, public instance: string) { }
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.panel{
|
||||
padding: 10px 10px 0 7px;
|
||||
font-size: $small-font-size;
|
||||
&__title {
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
margin: 6px 0 12px 0;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue