mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-19 12:59:39 -07:00
Plex OAuth window will now auto close
This commit is contained in:
tidusjar
parent
5585958731
commit
90da69a342
1 changed files with 218 additions and 178 deletions
|
|
@ -18,208 +18,248 @@ import { StorageService } from "../shared/storage/storage-service";
|
|||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
|
||||
@Component({
|
||||
templateUrl: "./login.component.html",
|
||||
animations: [fadeInOutAnimation],
|
||||
styleUrls: ["./login.component.scss"],
|
||||
templateUrl: "./login.component.html",
|
||||
animations: [fadeInOutAnimation],
|
||||
styleUrls: ["./login.component.scss"],
|
||||
})
|
||||
export class LoginComponent implements OnDestroy, OnInit {
|
||||
public form: FormGroup;
|
||||
public customizationSettings: ICustomizationSettings;
|
||||
public authenticationSettings: IAuthenticationSettings;
|
||||
public plexEnabled: boolean;
|
||||
public background: any;
|
||||
public landingFlag: boolean;
|
||||
public baseUrl: string;
|
||||
public loginWithOmbi: boolean;
|
||||
public pinTimer: any;
|
||||
public oauthLoading: boolean;
|
||||
|
||||
public form: FormGroup;
|
||||
public customizationSettings: ICustomizationSettings;
|
||||
public authenticationSettings: IAuthenticationSettings;
|
||||
public plexEnabled: boolean;
|
||||
public background: any;
|
||||
public landingFlag: boolean;
|
||||
public baseUrl: string;
|
||||
public loginWithOmbi: boolean;
|
||||
public pinTimer: any;
|
||||
public oauthLoading: boolean;
|
||||
public get appName(): string {
|
||||
if (this.customizationSettings.applicationName) {
|
||||
return this.customizationSettings.applicationName;
|
||||
} else {
|
||||
return "Ombi";
|
||||
}
|
||||
}
|
||||
|
||||
public get appName(): string {
|
||||
if (this.customizationSettings.applicationName) {
|
||||
return this.customizationSettings.applicationName;
|
||||
} else {
|
||||
return "Ombi";
|
||||
}
|
||||
public get appNameTranslate(): object {
|
||||
return { appName: this.appName };
|
||||
}
|
||||
private timer: any;
|
||||
private clientId: string;
|
||||
|
||||
private errorBody: string;
|
||||
private errorValidation: string;
|
||||
private href: string;
|
||||
|
||||
private oAuthWindow: Window | null;
|
||||
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
private router: Router,
|
||||
private status: StatusService,
|
||||
private fb: FormBuilder,
|
||||
private settingsService: SettingsService,
|
||||
private images: ImageService,
|
||||
private sanitizer: DomSanitizer,
|
||||
private route: ActivatedRoute,
|
||||
@Inject(APP_BASE_HREF) href: string,
|
||||
private translate: TranslateService,
|
||||
private plexTv: PlexTvService,
|
||||
private store: StorageService,
|
||||
private readonly notify: MatSnackBar
|
||||
) {
|
||||
this.href = href;
|
||||
this.route.params.subscribe((params: any) => {
|
||||
this.landingFlag = params.landing;
|
||||
if (!this.landingFlag) {
|
||||
this.settingsService.getLandingPage().subscribe((x) => {
|
||||
if (x.enabled && !this.landingFlag) {
|
||||
this.router.navigate(["landingpage"]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.form = this.fb.group({
|
||||
username: ["", Validators.required],
|
||||
password: [""],
|
||||
rememberMe: [false],
|
||||
});
|
||||
|
||||
this.status.getWizardStatus().subscribe((x) => {
|
||||
if (!x.result) {
|
||||
this.router.navigate(["Wizard"]);
|
||||
}
|
||||
});
|
||||
|
||||
if (authService.loggedIn()) {
|
||||
this.router.navigate(["/"]);
|
||||
}
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.settingsService
|
||||
.getAuthentication()
|
||||
.subscribe((x) => (this.authenticationSettings = x));
|
||||
this.settingsService.getClientId().subscribe((x) => (this.clientId = x));
|
||||
this.settingsService
|
||||
.getCustomization()
|
||||
.subscribe((x) => (this.customizationSettings = x));
|
||||
this.images.getRandomBackground().subscribe((x) => {
|
||||
this.background = this.sanitizer.bypassSecurityTrustStyle(
|
||||
"url(" + x.url + ")"
|
||||
);
|
||||
});
|
||||
this.timer = setInterval(() => {
|
||||
this.cycleBackground();
|
||||
}, 30000);
|
||||
|
||||
const base = this.href;
|
||||
if (base.length > 1) {
|
||||
this.baseUrl = base;
|
||||
}
|
||||
|
||||
public get appNameTranslate(): object {
|
||||
return { appName: this.appName };
|
||||
this.translate
|
||||
.get("Login.Errors.IncorrectCredentials")
|
||||
.subscribe((x) => (this.errorBody = x));
|
||||
this.translate
|
||||
.get("Common.Errors.Validation")
|
||||
.subscribe((x) => (this.errorValidation = x));
|
||||
}
|
||||
|
||||
public onSubmit(form: FormGroup) {
|
||||
if (form.invalid) {
|
||||
this.notify.open(this.errorValidation, "OK", {
|
||||
duration: 300000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
private timer: any;
|
||||
private clientId: string;
|
||||
const value = form.value;
|
||||
const user = {
|
||||
password: value.password,
|
||||
username: value.username,
|
||||
rememberMe: value.rememberMe,
|
||||
usePlexOAuth: false,
|
||||
plexTvPin: { id: 0, code: "" },
|
||||
};
|
||||
this.authService.requiresPassword(user).subscribe((x) => {
|
||||
if (x && this.authenticationSettings.allowNoPassword) {
|
||||
// Looks like this user requires a password
|
||||
this.authenticationSettings.allowNoPassword = false;
|
||||
return;
|
||||
}
|
||||
this.authService.login(user).subscribe(
|
||||
(x) => {
|
||||
this.store.save("id_token", x.access_token);
|
||||
|
||||
private errorBody: string;
|
||||
private errorValidation: string;
|
||||
private href: string;
|
||||
|
||||
private oAuthWindow: Window|null;
|
||||
|
||||
constructor(private authService: AuthService, private router: Router, private status: StatusService,
|
||||
private fb: FormBuilder, private settingsService: SettingsService, private images: ImageService, private sanitizer: DomSanitizer,
|
||||
private route: ActivatedRoute, @Inject(APP_BASE_HREF) href:string, private translate: TranslateService, private plexTv: PlexTvService,
|
||||
private store: StorageService, private readonly notify: MatSnackBar) {
|
||||
this.href = href;
|
||||
this.route.params
|
||||
.subscribe((params: any) => {
|
||||
this.landingFlag = params.landing;
|
||||
if (!this.landingFlag) {
|
||||
this.settingsService.getLandingPage().subscribe(x => {
|
||||
if (x.enabled && !this.landingFlag) {
|
||||
this.router.navigate(["landingpage"]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.form = this.fb.group({
|
||||
username: ["", Validators.required],
|
||||
password: [""],
|
||||
rememberMe: [false],
|
||||
});
|
||||
|
||||
this.status.getWizardStatus().subscribe(x => {
|
||||
if (!x.result) {
|
||||
this.router.navigate(["Wizard"]);
|
||||
}
|
||||
});
|
||||
|
||||
if (authService.loggedIn()) {
|
||||
if (this.authService.loggedIn()) {
|
||||
this.ngOnDestroy();
|
||||
this.router.navigate(["/"]);
|
||||
}
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.settingsService.getAuthentication().subscribe(x => this.authenticationSettings = x);
|
||||
this.settingsService.getClientId().subscribe(x => this.clientId = x);
|
||||
this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
|
||||
this.images.getRandomBackground().subscribe(x => {
|
||||
this.background = this.sanitizer.bypassSecurityTrustStyle("url(" + x.url + ")");
|
||||
});
|
||||
this.timer = setInterval(() => {
|
||||
this.cycleBackground();
|
||||
}, 30000);
|
||||
|
||||
const base = this.href;
|
||||
if (base.length > 1) {
|
||||
this.baseUrl = base;
|
||||
}
|
||||
|
||||
this.translate.get("Login.Errors.IncorrectCredentials").subscribe(x => this.errorBody = x);
|
||||
this.translate.get("Common.Errors.Validation").subscribe(x => this.errorValidation = x);
|
||||
}
|
||||
|
||||
public onSubmit(form: FormGroup) {
|
||||
if (form.invalid) {
|
||||
this.notify.open(this.errorValidation, "OK", {
|
||||
duration: 300000
|
||||
} else {
|
||||
this.notify.open(this.errorBody, "OK", {
|
||||
duration: 3000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
this.notify.open(this.errorBody, "OK", {
|
||||
duration: 3000000,
|
||||
});
|
||||
}
|
||||
const value = form.value;
|
||||
const user = { password: value.password, username: value.username, rememberMe: value.rememberMe, usePlexOAuth: false, plexTvPin: { id: 0, code: "" } };
|
||||
this.authService.requiresPassword(user).subscribe(x => {
|
||||
if (x && this.authenticationSettings.allowNoPassword) {
|
||||
// Looks like this user requires a password
|
||||
this.authenticationSettings.allowNoPassword = false;
|
||||
return;
|
||||
}
|
||||
this.authService.login(user)
|
||||
.subscribe(x => {
|
||||
this.store.save("id_token", x.access_token);
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (this.authService.loggedIn()) {
|
||||
this.ngOnDestroy();
|
||||
this.router.navigate(["/"]);
|
||||
} else {
|
||||
this.notify.open(this.errorBody, "OK", {
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
|
||||
}, err => {
|
||||
this.notify.open(this.errorBody, "OK", {
|
||||
duration: 3000000
|
||||
})
|
||||
});
|
||||
});
|
||||
public oauth() {
|
||||
if (this.oAuthWindow) {
|
||||
this.oAuthWindow.close();
|
||||
}
|
||||
|
||||
public oauth() {
|
||||
if (this.oAuthWindow) {
|
||||
this.oAuthWindow.close();
|
||||
}
|
||||
this.oAuthWindow = window.open(window.location.toString(), "_blank", `toolbar=0,
|
||||
this.oAuthWindow = window.open(
|
||||
window.location.toString(),
|
||||
"_blank",
|
||||
`toolbar=0,
|
||||
location=0,
|
||||
status=0,
|
||||
menubar=0,
|
||||
scrollbars=1,
|
||||
resizable=1,
|
||||
width=500,
|
||||
height=500`);
|
||||
this.plexTv.GetPin(this.clientId, this.appName).subscribe((pin: any) => {
|
||||
height=500`
|
||||
);
|
||||
this.plexTv.GetPin(this.clientId, this.appName).subscribe((pin: any) => {
|
||||
this.authService
|
||||
.login({
|
||||
usePlexOAuth: true,
|
||||
password: "",
|
||||
rememberMe: true,
|
||||
username: "",
|
||||
plexTvPin: pin,
|
||||
})
|
||||
.subscribe((x) => {
|
||||
this.oAuthWindow!.location.replace(x.url);
|
||||
|
||||
this.authService.login({ usePlexOAuth: true, password: "", rememberMe: true, username: "", plexTvPin: pin }).subscribe(x => {
|
||||
this.oAuthWindow!.location.replace(x.url);
|
||||
|
||||
if (this.pinTimer) {
|
||||
clearInterval(this.pinTimer);
|
||||
}
|
||||
|
||||
this.pinTimer = setInterval(() => {
|
||||
if(this.oAuthWindow.closed) {
|
||||
this.oauthLoading = true;
|
||||
this.getPinResult(x.pinId);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public getPinResult(pinId: number) {
|
||||
clearInterval(this.pinTimer);
|
||||
this.authService.oAuth(pinId).subscribe(x => {
|
||||
if(x.access_token) {
|
||||
this.store.save("id_token", x.access_token);
|
||||
|
||||
if (this.authService.loggedIn()) {
|
||||
this.ngOnDestroy();
|
||||
|
||||
if (this.oAuthWindow) {
|
||||
this.oAuthWindow.close();
|
||||
}
|
||||
this.oauthLoading = false;
|
||||
this.router.navigate(["search"]);
|
||||
return;
|
||||
}
|
||||
if (this.pinTimer) {
|
||||
clearInterval(this.pinTimer);
|
||||
}
|
||||
this.notify.open("Could not log you in!", "OK", {
|
||||
duration: 3000
|
||||
|
||||
this.pinTimer = setInterval(() => {
|
||||
this.oauthLoading = true;
|
||||
this.getPinResult(x.pinId);
|
||||
}, 1000);
|
||||
});
|
||||
this.oauthLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
}, err => {
|
||||
console.log(err);
|
||||
this.notify.open(err.body, "OK", {
|
||||
duration: 3000
|
||||
});
|
||||
public getPinResult(pinId: number) {
|
||||
this.authService.oAuth(pinId).subscribe(
|
||||
(x) => {
|
||||
if (x.access_token) {
|
||||
clearInterval(this.pinTimer);
|
||||
this.store.save("id_token", x.access_token);
|
||||
|
||||
this.router.navigate(["login"]);
|
||||
});
|
||||
}
|
||||
if (this.authService.loggedIn()) {
|
||||
this.ngOnDestroy();
|
||||
|
||||
public ngOnDestroy() {
|
||||
clearInterval(this.timer);
|
||||
clearInterval(this.pinTimer);
|
||||
}
|
||||
|
||||
private cycleBackground() {
|
||||
this.images.getRandomBackground().subscribe(x => {
|
||||
this.background = "";
|
||||
if (this.oAuthWindow) {
|
||||
this.oAuthWindow.close();
|
||||
}
|
||||
this.oauthLoading = false;
|
||||
this.router.navigate(["search"]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
// if (notifyUser) {
|
||||
// this.notify.open("Could not log you in!", "OK", {
|
||||
// duration: 3000,
|
||||
// });
|
||||
// }
|
||||
this.oauthLoading = false;
|
||||
},
|
||||
(err) => {
|
||||
console.log(err);
|
||||
this.notify.open("You are not authenticated with Ombi", "OK", {
|
||||
duration: 3000,
|
||||
});
|
||||
this.images.getRandomBackground().subscribe(x => {
|
||||
this.background = this.sanitizer
|
||||
.bypassSecurityTrustStyle("url(" + x.url + ")");
|
||||
});
|
||||
}
|
||||
|
||||
this.router.navigate(["login"]);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
public ngOnDestroy() {
|
||||
clearInterval(this.timer);
|
||||
clearInterval(this.pinTimer);
|
||||
}
|
||||
|
||||
private cycleBackground() {
|
||||
this.images.getRandomBackground().subscribe((x) => {
|
||||
this.background = "";
|
||||
});
|
||||
this.images.getRandomBackground().subscribe((x) => {
|
||||
this.background = this.sanitizer.bypassSecurityTrustStyle(
|
||||
"url(" + x.url + ")"
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue