2024/07/10

.vscode/settings.json

 {
-  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular/standalone"]
-}
+  "files.exclude": {
+    "amplify/.config": true,
+    "amplify/**/*-parameters.json": true,
+    "amplify/**/amplify.state": true,
+    "amplify/**/transform.conf.json": true,
+    "amplify/#current-cloud-backend": true,
+    "amplify/backend/amplify-meta.json": true,
+    "amplify/backend/awscloudformation": true
+  },
+  "typescript.preferences.autoImportFileExcludePatterns": [
+    "@ionic/angular/common",
+    "@ionic/angular/standalone"
+  ]
+}
\ No newline at end of file

package.json

@@ -21,12 +21,14 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
+    "@aws-amplify/ui-angular": "^5.0.16",
     "@capacitor/app": "6.0.0",
     "@capacitor/core": "6.1.0",
     "@capacitor/haptics": "6.0.0",
     "@capacitor/keyboard": "6.0.1",
     "@capacitor/status-bar": "6.0.0",
     "@ionic/angular": "^8.0.0",
+    "aws-amplify": "^6.4.0",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "ionicons": "^7.0.0",

src/app/app.module.ts

@@ -9,7 +9,11 @@ import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    AppRoutingModule
+  ],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent]
 })

src/app/card-regist/card-regist.page.ts

 import { Component } from '@angular/core';
 import { RouteService } from '../services/route.service';
+import { CardService } from '../services/card.service';
+import { CreditCardModel } from '../model/credit-card.model';
 
 /**
  * クレジットカード登録画面
@@ -36,8 +38,9 @@ export class CardRegistPage {
   /**
    * コンストラクタ
    * @param routeService 画面遷移サービス
+   * @param cardService クレジットカードサービス
    */
-  constructor(private routeService: RouteService) { }
+  constructor(private routeService: RouteService, private cardService: CardService) { }
 
   /**
    * 閉じる
@@ -51,6 +54,15 @@ export class CardRegistPage {
    * @param event イベント
    */
   onClickAddCard(event: any): void {
+    //クレジットカード登録
+    let model: CreditCardModel = new CreditCardModel();
+    model.cardNumber = this.cardMonth ? this.cardMonth : "";
+    model.cardOwner = this.cardOwner ? this.cardOwner : "";
+    model.cardMonth = this.cardMonth ? this.cardMonth : "";
+    model.cardYear = this.cardYear ? this.cardYear : "";
+    model.cvc = this.cvc ? this.cvc : "";
+    this.cardService.regist(this.routeService.customerId, model);
+
     this.routeService.navigateCardSelect();
   }
 }

src/app/card-select/card-info/card-info.component.html

@@ -7,9 +7,9 @@
             <td style="width:75%;padding-top:10px;padding-left:10px;">
               <span>クレジットカード</span>
             </td>
-            <!-- td style="padding-top:10px;">
+            <td style="padding-top:10px;">
               <div class="common-link" (click)="onClickPass()">定期券</div>
-            </td -->
+            </td>
             <td align="right" style="padding-top:10px;padding-right:10px;">
               <i class="bi bi-trash3" (click)="onClickTrash()"></i>
             </td>

src/app/card-select/card-select.page.ts

 import { Component, OnInit } from '@angular/core';
 import { RouteService } from '../services/route.service';
 import { CreditCardModel } from '../model/credit-card.model';
+import { CardService } from '../services/card.service';
 
 /**
  * クレジットカード選択
@@ -15,30 +16,25 @@ export class CardSelectPage implements OnInit {
 
   /**
    * コンストラクタ
+   * @param routeService 画面遷移サービス
+   * @param cardService クレジットカードサービス
    */
-  constructor(private routeService: RouteService) { }
+  constructor(private routeService: RouteService, private cardService: CardService) { }
 
   /**
    * 初期化
    */
   ngOnInit(): void {
-    this.cardList = new Array();
-    for (let i = 0; i < 2; i++) {
-      let model: CreditCardModel = new CreditCardModel();
-      let value = 1234 + i;
-      model.cardNumber = String(value);
-      model.cardOwner = "TARO YAMADA";
-      model.cardYear = "2023";
-      model.cardMonth = "02";
-      this.cardList.push(model);
-    }
+    this.cardList = this.cardService.getList(this.routeService.customerId);
   }
 
   /**
    * 戻る
    */
   onClickBack(): void {
-    this.routeService.navigateMenu();
+    if (this.routeService.customerId) {
+      this.routeService.navigateMenu(this.routeService.customerId);
+    }
   }
 
   /**
@@ -53,7 +49,7 @@ export class CardSelectPage implements OnInit {
    * @param model クレジットカード情報
    */
   onClickPass(model: CreditCardModel): void {
-    this.routeService.navigatePassSelect(model.cardNumber);
+    this.routeService.navigatePassSelect(model.tokenId, model.cardNumber);
   }
 
   /**
@@ -61,6 +57,6 @@ export class CardSelectPage implements OnInit {
    * @param model クレジットカード情報
    */
   onClickTrash(model: CreditCardModel): void {
-
+    this.cardService.delete(model.tokenId);
   }
 }

src/app/common/header/header.component.ts

@@ -46,6 +46,8 @@ export class HeaderComponent {
    * 利用者情報更新
    */
   onClickSetting(): void {
-    this.routeService.navigateUserRegist();
+    if (this.routeService.customerId) {
+      this.routeService.navigateUserRegist(1, this.routeService.customerId);
+    }
   }
 }

src/app/deny-list/deny-list.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { DenyListModel } from '../model/deny-list.model';
 import { RouteService } from '../services/route.service';
 import { DenyInfoComponent } from './component/deny-info/deny-info.component';
+import { DenylistService } from '../services/denylist.service';
 
 @Component({
   selector: 'app-deny-list',
@@ -28,24 +29,16 @@ export class DenyListPage implements OnInit {
   /**
    * コンストラクタ
    * @param routeService 画面遷移サービス
+   * @param denyListService 拒否リストサービス
    */
-  constructor(private routeService: RouteService) { }
+  constructor(private routeService: RouteService, private denyListService: DenylistService) { }
 
   /**
    * 初期化
    */
   ngOnInit() {
-    this.denyList = new Array();
-    for (let i = 0; i < 4; i++) {
-      let denyListModel = new DenyListModel();
-      let str = String(i);
-      denyListModel.getonStopId = str;
-      denyListModel.getonStopName = "XXXX停留所";
-      denyListModel.getoffStopName = "YYYYY停留所";
-      denyListModel.getonDt = "2024/06/20 10:00:01";
-      denyListModel.getoffDt = "2024/06/20 10:30:02";
-      denyListModel.amount = 1000;
-      this.denyList.push(denyListModel);
+    if (this.routeService.customerId) {
+      this.denyList = this.denyListService.getList(this.routeService.customerId);
     }
   }
 
@@ -53,7 +46,9 @@ export class DenyListPage implements OnInit {
    * 戻る
    */
   onClickBack(): void {
-    this.routeService.navigateMenu();
+    if (this.routeService.customerId) {
+      this.routeService.navigateMenu(this.routeService.customerId);
+    }
   }
 
   /**
@@ -61,14 +56,19 @@ export class DenyListPage implements OnInit {
    */
   onClickDelreq(event: any): void {
     if (event.detail.role === 'confirm') {
+      let req: DenyListModel[] = [];
       this.denyInfoList?.forEach(child => {
         let model = child.getModel();
         if (model.select) {
           //拒否リスト削除依頼
+          req.push(model);
         }
       });
+      this.denyListService.reqDelete(req);
+    }
+    if (this.routeService.customerId) {
+      this.routeService.navigateMenu(this.routeService.customerId);
     }
-    this.routeService.navigateMenu();
   }
 
 }

src/app/history/history.page.html

@@ -3,16 +3,6 @@
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-grid>
-    <ion-row>
-      <ion-col>
-        <div class="common-link" (click)="onClickPrev()">＜前の10件</div>
-      </ion-col>
-      <ion-col class="ion-text-right">
-        <div class="common-link" (click)="onClickNext()">次の10件＞</div>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
   <ion-grid style="margin-top:20px;">
     @for (history of historyList;track history.getonoffDt) {
     <ion-row>

src/app/history/history.page.ts

 import { Component, OnInit } from '@angular/core';
 import { RouteService } from '../services/route.service';
 import { HistoryModel } from '../model/history.model';
+import { HistoryService } from '../services/history.service';
 
 /**
  * 乗車履歴閲覧画面
@@ -18,57 +19,25 @@ export class HistoryPage implements OnInit {
   /**
    * コンストラクタ
    * @param routeService 画面遷移サービス
+   * @parma historyService 乗降履歴サービス
    */
-  constructor(private routeService: RouteService) { }
+  constructor(private routeService: RouteService, private historyService: HistoryService) { }
 
   /**
    * 初期化
    */
   ngOnInit() {
-    this.historyList = new Array();
-    for (let i = 0; i < 10; i++) {
-      let historyModel: HistoryModel = new HistoryModel();
-      let str = String(i);
-      historyModel.getonoffDt = "2024/06/19 17:08:1" + str;
-      historyModel.stopId = str;
-      if (i % 2 == 0) {
-        historyModel.kind = "1";
-        historyModel.stopName = "XXXX停留所";
-        historyModel.status = 1;
-      } else {
-        historyModel.kind = "2";
-        historyModel.stopName = "YYYY停留所";
-        historyModel.fare = 200;
-        historyModel.status = 1;
-      }
-      this.historyList.push(historyModel);
+    if (this.routeService.customerId) {
+      this.historyList = this.historyService.getHistoryList(this.routeService.customerId);
     }
-    let historyModel: HistoryModel = new HistoryModel();
-    historyModel.getonoffDt = "2024/06/19 17:10:10";
-    historyModel.kind = "1";
-    historyModel.stopName = "XXXX停留所";
-    historyModel.status = 0;
-    this.historyList.push(historyModel);
   }
 
   /**
    * 戻る
    */
   onClickBack(): void {
-    this.routeService.navigateMenu();
-  }
-
-  /**
-   * 前の10件
-   */
-  onClickPrev(): void {
-
-  }
-
-  /**
-   * 次の10件
-   */
-  onClickNext(): void {
-
+    if (this.routeService.customerId) {
+      this.routeService.navigateMenu(this.routeService.customerId);
+    }
   }
 }

src/app/home/home.page.html

@@ -6,14 +6,14 @@
     <ion-row>
       <ion-col>
         <ion-item>
-          <ion-input label="メールアドレス" [value]="email"></ion-input>
+          <ion-input type="email" label="メールアドレス" [(ngModel)]="email" [maxlength]="50"></ion-input>
         </ion-item>
       </ion-col>
     </ion-row>
     <ion-row>
       <ion-col>
         <ion-item>
-          <ion-input type="password" label="パスワード" [value]="password">
+          <ion-input type="password" label="パスワード" [(ngModel)]="password" [maxlength]="20">
             <ion-input-password-toggle slot="end"></ion-input-password-toggle>
           </ion-input>
         </ion-item>

src/app/home/home.page.ts

 import { Component } from '@angular/core';
 import { RouteService } from '../services/route.service';
+import { LoginService } from '../services/login.service';
 
 /**
  * ログイン画面
@@ -18,21 +19,35 @@ export class HomePage {
   /**
    * コンストラクタ
    * @param routeService 画面遷移サービス
+   * @param loginService ログイン処理サービス
    */
-  constructor(private routeService: RouteService) { }
+  constructor(private routeService: RouteService, private loginService: LoginService) { }
 
   /**
    * ログイン
    */
   onClickLogin(): void {
-    this.routeService.navigateMenu();
+    if (!this.email) {
+      alert("メールアドレスが入力されていません")
+      return;
+    }
+
+    if (!this.password) {
+      alert("パスワードが入力されていません");
+      return;
+    }
+
+    if (this.loginService.login(this.email, this.password)) {
+      //TODO
+      this.routeService.navigateMenu("0000");
+    }
   }
 
   /**
    * 利用者登録
    */
   onClickRegist(): void {
-    this.routeService.navigateUserRegist();
+    this.routeService.navigateUserRegist(0, "");
   }
 
   /**

src/app/model/commuter-pass.model.ts

 export class CommuterPassModel {
+    //トークンID
+    tokenId?: string;
+    //事業者ID
+    agencyId: string = "";
     //経路ID
     routeId: string = "";
     //経路名

src/app/model/credit-card.model.ts

@@ -2,7 +2,10 @@
  * クレジットカード情報
  */
 export class CreditCardModel {
-    //カード番号(下4桁)
+    //トークンID
+    tokenId?: string;
+
+    //カード番号(登録時全番号、それ以外下4桁)
     cardNumber: string = "";
 
     //カード名義人
@@ -13,4 +16,7 @@ export class CreditCardModel {
 
     //有効期限-月
     cardMonth: string = "";
+
+    //CVC
+    cvc: string = "";
 }
\ No newline at end of file

src/app/pass-change/pass-change.page.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { CommuterPassModel } from '../model/commuter-pass.model';
 import { RouteService } from '../services/route.service';
+import { PassService } from '../services/pass.service';
 
 /**
  * 定期券区間変更画面
@@ -39,8 +40,9 @@ export class PassChangePage implements OnInit {
   /**
    * コンストラクタ
    * @param routeService 画面遷移サービス
+   * @param passService 定期券サービス
    */
-  constructor(private routeService: RouteService) {
+  constructor(private routeService: RouteService, private passService: PassService) {
     this.cardNumber = routeService.cardNumber;
     this.commuterPassModel = routeService.commuterPassModel;
   }
@@ -50,10 +52,8 @@ export class PassChangePage implements OnInit {
    */
   ngOnInit(): void {
     //停留所一覧
-    this.stopList = new Map();
-    for (let i = 0; i < 5; i++) {
-      let str = String(i + 1);
-      this.stopList.set(str, "停留所" + str);
+    if (this.commuterPassModel) {
+      this.stopList = this.passService.getStopList(this.commuterPassModel?.agencyId, this.commuterPassModel?.routeId);
     }
   }
 
@@ -70,6 +70,11 @@ export class PassChangePage implements OnInit {
   onClickChange(event: any): void {
     if (event.detail.role === 'confirm') {
       //定期券区間変更
+      if (this.commuterPassModel) {
+        this.commuterPassModel.getonStopId = this.getonStopId ? this.getonStopId : "";
+        this.commuterPassModel.getoffStopId = this.getoffStopId ? this.getoffStopId : "";
+        this.passService.change(this.commuterPassModel);
+      }
     }
     this.routeService.navigatePassSelect(this.cardNumber);
   }

src/app/pass-continue/pass-continue.page.ts

 import { Component, OnInit } from '@angular/core';
 import { RouteService } from '../services/route.service';
 import { CommuterPassModel } from '../model/commuter-pass.model';
+import { PassService } from '../services/pass.service';
 
 /**
  * 定期券継続画面
@@ -37,8 +38,9 @@ export class PassContinuePage implements OnInit {
   /**
    * コンストラクタ
    * @param routeService 画面遷移サービス
+   * @param passService 定期券サービス
    */
-  constructor(private routeService: RouteService) {
+  constructor(private routeService: RouteService, private passService: PassService) {
     this.cardNumber = routeService.cardNumber;
     this.commuterPassModel = routeService.commuterPassModel;
   }
@@ -48,10 +50,9 @@ export class PassContinuePage implements OnInit {
    */
   ngOnInit(): void {
     //使用期間一覧
-    this.useTermList = new Map();
-    this.useTermList.set("1", "1ヶ月");
-    this.useTermList.set("2", "3ヶ月");
-    this.useTermList.set("6", "6ヶ月");
+    if (this.commuterPassModel) {
+      this.useTermList = this.passService.getUseTermList(this.commuterPassModel?.agencyId);
+    }
   }
 
   /**
@@ -67,6 +68,11 @@ export class PassContinuePage implements OnInit {
   onClickContinue(event: any): void {
     if (event.detail.role === 'confirm') {
       //定期券継続
+      if (this.commuterPassModel) {
+        this.commuterPassModel.useTermId = this.useTermId ? this.useTermId : "";
+        this.commuterPassModel.startDate = this.startDate ? this.startDate : "";
+        this.passService.continue(this.commuterPassModel);
+      }
     }
     this.routeService.navigatePassSelect(this.cardNumber);
   }

src/app/pass-refund/pass-refund.page.ts

 import { Component, OnInit } from '@angular/core';
 import { CommuterPassModel } from '../model/commuter-pass.model';
 import { RouteService } from '../services/route.service';
+import { PassService } from '../services/pass.service';
 
 /**
  * 定期券払戻画面
@@ -39,8 +40,9 @@ export class PassRefundPage implements OnInit {
   /**
    * コンストラクタ
    * @param routeService 画面遷移サービス
+   * @param passService 定期券サービス
    */
-  constructor(private routeService: RouteService) {
+  constructor(private routeService: RouteService, private passService: PassService) {
     this.cardNumber = routeService.cardNumber;
     this.commuterPassModel = routeService.commuterPassModel;
   }
@@ -68,7 +70,10 @@ export class PassRefundPage implements OnInit {
    */
   onClickRefund(event: any): void {
     if (event.detail.role === 'confirm') {
-      //定期券継続
+      //定期券払戻
+      if (this.commuterPassModel) {
+        this.passService.refund(this.commuterPassModel);
+      }
     }
     this.routeService.navigatePassSelect(this.cardNumber);
   }

src/app/pass-regist/pass-regist.page.html

@@ -7,7 +7,7 @@
     <ion-row>
       <ion-col>
         <ion-item>
-          <ion-select label="路線" [value]="routeId">
+          <ion-select label="路線" [value]="routeId" (change)="onChangeRoute($event)">
             @for (kv of routeList|keyvalue;track kv.key) {
             <ion-select-option value="kv.key">{{kv.value}}</ion-select-option>
             }

src/app/pass-regist/pass-regist.page.ts

 import { KeyValue } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { RouteService } from '../services/route.service';
+import { CommuterPassModel } from '../model/commuter-pass.model';
+import { PassService } from '../services/pass.service';
 
 /**
  * 定期券登録画面
@@ -46,42 +48,41 @@ export class PassRegistPage implements OnInit {
   getoffStopId?: string;
   //支払金額
   price: number = 0;
+  //事業者ID
+  agencyId: string = "";
 
   /**
    * コンストラクタ
    * @param routeService 画面遷移サービス
+   * @param passService 定期券サービス
    */
-  constructor(private routeService: RouteService) { }
+  constructor(private routeService: RouteService, private passService: PassService) { }
 
   /**
    * 初期化
    */
   ngOnInit(): void {
+
     //路線一覧
-    this.routeList = new Map();
-    for (let i = 0; i < 5; i++) {
-      let str = String(i + 1);
-      this.routeList.set(str, "路線" + str);
-    }
+    //TODO 事業者IDはどうやって決める?
+    this.routeList = this.passService.getRouteList(this.agencyId);
 
     //使用期間一覧
-    this.useTermList = new Map();
-    this.useTermList.set("1", "1ヶ月");
-    this.useTermList.set("2", "3ヶ月");
-    this.useTermList.set("6", "6ヶ月");
+    this.useTermList = this.passService.getUseTermList(this.agencyId);
 
     //料金区分一覧
-    this.priceRangeList = new Map();
-    this.priceRangeList.set("1", "大人");
-    this.priceRangeList.set("2", "小児");
-    this.priceRangeList.set("3", "学生");
+    this.priceRangeList = this.passService.getPriceRangeList(this.agencyId);
 
     //停留所一覧
-    this.stopList = new Map();
-    for (let i = 0; i < 5; i++) {
-      let str = String(i + 1);
-      this.stopList.set(str, "停留所" + str);
-    }
+    this.stopList = this.passService.getStopList(this.agencyId, this.routeList.values().next().value);
+  }
+
+  /**
+   * 路線選択
+   * @param event イベント情報
+   */
+  onChangeRoute(event: any): void {
+    this.stopList = this.passService.getStopList(this.agencyId, event.target.value);
   }
 
   /**
@@ -97,6 +98,15 @@ export class PassRegistPage implements OnInit {
   onClickAdd(event: any): void {
     if (event.detail.role === 'confirm') {
       //定期券登録
+      let model: CommuterPassModel = new CommuterPassModel();
+      model.tokenId = this.routeService.tokenId;
+      model.routeId = this.routeId ? this.routeId : "";
+      model.startDate = this.startDate ? this.startDate : "";
+      model.useTermId = this.useTermId ? this.useTermId : "";
+      model.priceRangeId = this.priceRangeId ? this.priceRangeId : "";
+      model.getonStopId = this.getonStopId ? this.getonStopId : "";
+      model.getoffStopId = this.getoffStopId ? this.getoffStopId : "";
+      this.passService.regist(model);
     }
     this.routeService.navigatePassSelect(this.routeService.cardNumber);
   }

src/app/pass-select/pass-select.page.ts

 import { Component, OnInit } from '@angular/core';
 import { CommuterPassModel } from '../model/commuter-pass.model';
 import { RouteService } from '../services/route.service';
+import { PassService } from '../services/pass.service';
 
 /**
  * 定期券選択画面
@@ -19,8 +20,9 @@ export class PassSelectPage implements OnInit {
   /**
    * コンストラクタ
    * @param routeService 画面遷移サービス
+   * @param passServiec 定期券サービス
    */
-  constructor(private routeService: RouteService) {
+  constructor(private routeService: RouteService, private passService: PassService) {
     this.cardNumber = routeService.cardNumber;
   }
 
@@ -28,19 +30,8 @@ export class PassSelectPage implements OnInit {
    * 初期化
    */
   ngOnInit() {
-    this.commuterPassList = new Array();
-    for (let i = 0; i < 2; i++) {
-      let model: CommuterPassModel = new CommuterPassModel();
-      model.routeId = "00000" + String(i);
-      model.routeName = "【◯◯◯系統】XXXXX→XXXXX行き";
-      model.startDate = "2024/07/01";
-      model.useTermId = "2";
-      model.useTermName = "3ヶ月";
-      model.priceRangeId = "0";
-      model.privateRangeName = "大人";
-      model.getonStopName = "XXXXX";
-      model.getoffStopName = "XXXXX";
-      this.commuterPassList.push(model);
+    if (this.routeService.tokenId) {
+      this.commuterPassList = this.passService.getList(this.routeService.tokenId);
     }
   }
 

src/app/services/route.service.ts

@@ -15,6 +15,15 @@ export class RouteService {
   //定期券情報
   commuterPassModel?: CommuterPassModel;
 
+  //モード
+  mode: number = 0;
+
+  //利用者ID
+  customerId?: string;
+
+  //トークンID
+  tokenId?: string;
+
   /**
    * コンストラクタ
    * @param router Router
@@ -30,8 +39,11 @@ export class RouteService {
 
   /**
    * 利用者登録画面へ遷移
+   * @param mode 0:登録、1:更新
    */
-  navigateUserRegist() {
+  navigateUserRegist(mode: number, customerId: string) {
+    this.mode = mode;
+    this.customerId = customerId;
     this.router.navigate(['user-regist']);
   }
 
@@ -45,7 +57,8 @@ export class RouteService {
   /**
    * メニュー画面へ遷移
    */
-  navigateMenu() {
+  navigateMenu(customerId: string) {
+    this.customerId = customerId;
     this.router.navigate(['menu']);
   }
 
@@ -67,7 +80,8 @@ export class RouteService {
    * 定期券選択画面へ遷移
    * @param cardNumber カード番号
    */
-  navigatePassSelect(cardNumber?: string) {
+  navigatePassSelect(tokenId?: string, cardNumber?: string) {
+    this.tokenId = tokenId;
     this.cardNumber = cardNumber;
     this.router.navigate(['pass-select']);
   }

src/app/user-regist/user-regist.page.html

@@ -7,21 +7,21 @@
     <ion-row>
       <ion-col>
         <ion-item>
-          <ion-input label="氏名" [value]="name"></ion-input>
+          <ion-input type="text" label="氏名" [value]="name" [maxlength]="30"></ion-input>
         </ion-item>
       </ion-col>
     </ion-row>
     <ion-row>
       <ion-col>
         <ion-item>
-          <ion-input label="フリガナ" [value]="nameKana"></ion-input>
+          <ion-input type="text" label="フリガナ" [value]="nameKana" [maxlength]="30"></ion-input>
         </ion-item>
       </ion-col>
     </ion-row>
     <ion-row>
       <ion-col>
         <ion-item>
-          <ion-input type="tel" label="電話番号" [value]="phoneNumber"></ion-input>
+          <ion-input type="tel" label="電話番号" [value]="phoneNumber" [maxlength]="20"></ion-input>
         </ion-item>
       </ion-col>
     </ion-row>
@@ -29,7 +29,7 @@
       <ion-col>
         @if (mode === 0) {
         <ion-item>
-          <ion-input type="email" label="メールアドレス" [value]="email"></ion-input>
+          <ion-input type="email" label="メールアドレス" [value]="email" [maxlength]="50"></ion-input>
         </ion-item>
         } @else {
         <ion-label>メールアドレス</ion-label><ion-label>{{email}}</ion-label>
@@ -39,7 +39,7 @@
     <ion-row>
       <ion-col>
         <ion-item>
-          <ion-input type="password" label="パスワード" [value]="password">
+          <ion-input type="password" label="パスワード" [value]="password" [maxlength]="20">
             <ion-input-password-toggle slot="end"></ion-input-password-toggle>
           </ion-input>
         </ion-item>

src/app/user-regist/user-regist.page.ts

 import { Component, OnInit } from '@angular/core';
 import { RouteService } from '../services/route.service';
+import { UserService } from '../services/user.service';
+import { UserInfoModel } from '../model/user-info.model';
 
 /**
  * 利用者登録画面
@@ -9,7 +11,7 @@ import { RouteService } from '../services/route.service';
   templateUrl: './user-regist.page.html',
   styleUrls: ['./user-regist.page.scss'],
 })
-export class UserRegistPage {
+export class UserRegistPage implements OnInit {
   //モード(0:登録、1:更新)
   mode: number = 0;
   //氏名
@@ -22,6 +24,8 @@ export class UserRegistPage {
   email?: string;
   //パスワード
   password?: string;
+  //利用者ID
+  customerId?: string;
 
   public confirmButtons = [
     {
@@ -37,8 +41,26 @@ export class UserRegistPage {
   /**
    * コンストラクタ
    * @param routeService 画面遷移サービス
+   * @param userService 利用者情報サービス
    */
-  constructor(private routeService: RouteService) { }
+  constructor(private routeService: RouteService, private userService: UserService) {
+    this.mode = routeService.mode;
+    this.customerId = routeService.customerId;
+  }
+
+  /**
+   * 初期処理
+   */
+  ngOnInit(): void {
+    if (this.customerId) {
+      let model: UserInfoModel = this.userService.getInfo(this.customerId);
+      this.name = model.name;
+      this.nameKana = model.nameKana;
+      this.phoneNumber = model.phoneNumber;
+      this.email = model.email;
+      this.password = model.password;
+    }
+  }
 
   /**
    * 閉じる
@@ -54,6 +76,13 @@ export class UserRegistPage {
   onClickRegist(event: any): void {
     if (event.detail.role === 'confirm') {
       //利用者情報登録
+      let model: UserInfoModel = new UserInfoModel();
+      model.name = this.name;
+      model.nameKana = this.nameKana;
+      model.phoneNumber = this.phoneNumber;
+      model.email = this.email;
+      model.password = this.password;
+      this.userService.regist(model);
     }
     this.routeService.navigateHome();
   }
@@ -65,6 +94,14 @@ export class UserRegistPage {
   onClickUpdate(event: any): void {
     if (event.detail.role === 'confirm') {
       //利用者情報更新
+      let model: UserInfoModel = new UserInfoModel();
+      model.customerId = this.customerId;
+      model.name = this.name;
+      model.nameKana = this.nameKana;
+      model.phoneNumber = this.phoneNumber;
+      model.email = this.email;
+      model.password = this.password;
+      this.userService.update(model);
     }
     this.routeService.navigateHome();
   }
@@ -76,8 +113,10 @@ export class UserRegistPage {
   onClickWithdraw(event: any): void {
     if (event.detail.role === 'confirm') {
       //退会
+      if (this.customerId) {
+        this.userService.withdraw(this.customerId);
+      }
     }
     this.routeService.navigateHome();
   }
-
 }

src/polyfills.ts

@@ -41,7 +41,7 @@
  *  (window as any).__Zone_enable_cross_context_check = true;
  *
  */
- 
+
 import './zone-flags';
 
 /***************************************************************************************************
@@ -53,3 +53,8 @@ import 'zone.js';  // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
+
+(window as any).global = window;
+(window as any).process = {
+    env: { DEBUG: undefined },
+};
\ No newline at end of file

tsconfig.app.json

 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
+  "compileOnSave": false,
   "compilerOptions": {
+    "baseUrl": "./",
     "outDir": "./out-tsc/app",
-    "types": []
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "types": [
+      "node"
+    ],
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ]
   },
   "files": [
     "src/main.ts",
@@ -11,5 +27,11 @@
   ],
   "include": [
     "src/**/*.d.ts"
-  ]
-}
+  ],
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
\ No newline at end of file