Please connect an Embassy drive to your embassy and refresh the page.
-Please connect an storage drive to your Embassy and refresh the page.
+Using {{ getUsage(drive) }} of {{drive.capacity.toFixed(2)}} GiB
+Please connect a recovery drive to your embassy and refresh the page.
+Please connect a recovery drive to your Embassy and refresh the page.
Embassy version: {{drive['embassy_os'].version}}
+Tor Address:
+Tor Address:
{{ stateService.torAddress }}
diff --git a/setup-wizard/src/app/pages/success/success.page.scss b/setup-wizard/src/app/pages/success/success.page.scss index 2deb423f8..9cbc9cad6 100644 --- a/setup-wizard/src/app/pages/success/success.page.scss +++ b/setup-wizard/src/app/pages/success/success.page.scss @@ -15,35 +15,16 @@ ion-item { --border-color: var(--ion-color-light); } -.input-label { - text-align: left; - padding-bottom: 2px; - font-size: medium; - color: var(--ion-color-light); - font-weight: bold; -} - -.claim-button { - margin-inline-start: 0; - margin-inline-end: 0; - margin-top: 24px; - height: 48px; - --background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%); -} - -.card-footer { - text-align: left; - --background: rgb(222, 222, 222); - border-top: solid; - border-width: 1px; - border-color: var(--ion-color-medium); - ion-item { - --border-color: var(--ion-color-medium); - } -} - .divider { margin: 0; background: linear-gradient(90deg,var(--ion-color-dark) 0,var(--ion-color-medium) 50%,var(--ion-color-dark) 100%); height: 1px; +} + +.addr-label { + text-align: left; + padding-bottom: 2px; + font-size: small; + color: var(--ion-color-light); + font-weight: bold; } \ No newline at end of file diff --git a/setup-wizard/src/app/pipes/convert-bytes.pipe.ts b/setup-wizard/src/app/pipes/convert-bytes.pipe.ts new file mode 100644 index 000000000..d60a59722 --- /dev/null +++ b/setup-wizard/src/app/pipes/convert-bytes.pipe.ts @@ -0,0 +1,18 @@ +import { Pipe, PipeTransform } from '@angular/core' + +// converts bytes to gigabytes +@Pipe({ + name: 'convertBytes', +}) +export class ConvertBytesPipe implements PipeTransform { + transform (bytes: number): string { + if (bytes === 0) return '0 Bytes' + + const k = 1024 + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] + + const i = Math.floor(Math.log(bytes) / Math.log(k)) + + return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i] + } +} diff --git a/setup-wizard/src/app/pipes/pipe.module.ts b/setup-wizard/src/app/pipes/pipe.module.ts new file mode 100644 index 000000000..d0da49747 --- /dev/null +++ b/setup-wizard/src/app/pipes/pipe.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { ConvertBytesPipe } from './convert-bytes.pipe'; + +@NgModule({ +declarations: [ConvertBytesPipe], +imports: [], +exports: [ConvertBytesPipe], +}) + +export class PipesModule {} \ No newline at end of file diff --git a/setup-wizard/src/app/services/api/mock-api.service.ts b/setup-wizard/src/app/services/api/mock-api.service.ts index 95f5f44e4..8ec33753a 100644 --- a/setup-wizard/src/app/services/api/mock-api.service.ts +++ b/setup-wizard/src/app/services/api/mock-api.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core' import { pauseFor } from '../state.service' -import { ApiService, DiskInfo } from './api.service' +import { ApiService } from './api.service' @Injectable({ providedIn: 'root' @@ -30,69 +30,75 @@ export class MockApiService extends ApiService { async getDrives() { return [ { - vendor: 'vendor', - model: 'model', - logicalname: 'Name1', - partitions: [{ - logicalname: 'Name1', + vendor: 'Vendor', + model: 'Model', + logicalname: '/dev/sda', + partitions: [ + { + logicalname: 'sda1', label: 'label 1', capacity: 100000, used: 200.1255312 - }, { - logicalname: 'Name1', - label: 'label 2', - capacity: 50000, - used: 200.1255312 - }], + }, + { + logicalname: 'sda2', + label: 'label 2', + capacity: 50000, + used: 200.1255312 + } + ], capacity: 150000, 'embassy_os': null }, { - vendor: 'vendor', - model: 'model', - logicalname: 'Name2', - partitions: [{ - logicalname: 'Name2', - label: null, - capacity: 1600.01234, - used: 0.00, - }], + vendor: 'Vendor', + model: 'Model', + logicalname: 'dev/sdb', + partitions: [ + // { + // logicalname: 'sdb1', + // label: null, + // capacity: 1600.01234, + // used: 0.00, + // } + ], capacity: 1600.01234, 'embassy_os': null }, { - vendor: 'vendor', - model: 'model', - logicalname: 'Name3', - partitions: [{ - logicalname: 'Name3', + vendor: 'Vendor', + model: 'Model', + logicalname: 'dev/sdc', + partitions: [ + { + logicalname: 'sdc1', label: 'label 1', capacity: null, used: null - }], + } + ], capacity: 100000, 'embassy_os': { version: '0.3.3', } }, { - vendor: 'vendor', - model: 'model', - logicalname: 'Name4', - partitions: [{ - logicalname: 'Name4', + vendor: 'Vendor', + model: 'Model', + logicalname: '/dev/sdd', + partitions: [ + { + logicalname: 'sdd1', label: null, capacity: 10000, used: null - }], + } + ], capacity: 10000, 'embassy_os': { version: '0.2.7', } } - - - ] } diff --git a/setup-wizard/src/app/services/state.service.ts b/setup-wizard/src/app/services/state.service.ts index 8e58e7ba8..522b57def 100644 --- a/setup-wizard/src/app/services/state.service.ts +++ b/setup-wizard/src/app/services/state.service.ts @@ -8,7 +8,7 @@ import { ApiService, DiskInfo } from './api/api.service' export class StateService { polling = false - embassyDrive: DiskInfo; + storageDrive: DiskInfo; embassyPassword: string recoveryDrive: DiskInfo; recoveryPassword: string @@ -45,7 +45,7 @@ export class StateService { async setupEmbassy () : Promise<{ torAddress: string }> { const ret = await this.apiService.setupEmbassy({ - 'embassy-logicalname': this.embassyDrive.logicalname, + 'embassy-logicalname': this.storageDrive.logicalname, 'embassy-password': this.embassyPassword, 'recovery-logicalname': this.recoveryDrive?.logicalname, 'recovery-password': this.recoveryPassword diff --git a/setup-wizard/src/global.scss b/setup-wizard/src/global.scss index e5d381f65..b75879201 100644 --- a/setup-wizard/src/global.scss +++ b/setup-wizard/src/global.scss @@ -25,65 +25,39 @@ @import "~@ionic/angular/css/text-transformation.css"; @import "~@ionic/angular/css/flex-utils.css"; -.input-label { - text-align: left; - padding-bottom: 2px; - font-size: small; - color: var(--ion-color-light); - font-weight: bold; -} - -.alert-error .alert-title { - color: var(--ion-color-danger) !important; -} - -.loader { - --spinner-color: var(--ion-color-light) !important; -} - ion-avatar { width: 27px; height: 27px; } -ion-action-sheet { - --backdrop-opacity: 0.75 !important; -} - -ion-alert { - --backdrop-opacity: 0.75 !important; -} - -ion-loading { - --backdrop-opacity: 0.75 !important; -} - ion-item { --highlight-color-valid: transparent; --highlight-color-invalid: transparent; --highlight-color-focused: var(--ion-color-light); } -.divider { - margin: 50px 0; - height: 2px; - background: linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255, 255, 255, 0.31) 50%,rgba(255,255,255,0) 100%); +.claim-button { + margin-inline-start: 0; + margin-inline-end: 0; + margin-top: 24px; + min-width: 140px; } -.footer { - margin-bottom: 24px; - ion-icon { - font-size: 28px; - margin-right: 10px; +.alertlike-modal { + .modal-wrapper { + max-height: 380px !important; + top: 25% !important; + width: 90% !important; + left: 5% !important; + --box-shadow: none !important; } } -.success-alert .alert-wrapper { - box-shadow: 4px 4px 30px var(--ion-color-light); - border: 1px solid rgba(255,255,255,.3); - background: var(--ion-color-light); -} - -.success-alert .alert-title { - color: var(--ion-color-success); +@media (min-width:1000px) { + .alertlike-modal { + .modal-wrapper { + width: 40% !important; + left: 30% !important; + } + } } \ No newline at end of file diff --git a/setup-wizard/src/theme/variables.scss b/setup-wizard/src/theme/variables.scss index b59b0fe2f..4d31d6b81 100644 --- a/setup-wizard/src/theme/variables.scss +++ b/setup-wizard/src/theme/variables.scss @@ -3,9 +3,6 @@ /** Ionic CSS Variables **/ :root { - --ion-text-color: var(--ion-color-dark); - --ion-text-color-rgb: var(--ion-color-dark-rgb); - --ion-font-family: 'Benton Sans'; /** primary **/ --ion-color-primary: #428cff; diff --git a/setup-wizard/tsconfig.json b/setup-wizard/tsconfig.json index 84d01e419..cd72a550a 100644 --- a/setup-wizard/tsconfig.json +++ b/setup-wizard/tsconfig.json @@ -4,7 +4,6 @@ "compilerOptions": { "baseUrl": "./", "outDir": "./out-tsc/app", - "types": [], "sourceMap": true, "declaration": false, "downlevelIteration": true, @@ -16,11 +15,18 @@ "lib": ["es2018", "dom"] }, "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, + "enableI18nLegacyMessageIdFormat": false, "strictInputAccessModifiers": true, "strictTemplates": true }, + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2018", + "dom" + ], "files": [ "src/main.ts", "src/polyfills.ts"