Use better random IDs

src/app/budgets/budget.ts

@@ -1,8 +1,8 @@
 import { UserPermission } from '../users/user';
-import { uuidv4 } from '../shared/utils';
+import { randomId } from '../shared/utils';
 
 export class Budget {
-    id: string = uuidv4();
+    id: string = randomId();
     name: string;
     description: string;
     users: UserPermission[];

src/app/categories/category.ts

@@ -1,7 +1,7 @@
-import { uuidv4 } from '../shared/utils';
+import { randomId } from '../shared/utils';
 
 export class Category {
-  id: string = uuidv4();
+  id: string = randomId();
   title: string;
   description: string;
   amount: number;

src/app/shared/twigs.local.service.ts

@@ -6,7 +6,7 @@ import { TwigsService } from './twigs.service';
 import { Budget } from '../budgets/budget';
 import { Category } from '../categories/category';
 import { Transaction } from '../transactions/transaction';
-import { uuidv4 } from '../shared/utils';
+import { randomId } from '../shared/utils';
 
 /**
  * This is intended to be a very simple implementation of the TwigsService used for testing out the UI and quickly iterating on it.
@@ -21,7 +21,7 @@ export class TwigsLocalService implements TwigsService {
     private http: HttpClient
   ) { }
 
-  private users: User[] = [new User(uuidv4(), 'test', 'test@example.com')];
+  private users: User[] = [new User(randomId(), 'test', 'test@example.com')];
   private budgets: Budget[] = [];
   private transactions: Transaction[] = [];
   private categories: Category[] = [];
@@ -45,7 +45,7 @@ export class TwigsLocalService implements TwigsService {
       const user = new User();
       user.username = username;
       user.email = email;
-      user.id = uuidv4();
+      user.id = randomId();
       this.users.push(user);
       subscriber.next(user);
       subscriber.complete();
@@ -257,7 +257,7 @@ export class TwigsLocalService implements TwigsService {
       transaction.expense = isExpense;
       transaction.categoryId = category;
       transaction.budgetId = budgetId;
-      transaction.id = uuidv4();
+      transaction.id = randomId();
       this.transactions.push(transaction);
       subscriber.next(transaction);
       subscriber.complete();

src/app/shared/utils.ts

@@ -1,6 +1,7 @@
-export function uuidv4(): string {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
-        return v.toString(16);
-    });
+const CHARACTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+
+export function randomId(): string {
+    var bytes = new Uint8Array(32)
+    window.crypto.getRandomValues(bytes)
+    return Array.from(bytes, (byte) => CHARACTERS[byte % CHARACTERS.length]).join('')
 }

src/app/transactions/transaction.ts

@@ -1,7 +1,7 @@
-import { uuidv4 } from '../shared/utils';
+import { randomId } from '../shared/utils';
 
 export class Transaction {
-  id: string = uuidv4();
+  id: string = randomId();
   title: string;
   description: string = null;
   date: Date = new Date();

src/app/users/user.ts

@@ -1,7 +1,7 @@
-import { uuidv4 } from "../shared/utils";
+import { randomId } from "../shared/utils";
 
 export class User {
-  id: string = uuidv4();
+  id: string = randomId();
   username: string;
   email: string;