-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
**Note**: Yes, the imports being on multiple lines is really annoying. No, unfortunately there is no way around this currently :( prettier/prettier#5995
- Loading branch information
Showing
10 changed files
with
168 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,27 @@ | ||
.auth-container { | ||
font-size: x-large; | ||
width: 100%; | ||
height: 100%; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
flex-direction: column; | ||
font-size: x-large; | ||
width: 100%; | ||
height: 100%; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
flex-direction: column; | ||
} | ||
|
||
.login-button { | ||
width: 200px; | ||
height: 100px; | ||
font-size: x-large; | ||
margin-top: 5px; | ||
background: white; | ||
color: black; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
width: 200px; | ||
height: 100px; | ||
font-size: x-large; | ||
margin-top: 5px; | ||
background: white; | ||
color: black; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.qr-code { | ||
width: 300px; | ||
height: 300px; | ||
display: none; | ||
} | ||
width: 300px; | ||
height: 300px; | ||
display: none; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,77 +1,87 @@ | ||
import { FSComponent, DisplayComponent, VNode, Subject, ComputedSubject, MappedSubject, Subscription, ComponentProps, EventBus } from '@microsoft/msfs-sdk'; | ||
import { | ||
ComponentProps, | ||
ComputedSubject, | ||
DisplayComponent, | ||
EventBus, | ||
FSComponent, | ||
MappedSubject, | ||
Subject, | ||
Subscription, | ||
VNode, | ||
} from "@microsoft/msfs-sdk" | ||
import { CancelToken, DeviceFlowParams, User } from "navigraph/auth" | ||
import { AuthService } from '../Services/AuthService'; | ||
import './NavigraphLogin.css' | ||
import { AuthService } from "../Services/AuthService" | ||
import "./NavigraphLogin.css" | ||
|
||
interface NavigraphLoginProps extends ComponentProps { | ||
bus: EventBus; | ||
bus: EventBus | ||
} | ||
|
||
export class NavigraphLogin extends DisplayComponent<NavigraphLoginProps> { | ||
private readonly textRef = FSComponent.createRef<HTMLDivElement>(); | ||
private readonly buttonRef = FSComponent.createRef<HTMLButtonElement>(); | ||
private readonly qrCodeRef = FSComponent.createRef<HTMLImageElement>(); | ||
|
||
private cancelSource = CancelToken.source() | ||
private readonly textRef = FSComponent.createRef<HTMLDivElement>() | ||
private readonly buttonRef = FSComponent.createRef<HTMLButtonElement>() | ||
private readonly qrCodeRef = FSComponent.createRef<HTMLImageElement>() | ||
|
||
private commBusListener: ViewListener.ViewListener; | ||
private cancelSource = CancelToken.source() | ||
|
||
constructor(props: NavigraphLoginProps) { | ||
super(props); | ||
private commBusListener: ViewListener.ViewListener | ||
|
||
this.commBusListener = RegisterViewListener('JS_LISTENER_COMM_BUS', () => { | ||
console.log("JS_LISTENER_COMM_BUS registered"); | ||
}); | ||
constructor(props: NavigraphLoginProps) { | ||
super(props) | ||
|
||
this.commBusListener.on("NavdataUpdaterReceived", () => { | ||
console.log("WASM received request"); | ||
}) | ||
} | ||
this.commBusListener = RegisterViewListener("JS_LISTENER_COMM_BUS", () => { | ||
console.log("JS_LISTENER_COMM_BUS registered") | ||
}) | ||
|
||
public render(): VNode { | ||
return ( | ||
<div class="auth-container"> | ||
<div ref={this.textRef} /> | ||
<div ref={this.buttonRef} onClick={this.handleClick} class="login-button" /> | ||
<img ref={this.qrCodeRef} class="qr-code" /> | ||
</div> | ||
); | ||
} | ||
this.commBusListener.on("NavdataUpdaterReceived", () => { | ||
console.log("WASM received request") | ||
}) | ||
} | ||
|
||
public onBeforeRender(): void { | ||
super.onBeforeRender(); | ||
} | ||
public render(): VNode { | ||
return ( | ||
<div class="auth-container"> | ||
<div ref={this.textRef} /> | ||
<div ref={this.buttonRef} onClick={this.handleClick} class="login-button" /> | ||
<img ref={this.qrCodeRef} class="qr-code" /> | ||
</div> | ||
) | ||
} | ||
|
||
public onAfterRender(node: VNode): void { | ||
super.onAfterRender(node); | ||
public onBeforeRender(): void { | ||
super.onBeforeRender() | ||
} | ||
|
||
this.buttonRef.instance.addEventListener('click', () => this.handleClick()); | ||
public onAfterRender(node: VNode): void { | ||
super.onAfterRender(node) | ||
|
||
AuthService.user.sub(user => { | ||
if (user) { | ||
this.qrCodeRef.instance.src = ''; | ||
this.qrCodeRef.instance.style.display = "none"; | ||
this.buttonRef.instance.textContent = "Log out"; | ||
this.textRef.instance.textContent = `Welcome, ${user.preferred_username}`; | ||
} else { | ||
this.buttonRef.instance.textContent = "Sign in"; | ||
this.textRef.instance.textContent = "Not signed in"; | ||
} | ||
}) | ||
} | ||
this.buttonRef.instance.addEventListener("click", () => this.handleClick()) | ||
|
||
AuthService.user.sub(user => { | ||
if (user) { | ||
this.qrCodeRef.instance.src = "" | ||
this.qrCodeRef.instance.style.display = "none" | ||
this.buttonRef.instance.textContent = "Log out" | ||
this.textRef.instance.textContent = `Welcome, ${user.preferred_username}` | ||
} else { | ||
this.buttonRef.instance.textContent = "Sign in" | ||
this.textRef.instance.textContent = "Not signed in" | ||
} | ||
}) | ||
} | ||
|
||
private handleClick() { | ||
if (AuthService.getUser()) { | ||
AuthService.signOut(); | ||
} else { | ||
this.cancelSource = CancelToken.source() // Reset any previous cancellations | ||
AuthService.signIn(p => { | ||
if (p) { | ||
this.qrCodeRef.instance.src = `https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${p.verification_uri_complete}`; | ||
this.qrCodeRef.instance.style.display = 'block' | ||
console.log(p.user_code); | ||
} | ||
}, this.cancelSource.token) | ||
private handleClick() { | ||
if (AuthService.getUser()) { | ||
AuthService.signOut() | ||
} else { | ||
this.cancelSource = CancelToken.source() // Reset any previous cancellations | ||
AuthService.signIn(p => { | ||
if (p) { | ||
this.qrCodeRef.instance.src = `https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${p.verification_uri_complete}` | ||
this.qrCodeRef.instance.style.display = "block" | ||
console.log(p.user_code) | ||
} | ||
}, this.cancelSource.token) | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,7 @@ | ||
import { FSComponent, DisplayComponent, VNode } from '@microsoft/msfs-sdk'; | ||
import { DisplayComponent, FSComponent, VNode } from "@microsoft/msfs-sdk" | ||
|
||
export class MyComponent extends DisplayComponent<any> { | ||
public render(): VNode { | ||
return ( | ||
<div class='my-component'>Hello World!</div> | ||
); | ||
} | ||
} | ||
public render(): VNode { | ||
return <div class="my-component">Hello World!</div> | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
#InstrumentContent { | ||
width: 100%; | ||
height: 100%; | ||
} | ||
width: 100%; | ||
height: 100%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,35 +1,34 @@ | ||
/// <reference types="@microsoft/msfs-types/Pages/VCockpit/Core/VCockpit" /> | ||
|
||
import { EventBus, FSComponent } from '@microsoft/msfs-sdk'; | ||
import { NavigraphLogin } from './Components/NavigraphLogin'; | ||
import { AuthService } from './Services/AuthService'; | ||
import './MyInstrument.css' | ||
import { EventBus, FSComponent } from "@microsoft/msfs-sdk" | ||
import { NavigraphLogin } from "./Components/NavigraphLogin" | ||
import { AuthService } from "./Services/AuthService" | ||
import "./MyInstrument.css" | ||
|
||
class MyInstrument extends BaseInstrument { | ||
private readonly bus: EventBus; | ||
private readonly bus: EventBus | ||
|
||
constructor() { | ||
super(); | ||
constructor() { | ||
super() | ||
|
||
this.bus = new EventBus; | ||
} | ||
this.bus = new EventBus() | ||
} | ||
|
||
get templateID(): string { | ||
return 'MyInstrument'; | ||
} | ||
get templateID(): string { | ||
return "MyInstrument" | ||
} | ||
|
||
get isInteractive(): boolean { | ||
return true; | ||
} | ||
get isInteractive(): boolean { | ||
return true | ||
} | ||
|
||
public connectedCallback(): void { | ||
super.connectedCallback(); | ||
public connectedCallback(): void { | ||
super.connectedCallback() | ||
|
||
AuthService.init(this.bus); | ||
|
||
FSComponent.render(<NavigraphLogin bus={this.bus} />, document.getElementById('InstrumentContent')); | ||
} | ||
AuthService.init(this.bus) | ||
|
||
FSComponent.render(<NavigraphLogin bus={this.bus} />, document.getElementById("InstrumentContent")) | ||
} | ||
} | ||
|
||
registerInstrument('my-instrument', MyInstrument); | ||
registerInstrument("my-instrument", MyInstrument) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
# auth flow | ||
show navigraph login -> get user -> publish to the bus | ||
|
||
show navigraph login -> get user -> publish to the bus |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,32 +1,32 @@ | ||
import typescript from '@rollup/plugin-typescript'; | ||
import resolve from '@rollup/plugin-node-resolve'; | ||
import copy from 'rollup-plugin-copy'; | ||
import css from 'rollup-plugin-import-css'; | ||
import resolve from "@rollup/plugin-node-resolve" | ||
import typescript from "@rollup/plugin-typescript" | ||
import copy from "rollup-plugin-copy" | ||
import css from "rollup-plugin-import-css" | ||
|
||
let DEBUG = true; | ||
let DEBUG = true | ||
|
||
let outputDest = '../../../PackageSources'; | ||
let outputDest = "../../../PackageSources" | ||
if (DEBUG) { | ||
outputDest = '../../../Packages/navigraph-aircraft-updater-sample' | ||
outputDest = "../../../Packages/navigraph-aircraft-updater-sample" | ||
} | ||
|
||
export default { | ||
input: 'MyInstrument.tsx', | ||
output: { | ||
dir: `${outputDest}/html_ui/Pages/VCockpit/Instruments/Navigraph/DataUpdaterSample`, | ||
format: 'es' | ||
}, | ||
plugins: [ | ||
css({ output: 'MyInstrument.css' }), | ||
resolve(), | ||
typescript(), | ||
copy({ | ||
targets: [ | ||
{ | ||
src: 'MyInstrument.html', | ||
dest: `${outputDest}/html_ui/Pages/VCockpit/Instruments/Navigraph/DataUpdaterSample`, | ||
} | ||
] | ||
}) | ||
] | ||
} | ||
input: "MyInstrument.tsx", | ||
output: { | ||
dir: `${outputDest}/html_ui/Pages/VCockpit/Instruments/Navigraph/DataUpdaterSample`, | ||
format: "es", | ||
}, | ||
plugins: [ | ||
css({ output: "MyInstrument.css" }), | ||
resolve(), | ||
typescript(), | ||
copy({ | ||
targets: [ | ||
{ | ||
src: "MyInstrument.html", | ||
dest: `${outputDest}/html_ui/Pages/VCockpit/Instruments/Navigraph/DataUpdaterSample`, | ||
}, | ||
], | ||
}), | ||
], | ||
} |
Oops, something went wrong.