Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-04-01 21:13:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

basic info checkpoint (#1230)

Browse Source 
* basic info

* preview manifest

* textarea not long

* show error message details always

* reinstall button in marketplace

Co-authored-by: Drew Ansbacher <drew@start9labs.com>
Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>
This commit is contained in:
Drew Ansbacher
2022-02-21 12:44:25 -07:00
committed by GitHub
parent 6a7ab4d188
commit 9b4e5f0805
29 changed files with 956 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/projects/setup-wizard/src/app/app.component.ts
View File

@@ -10,14 +10,14 @@ import { StateService } from './services/state.service'
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor (
constructor(
private readonly apiService: ApiService,
private readonly errorToastService: ErrorToastService,
private readonly navCtrl: NavController,
private readonly stateService: StateService,
) { }
) {}
async ngOnInit () {
async ngOnInit() {
try {
const status = await this.apiService.getStatus()
if (status.migrating || status['product-key']) {
@@ -30,7 +30,7 @@ export class AppComponent {
await this.navCtrl.navigateForward(`/recover`)
}
} catch (e) {
this.errorToastService.present(`${e.message}: ${e.details}`)
this.errorToastService.present(e.message)
}
}
}

45
frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.ts
View File

@@ -1,6 +1,15 @@
import { Component } from '@angular/core'
import { AlertController, LoadingController, ModalController, NavController } from '@ionic/angular'
import { ApiService, DiskInfo, DiskRecoverySource } from 'src/app/services/api/api.service'
import {
AlertController,
LoadingController,
ModalController,
NavController,
} from '@ionic/angular'
import {
ApiService,
DiskInfo,
DiskRecoverySource,
} from 'src/app/services/api/api.service'
import { ErrorToastService } from 'src/app/services/error-toast.service'
import { StateService } from 'src/app/services/state.service'
import { PasswordPage } from '../../modals/password/password.page'
@@ -14,7 +23,7 @@ export class EmbassyPage {
storageDrives: DiskInfo[] = []
loading = true
constructor (
constructor(
private readonly apiService: ApiService,
private readonly navCtrl: NavController,
private readonly modalController: ModalController,
@@ -22,26 +31,34 @@ export class EmbassyPage {
private readonly stateService: StateService,
private readonly loadingCtrl: LoadingController,
private readonly errorToastService: ErrorToastService,
) { }
) {}
async ngOnInit () {
async ngOnInit() {
await this.getDrives()
}
tooSmall (drive: DiskInfo) {
tooSmall(drive: DiskInfo) {
return drive.capacity < 34359738368
}
async refresh () {
async refresh() {
this.loading = true
await this.getDrives()
}
async getDrives () {
async getDrives() {
this.loading = true
try {
const { disks, reconnect } = await this.apiService.getDrives()
this.storageDrives = disks.filter(d => !d.partitions.map(p => p.logicalname).includes((this.stateService.recoverySource as DiskRecoverySource)?.logicalname))
this.storageDrives = disks.filter(
d =>
!d.partitions
.map(p => p.logicalname)
.includes(
(this.stateService.recoverySource as DiskRecoverySource)
?.logicalname,
),
)
if (!this.storageDrives.length && reconnect.length) {
const list = `<ul>${reconnect.map(recon => `<li>${recon}</li>`)}</ul>`
const alert = await this.alertCtrl.create({
@@ -63,7 +80,7 @@ export class EmbassyPage {
}
}
async chooseDrive (drive: DiskInfo) {
async chooseDrive(drive: DiskInfo) {
if (!!drive.partitions.find(p => p.used) || !!drive.guid) {
const alert = await this.alertCtrl.create({
header: 'Warning',
@@ -96,7 +113,7 @@ export class EmbassyPage {
}
}
private async presentModalPassword (drive: DiskInfo): Promise<void> {
private async presentModalPassword(drive: DiskInfo): Promise<void> {
const modal = await this.modalController.create({
component: PasswordPage,
componentProps: {
@@ -110,7 +127,7 @@ export class EmbassyPage {
await modal.present()
}
private async setupEmbassy (drive: DiskInfo, password: string): Promise<void> {
private async setupEmbassy(drive: DiskInfo, password: string): Promise<void> {
const loader = await this.loadingCtrl.create({
message: 'Transferring encrypted data. This could take a while...',
})
@@ -125,7 +142,9 @@ export class EmbassyPage {
await this.navCtrl.navigateForward(`/init`)
}
} catch (e) {
this.errorToastService.present(`${e.message}: ${e.details}. Restart Embassy to try again.`)
this.errorToastService.present(
`${e.message}\n\nRestart Embassy to try again.`,
)
console.error(e)
} finally {
loader.dismiss()

80
frontend/projects/setup-wizard/src/app/pages/recover/recover.page.ts
View File

@@ -1,5 +1,11 @@
import { Component, Input } from '@angular/core'
import { AlertController, IonicSafeString, LoadingController, ModalController, NavController } from '@ionic/angular'
import {
AlertController,
IonicSafeString,
LoadingController,
ModalController,
NavController,
} from '@ionic/angular'
import { CifsModal } from 'src/app/modals/cifs-modal/cifs-modal.page'
import { ApiService, DiskBackupTarget } from 'src/app/services/api/api.service'
import { ErrorToastService } from 'src/app/services/error-toast.service'
@@ -17,7 +23,7 @@ export class RecoverPage {
mappedDrives: MappedDisk[] = []
hasShownGuidAlert = false
constructor (
constructor(
private readonly apiService: ApiService,
private readonly navCtrl: NavController,
private readonly modalCtrl: ModalController,
@@ -26,45 +32,48 @@ export class RecoverPage {
private readonly loadingCtrl: LoadingController,
private readonly errorToastService: ErrorToastService,
public readonly stateService: StateService,
) { }
) {}
async ngOnInit () {
async ngOnInit() {
await this.getDrives()
}
async refresh () {
async refresh() {
this.loading = true
await this.getDrives()
}
driveClickable (mapped: MappedDisk) {
return mapped.drive['embassy-os']?.full && (this.stateService.hasProductKey || mapped.is02x)
driveClickable(mapped: MappedDisk) {
return (
mapped.drive['embassy-os']?.full &&
(this.stateService.hasProductKey || mapped.is02x)
)
}
async getDrives () {
async getDrives() {
this.mappedDrives = []
try {
const { disks, reconnect } = await this.apiService.getDrives()
disks.filter(d => d.partitions.length).forEach(d => {
d.partitions.forEach(p => {
const drive: DiskBackupTarget = {
vendor: d.vendor,
model: d.model,
logicalname: p.logicalname,
label: p.label,
capacity: p.capacity,
used: p.used,
'embassy-os': p['embassy-os'],
}
this.mappedDrives.push(
{
disks
.filter(d => d.partitions.length)
.forEach(d => {
d.partitions.forEach(p => {
const drive: DiskBackupTarget = {
vendor: d.vendor,
model: d.model,
logicalname: p.logicalname,
label: p.label,
capacity: p.capacity,
used: p.used,
'embassy-os': p['embassy-os'],
}
this.mappedDrives.push({
hasValidBackup: p['embassy-os']?.full,
is02x: drive['embassy-os']?.version.startsWith('0.2'),
drive,
},
)
})
})
})
})
if (!this.mappedDrives.length && reconnect.length) {
const list = `<ul>${reconnect.map(recon => `<li>${recon}</li>`)}</ul>`
@@ -85,7 +94,11 @@ export class RecoverPage {
if (!!importableDrive && !this.hasShownGuidAlert) {
const alert = await this.alertCtrl.create({
header: 'Embassy Data Drive Detected',
message: new IonicSafeString(`${importableDrive.vendor || 'Unknown Vendor'} - ${importableDrive.model || 'Unknown Model' } contains Embassy data. To use this drive and its data <i>as-is</i>, click "Use Drive". This will complete the setup process.<br /><br /><b>Important</b>. If you are trying to restore from backup or update from 0.2.x, DO NOT click "Use Drive". Instead, click "Cancel" and follow instructions.`),
message: new IonicSafeString(
`${importableDrive.vendor || 'Unknown Vendor'} - ${
importableDrive.model || 'Unknown Model'
} contains Embassy data. To use this drive and its data <i>as-is</i>, click "Use Drive". This will complete the setup process.<br /><br /><b>Important</b>. If you are trying to restore from backup or update from 0.2.x, DO NOT click "Use Drive". Instead, click "Cancel" and follow instructions.`,
),
buttons: [
{
role: 'cancel',
@@ -103,13 +116,13 @@ export class RecoverPage {
this.hasShownGuidAlert = true
}
} catch (e) {
this.errorToastService.present(`${e.message}: ${e.details}`)
this.errorToastService.present(e.message)
} finally {
this.loading = false
}
}
async presentModalCifs (): Promise<void> {
async presentModalCifs(): Promise<void> {
const modal = await this.modalCtrl.create({
component: CifsModal,
})
@@ -130,7 +143,7 @@ export class RecoverPage {
await modal.present()
}
async select (target: DiskBackupTarget) {
async select(target: DiskBackupTarget) {
const is02x = target['embassy-os'].version.startsWith('0.2')
if (this.stateService.hasProductKey) {
@@ -154,7 +167,8 @@ export class RecoverPage {
if (!is02x) {
const alert = await this.alertCtrl.create({
header: 'Error',
message: 'In order to use this image, you must select a drive containing a valid 0.2.x Embassy.',
message:
'In order to use this image, you must select a drive containing a valid 0.2.x Embassy.',
buttons: [
{
role: 'cancel',
@@ -179,7 +193,7 @@ export class RecoverPage {
}
}
private async importDrive (guid: string) {
private async importDrive(guid: string) {
const loader = await this.loadingCtrl.create({
message: 'Importing Drive',
})
@@ -188,13 +202,13 @@ export class RecoverPage {
await this.stateService.importDrive(guid)
await this.navCtrl.navigateForward(`/init`)
} catch (e) {
this.errorToastService.present(`${e.message}: ${e.details}`)
this.errorToastService.present(e.message)
} finally {
loader.dismiss()
}
}
private async selectRecoverySource (logicalname: string, password?: string) {
private async selectRecoverySource(logicalname: string, password?: string) {
this.stateService.recoverySource = {
type: 'disk',
logicalname,
@@ -204,7 +218,6 @@ export class RecoverPage {
}
}
@Component({
selector: 'drive-status',
templateUrl: './drive-status.component.html',
@@ -215,7 +228,6 @@ export class DriveStatusComponent {
@Input() is02x: boolean
}
interface MappedDisk {
is02x: boolean
hasValidBackup: boolean

150
frontend/projects/setup-wizard/src/app/services/api/http.service.ts
View File

@@ -1,5 +1,10 @@
import { Injectable } from '@angular/core'
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http'
import {
HttpClient,
HttpErrorResponse,
HttpHeaders,
HttpParams,
} from '@angular/common/http'
import { Observable } from 'rxjs'
import * as aesjs from 'aes-js'
import * as pbkdf2 from 'pbkdf2'
@@ -11,15 +16,12 @@ export class HttpService {
fullUrl: string
productKey: string
constructor (
private readonly http: HttpClient,
) {
constructor(private readonly http: HttpClient) {
const port = window.location.port
this.fullUrl = `${window.location.protocol}//${window.location.hostname}:${port}/rpc/v1`
}
async rpcRequest<T> (body: RPCOptions, encrypted = true): Promise<T> {
async rpcRequest<T>(body: RPCOptions, encrypted = true): Promise<T> {
const httpOpts = {
method: Method.POST,
body,
@@ -42,17 +44,17 @@ export class HttpService {
if (isRpcSuccess(res)) return res.result
}
async encryptedHttpRequest<T> (httpOpts: {
body: RPCOptions;
url: string;
async encryptedHttpRequest<T>(httpOpts: {
body: RPCOptions
url: string
}): Promise<T> {
const urlIsRelative = httpOpts.url.startsWith('/')
const url = urlIsRelative ?
this.fullUrl + httpOpts.url :
httpOpts.url
const url = urlIsRelative ? this.fullUrl + httpOpts.url : httpOpts.url
const encryptedBody = await AES_CTR.encryptPbkdf2(this.productKey, encodeUtf8(JSON.stringify(httpOpts.body)))
const encryptedBody = await AES_CTR.encryptPbkdf2(
this.productKey,
encodeUtf8(JSON.stringify(httpOpts.body)),
)
const options = {
responseType: 'arraybuffer',
body: encryptedBody.buffer,
@@ -67,9 +69,14 @@ export class HttpService {
const req = this.http.post(url, options.body, options)
return (req)
return req
.toPromise()
.then(res => AES_CTR.decryptPbkdf2(this.productKey, (res as any).body as ArrayBuffer))
.then(res =>
AES_CTR.decryptPbkdf2(
this.productKey,
(res as any).body as ArrayBuffer,
),
)
.then(res => JSON.parse(res))
.catch(e => {
if (!e.status && !e.statusText) {
@@ -80,46 +87,56 @@ export class HttpService {
})
}
async httpRequest<T> (httpOpts: {
body: RPCOptions;
url: string;
async httpRequest<T>(httpOpts: {
body: RPCOptions
url: string
}): Promise<T> {
const urlIsRelative = httpOpts.url.startsWith('/')
const url = urlIsRelative ?
this.fullUrl + httpOpts.url :
httpOpts.url
const url = urlIsRelative ? this.fullUrl + httpOpts.url : httpOpts.url
const options = {
responseType: 'json',
body: httpOpts.body,
observe: 'events',
reportProgress: false,
headers: { 'content-type': 'application/json', accept: 'application/json' },
headers: {
'content-type': 'application/json',
accept: 'application/json',
},
} as any
const req: Observable<{ body: T }> = this.http.post(url, httpOpts.body, options) as any
const req: Observable<{ body: T }> = this.http.post(
url,
httpOpts.body,
options,
) as any
return (req)
return req
.toPromise()
.then(res => res.body)
.catch(e => { throw new HttpError(e) })
.catch(e => {
throw new HttpError(e)
})
}
}
function RpcError (e: RPCError['error']): void {
function RpcError(e: RPCError['error']): void {
const { code, message, data } = e
this.code = code
this.message = message
if (typeof data !== 'string') {
this.details = data.details
if (typeof data === 'string') {
this.message = `${message}\n\n${data}`
} else {
this.details = data
if (data.details) {
this.message = `${message}\n\n${data.details}`
} else {
this.message = message
}
}
}
function HttpError (e: HttpErrorResponse): void {
function HttpError(e: HttpErrorResponse): void {
const { status, statusText } = e
this.code = status
@@ -127,17 +144,21 @@ function HttpError (e: HttpErrorResponse): void {
this.details = null
}
function EncryptionError (e: HttpErrorResponse): void {
function EncryptionError(e: HttpErrorResponse): void {
this.code = null
this.message = 'Invalid Key'
this.details = null
}
function isRpcError<Error, Result> (arg: { error: Error } | { result: Result }): arg is { error: Error } {
function isRpcError<Error, Result>(
arg: { error: Error } | { result: Result },
): arg is { error: Error } {
return !!(arg as any).error
}
function isRpcSuccess<Error, Result> (arg: { error: Error } | { result: Result }): arg is { result: Result } {
function isRpcSuccess<Error, Result>(
arg: { error: Error } | { result: Result },
): arg is { result: Result } {
return !!(arg as any).result
}
@@ -152,7 +173,7 @@ export enum Method {
export interface RPCOptions {
method: string
params?: {
[param: string]: string | number | boolean | object | string[] | number[];
[param: string]: string | number | boolean | object | string[] | number[]
}
}
@@ -172,27 +193,35 @@ export interface RPCSuccess<T> extends RPCBase {
export interface RPCError extends RPCBase {
error: {
code: number,
code: number
message: string
data?: {
details: string
} | string
data?:
| {
details: string
}
| string
}
}
export type RPCResponse<T> = RPCSuccess<T> | RPCError
type HttpError = HttpErrorResponse & { error: { code: string, message: string } }
type HttpError = HttpErrorResponse & {
error: { code: string; message: string }
}
export interface HttpOptions {
method: Method
url: string
headers?: HttpHeaders | {
[header: string]: string | string[]
}
params?: HttpParams | {
[param: string]: string | string[]
}
headers?:
| HttpHeaders
| {
[header: string]: string | string[]
}
params?:
| HttpParams
| {
[param: string]: string | string[]
}
responseType?: 'json' | 'text' | 'arrayBuffer'
withCredentials?: boolean
body?: any
@@ -200,7 +229,10 @@ export interface HttpOptions {
}
type AES_CTR = {
encryptPbkdf2: (secretKey: string, messageBuffer: Uint8Array) => Promise<Uint8Array>
encryptPbkdf2: (
secretKey: string,
messageBuffer: Uint8Array,
) => Promise<Uint8Array>
decryptPbkdf2: (secretKey, arr: ArrayBuffer) => Promise<string>
}
@@ -211,7 +243,10 @@ export const AES_CTR: AES_CTR = {
const key = pbkdf2.pbkdf2Sync(secretKey, salt, 1000, 256 / 8, 'sha256')
const aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(counter))
const aesCtr = new aesjs.ModeOfOperation.ctr(
key,
new aesjs.Counter(counter),
)
const encryptedBytes = aesCtr.encrypt(messageBuffer)
return new Uint8Array([...counter, ...salt, ...encryptedBytes])
},
@@ -223,21 +258,26 @@ export const AES_CTR: AES_CTR = {
const cipher = buff.slice(32)
const key = pbkdf2.pbkdf2Sync(secretKey, salt, 1000, 256 / 8, 'sha256')
const aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(counter))
const aesCtr = new aesjs.ModeOfOperation.ctr(
key,
new aesjs.Counter(counter),
)
const decryptedBytes = aesCtr.decrypt(cipher)
return aesjs.utils.utf8.fromBytes(decryptedBytes)
},
}
export const encode16 = (buffer: Uint8Array) => buffer.reduce((str, byte) => str + byte.toString(16).padStart(2, '0'), '')
export const decode16 = hexString => new Uint8Array(hexString.match(/.{1,2}/g).map(byte => parseInt(byte, 16)))
export const encode16 = (buffer: Uint8Array) =>
buffer.reduce((str, byte) => str + byte.toString(16).padStart(2, '0'), '')
export const decode16 = hexString =>
new Uint8Array(hexString.match(/.{1,2}/g).map(byte => parseInt(byte, 16)))
export function encodeUtf8 (str: string): Uint8Array {
export function encodeUtf8(str: string): Uint8Array {
const encoder = new TextEncoder()
return encoder.encode(str)
}
export function decodeUtf8 (arr: Uint8Array): string {
export function decodeUtf8(arr: Uint8Array): string {
return new TextDecoder().decode(arr)
}
}

2
frontend/projects/setup-wizard/src/app/services/state.service.ts
View File

@@ -52,7 +52,7 @@ export class StateService {
progress = await this.apiService.getRecoveryStatus()
} catch (e) {
this.errorToastService.present(
`${e.message}: ${e.details}.\nRestart Embassy to try again.`,
`${e.message}\n\nRestart Embassy to try again.`,
)
}
if (progress) {