mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-30 12:11:56 +00:00
success selector in init
This commit is contained in:
Drew Ansbacher
committed by
Aiden McClelland
Aiden McClelland
parent
41da8e89cf
commit
8f7075de34
@@ -3,13 +3,16 @@ import { CommonModule } from '@angular/common'
|
||||
import { IonicModule } from '@ionic/angular'
|
||||
import { InitPage } from './init.page'
|
||||
import { InitPageRoutingModule } from './init-routing.module'
|
||||
import { SuccessPageModule } from '../success/success.module'
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
IonicModule,
|
||||
InitPageRoutingModule,
|
||||
SuccessPageModule,
|
||||
],
|
||||
declarations: [InitPage],
|
||||
exports: [InitPage],
|
||||
})
|
||||
export class InitPageModule { }
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
<div style="padding-bottom: 32px;">
|
||||
<img src="assets/png/logo.png" style="max-width: 240px;" />
|
||||
</div>
|
||||
|
||||
<ion-card color="dark">
|
||||
<success></success>
|
||||
<ion-card *ngIf="!stateService.embassyLoaded" color="dark">
|
||||
<ion-card-header>
|
||||
<ion-card-title style="font-size: 40px;">Initializing Embassy</ion-card-title>
|
||||
<ion-card-subtitle>Progress: {{ progress | async }}%</ion-card-subtitle>
|
||||
@@ -21,4 +21,4 @@
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
|
||||
import { NavController } from '@ionic/angular'
|
||||
import { interval, Observable } from 'rxjs'
|
||||
import { finalize, take } from 'rxjs/operators'
|
||||
import { StateService } from 'src/app/services/state.service'
|
||||
|
||||
@Component({
|
||||
selector: 'app-init',
|
||||
@@ -10,9 +11,10 @@ import { finalize, take } from 'rxjs/operators'
|
||||
})
|
||||
export class InitPage {
|
||||
progress: Observable<number>
|
||||
showSuccess = false
|
||||
|
||||
constructor (
|
||||
private readonly navCtrl: NavController,
|
||||
private readonly stateService: StateService,
|
||||
) { }
|
||||
|
||||
ngOnInit () {
|
||||
@@ -20,9 +22,27 @@ export class InitPage {
|
||||
.pipe(
|
||||
take(101),
|
||||
finalize(() => {
|
||||
this.navCtrl.navigateForward('/success')
|
||||
this.stateService.embassyLoaded = true
|
||||
setTimeout(() => this.download(), 500)
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
download () {
|
||||
document.getElementById('tor-addr').innerHTML = this.stateService.torAddress
|
||||
document.getElementById('lan-addr').innerHTML = this.stateService.lanAddress
|
||||
document.getElementById('cert').setAttribute('href', 'data:application/x-x509-ca-cert;base64,' + encodeURIComponent(this.stateService.cert))
|
||||
let html = document.getElementById('downloadable').innerHTML
|
||||
const filename = 'embassy-info.html'
|
||||
|
||||
const elem = document.createElement('a')
|
||||
elem.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(html))
|
||||
elem.setAttribute('download', filename)
|
||||
elem.style.display = 'none'
|
||||
|
||||
document.body.appendChild(elem)
|
||||
elem.click()
|
||||
document.body.removeChild(elem)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -17,5 +17,6 @@ import { SuccessPageRoutingModule } from './success-routing.module'
|
||||
PasswordPageModule,
|
||||
],
|
||||
declarations: [SuccessPage],
|
||||
exports: [SuccessPage],
|
||||
})
|
||||
export class SuccessPageModule { }
|
||||
|
||||
@@ -1,120 +1,109 @@
|
||||
<ion-content>
|
||||
<ion-grid style="padding-top: 32px; height: 100%; max-width: 540px;">
|
||||
<ion-row style="height: 100%;">
|
||||
<ion-col>
|
||||
|
||||
<div style="padding-bottom: 32px; text-align: center;">
|
||||
<img src="assets/png/logo.png" style="max-width: 240px;" />
|
||||
</div>
|
||||
<ion-card [ngClass]="!stateService.embassyLoaded ? 'hiddenPage' : ''" color="dark">
|
||||
<ion-card-header class="ion-text-center" color="success">
|
||||
<ion-icon style="font-size: 80px;" name="checkmark-circle-outline"></ion-icon>
|
||||
<ion-card-title>Setup Complete!</ion-card-title>
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<br />
|
||||
<!-- Tor Instructions -->
|
||||
<div (click)="toggleTor()" class="toggle-label">
|
||||
<h2>Tor Instructions:</h2>
|
||||
<ion-icon
|
||||
name="chevron-down-outline"
|
||||
[ngStyle]="{
|
||||
'transform': torOpen ? 'rotate(-90deg)' : 'rotate(0deg)',
|
||||
'transition': 'transform 0.4s ease-out'
|
||||
}"
|
||||
></ion-icon>
|
||||
</div>
|
||||
|
||||
<ion-card color="dark">
|
||||
<ion-card-header class="ion-text-center" color="success">
|
||||
<ion-icon style="font-size: 80px;" name="checkmark-circle-outline"></ion-icon>
|
||||
<ion-card-title>Setup Complete!</ion-card-title>
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<br />
|
||||
<!-- Tor Instructions -->
|
||||
<div (click)="toggleTor()" class="toggle-label">
|
||||
<h2>Tor Instructions:</h2>
|
||||
<ion-icon
|
||||
name="chevron-down-outline"
|
||||
[ngStyle]="{
|
||||
'transform': torOpen ? 'rotate(-90deg)' : 'rotate(0deg)',
|
||||
'transition': 'transform 0.4s ease-out'
|
||||
}"
|
||||
></ion-icon>
|
||||
</div>
|
||||
<div
|
||||
[ngStyle]="{
|
||||
'overflow' : 'hidden',
|
||||
'max-height': torOpen ? '500px' : '0px',
|
||||
'transition': 'max-height 0.4s ease-out'
|
||||
}"
|
||||
>
|
||||
<div class="ion-padding">
|
||||
<p>
|
||||
To use your Embassy over Tor, visit its unique Tor address from any Tor-enabled browser.
|
||||
For a list of recommended browsers, click <a href="https://docs.start9.com/user-manual/connecting.html" target="_blank" rel="noreferrer"><b>here</b></a>.
|
||||
</p>
|
||||
<br />
|
||||
<p class="input-label">Tor Address</p>
|
||||
<ion-item lines="none" color="dark">
|
||||
<ion-label class="ion-text-wrap">
|
||||
<code><ion-text color="light">{{ stateService.torAddress }}</ion-text></code>
|
||||
</ion-label>
|
||||
<ion-button color="light" fill="clear" (click)="copy(stateService.torAddress)">
|
||||
<ion-icon slot="icon-only" name="copy-outline"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
</div>
|
||||
<div style="padding-bottom: 24px; border-bottom: solid 1px;"></div>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<!-- LAN Instructions -->
|
||||
<div (click)="toggleLan()" class="toggle-label">
|
||||
<h2>LAN Instructions (Slightly Advanced):</h2>
|
||||
<ion-icon
|
||||
name="chevron-down-outline"
|
||||
[ngStyle]="{
|
||||
'transform': lanOpen ? 'rotate(-90deg)' : 'rotate(0deg)',
|
||||
'transition': 'transform 0.4s ease-out'
|
||||
}"
|
||||
></ion-icon>
|
||||
</div>
|
||||
|
||||
<div
|
||||
[ngStyle]="{
|
||||
'overflow' : 'hidden',
|
||||
'max-height': torOpen ? '500px' : '0px',
|
||||
'transition': 'max-height 0.4s ease-out'
|
||||
}"
|
||||
>
|
||||
<div class="ion-padding">
|
||||
<p>
|
||||
To use your Embassy over Tor, visit its unique Tor address from any Tor-enabled browser.
|
||||
For a list of recommended browsers, click <a href="https://docs.start9.com/user-manual/connecting.html" target="_blank" rel="noreferrer"><b>here</b></a>.
|
||||
</p>
|
||||
<br />
|
||||
<p class="input-label">Tor Address</p>
|
||||
<ion-item lines="none" color="dark">
|
||||
<ion-label class="ion-text-wrap">
|
||||
<code><ion-text color="light">{{ stateService.torAddress }}</ion-text></code>
|
||||
</ion-label>
|
||||
<ion-button color="light" fill="clear" (click)="copy(stateService.torAddress)">
|
||||
<ion-icon slot="icon-only" name="copy-outline"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
</div>
|
||||
<div style="padding-bottom: 24px; border-bottom: solid 1px;"></div>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<!-- LAN Instructions -->
|
||||
<div (click)="toggleLan()" class="toggle-label">
|
||||
<h2>LAN Instructions (Slightly Advanced):</h2>
|
||||
<ion-icon
|
||||
name="chevron-down-outline"
|
||||
[ngStyle]="{
|
||||
'transform': lanOpen ? 'rotate(-90deg)' : 'rotate(0deg)',
|
||||
'transition': 'transform 0.4s ease-out'
|
||||
}"
|
||||
></ion-icon>
|
||||
</div>
|
||||
<div
|
||||
[ngStyle]="{
|
||||
'overflow' : 'hidden',
|
||||
'max-height': lanOpen ? '500px' : '0px',
|
||||
'transition': 'max-height 0.4s ease-out'
|
||||
}"
|
||||
>
|
||||
<div class="ion-padding">
|
||||
<p>To use your Embassy locally, you must:</p>
|
||||
<ol>
|
||||
<li>Currently be connected to the same Local Area Network (LAN) as your Embassy.</li>
|
||||
<li>Download your Embassy's Root Certificate Authority.</li>
|
||||
<li>Trust your Embassy's Root CA on <i>both</i> your computer/phone and in your browser settings.</li>
|
||||
</ol>
|
||||
<p>
|
||||
For step-by-step instructions, click
|
||||
<a href="https://docs.start9.com/user-manual/general/lan-setup.html" target="_blank" rel="noreferrer"><b>here</b></a>.
|
||||
</p>
|
||||
|
||||
<ion-button style="margin-top: 24px; margin-bottom: 24px;" color="light" (click)="installCert()">
|
||||
Download Root CA
|
||||
<ion-icon slot="end" name="download-outline"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<p class="input-label">LAN Address</p>
|
||||
<ion-item lines="none" color="dark">
|
||||
<ion-label class="ion-text-wrap">
|
||||
<code><ion-text color="light">{{ stateService.lanAddress }}</ion-text></code>
|
||||
</ion-label>
|
||||
<ion-button color="light" fill="clear" (click)="copy(stateService.lanAddress)">
|
||||
<ion-icon slot="icon-only" name="copy-outline"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
</div>
|
||||
<div style="padding-bottom: 24px; border-bottom: solid 1px;"></div>
|
||||
<br />
|
||||
</div>
|
||||
<div class="ion-text-center ion-padding-top">
|
||||
<ion-button color="light" fill="clear" color="primary" strong (click)="download()">
|
||||
Download this page
|
||||
<ion-icon slot="end" name="download-outline"></ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
<br />
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<div
|
||||
[ngStyle]="{
|
||||
'overflow' : 'hidden',
|
||||
'max-height': lanOpen ? '500px' : '0px',
|
||||
'transition': 'max-height 0.4s ease-out'
|
||||
}"
|
||||
>
|
||||
<div class="ion-padding">
|
||||
<p>To use your Embassy locally, you must:</p>
|
||||
<ol>
|
||||
<li>Currently be connected to the same Local Area Network (LAN) as your Embassy.</li>
|
||||
<li>Download your Embassy's Root Certificate Authority.</li>
|
||||
<li>Trust your Embassy's Root CA on <i>both</i> your computer/phone and in your browser settings.</li>
|
||||
</ol>
|
||||
<p>
|
||||
For step-by-step instructions, click
|
||||
<a href="https://docs.start9.com/user-manual/general/lan-setup.html" target="_blank" rel="noreferrer"><b>here</b></a>.
|
||||
</p>
|
||||
|
||||
<ion-button style="margin-top: 24px; margin-bottom: 24px;" color="light" (click)="installCert()">
|
||||
Download Root CA
|
||||
<ion-icon slot="end" name="download-outline"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<p class="input-label">LAN Address</p>
|
||||
<ion-item lines="none" color="dark">
|
||||
<ion-label class="ion-text-wrap">
|
||||
<code><ion-text color="light">{{ stateService.lanAddress }}</ion-text></code>
|
||||
</ion-label>
|
||||
<ion-button color="light" fill="clear" (click)="copy(stateService.lanAddress)">
|
||||
<ion-icon slot="icon-only" name="copy-outline"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
</div>
|
||||
<div style="padding-bottom: 24px; border-bottom: solid 1px;"></div>
|
||||
<br />
|
||||
</div>
|
||||
<div class="ion-text-center ion-padding-top">
|
||||
<ion-button color="light" fill="clear" color="primary" strong (click)="download()">
|
||||
Download this page
|
||||
<ion-icon slot="end" name="download-outline"></ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
<br />
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
|
||||
<!-- cert elem -->
|
||||
<a hidden id="install-cert" href="/public/local.crt" download="embassy.crt"></a>
|
||||
|
||||
@@ -26,4 +26,8 @@ a {
|
||||
text-align: right;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.hiddenPage {
|
||||
max-height: 0px;
|
||||
}
|
||||
@@ -16,10 +16,6 @@ export class SuccessPage {
|
||||
public readonly stateService: StateService,
|
||||
) { }
|
||||
|
||||
ngAfterViewInit () {
|
||||
setTimeout(() => this.download(), 500)
|
||||
}
|
||||
|
||||
async copy (address: string): Promise<void> {
|
||||
const success = await this.copyToClipboard(address)
|
||||
const message = success ? 'copied to clipboard!' : 'failed to copy'
|
||||
@@ -44,23 +40,6 @@ export class SuccessPage {
|
||||
document.getElementById('install-cert').click()
|
||||
}
|
||||
|
||||
download () {
|
||||
document.getElementById('tor-addr').innerHTML = this.stateService.torAddress
|
||||
document.getElementById('lan-addr').innerHTML = this.stateService.lanAddress
|
||||
document.getElementById('cert').setAttribute('href', 'data:application/x-x509-ca-cert;base64,' + encodeURIComponent(this.stateService.cert))
|
||||
let html = document.getElementById('downloadable').innerHTML
|
||||
const filename = 'embassy-info.html'
|
||||
|
||||
const elem = document.createElement('a')
|
||||
elem.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(html))
|
||||
elem.setAttribute('download', filename)
|
||||
elem.style.display = 'none'
|
||||
|
||||
document.body.appendChild(elem)
|
||||
elem.click()
|
||||
document.body.removeChild(elem)
|
||||
}
|
||||
|
||||
private async copyToClipboard (str: string): Promise<boolean> {
|
||||
const el = document.createElement('textarea')
|
||||
el.value = str
|
||||
|
||||
@@ -12,6 +12,7 @@ export class StateService {
|
||||
isMigrating: boolean
|
||||
|
||||
polling = false
|
||||
embassyLoaded = false
|
||||
|
||||
storageDrive: DiskInfo
|
||||
embassyPassword: string
|
||||
|
||||
Reference in New Issue
Block a user