feat: Migrate secure-storage plugin

README.md

@@ -35,6 +35,7 @@ npm start
 - [@nativescript/localize](packages/localize/README.md)
 - [@nativescript/pdf](packages/pdf/README.md)
 - [@nativescript/picker](packages/picker/README.md)
+- [@nativescript/secure-storage](packages/secure-storage/README.md)
 - [@nativescript/shared-notification-delegate](packages/shared-notification-delegate/README.md)
 - [@nativescript/social-share](packages/social-share/README.md)
 - [@nativescript/swift-ui](packages/swift-ui/README.md)

apps/demo-angular/package.json

@@ -37,7 +37,8 @@
 		"@nativescript/swift-ui": "file:../../dist/packages/swift-ui",
 		"@nativescript/theme-switcher": "file:../../dist/packages/theme-switcher",
 		"@nativescript/twitter": "file:../../dist/packages/twitter",
-		"@nativescript/zip": "file:../../dist/packages/zip"
+		"@nativescript/zip": "file:../../dist/packages/zip",
+		"@nativescript/secure-storage": "file:../../dist/packages/secure-storage"
 	},
 	"devDependencies": {
 		"@nativescript/android": "~8.5.0",

apps/demo-angular/src/app-routing.module.ts

@@ -37,6 +37,7 @@ const routes: Routes = [
 	{ path: 'localize', loadChildren: () => import('./plugin-demos/localize.module').then((m) => m.LocalizeModule) },
 	{ path: 'pdf', loadChildren: () => import('./plugin-demos/pdf.module').then((m) => m.PdfModule) },
 	{ path: 'picker', loadChildren: () => import('./plugin-demos/picker.module').then((m) => m.PickerModule) },
+	{ path: 'secure-storage', loadChildren: () => import('./plugin-demos/secure-storage.module').then((m) => m.SecureStorageModule) },
 	{ path: 'shared-notification-delegate', loadChildren: () => import('./plugin-demos/shared-notification-delegate.module').then((m) => m.SharedNotificationDelegateModule) },
 	{ path: 'social-share', loadChildren: () => import('./plugin-demos/social-share.module').then((m) => m.SocialShareModule) },
 	{ path: 'swift-ui', loadChildren: () => import('./plugin-demos/swift-ui.module').then((m) => m.SwiftUiModule) },

apps/demo-angular/src/home.component.ts

@@ -96,6 +96,9 @@ export class HomeComponent {
 		{
 			name: 'picker',
 		},
+		{
+			name: 'secure-storage',
+		},
 		{
 			name: 'shared-notification-delegate',
 		},

apps/demo-angular/src/plugin-demos/secure-storage.component.html

@@ -0,0 +1,22 @@
+<ActionBar title="secure-storage" class="action-bar"> </ActionBar>
+<StackLayout class="p-20">
+	<Page>
+		<ScrollView>
+			<StackLayout>
+				<Button text="Set a value, sync" (tap)="demoShared.doSetSync()" class="btn btn-primary button-a button-group-first"></Button>
+				<Button text="Set a value, async" (tap)="demoShared.doSet()" class="btn btn-primary button-a"></Button>
+
+				<Button text="Get a value, sync" (tap)="demoShared.doGetSync()" class="btn btn-primary button-b button-group-first"></Button>
+				<Button text="Get a value, async" (tap)="demoShared.doGet()" class="btn btn-primary button-b"></Button>
+
+				<Label [text]="demoShared.lastRetrievedValue" class="message" textWrap="true"></Label>
+
+				<Button text="Remove a value, sync" (tap)="demoShared.doRemoveSync()" class="btn btn-primary button-c"></Button>
+				<Button text="Remove a value, async" (tap)="demoShared.doRemove()" class="btn btn-primary button-c"></Button>
+
+				<Button text="Remove all values, sync" (tap)="demoShared.doRemoveAllSync()" class="btn btn-primary button-d button-group-first"></Button>
+				<Button text="Remove all values, async" (tap)="demoShared.doRemoveAll()" class="btn btn-primary button-d"></Button>
+			</StackLayout>
+		</ScrollView>
+	</Page>
+</StackLayout>

apps/demo-angular/src/plugin-demos/secure-storage.component.scss

@@ -0,0 +1,34 @@
+.message {
+	color: #666;
+	font-size: 16;
+	padding: 20;
+}
+
+button {
+	color: #ffffff;
+	background-color: #6494aa;
+	padding: 6;
+	margin: 8 24;
+	font-size: 14;
+	border-radius: 4;
+}
+
+.button-group-first {
+	margin-top: 24;
+}
+
+.button-a {
+	background-color: cornflowerblue;
+}
+
+.button-b {
+	background-color: forestgreen;
+}
+
+.button-c {
+	background-color: orange;
+}
+
+.button-d {
+	background-color: red;
+}

apps/demo-angular/src/plugin-demos/secure-storage.component.ts

@@ -0,0 +1,17 @@
+import { Component, NgZone } from '@angular/core';
+import { DemoSharedSecureStorage } from '@demo/shared';
+
+@Component({
+	selector: 'demo-secure-storage',
+	templateUrl: 'secure-storage.component.html',
+	styleUrls: ['secure-storage.component.scss'],
+})
+export class SecureStorageComponent {
+	demoShared: DemoSharedSecureStorage;
+
+	constructor(private _ngZone: NgZone) {}
+
+	ngOnInit() {
+		this.demoShared = new DemoSharedSecureStorage();
+	}
+}

apps/demo-angular/src/plugin-demos/secure-storage.module.ts

@@ -0,0 +1,10 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
+import { SecureStorageComponent } from './secure-storage.component';
+
+@NgModule({
+	imports: [NativeScriptCommonModule, NativeScriptRouterModule.forChild([{ path: '', component: SecureStorageComponent }])],
+	declarations: [SecureStorageComponent],
+	schemas: [NO_ERRORS_SCHEMA],
+})
+export class SecureStorageModule {}

apps/demo/package.json

@@ -40,7 +40,8 @@
 		"@nativescript/swift-ui": "file:../../packages/swift-ui",
 		"@nativescript/theme-switcher": "file:../../packages/theme-switcher",
 		"@nativescript/twitter": "file:../../packages/twitter",
-		"@nativescript/zip": "file:../../packages/zip"
+		"@nativescript/zip": "file:../../packages/zip",
+		"@nativescript/secure-storage": "file:../../packages/secure-storage"
 	},
 	"devDependencies": {
 		"@nativescript/android": "~8.5.0",

apps/demo/src/main-page.xml

@@ -41,6 +41,7 @@
         <Button text="theme-switcher" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="twitter" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="zip" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
+<Button text="secure-storage" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
       </StackLayout>
     </ScrollView>
   </StackLayout>

apps/demo/src/plugin-demos/secure-storage.ts

@@ -0,0 +1,136 @@
+import { EventData, Observable, Page } from '@nativescript/core';
+import { DemoSharedSecureStorage } from '@demo/shared';
+import { SecureStorage } from '@nativescript/secure-storage';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new DemoModel();
+}
+
+export class DemoModel extends DemoSharedSecureStorage {
+	private secureStorage: SecureStorage;
+
+	constructor() {
+		super();
+		this.secureStorage = new SecureStorage();
+	}
+
+	public doGet() {
+		this.secureStorage
+			.get({
+				key: 'foo',
+			})
+			.then(
+				(value) => {
+					console.log('Value: ' + value);
+					this.set('lastRetrievedValue', value === null ? '(no value set)' : value);
+				},
+				(err) => {
+					console.log(err);
+				}
+			);
+	}
+
+	public doGetSync() {
+		console.log('go');
+		const value = this.secureStorage.getSync({
+			key: 'foo',
+		});
+		this.set('lastRetrievedValue', value === null ? '(no value set)' : value);
+	}
+
+	public doSet() {
+		this.secureStorage
+			.set({
+				key: 'foo',
+				value: 'I was set at ' + new Date(),
+			})
+			.then(
+				(success) => {
+					console.log('Successfully set a value? ' + success);
+				},
+				(err) => {
+					console.log(err);
+				}
+			);
+	}
+
+	public doSetSync() {
+		const success = this.secureStorage.setSync({
+			key: 'foo',
+			value: 'I was set at ' + new Date(),
+		});
+		console.log('Successfully set a value? ' + success);
+	}
+
+	public doRemove() {
+		this.secureStorage
+			.remove({
+				key: 'foo',
+			})
+			.then(
+				(success) => {
+					console.log('Successfully removed a value? ' + success);
+					this.set('lastRetrievedValue', '');
+				},
+				(err) => {
+					console.log(err);
+				}
+			);
+	}
+
+	public doRemoveSync() {
+		this.secureStorage.removeSync({
+			key: 'foo',
+		});
+		this.set('lastRetrievedValue', '');
+	}
+
+	public doRemoveAll() {
+		this.secureStorage.removeAll().then(
+			(success) => {
+				console.log('Successfully removed all values? ' + success);
+				this.set('lastRetrievedValue', '');
+			},
+			(err) => {
+				console.log(err);
+			}
+		);
+	}
+
+	public doRemoveAllSync() {
+		this.secureStorage.removeAllSync();
+		this.set('lastRetrievedValue', '');
+	}
+
+	public doClearAllOnFirstRunSync() {
+		const res: boolean = this.secureStorage.clearAllOnFirstRunSync();
+		if (res) {
+			console.log('Cleared');
+			this.set('lastRetrievedValue', '');
+		} else {
+			alert('Is not the first run ! \n use `removeAllSync` or `removeAll` ;-)');
+		}
+	}
+
+	public doClearAllOnFirstRun() {
+		this.secureStorage.clearAllOnFirstRun().then((res) => {
+			if (res) {
+				console.log('Cleared');
+				this.set('lastRetrievedValue', '');
+			} else {
+				alert('Is not the first run ! \n use `removeAllSync` or `removeAll` ;-)');
+			}
+		});
+	}
+
+	public doIsFirstRun() {
+		this.secureStorage.isFirstRun().then((isFirst) => {
+			this.set('isFirstRun', isFirst);
+		});
+	}
+
+	public doIsFirstRunSync() {
+		this.set('isFirstRun', this.secureStorage.isFirstRunSync());
+	}
+}

apps/demo/src/plugin-demos/secure-storage.xml

@@ -0,0 +1,33 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <Page.actionBar>
+    <ActionBar title="secure-storage" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout class="p-20">
+    <ScrollView class="h-full">
+      <StackLayout>
+        <Image margin="0" src="~/res/securestorage.png" width="100%" />
+
+        <Button text="Set a value, sync" tap="{{ doSetSync }}" class="button-a button-group-first" />
+        <Button text="Set a value, async" tap="{{ doSet }}" class="button-a" />
+
+        <Button text="Get a value, sync" tap="{{ doGetSync }}" class="button-b button-group-first" />
+        <Button text="Get a value, async" tap="{{ doGet }}" class="button-b" />
+
+        <Label text="{{ lastRetrievedValue }}" class="message" textWrap="true" />
+
+        <Button text="Remove a value, sync" tap="{{ doRemoveSync }}" class="button-c" />
+        <Button text="Remove a value, async" tap="{{ doRemove }}" class="button-c" />
+
+        <Button text="Remove all values, sync" tap="{{ doRemoveAllSync }}" class="button-d button-group-first" />
+        <Button text="Remove all values, async" tap="{{ doRemoveAll }}" class="button-d" />
+
+        <Button text="Clear all on first run sync" tap="{{ doClearAllOnFirstRunSync }}" class="button-e button-group-first" />
+        <Button text="Clear all on first run, async" tap="{{ doClearAllOnFirstRun }}" class="button-e" />
+
+        <Button text="{{ 'Is first run (sync)? ' + (isFirstRun === undefined ? '' : isFirstRun) }}" tap="{{ doIsFirstRunSync }}" class="button-f button-group-first" />
+        <Button text="{{ 'Is first run (async)? ' + (isFirstRun === undefined ? '' : isFirstRun) }}" tap="{{ doIsFirstRun }}" class="button-f" />
+      </StackLayout>
+    </ScrollView>
+  </StackLayout>
+</Page>

packages/secure-storage/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+	"extends": ["../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*", "node_modules/**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.ts", "*.tsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.js", "*.jsx"],
+			"rules": {}
+		}
+	]
+}