demo

src/backend/Types/Types.ts

 }
 
 export type Race = "Human" | "Gnome" | "Night Elf" | "Dwarf"
+export const _Race: Race[] =["Human", "Gnome", "Night Elf", "Dwarf"]
 export type Rank =             "ADMIN" | "Guildmaster" | "Officer" | "Classleader" | "Raider" | "Trial" | "Social" | "Guest"
 export const _Rank : Rank[] = ["ADMIN" , "Guildmaster" , "Officer" , "Classleader" , "Raider" , "Trial" , "Social" , "Guest"]
 export type Class =              "Warrior" | "Rogue" | "Hunter" | "Mage" | "Warlock" | "Priest" | "Shaman" | "Paladin" | "Druid"

src/frontend/src/app/frontcraft/auth/register/register.component.html

 
   <nb-card>
     <nb-card-body>
-      <nb-checkbox [(ngModel)]="showApplication" name="amMember" #checkbox>I am already a member</nb-checkbox>
+      <nb-checkbox [(ngModel)]="showApplication" name="amMember" #checkbox><!--I am already a member-->I understand this is super beta and things might not work or are not very pretty</nb-checkbox>
       <br />
       
-      <span *ngIf="showApplication">
+      <span > <!--*ngIf="showApplication"-->
         And my main is &nbsp; <input name="preMember" [(ngModel)]="character.name"  nbInput>, a 
+        <nb-select [(selected)]="character.race" placeholder="Race" (selectedChange)="onSelectRace()">
+          <nb-option *ngFor="let race of races" [value]="race">{{race}}</nb-option>
+        </nb-select>
         <nb-select [(selected)]="character.spec" placeholder="Spec" (selectedChange)="onSelectSpec()">
           <nb-option *ngFor="let spec of specs" [value]="spec">{{spec}}</nb-option>
         </nb-select>
           <nb-option *ngFor="let rank of ranks" [value]="rank" >{{rank}}</nb-option>
         </nb-select>
       </span>
-
+      <!--
       <span *ngIf="!showApplication">Hello my name is &nbsp; <input name="charName" [(ngModel)]="character.name" nbInput>
         I am playing a level 60 
         <nb-select [(selected)]="character.spec" placeholder="Spec" (selectedChange)="onSelectSpec()">
         </nb-select>
         and I would like to join Tranquil because
         <textarea nbInput fullWidth placeholder="reason" style="min-height: 400px"></textarea>
-
       </span>
-
+      -->
     </nb-card-body>
   </nb-card>
 

src/frontend/src/app/frontcraft/auth/register/register.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ApiService as ApiService, hash } from '../../services/login-api';
 import { Router } from '@angular/router';
-import { _Rank, _Class, Class, User  } from '../../../../../../backend/Types/Types'
+import { _Rank, _Class, Class, User, _Race  } from '../../../../../../backend/Types/Types'
 import { specs  } from '../../../../../../backend/Types/PlayerSpecs'
 import { race } from 'rxjs';
 
 
   character: any = {
     class : "Warrior",
-    spec : "Arms"
+    spec : "Arms",
+    race: "Night Elf"
   }
 
   ranks = _Rank
   classes = _Class
+  races  = _Race
   selectedClass : Class = "Warrior"
   selectedSpec = specs[this.selectedClass][0]
   specs = specs[this.selectedClass]
   onSelectSpec(){
   }
 
+  onSelectRace(){}
+
   async onSubmit(){
     const pw = this.user.pwhash
     this.user.pwhash = await hash(this.user.pwhash)
         charactername: char.name,
         specid: specid,
         userid: this.api.getAuth().user.id!,
-        race: 'Human'
+        race: char.race
       })
     }catch(e){
       alert("Error creating character"+e)

src/frontend/src/app/frontcraft/pages/shop/buytoken.component.ts

         const token = await src.buyToken(this.api.getAuth().token.value, charactername, this.item.itemname, this.signup)
     
         if(token){
-        this.toastr.show(token.characterid+' now has a token for '+token.itemname+' of level '+token.level, 'Yay', {status: 'success'})
+        this.toastr.show(token.charactername+' now has a token for '+token.itemname+' of level '+token.level, 'Yay', {status: 'success'})
         }else{
         this.toastr.show('Error (something went wrong)', 'Oh no', {status: 'danger'})
         }