639: Invalidate card frontend

frontend/build-configs/bayern/localization.ts

@@ -22,7 +22,7 @@ const localization: LocalizationType = {
             positiveVerificationDialogTitle: "Karte ist gültig",
         },
         moreActions: {
-            applyForAnotherCardTitle: "Weitere Ehrenamtskarte beantragen",
+            applyForAnotherCardTitle: "Weitere Ehrenamtskarte beantragen oder bestehende verlängern",
             applyForAnotherCardDescription: "Ihre hinterlegte Karte bleibt erhalten.",
             activateAnotherCardTitle: "Anderen Aktivierungscode einscannen",
             activateAnotherCardDescription: "Dadurch wird die hinterlegte Karte vom Gerät gelöscht.",

frontend/build-configs/nuernberg/localization.ts

@@ -22,7 +22,7 @@ const localization: LocalizationType = {
             positiveVerificationDialogTitle: "Pass ist gültig",
         },
         moreActions: {
-            applyForAnotherCardTitle: "Weiteren Nürnberg-Pass beantragen",
+            applyForAnotherCardTitle: "Weiteren Nürnberg-Pass beantragen oder bestehenden verlängern",
             applyForAnotherCardDescription: "Ihr hinterlegter Pass bleibt erhalten.",
             activateAnotherCardTitle: "Anderen Aktivierungscode einscannen",
             activateAnotherCardDescription: "Dadurch wird der hinterlegte Pass vom Gerät gelöscht.",

frontend/lib/identification/card_detail_view/card_detail_view.dart

@@ -3,6 +3,7 @@ import 'package:ehrenamtskarte/graphql/graphql_api.dart';
 import 'package:ehrenamtskarte/identification/card_detail_view/more_actions_dialog.dart';
 import 'package:ehrenamtskarte/identification/card_detail_view/verification_code_view.dart';
 import 'package:ehrenamtskarte/identification/id_card/id_card.dart';
+import 'package:ehrenamtskarte/identification/util/card_info_utils.dart';
 import 'package:ehrenamtskarte/proto/card.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:graphql_flutter/graphql_flutter.dart';
@@ -45,9 +46,9 @@ class CardDetailView extends StatelessWidget {
         final paddedCard = Padding(
           padding: const EdgeInsets.all(8),
           child: IdCard(
-            cardInfo: userCode.info,
-            region: region != null ? Region(region.prefix, region.name) : null,
-          ),
+              cardInfo: userCode.info,
+              region: region != null ? Region(region.prefix, region.name) : null,
+              isExpired: isCardExpired(userCode.info)),
         );
         final richQrCode = RichQrCode(userCode: userCode, onMoreActionsPressed: () => _onMoreActionsPressed(context));
 
@@ -107,6 +108,7 @@ class RichQrCode extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final bool isExpired = isCardExpired(userCode.info);
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 4),
       child: Column(
@@ -115,13 +117,15 @@ class RichQrCode extends StatelessWidget {
           Container(
             padding: const EdgeInsets.only(bottom: 4),
             constraints: const BoxConstraints(maxWidth: 300),
-            child: const Text(
-              "Mit diesem QR-Code können Sie sich"
-              " bei Akzeptanzstellen ausweisen:",
+            child: Text(
+              isExpired
+                  ? "Ihre Karte ist abgelaufen.\n Unter weitere Aktionen können sie einen Antrag zur Verlängerung stellen."
+                  : "Mit diesem QR-Code können Sie sich"
+                      " bei Akzeptanzstellen ausweisen:",
               textAlign: TextAlign.center,
             ),
           ),
-          Flexible(child: VerificationCodeView(userCode: userCode)),
+          Flexible(child: isExpired ? Container() : VerificationCodeView(userCode: userCode)),
           Container(
             alignment: Alignment.center,
             child: TextButton(

frontend/lib/identification/card_detail_view/more_actions_dialog.dart

@@ -19,37 +19,39 @@ class MoreActionsDialog extends StatelessWidget {
     return AlertDialog(
       contentPadding: const EdgeInsets.only(top: 12),
       title: const Text("Weitere Aktionen"),
-      content: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          ListTile(
-            title: Text(localization.applyForAnotherCardTitle),
-            subtitle: Text(localization.applyForAnotherCardDescription),
-            leading: const Icon(Icons.assignment, size: 36),
-            onTap: () {
-              Navigator.pop(context);
-              startApplication();
-            },
-          ),
-          ListTile(
-            title: Text(localization.activateAnotherCardTitle),
-            subtitle: Text(localization.activateAnotherCardDescription),
-            leading: const Icon(Icons.add_card, size: 36),
-            onTap: () {
-              Navigator.pop(context);
-              startActivation();
-            },
-          ),
-          ListTile(
-            title: Text(localization.verifyTitle),
-            subtitle: Text(localization.verifyDescription),
-            leading: const Icon(Icons.verified, size: 36),
-            onTap: () {
-              Navigator.pop(context);
-              startVerification();
-            },
-          ),
-        ],
+      content: SingleChildScrollView(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            ListTile(
+              title: Text(localization.applyForAnotherCardTitle),
+              subtitle: Text(localization.applyForAnotherCardDescription),
+              leading: const Icon(Icons.assignment, size: 36),
+              onTap: () {
+                Navigator.pop(context);
+                startApplication();
+              },
+            ),
+            ListTile(
+              title: Text(localization.activateAnotherCardTitle),
+              subtitle: Text(localization.activateAnotherCardDescription),
+              leading: const Icon(Icons.add_card, size: 36),
+              onTap: () {
+                Navigator.pop(context);
+                startActivation();
+              },
+            ),
+            ListTile(
+              title: Text(localization.verifyTitle),
+              subtitle: Text(localization.verifyDescription),
+              leading: const Icon(Icons.verified, size: 36),
+              onTap: () {
+                Navigator.pop(context);
+                startVerification();
+              },
+            ),
+          ],
+        ),
       ),
       actions: [TextButton(onPressed: () => Navigator.pop(context), child: const Text("Abbrechen"))],
     );

frontend/lib/identification/id_card/card_content.dart

@@ -1,4 +1,4 @@
-import 'package:ehrenamtskarte/build_config/build_config.dart';
+import 'package:ehrenamtskarte/build_config/build_config.dart' show buildConfig;
 import 'package:ehrenamtskarte/identification/id_card/card_header_logo.dart';
 import 'package:ehrenamtskarte/identification/id_card/id_card.dart';
 import 'package:ehrenamtskarte/proto/card.pb.dart';
@@ -40,8 +40,9 @@ PaddingStyle paddingHeader = PaddingStyle(
 class CardContent extends StatelessWidget {
   final CardInfo cardInfo;
   final Region? region;
+  final bool isExpired;
 
-  const CardContent({super.key, required this.cardInfo, this.region});
+  const CardContent({super.key, required this.cardInfo, this.region, required this.isExpired});
 
   String get _formattedExpirationDate {
     final expirationDay = cardInfo.hasExpirationDay() ? cardInfo.expirationDay : null;
@@ -182,7 +183,9 @@ class CardContent extends StatelessWidget {
                                     maxLines: 1,
                                     text: TextSpan(
                                       text: "Gültig bis: ",
-                                      style: TextStyle(fontSize: 14 * scaleFactor, color: textColor),
+                                      style: TextStyle(
+                                          fontSize: 14 * scaleFactor,
+                                          color: isExpired ? Theme.of(context).colorScheme.error : textColor),
                                       children: [TextSpan(text: _formattedExpirationDate)],
                                     ),
                                   ),

frontend/lib/identification/id_card/id_card.dart

@@ -20,8 +20,9 @@ class Region with EquatableMixin {
 class IdCard extends StatelessWidget {
   final CardInfo cardInfo;
   final Region? region;
+  final bool isExpired;
 
-  const IdCard({super.key, required this.cardInfo, required this.region});
+  const IdCard({super.key, required this.cardInfo, required this.region, required this.isExpired});
 
   @override
   Widget build(BuildContext context) {
@@ -38,10 +39,7 @@ class IdCard extends StatelessWidget {
           child: MediaQuery(
             // Ignore text scale factor to enforce the same layout on all devices.
             data: mediaQueryData.copyWith(textScaleFactor: 1),
-            child: CardContent(
-              cardInfo: cardInfo,
-              region: region,
-            ),
+            child: CardContent(cardInfo: cardInfo, region: region, isExpired: isExpired),
           ),
         ),
       ),

frontend/lib/identification/util/card_info_utils.dart

@@ -19,3 +19,10 @@ extension Hashing on CardInfo {
     return utf8.encode(canonicalizedJsonString);
   }
 }
+
+bool isCardExpired(CardInfo cardInfo) {
+  final expirationDay = cardInfo.hasExpirationDay() ? cardInfo.expirationDay : null;
+  return expirationDay == null
+      ? true
+      : DateTime.fromMillisecondsSinceEpoch(0).add(Duration(days: expirationDay)).isBefore(DateTime.now());
+}

frontend/lib/identification/verification_workflow/dialogs/positive_verification_result_dialog.dart

@@ -63,9 +63,9 @@ class PositiveVerificationResultDialogState extends State<PositiveVerificationRe
             children: <Widget>[
               Flexible(
                 child: IdCard(
-                  cardInfo: widget.cardInfo,
-                  region: region != null ? Region(region.prefix, region.name) : null,
-                ),
+                    cardInfo: widget.cardInfo,
+                    region: region != null ? Region(region.prefix, region.name) : null,
+                    isExpired: false),
               ),
               if (widget.isStaticVerificationCode)
                 Flexible(

frontend/lib/identification/verification_workflow/verification_qr_scanner_page.dart

@@ -140,9 +140,6 @@ class VerificationQrScannerPage extends StatelessWidget {
 
   Future<void> _onSuccess(BuildContext context, CardInfo cardInfo, bool isStaticVerificationCode) async {
     await PositiveVerificationResultDialog.show(
-      context: context,
-      cardInfo: cardInfo,
-      isStaticVerificationCode: isStaticVerificationCode,
-    );
+        context: context, cardInfo: cardInfo, isStaticVerificationCode: isStaticVerificationCode);
   }
 }

frontend/lib/themes.dart

@@ -12,6 +12,7 @@ ThemeData get lightTheme {
       secondary: primaryColor,
       background: Colors.white,
       surfaceVariant: const Color(0xffefefef),
+      error: const Color(0xffcc0000),
     ),
     textTheme: defaultTypography.copyWith(
       headlineMedium: defaultTypography.headlineMedium?.apply(color: Colors.black87),
@@ -54,6 +55,7 @@ ThemeData get darkTheme {
       secondary: primaryColor,
       background: const Color(0xff121212),
       surfaceVariant: const Color(0xff262626),
+      error: const Color(0xff8b0000),
     ),
     textTheme: defaultTypography.copyWith(
       headlineMedium: defaultTypography.headlineMedium?.apply(color: Colors.white),