bump version to 1.0.37+37

minor fixes

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
             - uses: subosito/flutter-action@v2
               with:
                   channel: "stable"
-                  flutter-version: "3.3.8"
+                  flutter-version: "3.7.3"
 
             # Fetch sub modules
             - run: git submodule update --init --recursive

.github/workflows/cla.yaml

@@ -1,38 +0,0 @@
-name: "CLA Assistant"
-on:
-    issue_comment:
-        types: [created]
-    pull_request_target:
-        types: [opened, closed, synchronize]
-
-jobs:
-    CLAAssistant:
-        # This job only runs for pull request comments
-        if: ${{ github.event.issue.pull_request }}
-        runs-on: ubuntu-latest
-        steps:
-            - name: "CLA Assistant"
-              if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
-              # Beta Release
-              uses: contributor-assistant/github-action@v2.2.1
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-                  # the below token should have repo scope and must be manually added by you in the repository's secret
-                  PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
-              with:
-                  path-to-signatures: "signatures/version1/cla.json"
-                  path-to-document: "https://github.com/ente-io/cla/blob/main/CLA.md" # e.g. a CLA or a DCO document
-                  # branch should not be protected
-                  branch: "main"
-                  allowlist: enteio
-
-                  # the followings are the optional inputs - If the optional inputs are not given, then default values will be taken
-                  #remote-organization-name: enter the remote organization name where the signatures should be stored (Default is storing the signatures in the same repository)
-                  remote-repository-name: cla
-                  #create-file-commit-message: 'For example: Creating file for storing CLA Signatures'
-                  #signed-commit-message: 'For example: $contributorName has signed the CLA in #$pullRequestNo'
-                  #custom-notsigned-prcomment: 'pull request comment with Introductory message to ask new contributors to sign'
-                  #custom-pr-sign-comment: 'The signature to be committed in order to sign the CLA'
-                  #custom-allsigned-prcomment: 'pull request comment when all contributors has signed, defaults to **CLA Assistant Lite bot** All Contributors have signed the CLA.'
-                  #lock-pullrequest-aftermerge: false - if you don't want this bot to automatically lock the pull request after merging (default - true)
-                  #use-dco-flag: true - If you are using DCO instead of CLA

.github/workflows/l18n-crowdin.yml

@@ -0,0 +1,35 @@
+name: Sync crowdin translation
+
+on:
+  push:
+    paths: # run action automatically when app_en.arb file is changed
+      - 'lib/l10n/arb/app_en.arb'
+    branches: [ main ]
+  schedule:
+    - cron: '0 */12 * * *' # Every 12 hours - https://crontab.guru/#0_*/12_*_*_*
+  workflow_dispatch: # for manually running the action
+
+jobs:
+  synchronize-with-crowdin:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: crowdin action
+        uses: crowdin/github-action@v1
+        with:
+          upload_sources: true
+          upload_translations: true
+          download_translations: true
+          localization_branch_name: l10n_translations
+          create_pull_request: true
+          skip_untranslated_strings: true
+          pull_request_title: 'New Translations'
+          pull_request_body: 'New translations via [Crowdin GH Action](https://github.com/crowdin/github-action)'
+          pull_request_base_branch_name: 'main'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

CLA.md

@@ -1,98 +0,0 @@
-## Contributor License Agreement
-
-Thank you for your contribution to ente projects.
-
-This contributor license agreement documents the rights granted by contributors
-to Ente Technologies, Inc ("ente"). This license is for your protection as a
-Contributor as well as the protection of ente, its users, and its licensees; you
-may still license your own Contributions under other terms.
-
-In exchange for the ability to participate in the ente community and for other
-good consideration, the receipt of which is hereby acknowledged, you accept and
-agree to the following terms and conditions for Your present and future
-Contributions submitted to ente. Except for the license granted herein to ente
-and recipients of software distributed by ente, You reserve all right, title,
-and interest in and to Your Contributions.
-
-1. Definitions.
-
-   "You" (or "Your") shall mean the copyright owner or legal entity authorized
-   by the copyright owner that is making this Agreement with ente. For legal
-   entities, the entity making a Contribution and all other entities that
-   control, are controlled by, or are under common control with that entity are
-   considered to be a single Contributor. For the purposes of this definition,
-   "control" means (i) the power, direct or indirect, to cause the direction or
-   management of such entity, whether by contract or otherwise, or (ii)
-   ownership of fifty percent (50%) or more of the outstanding shares, or (iii)
-   beneficial ownership of such entity.
-
-   "Contribution" shall mean any original work of authorship or invention,
-   including any modifications or additions to an existing work, that is
-   intentionally submitted by You to ente for inclusion in, or documentation of,
-   any of the products owned or managed by ente (the "Work"). For the purposes
-   of this definition, "submitted" means any form of electronic, verbal, or
-   written communication sent to ente or its representatives, including but not
-   limited to communication on electronic mailing lists, source code control
-   systems, and issue tracking systems that are managed by, or on behalf of,
-   ente for the purpose of discussing and improving the Work, but excluding
-   communication that is conspicuously marked or otherwise designated in writing
-   by You as "Not a Contribution."
-
-2. Grant of Copyright License. Subject to the terms and conditions of this
-   Agreement, You hereby grant to ente and to recipients of software distributed
-   by ente a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
-   irrevocable copyright license to reproduce, prepare derivative works of,
-   publicly display, publicly perform, and distribute Your Contributions and
-   such derivative works.
-
-3. Grant of Patent License. Subject to the terms and conditions of this
-   Agreement, You hereby grant to ente and to recipients of software distributed
-   by ente a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
-   irrevocable (except as stated in this section) patent license to make, have
-   made, use, offer to sell, sell, import, and otherwise transfer the Work,
-   where such license applies only to those patent claims licensable by You that
-   are necessarily infringed by Your Contribution(s) alone or by combination of
-   Your Contribution(s) with the Work to which such Contribution(s) was
-   submitted. If any entity institutes patent litigation against You or any
-   other entity (including a cross-claim or counterclaim in a lawsuit) alleging
-   that your Contribution, or the Work to which you have contributed,
-   constitutes direct or contributory patent infringement, then any patent
-   licenses granted to that entity under this Agreement for that Contribution or
-   Work shall terminate as of the date such litigation is filed.
-
-4. You represent that you are legally entitled to grant the above license. If
-   your employer(s) has rights to intellectual property that you create that
-   includes your Contributions, you represent that you have received permission
-   to make Contributions on behalf of that employer, that your employer has
-   waived such rights for your contributions to ente, or that your employer has
-   executed with ente a separate contributor license agreement substantially
-   similar to this Agreement. If You are a current employee or contractor of
-   ente, then the terms of your existing Employment Agreement or Consulting
-   Services Agreement shall supersede this CLA, and remain in full effect.
-
-5. You represent that each of Your Contributions is Your original creation (see
-   section 7 for submissions on behalf of others). You represent that Your
-   Contribution submissions include complete details of any third-party license
-   or other restriction (including, but not limited to, related patents and
-   trademarks) of which you are personally aware and which are associated with
-   any part of Your Contributions.
-
-6. You are not expected to provide support for Your Contributions, except to the
-   extent You desire to provide support. You may provide support for free, for
-   a fee, or not at all. Unless required by applicable law or agreed to in
-   writing, You provide Your Contributions on an "AS IS" BASIS, WITHOUT
-   WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including,
-   without limitation, any warranties or conditions of title, non-infringement,
-   merchantability, or fitness for a particular purpose.
-
-7. Should You wish to submit work that is not Your original creation, You may
-   submit it to ente separately from any Contribution, identifying the complete
-   details of its source and of any license or other restriction (including, but
-   not limited to, related patents, trademarks, and license agreements) of which
-   you are personally aware, and conspicuously marking the work as "Not a
-   Contribution". Third-party materials licensed pursuant to: [license name(s)
-   here]" (substituting the bracketed text with the appropriate license
-   name(s)).
-
-8. You agree to notify ente of any facts or circumstances of which you become
-   aware that would make these representations inaccurate in any respect.

README.md

@@ -35,7 +35,7 @@ You can add tokens to ente by one of the following methods:
 3. Bulk importing from a file that contains a list of codes in the following
    format:
 ```
-otpauth://totp/ACCOUNT?secret=SUPERSECRET&issuer=SERVICE
+otpauth://totp/provider.com:you@email.com?secret=YOUR_SECRET
 ```
 The codes maybe separated by new lines or commas.
 
@@ -52,23 +52,32 @@ releases](https://github.com/ente-io/auth/releases/latest/download/ente-auth.apk
 contains APKs, built straight from source. These builds keep themselves updated,
 without relying on third party stores.
 
-You can alternatively install the build from PlayStore.
+You can alternatively install the build from PlayStore or F-Droid.
 
 <a href="https://play.google.com/store/apps/details?id=io.ente.auth"> <img
   width="197" alt="Get it on Google Play"
 src="https://ente.io/static/ed265c3abdcd3efa5e29f64b927bcb44/e230a/play-store-badge.webp">
 </a>
 
-### iOS
+<a href="https://f-droid.org/packages/io.ente.auth/">
+  <img width="197" alt="Get it on F-Droid" src="https://ente.io/static/5378d3de690a04a5011268b9caf739f5/e230a/f-droid-badge.webp">
+</a>
+
+### iPhone / Apple Silicon
+
 
 <a href="https://apps.apple.com/us/app/ente-authenticator/id6444121398"> <img
   width="197" alt="Download on AppStore"
 src="https://user-images.githubusercontent.com/1161789/154795157-c4468ff9-97fd-46f3-87fe-dca789d8733a.png">
 </a>
 
+### Web
+
+You can view your 2FA codes at [https://auth.ente.io](https://auth.ente.io). For adding or managing your secrets, you will need to use our mobile app.
+
 ### Desktop
 
-Support for desktop platforms (Linux, Mac and Windows) is a [work in
+Support for desktop platforms (Linux, Windows and older Macs) is a [work in
 progress](https://github.com/ente-io/auth/tree/desktop).
 
 Please ⭐ this repo to be notified of updates.
@@ -102,6 +111,10 @@ If you have feature requests, please create a [GitHub issue](https://github.com/
 If you wish to support us, please ⭐
 [star](https://github.com/ente-io/auth/stargazers) this project.
 
+## 🙌 Translation
+[![Crowdin](https://badges.crowdin.net/ente-authenticator-app/localized.svg)](https://crowdin.com/project/ente-authenticator-app)
+
+If you're interested in helping out with translation, please visit our [Crowdin project](https://crowdin.com/project/ente-authenticator-app) to get started. Thank you for your support.
 
 ## 💜 Community
 

android/app/src/main/AndroidManifest.xml

@@ -25,7 +25,7 @@
                 <action android:name="android.intent.action.VIEW"/>
                 <category android:name="android.intent.category.DEFAULT"/>
                 <category android:name="android.intent.category.BROWSABLE"/>
-                <data android:scheme="ente"/>
+                <data android:scheme="ente-auth"/>
             </intent-filter>
 
         </activity>
@@ -54,4 +54,4 @@
             tools:ignore="ScopedStorage"/>
     <uses-permission android:name="android.permission.USE_BIOMETRIC"/>
 
-</manifest>
+</manifest>

android/app/src/main/res/mipmap-anydpi-v26/launcher_icon.xml

@@ -2,4 +2,5 @@
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
   <background android:drawable="@color/ic_launcher_background"/>
   <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+  <monochrome android:drawable="@drawable/ic_launcher_foreground"/>
 </adaptive-icon>

crowdin.yml

@@ -0,0 +1,6 @@
+project_id_env: CROWDIN_PROJECT_ID
+api_token_env: CROWDIN_PERSONAL_TOKEN
+
+files:
+  - source: /lib/l10n/arb/app_en.arb
+    translation: /lib/l10n/arb/app_%two_letters_code%.arb

fastlane/metadata/android/en-US/full_description.txt

@@ -1,30 +1,30 @@
-ente authenticator provides end-to-end encrypted cloud backups so that you don't have to worry about losing your tokens. We use the same protocols [ente
-Photos](https://ente.io) uses to encrypt and preserve your data.
+ente's Authenticator app helps you generate and store 2 step verification (2FA)
+tokens on your mobile devices.
 
 
-Multi Device Synchronization
+FEATURES
 
+- Secure Backups
+ente provides end-to-end encrypted cloud backups so that you don't have to worry
+about losing your tokens. We use the same protocols ente Photos uses to encrypt
+and preserve your data.
+
+- Multi Device Synchronization
 ente will automatically sync the 2FA tokens you add to your account, across all
 your devices. Every new device you sign into will have access to these tokens.
 
-
- Mode
-
+- Offline Mode
 ente generates 2FA tokens offline, so your network connectivity will not get in
 the way of your workflow.
 
-Import and Export Tokens
-
-You can add tokens to ente by one of the following methods:
+- Import and Export Tokens
+You can add tokens to ente by one of the following methods: 
 1. Scanning a QR code
 2. Manually entering (copy-pasting) a 2FA secret
-3. Bulk importing from a file that contains a list of codes in the following
-   format:
+3. Bulk importing from a file that contains a list of codes in the following format:
 
-```
 otpauth://totp/ACCOUNT?secret=SUPERSECRET&issuer=SERVICE
 
-```
 The codes maybe separated by new lines or commas.
 
 You can also export the codes you have added to ente, to an **unencrypted** text
@@ -32,4 +32,6 @@ file, that adheres to the above format.
 
 
 SUPPORT
-We take pride in offering human support. If you are our paid customer, you can reach out to team@ente.io and expect a response from our team within 24 hours.
+
+If you need help, please reach out to support@ente.io, and a human will get in touch with you.
+If you have feature requests, please create an issue @ https://github.com/ente-io/auth

ios/Runner/Info.plist

@@ -62,5 +62,7 @@
 		<string>Please allow auth to lock itself with FaceID or TouchID</string>
 		<key>NSPhotoLibraryUsageDescription</key>
 		<string>Please allow auth to pick a file to import data from</string>
-	</dict>
+		<key>UIApplicationSupportsIndirectInputEvents</key>
+	<true/>
+</dict>
 </plist>

lib/app/app.dart

@@ -1,2 +1,2 @@
-// @dart=2.9
+
 export "view/app.dart";

lib/app/view/app.dart

@@ -1,4 +1,4 @@
-// @dart=2.9
+
 import 'dart:async';
 import 'dart:io';
 
@@ -19,15 +19,27 @@ import "package:flutter/material.dart";
 import 'package:flutter_localizations/flutter_localizations.dart';
 
 class App extends StatefulWidget {
-  const App({Key key});
+  final Locale locale;
+  const App({Key? key, this.locale = const Locale("en")}) : super(key: key);
+
+  static void setLocale(BuildContext context, Locale newLocale) {
+    _AppState state = context.findAncestorStateOfType<_AppState>()!;
+    state.setLocale(newLocale);
+  }
 
   @override
   State<App> createState() => _AppState();
 }
 
 class _AppState extends State<App> {
-  StreamSubscription<SignedOutEvent> _signedOutEvent;
-  StreamSubscription<SignedInEvent> _signedInEvent;
+  late StreamSubscription<SignedOutEvent> _signedOutEvent;
+  late StreamSubscription<SignedInEvent> _signedInEvent;
+  Locale? locale;
+  setLocale(Locale newLocale) {
+    setState(() {
+      locale = newLocale;
+    });
+  }
 
   @override
   void initState() {
@@ -41,6 +53,7 @@ class _AppState extends State<App> {
         setState(() {});
       }
     });
+    locale = widget.locale;
     UpdateService.instance.shouldUpdate().then((shouldUpdate) {
       if (shouldUpdate) {
         Future.delayed(Duration.zero, () {
@@ -79,6 +92,7 @@ class _AppState extends State<App> {
           theme: lightTheme,
           darkTheme: dartTheme,
           debugShowCheckedModeBanner: false,
+          locale: locale,
           supportedLocales: appSupportedLocales,
           localeListResolutionCallback: localResolutionCallBack,
           localizationsDelegates: const [
@@ -97,6 +111,7 @@ class _AppState extends State<App> {
         theme: lightThemeData,
         darkTheme: darkThemeData,
         debugShowCheckedModeBanner: false,
+        locale: locale,
         supportedLocales: appSupportedLocales,
         localeListResolutionCallback: localResolutionCallBack,
         localizationsDelegates: const [

lib/core/configuration.dart

@@ -38,8 +38,7 @@ class Configuration {
   static const tokenKey = "token";
   static const encryptedTokenKey = "encrypted_token";
   static const userIDKey = "user_id";
-  static const hasMigratedSecureStorageToFirstUnlockKey =
-      "has_migrated_secure_storage_to_first_unlock";
+  static const hasMigratedSecureStorageKey = "has_migrated_secure_storage";
 
   final kTempFolderDeletionTimeBuffer = const Duration(days: 1).inMicroseconds;
 
@@ -63,8 +62,9 @@ class Configuration {
   late String _sharedDocumentsMediaDirectory;
   String? _volatilePassword;
 
-  final _secureStorageOptionsIOS =
-      const IOSOptions(accessibility: KeychainAccessibility.first_unlock);
+  final _secureStorageOptionsIOS = const IOSOptions(
+    accessibility: KeychainAccessibility.first_unlock_this_device,
+  );
 
   // const IOSOptions(accessibility: IOSAccessibility.first_unlock);
 
@@ -452,7 +452,7 @@ class Configuration {
     return _preferences.setBool(keyShouldShowLockScreen, value);
   }
 
-  void setVolatilePassword(String volatilePassword) {
+  void setVolatilePassword(String? volatilePassword) {
     _volatilePassword = volatilePassword;
   }
 
@@ -462,7 +462,7 @@ class Configuration {
 
   Future<void> _migrateSecurityStorageToFirstUnlock() async {
     final hasMigratedSecureStorageToFirstUnlock =
-        _preferences.getBool(hasMigratedSecureStorageToFirstUnlockKey) ?? false;
+        _preferences.getBool(hasMigratedSecureStorageKey) ?? false;
     if (!hasMigratedSecureStorageToFirstUnlock &&
         _key != null &&
         _secretKey != null) {
@@ -477,7 +477,7 @@ class Configuration {
         iOptions: _secureStorageOptionsIOS,
       );
       await _preferences.setBool(
-        hasMigratedSecureStorageToFirstUnlockKey,
+        hasMigratedSecureStorageKey,
         true,
       );
     }

lib/core/logging/super_logging.dart

@@ -1,5 +1,3 @@
-// @dart=2.9
-
 library super_logging;
 
 import 'dart:async';
@@ -8,6 +6,7 @@ import 'dart:core';
 import 'dart:io';
 
 import 'package:ente_auth/core/logging/tunneled_transport.dart';
+import 'package:ente_auth/models/typedefs.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:http/http.dart' as http;
@@ -20,8 +19,6 @@ import 'package:sentry_flutter/sentry_flutter.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:uuid/uuid.dart';
 
-typedef FutureOrVoidCallback = FutureOr<void> Function();
-
 extension SuperString on String {
   Iterable<String> chunked(int chunkSize) sync* {
     var start = 0;
@@ -40,7 +37,7 @@ extension SuperString on String {
 }
 
 extension SuperLogRecord on LogRecord {
-  String toPrettyString([String extraLines]) {
+  String toPrettyString([String? extraLines]) {
     final header = "[$loggerName] [$level] [$time]";
 
     var msg = "$header $message";
@@ -78,9 +75,9 @@ class LogConfig {
   /// ```
   ///
   /// If this is [null], Sentry logger is completely disabled (default).
-  String sentryDsn;
+  String? sentryDsn;
 
-  String tunnel;
+  String? tunnel;
 
   /// A built-in retry mechanism for sending errors to sentry.
   ///
@@ -97,7 +94,7 @@ class LogConfig {
   /// A non-empty string will be treated as an explicit path to a directory.
   ///
   /// The chosen directory can be accessed using [SuperLogging.logFile.parent].
-  String logDirPath;
+  String? logDirPath;
 
   /// The maximum number of log files inside [logDirPath].
   ///
@@ -115,12 +112,12 @@ class LogConfig {
   /// any uncaught errors during its execution will be reported.
   ///
   /// Works by using [FlutterError.onError] and [runZoned].
-  FutureOrVoidCallback body;
+  FutureOrVoidCallback? body;
 
   /// The date format for storing log files.
   ///
   /// `DateFormat('y-M-d')` by default.
-  DateFormat dateFmt;
+  DateFormat? dateFmt;
 
   String prefix;
 
@@ -144,77 +141,78 @@ class SuperLogging {
   static final $ = Logger('ente_logging');
 
   /// The current super logging configuration
-  static LogConfig config;
+  static late LogConfig config;
 
-  static SharedPreferences _preferences;
+  static late SharedPreferences _preferences;
 
   static const keyShouldReportErrors = "should_report_errors";
 
   static const keyAnonymousUserID = "anonymous_user_id";
 
-  static Future<void> main([LogConfig config]) async {
-    config ??= LogConfig();
-
-    SuperLogging.config = config;
+  static Future<void> main([LogConfig? appConfig]) async {
+    appConfig ??= LogConfig();
+    SuperLogging.config = appConfig;
 
     WidgetsFlutterBinding.ensureInitialized();
-
     _preferences = await SharedPreferences.getInstance();
 
     appVersion ??= await getAppVersion();
 
-    final loggingEnabled = config.enableInDebugMode || kReleaseMode;
+    final enable = appConfig.enableInDebugMode || kReleaseMode;
     sentryIsEnabled =
-        loggingEnabled && config.sentryDsn != null && shouldReportErrors();
-    fileIsEnabled = loggingEnabled && config.logDirPath != null;
+        enable && appConfig.sentryDsn != null && shouldReportErrors();
+    fileIsEnabled = enable && appConfig.logDirPath != null;
 
     if (fileIsEnabled) {
       await setupLogDir();
     }
+    if (sentryIsEnabled) {
+      setupSentry();
+    }
 
     Logger.root.level = Level.ALL;
     Logger.root.onRecord.listen(onLogRecord);
 
-    if (sentryIsEnabled) {
-      setupSentry();
-    } else {
-      $.info("Sentry is disabled");
-    }
-
-    if (!loggingEnabled) {
+    if (!enable) {
       $.info("detected debug mode; sentry & file logging disabled.");
     }
     if (fileIsEnabled) {
-      $.info("log file for today: $logFile with prefix ${config.prefix}");
+      $.info("log file for today: $logFile with prefix ${appConfig.prefix}");
+    }
+    if (sentryIsEnabled) {
+      $.info("sentry uploader started");
     }
 
-    if (config.body == null) return;
+    if (appConfig.body == null) return;
 
-    if (loggingEnabled && sentryIsEnabled) {
+    if (enable && sentryIsEnabled) {
       await SentryFlutter.init(
         (options) {
-          options.dsn = config.sentryDsn;
+          options.dsn = appConfig!.sentryDsn;
           options.httpClient = http.Client();
-          if (config.tunnel != null) {
+          if (appConfig.tunnel != null) {
             options.transport =
-                TunneledTransport(Uri.parse(config.tunnel), options);
+                TunneledTransport(Uri.parse(appConfig.tunnel!), options);
           }
         },
-        appRunner: () => config.body(),
+        appRunner: () => appConfig!.body!(),
       );
     } else {
-      await config.body();
+      await appConfig.body!();
     }
   }
 
   static void setUserID(String userID) async {
-    if (config?.sentryDsn != null) {
+    if (config.sentryDsn != null) {
       Sentry.configureScope((scope) => scope.user = SentryUser(id: userID));
       $.info("setting sentry user ID to: $userID");
     }
   }
 
-  static Future<void> _sendErrorToSentry(Object error, StackTrace stack) async {
+  static Future<void> _sendErrorToSentry(
+    Object error,
+    StackTrace? stack,
+  ) async {
     try {
       await Sentry.captureException(
         error,
@@ -230,14 +228,14 @@ class SuperLogging {
 
   static Future onLogRecord(LogRecord rec) async {
     // log misc info if it changed
-    String extraLines = "app version: '$appVersion'\n";
+    String? extraLines = "app version: '$appVersion'\n";
     if (extraLines != _lastExtraLines) {
       _lastExtraLines = extraLines;
     } else {
       extraLines = null;
     }
 
-    final str = config.prefix + " " + rec.toPrettyString(extraLines);
+    final str = (config.prefix) + " " + rec.toPrettyString(extraLines);
 
     // write to stdout
     printLog(str);
@@ -251,16 +249,8 @@ class SuperLogging {
     }
 
     // add error to sentry queue
-    if (sentryIsEnabled) {
-      if (rec.error != null) {
-        _sendErrorToSentry(rec.error, null);
-      } else if (rec.level == Level.SEVERE || rec.level == Level.SHOUT) {
-        if (rec.error != null) {
-          _sendErrorToSentry(rec.error, null);
-        } else {
-          _sendErrorToSentry(rec.message, null);
-        }
-      }
+    if (sentryIsEnabled && rec.error != null) {
+      _sendErrorToSentry(rec.error!, null);
     }
   }
 
@@ -268,12 +258,12 @@ class SuperLogging {
   static bool isFlushing = false;
 
   static void flushQueue() async {
-    if (isFlushing) {
+    if (isFlushing || logFile == null) {
       return;
     }
     isFlushing = true;
     final entry = fileQueueEntries.removeFirst();
-    await logFile.writeAsString(entry, mode: FileMode.append, flush: true);
+    await logFile!.writeAsString(entry, mode: FileMode.append, flush: true);
     isFlushing = false;
     if (fileQueueEntries.isNotEmpty) {
       flushQueue();
@@ -292,7 +282,7 @@ class SuperLogging {
   static final sentryQueueControl = StreamController<Error>();
 
   /// Whether sentry logging is currently enabled or not.
-  static bool sentryIsEnabled;
+  static bool sentryIsEnabled = false;
 
   static Future<void> setupSentry() async {
     $.info("Setting up sentry");
@@ -318,7 +308,7 @@ class SuperLogging {
 
   static bool shouldReportErrors() {
     if (_preferences.containsKey(keyShouldReportErrors)) {
-      return _preferences.getBool(keyShouldReportErrors);
+      return _preferences.getBool(keyShouldReportErrors)!;
     } else {
       return false;
     }
@@ -333,22 +323,22 @@ class SuperLogging {
       //ignore: prefer_const_constructors
       await _preferences.setString(keyAnonymousUserID, Uuid().v4());
     }
-    return _preferences.getString(keyAnonymousUserID);
+    return _preferences.getString(keyAnonymousUserID)!;
   }
 
   /// The log file currently in use.
-  static File logFile;
+  static File? logFile;
 
   /// Whether file logging is currently enabled or not.
-  static bool fileIsEnabled;
+  static bool fileIsEnabled = false;
 
   static Future<void> setupLogDir() async {
     var dirPath = config.logDirPath;
 
     // choose [logDir]
-    if (dirPath.isEmpty) {
+    if (dirPath == null || dirPath.isEmpty) {
       final root = await getExternalStorageDirectory();
-      dirPath = '${root.path}/logs';
+      dirPath = '${root!.path}/logs';
     }
 
     // create [logDir]
@@ -361,16 +351,19 @@ class SuperLogging {
     // collect all log files with valid names
     await for (final file in dir.list()) {
       try {
-        final date = config.dateFmt.parse(basename(file.path));
+        final date = config.dateFmt!.parse(basename(file.path));
         dates[file as File] = date;
         files.add(file);
       } on FormatException {}
     }
+    final nowTime = DateTime.now();
 
     // delete old log files, if [maxLogFiles] is exceeded.
     if (files.length > config.maxLogFiles) {
       // sort files based on ascending order of date (older first)
-      files.sort((a, b) => dates[a].compareTo(dates[b]));
+      files.sort(
+        (a, b) => (dates[a] ?? nowTime).compareTo((dates[b] ?? nowTime)),
+      );
 
       final extra = files.length - config.maxLogFiles;
       final toDelete = files.sublist(0, extra);
@@ -385,13 +378,13 @@ class SuperLogging {
       }
     }
 
-    logFile = File("$dirPath/${config.dateFmt.format(DateTime.now())}.txt");
+    logFile = File("$dirPath/${config.dateFmt!.format(DateTime.now())}.txt");
   }
 
   /// Current app version, obtained from package_info plugin.
   ///
   /// See: [getAppVersion]
-  static String appVersion;
+  static String? appVersion;
 
   static Future<String> getAppVersion() async {
     final pkgInfo = await PackageInfo.fromPlatform();

lib/core/logging/tunneled_transport.dart

@@ -1,5 +1,3 @@
-// @dart=2.9
-
 import 'dart:convert';
 
 import 'package:http/http.dart';
@@ -10,9 +8,9 @@ class TunneledTransport implements Transport {
   final Uri _tunnel;
   final SentryOptions _options;
 
-  final Dsn _dsn;
+  final Dsn? _dsn;
 
-  _CredentialBuilder _credentialBuilder;
+  _CredentialBuilder? _credentialBuilder;
 
   final Map<String, String> _headers;
 
@@ -21,7 +19,7 @@ class TunneledTransport implements Transport {
   }
 
   TunneledTransport._(this._tunnel, this._options)
-      : _dsn = Dsn.parse(_options.dsn),
+      : _dsn = _options.dsn != null ? Dsn.parse(_options.dsn!) : null,
         _headers = _buildHeaders(
           _options.platformChecker.isWeb,
           _options.sdk.identifier,
@@ -34,7 +32,7 @@ class TunneledTransport implements Transport {
   }
 
   @override
-  Future<SentryId> send(SentryEnvelope envelope) async {
+  Future<SentryId?> send(SentryEnvelope envelope) async {
     final streamedRequest = await _createStreamedRequest(envelope);
     final response = await _options.httpClient
         .send(streamedRequest)
@@ -47,7 +45,7 @@ class TunneledTransport implements Transport {
         _options.logger(
           SentryLevel.error,
           'API returned an error, statusCode = ${response.statusCode}, '
-          'body = ${response.body}',
+              'body = ${response.body}',
         );
       }
       return const SentryId.empty();
@@ -66,15 +64,15 @@ class TunneledTransport implements Transport {
   }
 
   Future<StreamedRequest> _createStreamedRequest(
-    SentryEnvelope envelope,
-  ) async {
+      SentryEnvelope envelope,
+      ) async {
     final streamedRequest = StreamedRequest('POST', _tunnel);
     envelope
         .envelopeStream(_options)
         .listen(streamedRequest.sink.add)
         .onDone(streamedRequest.sink.close);
 
-    streamedRequest.headers.addAll(_credentialBuilder.configure(_headers));
+    streamedRequest.headers.addAll(_credentialBuilder!.configure(_headers));
 
     return streamedRequest;
   }
@@ -92,13 +90,13 @@ class _CredentialBuilder {
         _clock = clock;
 
   factory _CredentialBuilder(
-    Dsn dsn,
-    String sdkIdentifier,
-    ClockProvider clock,
-  ) {
+      Dsn? dsn,
+      String sdkIdentifier,
+      ClockProvider clock,
+      ) {
     final authHeader = _buildAuthHeader(
-      publicKey: dsn.publicKey,
-      secretKey: dsn.secretKey,
+      publicKey: dsn?.publicKey,
+      secretKey: dsn?.secretKey,
       sdkIdentifier: sdkIdentifier,
     );
 
@@ -106,9 +104,9 @@ class _CredentialBuilder {
   }
 
   static String _buildAuthHeader({
-    String publicKey,
-    String secretKey,
-    String sdkIdentifier,
+    String? publicKey,
+    String? secretKey,
+    String? sdkIdentifier,
   }) {
     var header = 'Sentry sentry_version=7, sentry_client=$sdkIdentifier, '
         'sentry_key=$publicKey';

lib/ente_theme_data.dart

@@ -358,6 +358,9 @@ extension CustomColorScheme on ColorScheme {
 
   EnteTheme get enteTheme =>
       brightness == Brightness.light ? lightTheme : darkTheme;
+
+  EnteTheme get inverseEnteTheme =>
+      brightness == Brightness.light ? darkTheme : lightTheme;
 }
 
 OutlinedButtonThemeData buildOutlinedButtonThemeData({

lib/events/trigger_logout_event.dart

@@ -0,0 +1,3 @@
+import 'package:ente_auth/events/event.dart';
+
+class TriggerLogoutEvent extends Event {}

lib/gateway/authenticator.dart

@@ -103,24 +103,32 @@ class AuthenticatorGateway {
   }
 
   Future<List<AuthEntity>> getDiff(int sinceTime, {int limit = 500}) async {
-    final response = await _dio.get(
-      _basedEndpoint + "/entity/diff",
-      queryParameters: {
-        "sinceTime": sinceTime,
-        "limit": limit,
-      },
-      options: Options(
-        headers: {
-          "X-Auth-Token": _config.getToken(),
+    try {
+      final response = await _dio.get(
+        _basedEndpoint + "/entity/diff",
+        queryParameters: {
+          "sinceTime": sinceTime,
+          "limit": limit,
         },
-      ),
-    );
-    final List<AuthEntity> authEntities = <AuthEntity>[];
-    final diff = response.data["diff"] as List;
-    for (var entry in diff) {
-      final AuthEntity entity = AuthEntity.fromMap(entry);
-      authEntities.add(entity);
+        options: Options(
+          headers: {
+            "X-Auth-Token": _config.getToken(),
+          },
+        ),
+      );
+      final List<AuthEntity> authEntities = <AuthEntity>[];
+      final diff = response.data["diff"] as List;
+      for (var entry in diff) {
+        final AuthEntity entity = AuthEntity.fromMap(entry);
+        authEntities.add(entity);
+      }
+      return authEntities;
+    } catch (e) {
+      if (e is DioError && e.response?.statusCode == 401) {
+        throw UnauthorizedError();
+      } else {
+        rethrow;
+      }
     }
-    return authEntities;
   }
 }

lib/l10n/arb/app_de.arb

@@ -1,8 +1,8 @@
 {
-  "@@locale": "de",
+  "account": "Konto",
   "counterAppBarTitle": "Zähler",
   "@counterAppBarTitle": {
-    "description": "Text, der in der AppBar der Zähler-Seite angezeigt wird"
+    "description": "Text shown in the AppBar of the Counter Page"
   },
   "onBoardingBody": "Sichern Sie Ihre 2FA-Codes",
   "onBoardingGetStarted": "Los geht's",
@@ -11,9 +11,10 @@
   "importEnterSetupKey": "Einen Setup-Schlüssel eingeben",
   "importAccountPageTitle": "Kontodaten eingeben",
   "codeIssuerHint": "Aussteller",
-  "codeSecretKeyHint" : "Geheimer Schlüssel",
+  "codeSecretKeyHint": "Geheimer Schlüssel",
   "codeAccountHint": "Konto (you@domain.com)",
   "accountKeyType": "Art des Schlüssels",
+  "loggingOut": "Wird abgemeldet...",
   "timeBasedKeyType": "Zeitbasiert (TOTP)",
   "counterBasedKeyType": "Zählerbasiert (HOTP)",
   "saveAction": "Speichern",
@@ -47,30 +48,30 @@
   },
   "contactSupport": "Support kontaktieren",
   "verifyPassword": "Passwort überprüfen",
-  "pleaseWaitTitle": "Bitte warten...",
+  "pleaseWait": "Bitte warten...",
   "generatingEncryptionKeysTitle": "Generierung von Verschlüsselungsschlüsseln...",
   "recreatePassword": "Passwort wiederherstellen",
   "recreatePasswordMessage": "Das aktuelle Gerät ist nicht leistungsfähig genug, um Ihr Passwort zu verifizieren, daher müssen wir es einmalig auf eine Weise neu generieren, die mit allen Geräten funktioniert. \n\nBitte melden Sie sich mit Ihrem Wiederherstellungsschlüssel an und generieren Sie Ihr Passwort neu (Sie können dasselbe erneut verwenden, wenn Sie möchten).",
-  "useRecoveryKeyAction": "Wiederherstellungsschlüssel verwenden",
-  "incorrectPassword": "Falsches Passwort",
-  "welcomeBackTitle": "Willkommen zurück!",
+  "useRecoveryKey": "Wiederherstellungsschlüssel verwenden",
+  "incorrectPasswordTitle": "Falsches Passwort",
+  "welcomeBack": "Willkommen zurück!",
   "madeWithLoveAtPrefix": "gemacht mit ❤️ bei ",
   "changeEmail": "E-Mail ändern",
-  "ok": "OK",
+  "changePassword": "Passwort ändern",
+  "data": "Datei",
   "cancel": "Abbrechen",
   "yes": "Ja",
   "no": "Nein",
   "email": "E-Mail",
-  "support": "Support",
+  "support": "Unterstützung",
   "settings": "Einstellungen",
   "copied": "Kopiert",
-  "tryAgainMessage": "Bitte versuchen Sie es erneut",
+  "pleaseTryAgain": "Bitte versuchen Sie es erneut",
   "existingUser": "Bestehender Benutzer",
-  "newUser" : "Neu bei ente",
+  "newUser": "Neu bei ente",
   "delete": "Löschen",
   "enterYourPasswordHint": "Geben Sie Ihr Passwort ein",
   "forgotPassword": "Passwort vergessen",
-  "oops": "Oops",
   "somethingWentWrongMessage": "Ein Fehler ist aufgetreten, bitte versuchen Sie es erneut",
   "leaveFamily": "Familie verlassen",
   "leaveFamilyMessage": "Sind Sie sicher, dass Sie den Familien-Plan verlassen wollen?",
@@ -85,7 +86,7 @@
   "recoverAccount": "Konto wiederherstellen",
   "enterRecoveryKeyHint": "Geben Sie Ihren Wiederherstellungsschlüssel ein",
   "recover": "Wiederherstellen",
-  "contactSupportViaEmailMessage":"Bitte senden Sie eine E-Mail an {email} von Ihrer registrierten E-Mail-Adresse",
+  "contactSupportViaEmailMessage": "Bitte senden Sie eine E-Mail an {email} von Ihrer registrierten E-Mail-Adresse",
   "@contactSupportViaEmailMessage": {
     "placeholders": {
       "email": {
@@ -106,11 +107,17 @@
   "confirmAccountDeleteMessage": "Ihre hochgeladenen Daten werden in allen Anwendungen (sowohl Fotos als auch Authenticator) zur Löschung vorgesehen und Ihr Konto wird dauerhaft gelöscht.",
   "sendEmail": "E-Mail senden",
   "createNewAccount": "Neues Konto erstellen",
-  "passwordStrengthWeak": "Schwach",
-  "passwordStrengthStrong": "Stark",
-  "passwordStrengthModerate": "Mittel",
+  "weakStrength": "Schwach",
+  "strongStrength": "Stark",
+  "moderateStrength": "Mittel",
   "confirmPassword": "Bestätigen Sie das Passwort",
   "close": "Schließen",
-  "oopsSomethingWentWrong": "Ups, da ist etwas schief gelaufen."
-
-}
+  "oopsSomethingWentWrong": "Ups, da ist etwas schief gelaufen.",
+  "selectLanguage": "Sprache auswählen",
+  "language": "Sprache",
+  "searchHint": "Suchen...",
+  "search": "Suchen",
+  "noResult": "Kein Ergebnis",
+  "scanAQrCode": "QR-Code scannen",
+  "saveKey": "Schlüssel speichern"
+}

lib/l10n/arb/app_en.arb

@@ -1,5 +1,7 @@
+
 {
-  "@@locale": "en",
+  "account": "Account",
+  "recoveryKey": "Recovery key",
   "counterAppBarTitle": "Counter",
   "@counterAppBarTitle": {
     "description": "Text shown in the AppBar of the Counter Page"
@@ -14,6 +16,12 @@
   "codeSecretKeyHint" : "Secret Key",
   "codeAccountHint": "Account (you@domain.com)",
   "accountKeyType": "Type of key",
+  "sessionExpired": "Session expired",
+  "@sessionExpired": {
+    "description": "Title of the dialog when the users current session is invalid/expired"
+  },
+  "pleaseLoginAgain": "Please login again",
+  "loggingOut" : "Logging out...",
   "timeBasedKeyType": "Time based (TOTP)",
   "counterBasedKeyType": "Counter based (HOTP)",
   "saveAction": "Save",
@@ -47,16 +55,28 @@
   },
   "contactSupport": "Contact support",
   "verifyPassword": "Verify password",
-  "pleaseWaitTitle": "Please wait...",
+  "pleaseWait": "Please wait...",
   "generatingEncryptionKeysTitle": "Generating encryption keys...",
   "recreatePassword": "Recreate password",
   "recreatePasswordMessage": "The current device is not powerful enough to verify your password, so we need to regenerate it once in a way that works with all devices. \n\nPlease login using your recovery key and regenerate your password (you can use the same one again if you wish).",
-  "useRecoveryKeyAction": "Use recovery key",
-  "incorrectPassword": "Incorrect password",
-  "welcomeBackTitle": "Welcome back!",
+  "useRecoveryKey": "Use recovery key",
+  "incorrectPasswordTitle": "Incorrect password",
+  "welcomeBack": "Welcome back!",
   "madeWithLoveAtPrefix": "made with ❤️ at ",
-  "changeEmail": "change email",
-  "ok": "OK",
+  "supportDevs" : "Subscribe to <bold-green>ente</bold-green> to support this project.",
+  "supportDiscount" : "Use coupon code \"AUTH\" to get 10% off first year",
+  "changeEmail": "Change email",
+  "changePassword": "Change password",
+  "data" : "Data",
+  "importCodes": "Import codes",
+  "exportCodes": "Export codes",
+  "importInstruction": "Please select a file that contains a list of your codes in the following format",
+  "importCodeDelimiterInfo": "The codes can be separated by a comma or a new line",
+  "selectFile": "Select file",
+  "authToViewYourRecoveryKey": "Please authenticate to view your recovery key",
+  "authToChangeYourEmail": "Please authenticate to change your email",
+  "authToChangeYourPassword": "Please authenticate to change your password",
+  "ok": "Ok",
   "cancel": "Cancel",
   "yes": "Yes",
   "no": "No",
@@ -64,7 +84,7 @@
   "support": "Support",
   "settings": "Settings",
   "copied": "Copied",
-  "tryAgainMessage": "Please try again",
+  "pleaseTryAgain": "Please try again",
   "existingUser": "Existing User",
   "newUser" : "New to ente",
   "delete": "Delete",
@@ -106,11 +126,108 @@
   "confirmAccountDeleteMessage": "Your uploaded data, across all apps (Photos and Authenticator both), will be scheduled for deletion, and your account will be permanently deleted.",
   "sendEmail": "Send email",
   "createNewAccount": "Create new account",
-  "passwordStrengthWeak": "Weak",
-  "passwordStrengthStrong": "Strong",
-  "passwordStrengthModerate": "Moderate",
+  "weakStrength": "Weak",
+  "strongStrength": "Strong",
+  "moderateStrength": "Moderate",
   "confirmPassword": "Confirm password",
   "close": "Close",
-  "oopsSomethingWentWrong": "Oops, Something went wrong."
-
+  "oopsSomethingWentWrong": "Oops, Something went wrong.",
+  "selectLanguage": "Select language",
+  "language": "Language",
+  "social": "Social",
+  "security": "Security",
+  "lockscreen": "Lockscreen",
+  "authToChangeLockscreenSetting": "Please authenticate to change lockscreen setting",
+  "lockScreenEnablePreSteps": "To enable lockscreen, please setup device passcode or screen lock in your system settings.",
+  "viewActiveSessions": "View active sessions",
+  "authToViewYourActiveSessions": "Please authenticate to view your active sessions",
+  "searchHint": "Search...",
+  "search": "Search",
+  "sorryUnableToGenCode": "Sorry, unable to generate a code for {issuerName}",
+  "noResult": "No result",
+  "addCode": "Add code",
+  "scanAQrCode": "Scan a QR code",
+  "enterDetailsManually": "Enter details manually",
+  "edit": "Edit",
+  "copiedToClipboard": "Copied to clipboard",
+  "error": "Error",
+  "recoveryKeyCopiedToClipboard": "Recovery key copied to clipboard",
+  "recoveryKeyOnForgotPassword": "If you forget your password, the only way you can recover your data is with this key.",
+  "recoveryKeySaveDescription": "We don't store this key, please save this 24 word key in a safe place.",
+  "doThisLater": "Do this later",
+  "saveKey": "Save key",
+  "createAccount": "Create account",
+  "passwordStrength": "Password strength: {passwordStrengthValue}",
+  "@passwordStrength": {
+    "description": "Text to indicate the password strength",
+    "placeholders": {
+      "passwordStrengthValue": {
+        "description": "The strength of the password as a string",
+        "type": "String",
+        "example": "Weak or Moderate or Strong"
+      }
+    },
+    "message": "Password Strength: {passwordStrengthText}"
+  },
+  "password": "Password",
+  "signUpTerms" : "I agree to the <u-terms>terms of service</u-terms> and <u-policy>privacy policy</u-policy>",
+  "privacyPolicyTitle": "Privacy Policy",
+  "termsOfServicesTitle": "Terms",
+  "encryption": "Encryption",
+  "ackPasswordLostWarning": "I understand that if I lose my password, I may lose my data since my data is <underline>end-to-end encrypted</underline>.",
+  "loginTerms": "By clicking log in, I agree to the <u-terms>terms of service</u-terms> and <u-policy>privacy policy</u-policy>",
+  "logInLabel": "Log in",
+  "logout": "Logout",
+  "areYouSureYouWantToLogout": "Are you sure you want to logout?",
+  "yesLogout": "Yes, logout",
+  "exit": "Exit",
+  "verifyingRecoveryKey": "Verifying recovery key...",
+  "recoveryKeyVerified": "Recovery key verified",
+  "recoveryKeySuccessBody": "Great! Your recovery key is valid. Thank you for verifying.\n\nPlease remember to keep your recovery key safely backed up.",
+  "invalidRecoveryKey": "The recovery key you entered is not valid. Please make sure it contains 24 words, and check the spelling of each.\n\nIf you entered an older recovery code, make sure it is 64 characters long, and check each of them.",
+  "recreatePasswordTitle": "Recreate password",
+  "recreatePasswordBody": "The current device is not powerful enough to verify your password, but we can regenerate in a way that works with all devices.\n\nPlease login using your recovery key and regenerate your password (you can use the same one again if you wish).",
+  "invalidKey": "Invalid key",
+  "tryAgain": "Try again",
+  "viewRecoveryKey": "View recovery key",
+  "confirmRecoveryKey": "Confirm recovery key",
+  "recoveryKeyVerifyReason": "Your recovery key is the only way to recover your photos if you forget your password. You can find your recovery key in Settings > Account.\n\nPlease enter your recovery key here to verify that you have saved it correctly.",
+  "confirmYourRecoveryKey": "Confirm your recovery key",
+  "confirm": "Confirm",
+  "emailYourLogs": "Email your logs",
+  "pleaseSendTheLogsTo": "Please send the logs to \n{toEmail}",
+  "copyEmailAddress": "Copy email address",
+  "exportLogs": "Export logs",
+  "enterYourRecoveryKey": "Enter your recovery key",
+  "tempErrorContactSupportIfPersists": "It looks like something went wrong. Please retry after some time. If the error persists, please contact our support team.",
+  "itLooksLikeSomethingWentWrongPleaseRetryAfterSome": "It looks like something went wrong. Please retry after some time. If the error persists, please contact our support team.",
+  "about": "About",
+  "weAreOpenSource": "We are open source!",
+  "privacy": "Privacy",
+  "terms": "Terms",
+  "checkForUpdates": "Check for updates",
+  "checking": "Checking...",
+  "youAreOnTheLatestVersion": "You are on the latest version",
+  "warning": "Warning",
+  "exportWarningDesc": "The exported file contains sensitive information. Please store this safely.",
+  "iUnderStand" : "I understand",
+  "@iUnderStand": {
+    "description": "Text for the button to confirm the user understands the warning"
+  },
+  "authToExportCodes": "Please authenticate to export your codes",
+  "importSuccessTitle": "Yay!",
+  "importSuccessDesc": "You have imported {count} codes!",
+  "@importSuccessDes" : {
+    "placeholders": {
+      "count": {
+        "description": "The number of codes imported",
+        "type": "int",
+        "example": "1"
+      }
+    }
+  },
+  "sorry" : "Sorry",
+  "importFailureDesc": "Could not parse the selected file.\nPlease write to support@ente.io if you need help!",
+  "pendingSyncs" : "Warning",
+  "pendingSyncsWarningBody": "Some of your codes have not been backed up.\n\nPlease ensure that you have a backup for these codes before you logout."
 }

lib/l10n/arb/app_es.arb

@@ -1,7 +1,198 @@
 {
-    "@@locale": "es",
-    "counterAppBarTitle": "Contador",
-    "@counterAppBarTitle": {
-        "description": "Texto mostrado en la AppBar de la página del contador"
+  "account": "Cuenta",
+  "recoveryKey": "Clave de recuperación",
+  "counterAppBarTitle": "Contador",
+  "@counterAppBarTitle": {
+    "description": "Text shown in the AppBar of the Counter Page"
+  },
+  "onBoardingBody": "Asegure sus códigos 2FA",
+  "onBoardingGetStarted": "Primeros pasos",
+  "setupFirstAccount": "Configura tu primera cuenta",
+  "importScanQrCode": "Escanear un código QR",
+  "importEnterSetupKey": "Ingrese una llave de configuración",
+  "importAccountPageTitle": "Ingrese los detalles de la cuenta",
+  "codeIssuerHint": "Emisor",
+  "codeSecretKeyHint": "Llave Secreta",
+  "codeAccountHint": "Cuenta (tu@dominio.com)",
+  "accountKeyType": "Tipo de llave",
+  "sessionExpired": "La sesión ha expirado",
+  "@sessionExpired": {
+    "description": "Title of the dialog when the users current session is invalid/expired"
+  },
+  "pleaseLoginAgain": "Por favor, vuelva a iniciar sesión",
+  "loggingOut": "Cerrando sesión...",
+  "timeBasedKeyType": "Basado en el tiempo (TOTP)",
+  "counterBasedKeyType": "Basado en Contador (HOTP)",
+  "saveAction": "Guardar",
+  "nextTotpTitle": "siguiente",
+  "deleteCodeTitle": "Eliminar código?",
+  "deleteCodeMessage": "¿Está seguro que desea eliminar este código? Esta acción es irreversible.",
+  "viewLogsAction": "Ver Registros",
+  "sendLogsDescription": "Esto enviará registros para ayudarnos a depurar su problema. Aunque tomamos precauciones para asegurarnos que no se registre información sensible, le recomendamos que consulte estos registros antes de compartirlos.",
+  "preparingLogsTitle": "Preparando registros...",
+  "emailLogsTitle": "Enviar registros por email",
+  "emailLogsMessage": "Por favor, envíe los registros a {email}",
+  "@emailLogsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
     }
+  },
+  "copyEmailAction": "Copiar correo electrónico",
+  "exportLogsAction": "Exportar registros",
+  "reportABug": "Reportar un error",
+  "crashAndErrorReporting": "Informes de errores y fallos",
+  "reportBug": "Reportar error",
+  "emailUsMessage": "Por favor, envíanos un correo electrónico a {email}",
+  "@emailUsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "contactSupport": "Ponerse en contacto con el equipo de soporte",
+  "verifyPassword": "Verificar contraseña",
+  "pleaseWait": "Por favor, espere...",
+  "generatingEncryptionKeysTitle": "Generando claves de encriptación...",
+  "recreatePassword": "Recrear contraseña",
+  "recreatePasswordMessage": "El dispositivo actual no es lo suficientemente potente para verificar su contraseña, así que necesitamos regenerarlo una vez de una manera que funcione con todos los dispositivos. \n\nPor favor Inicie sesión usando su clave de recuperación y regenere su contraseña (puede volver a utilizar la misma si lo desea).",
+  "useRecoveryKey": "Usar clave de recuperación",
+  "incorrectPasswordTitle": "Contraseña incorrecta",
+  "welcomeBack": "¡Te damos la bienvenida otra vez!",
+  "madeWithLoveAtPrefix": "hecho con ❤️ en ",
+  "supportDevs": "Suscríbase a <bold-green>ente</bold-green> para apoyar este proyecto.",
+  "supportDiscount": "Utiliza el cupón promocional \"AUTH\" para obtener un 10% de descuento en el primer año",
+  "changeEmail": "Cambiar correo electrónico",
+  "changePassword": "Cambiar contraseña",
+  "data": "Datos",
+  "importCodes": "Importar códigos",
+  "exportCodes": "Exportar códigos",
+  "importInstruction": "Por favor, seleccione un archivo que contenga una lista de sus códigos en el siguiente formato",
+  "importCodeDelimiterInfo": "Los códigos pueden separarse por una coma o una nueva línea",
+  "selectFile": "Seleccionar archivo",
+  "authToViewYourRecoveryKey": "Por favor, autentifíquese para ver su clave de recuperación",
+  "authToChangeYourEmail": "Por favor, autentifíquese para cambiar su correo electrónico",
+  "authToChangeYourPassword": "Por favor, autentifíquese para cambiar su contraseña",
+  "ok": "Ok",
+  "cancel": "Cancelar",
+  "yes": "Si",
+  "no": "No",
+  "email": "Correo electrónico",
+  "support": "Soporte",
+  "settings": "Configuración",
+  "copied": "Copiado",
+  "pleaseTryAgain": "Por favor, inténtalo nuevamente",
+  "existingUser": "Usuario existente",
+  "newUser": "Nuevo en ente",
+  "delete": "Borrar",
+  "enterYourPasswordHint": "Ingrese su contraseña",
+  "forgotPassword": "Olvidé mi contraseña",
+  "oops": "Ups",
+  "somethingWentWrongMessage": "Algo ha ido mal, por favor, prueba otra vez",
+  "leaveFamily": "Dejar plan familiar",
+  "leaveFamilyMessage": "¿Está seguro de que desea abandonar el plan familiar?",
+  "inFamilyPlanMessage": "¡Estás en un plan familiar!",
+  "swipeHint": "Deslice a la izquierda para editar o eliminar códigos",
+  "scan": "Escanear",
+  "scanACode": "Escanear un código",
+  "verify": "Verificar",
+  "enterCodeHint": "Ingrese el código de seis dígitos de su aplicación de autenticación",
+  "lostDeviceTitle": "¿Perdió su dispositivo?",
+  "twoFactorAuthTitle": "Autenticación de dos factores",
+  "recoverAccount": "Recuperar cuenta",
+  "enterRecoveryKeyHint": "Introduzca su clave de recuperación",
+  "recover": "Recuperar",
+  "contactSupportViaEmailMessage": "Por favor, envíe un email a {email} desde su dirección de correo electrónico registrada",
+  "@contactSupportViaEmailMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "noRecoveryKeyTitle": "¿Sin clave de recuperación?",
+  "enterEmailHint": "Introduce tu dirección de correo electrónico",
+  "invalidEmailTitle": "Dirección de correo electrónico no válida",
+  "invalidEmailMessage": "Por favor, introduzca una dirección de correo electrónico válida.",
+  "deleteAccount": "Eliminar cuenta",
+  "deleteAccountQuery": "Lamentaremos que te vayas. ¿Estás enfrentando algún inconveniente?",
+  "yesSendFeedbackAction": "Sí, enviar comentarios",
+  "noDeleteAccountAction": "No, eliminar cuenta",
+  "initiateAccountDeleteTitle": "Por favor, autentifíquese para iniciar la eliminación de la cuenta",
+  "confirmAccountDeleteTitle": "¿Estás seguro de que quieres eliminar tu cuenta de ente?",
+  "confirmAccountDeleteMessage": "Sus datos subidos a través de todas las aplicaciones (fotos y autenticador), se programarán para su eliminación y su cuenta se eliminará permanentemente.",
+  "sendEmail": "Enviar correo electrónico",
+  "createNewAccount": "Crear nueva cuenta",
+  "weakStrength": "Poco segura",
+  "strongStrength": "Fuerte",
+  "moderateStrength": "Moderado",
+  "confirmPassword": "Confirmar contraseña",
+  "close": "Cerrar",
+  "oopsSomethingWentWrong": "Vaya, algo salió mal.",
+  "selectLanguage": "Seleccionar idioma",
+  "language": "Idioma",
+  "social": "Social",
+  "security": "Seguridad",
+  "lockscreen": "Pantalla de bloqueo",
+  "searchHint": "Buscar...",
+  "search": "Buscar",
+  "sorryUnableToGenCode": "Lo sentimos, no se puede generar un código para {issuerName}",
+  "noResult": "Sin resultados",
+  "addCode": "Añadir código",
+  "scanAQrCode": "Escanear un código QR",
+  "enterDetailsManually": "Ingrese los detalles manualmente",
+  "edit": "Editar",
+  "copiedToClipboard": "Copiado al portapapeles",
+  "error": "Error",
+  "recoveryKeyCopiedToClipboard": "Llave de recuperación copiada al portapapeles",
+  "recoveryKeyOnForgotPassword": "Si olvida su contraseña, la única forma de recuperar sus datos es con esta clave.",
+  "recoveryKeySaveDescription": "Nosotros no almacenamos esta clave, por favor guarde dicha clave de 24 palabras en un lugar seguro.",
+  "doThisLater": "Hacer esto más tarde",
+  "saveKey": "Guardar Clave",
+  "createAccount": "Crear cuenta",
+  "passwordStrength": "Fortaleza de la contraseña: {passwordStrengthValue}",
+  "@passwordStrength": {
+    "description": "Text to indicate the password strength",
+    "placeholders": {
+      "passwordStrengthValue": {
+        "description": "The strength of the password as a string",
+        "type": "String",
+        "example": "Weak or Moderate or Strong"
+      }
+    },
+    "message": "Password Strength: {passwordStrengthText}"
+  },
+  "password": "Contraseña",
+  "signUpTerms": "Estoy de acuerdo con los <u-terms>términos del servicio</u-terms> y <u-policy> la política de privacidad</u-policy>",
+  "privacyPolicyTitle": "Política de Privacidad",
+  "termsOfServicesTitle": "Términos",
+  "encryption": "Cifrado",
+  "ackPasswordLostWarning": "Entiendo que si pierdo mi contraseña podría perder mis datos, ya que mis datos están <underline>cifrados de extremo a extremo</underline>.",
+  "loginTerms": "Al hacer clic en iniciar sesión, acepto los <u-terms>términos de servicio</u-terms> y <u-policy>la política de privacidad</u-policy>",
+  "logInLabel": "Iniciar sesión",
+  "logout": "Cerrar sesión",
+  "yesLogout": "Sí, cerrar sesión",
+  "exit": "Salir",
+  "verifyingRecoveryKey": "Verificando clave de recuperación...",
+  "recoveryKeyVerified": "Clave de recuperación verificada",
+  "recoveryKeySuccessBody": "¡Genial! Su clave de recuperación es válida. Gracias por verificar.\n\nPor favor, recuerde mantener su clave de recuperación segura.",
+  "invalidRecoveryKey": "La clave de recuperación introducida no es válida. Por favor, asegúrese de que contiene 24 palabras y compruebe la ortografía de cada una.\n\nSi ha introducido un código de recuperación antiguo, asegúrese de que tiene 64 caracteres de largo y compruebe cada uno de ellos.",
+  "recreatePasswordTitle": "Recrear contraseña",
+  "recreatePasswordBody": "El dispositivo actual no es lo suficientemente potente para verificar su contraseña, pero podemos regenerarla de una manera que funcione con todos los dispositivos.\n\nPor favor inicie sesión usando su clave de recuperación y regenere su contraseña (puede volver a utilizar la misma si lo desea).",
+  "invalidKey": "Clave inválida",
+  "tryAgain": "Inténtelo de nuevo",
+  "viewRecoveryKey": "Ver código de recuperación",
+  "confirmRecoveryKey": "Confirmar clave de recuperación",
+  "recoveryKeyVerifyReason": "Su clave de recuperación es la única forma de recuperar sus fotos si olvida su contraseña. Puede encontrar su clave de recuperación en Ajustes > Cuenta.\n\nPor favor, introduzca su clave de recuperación aquí para verificar que la ha guardado correctamente.",
+  "confirmYourRecoveryKey": "Confirmar su clave de recuperación",
+  "confirm": "Confirmar",
+  "emailYourLogs": "Envíe sus registros por correo electrónico",
+  "pleaseSendTheLogsTo": "Por favor, envíe los registros a {toEmail}",
+  "copyEmailAddress": "Copiar dirección de correo electrónico",
+  "exportLogs": "Exportar registros",
+  "enterYourRecoveryKey": "Introduzca su clave de recuperación",
+  "tempErrorContactSupportIfPersists": "Parece que algo salió mal. Por favor, vuelve a intentarlo después de algún tiempo. Si el error persiste, ponte en contacto con nuestro equipo de soporte.",
+  "itLooksLikeSomethingWentWrongPleaseRetryAfterSome": "Parece que algo salió mal. Por favor, vuelve a intentarlo después de algún tiempo. Si el error persiste, ponte en contacto con nuestro equipo de soporte."
 }

lib/l10n/arb/app_fi.arb

@@ -0,0 +1,122 @@
+{
+  "counterAppBarTitle": "Laskuri",
+  "@counterAppBarTitle": {
+    "description": "Text shown in the AppBar of the Counter Page"
+  },
+  "onBoardingBody": "Turvaa 2FA-koodisi",
+  "onBoardingGetStarted": "Aloitetaan",
+  "setupFirstAccount": "Määritä ensimmäinen tilisi",
+  "importScanQrCode": "Lue QR-koodi",
+  "importEnterSetupKey": "Syötä asetusavain",
+  "importAccountPageTitle": "Syötä tilin tiedot",
+  "codeIssuerHint": "Myöntäjä",
+  "codeSecretKeyHint": "Salainen avain",
+  "codeAccountHint": "Tili (sinun@jokinosoite.com)",
+  "accountKeyType": "Avaimen tyyppi",
+  "sessionExpired": "Istunto on vanheutunut",
+  "@sessionExpired": {
+    "description": "Title of the dialog when the users current session is invalid/expired"
+  },
+  "pleaseLoginAgain": "Sisäänkirjaudu uudestaan",
+  "loggingOut": "Kirjaudutaan ulos...",
+  "timeBasedKeyType": "Aikaperusteinen (TOTP)",
+  "counterBasedKeyType": "Laskuripohjainen (HOTP)",
+  "saveAction": "Tallenna",
+  "nextTotpTitle": "seuraava",
+  "deleteCodeTitle": "Poista koodi?",
+  "deleteCodeMessage": "Haluatko varmasti poistaa tämän koodin? Toimintoa ei voi peruuttaa.",
+  "viewLogsAction": "Näytä lokikirjaukset",
+  "sendLogsDescription": "Tämä toiminto lähettää lokin kirjaukset eteenpäin jotta saisimme apua ongelmasi ratkaisemiseen. Vaikkakin käytäntömme on olla kirjaamatta mitään arkaluontoista tietoa, suosittelemme että tarkistat nämä tiedot ennen niiden jakamista.",
+  "preparingLogsTitle": "Valmistellaan lokikirjaukset...",
+  "emailLogsTitle": "Toimita lokikirjaukset sähköpostilla",
+  "emailLogsMessage": "Lähetä lokikirjaukset osoitteeseen {email}",
+  "@emailLogsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "copyEmailAction": "Jäljennä sähköpostiosoite leikepöydälle",
+  "exportLogsAction": "Vie lokikirjaukset",
+  "reportABug": "Ilmoita virhetoiminnosta",
+  "crashAndErrorReporting": "Kaatumis- ja virheraportointi",
+  "reportBug": "Ilmoita virheestä",
+  "emailUsMessage": "Lähetä meille sähköpostia osoitteeseen {email}",
+  "@emailUsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "contactSupport": "Ota yhteyttä käyttötukeen",
+  "verifyPassword": "Vahvista salasana",
+  "pleaseWait": "Odota hetki...",
+  "generatingEncryptionKeysTitle": "Luodaan salausavaimia...",
+  "recreatePassword": "Luo salasana uudelleen",
+  "recreatePasswordMessage": "Nykyinen laite ei ole riittävän tehokas salasanasi varmistamiseen, joten se on uudistettava kerran sillä tavalla että se toimii sen jälkeen kaikkien laitteiden kanssa. \n\nOle hyvä ja kirjaudu sisään palautusavaimellasi ja luo salasanasi uudelleen (voit halutessasi käyttää aivan samaa salasanaa).",
+  "useRecoveryKey": "Käytä palautusavainta",
+  "incorrectPasswordTitle": "Salasana on väärin",
+  "welcomeBack": "Tervetuloa takaisin!",
+  "madeWithLoveAtPrefix": "tehty ❤️:lla täällä ",
+  "supportDevs": "Tilaa <bold-green>ente</bold-green> tukeaksesi tätä hanketta.",
+  "supportDiscount": "Käytä kuponkikoodia \"AUTH\" saadaksesi 10% alennuksen ensimmäisestä vuodesta",
+  "changeEmail": "vaihda sähköpostiosoitteesi",
+  "ok": "Selvä",
+  "cancel": "Keskeytä",
+  "yes": "Kyllä",
+  "no": "Ei",
+  "email": "Sähköposti",
+  "support": "Tuki",
+  "settings": "Asetukset",
+  "copied": "Jäljennetty",
+  "pleaseTryAgain": "Yritä uudestaan",
+  "existingUser": "Jo valmiiksi olemassaoleva käyttäjä",
+  "newUser": "Uusi Ente-käyttäjä",
+  "delete": "Poista",
+  "enterYourPasswordHint": "Syötä salasanasi",
+  "forgotPassword": "Olen unohtanut salasanani",
+  "oops": "Hupsista",
+  "somethingWentWrongMessage": "Jokin meni pieleen, yritä uudelleen",
+  "leaveFamily": "Poistu perheestä",
+  "leaveFamilyMessage": "Oletko varma että haluat jättää tämän perhemallin?",
+  "inFamilyPlanMessage": "Olet perhemallissa!",
+  "swipeHint": "Pyyhkäise vasemmalle muokataksesi tai poistaaksesi koodeja",
+  "scan": "Lue",
+  "scanACode": "Lue koodi",
+  "verify": "Vahvista",
+  "enterCodeHint": "Syötä 6-merkkinen koodi varmennussovelluksestasi",
+  "lostDeviceTitle": "Kadonnut laite?",
+  "twoFactorAuthTitle": "Kaksivaiheinen vahvistus",
+  "recoverAccount": "Palauta tilisi",
+  "enterRecoveryKeyHint": "Syötä palautusavaimesi",
+  "recover": "Palauta",
+  "contactSupportViaEmailMessage": "Ole hyvä ja lähetä sähköpostia osoitteeseen {email} omasta rekisteröidystä sähköpostiosoitteestasi",
+  "@contactSupportViaEmailMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "noRecoveryKeyTitle": "Ei palautusavainta?",
+  "enterEmailHint": "Syötä sähköpostiosoitteesi",
+  "invalidEmailTitle": "Epäkelpo sähköpostiosoite",
+  "invalidEmailMessage": "Syötä kelpoisa sähköpostiosoite.",
+  "deleteAccount": "Poista tili",
+  "deleteAccountQuery": "Olemme pahoillamme että lähdet keskuudestamme. Kohtasitko käytössä jonkin ongelman?",
+  "yesSendFeedbackAction": "Kyllä, lähetä palautetta",
+  "noDeleteAccountAction": "En, poista tili",
+  "initiateAccountDeleteTitle": "Ole hyvä ja tee todennus käynnistääksesi tilisi poistoprosessin",
+  "confirmAccountDeleteTitle": "Haluatko varmasti poistaa Ente-tilisi?",
+  "confirmAccountDeleteMessage": "Lataamasi tiedot kaikkien sovellusten kesken (molemmat, sekä kuvat ja todenteet) ajastetaan poistettavaksi ja tilisi poistetaan pysyvästi.",
+  "sendEmail": "Lähetä sähköpostia",
+  "createNewAccount": "Luo uusi tili",
+  "weakStrength": "Heikko salasana",
+  "strongStrength": "Vahva salasana",
+  "moderateStrength": "Kohtalainen salasana",
+  "confirmPassword": "Vahvista salasana",
+  "close": "Sulje",
+  "oopsSomethingWentWrong": "Hupsista! Jotakin meni nyt pieleen."
+}

lib/l10n/arb/app_fr.arb

@@ -0,0 +1,198 @@
+{
+  "account": "Compte",
+  "recoveryKey": "Clé de récupération",
+  "counterAppBarTitle": "Compteur",
+  "@counterAppBarTitle": {
+    "description": "Text shown in the AppBar of the Counter Page"
+  },
+  "onBoardingBody": "Sécurisez vos codes 2FA",
+  "onBoardingGetStarted": "Premiers Pas",
+  "setupFirstAccount": "Configurez votre premier compte",
+  "importScanQrCode": "Scannez un QR Code",
+  "importEnterSetupKey": "Saisir une clé de configuration",
+  "importAccountPageTitle": "Saisir les détails du compte",
+  "codeIssuerHint": "Émetteur",
+  "codeSecretKeyHint": "Clé secrète",
+  "codeAccountHint": "Compte (vous@domaine.fr)",
+  "accountKeyType": "Type de clé",
+  "sessionExpired": "Session expirée",
+  "@sessionExpired": {
+    "description": "Title of the dialog when the users current session is invalid/expired"
+  },
+  "pleaseLoginAgain": "Veuillez vous reconnecter",
+  "loggingOut": "Deconnexion...",
+  "timeBasedKeyType": "Basé sur l'heure (TOTP)",
+  "counterBasedKeyType": "Basé sur le compteur (HOTP)",
+  "saveAction": "Sauvegarder",
+  "nextTotpTitle": "suivant",
+  "deleteCodeTitle": "Supprimer le code ?",
+  "deleteCodeMessage": "Êtes-vous sûr de vouloir supprimer ce code ? Cette action est irréversible.",
+  "viewLogsAction": "Afficher les journaux",
+  "sendLogsDescription": "Cela enverra des logs pour nous aider à déboguer votre problème. Bien que nous prenions des précautions pour nous assurer que les informations sensibles ne sont pas enregistrées, nous vous encourageons à consulter ces journaux avant de les partager.",
+  "preparingLogsTitle": "Préparation des journaux...",
+  "emailLogsTitle": "Journaux d'email",
+  "emailLogsMessage": "Envoyez les logs à {email}",
+  "@emailLogsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "copyEmailAction": "Copier l’e-mail",
+  "exportLogsAction": "Exporter les journaux",
+  "reportABug": "Signaler un bug",
+  "crashAndErrorReporting": "Rapport de plantage et d'erreur",
+  "reportBug": "Signaler un bug",
+  "emailUsMessage": "Veuillez nous envoyer un e-mail à {email}",
+  "@emailUsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "contactSupport": "Contacter le support",
+  "verifyPassword": "Vérifier le mot de passe",
+  "pleaseWait": "Veuillez patienter...",
+  "generatingEncryptionKeysTitle": "Génération des clés de chiffrement...",
+  "recreatePassword": "Recréer le mot de passe",
+  "recreatePasswordMessage": "L'appareil actuel n'est pas assez puissant pour vérifier votre mot de passe, donc nous avons besoin de le régénérer une fois d'une manière qu'il fonctionne avec tous les périphériques.\n\nVeuillez vous connecter en utilisant votre clé de récupération et régénérer votre mot de passe (vous pouvez utiliser le même si vous le souhaitez).",
+  "useRecoveryKey": "Utiliser la clé de récupération",
+  "incorrectPasswordTitle": "Mot de passe incorrect",
+  "welcomeBack": "Bon retour parmi nous !",
+  "madeWithLoveAtPrefix": "fait avec ❤️ à ",
+  "supportDevs": "Abonnez-vous à <bold-green>ente</bold-green> pour soutenir ce projet.",
+  "supportDiscount": "Utilisez le code coupon \"AUTH\" pour obtenir 10% de réduction sur la première année",
+  "changeEmail": "Modifier l'e-mail",
+  "changePassword": "Modifier le mot de passe",
+  "data": "Données",
+  "importCodes": "Importer les codes",
+  "exportCodes": "Exporter les codes",
+  "importInstruction": "Veuillez sélectionner un fichier qui contient une liste de vos codes dans le format suivant",
+  "importCodeDelimiterInfo": "Les codes peuvent être séparés par une virgule ou un retour à la ligne",
+  "selectFile": "Sélectionner le fichier",
+  "authToViewYourRecoveryKey": "Veuillez vous authentifier pour afficher votre clé de récupération",
+  "authToChangeYourEmail": "Veuillez vous authentifier pour modifier votre adresse e-mail",
+  "authToChangeYourPassword": "Veuillez vous authentifier pour modifier votre mot de passe",
+  "ok": "Ok",
+  "cancel": "Annuler",
+  "yes": "Oui",
+  "no": "Non",
+  "email": "E-mail",
+  "support": "Support",
+  "settings": "Paramètres",
+  "copied": "Copié",
+  "pleaseTryAgain": "Veuillez réessayer",
+  "existingUser": "Utilisateur existant",
+  "newUser": "Nouveau sur ente",
+  "delete": "Supprimer",
+  "enterYourPasswordHint": "Saisir votre mot de passe",
+  "forgotPassword": "Mot de passe oublié",
+  "oops": "Oups",
+  "somethingWentWrongMessage": "Quelque chose s'est mal passé, veuillez recommencer",
+  "leaveFamily": "Quitter le plan familial",
+  "leaveFamilyMessage": "Êtes-vous certains de vouloir quitter le plan familial ?",
+  "inFamilyPlanMessage": "Vous êtes sur un plan familial !",
+  "swipeHint": "Glisser vers la gauche pour modifier ou supprimer des codes",
+  "scan": "Analyser",
+  "scanACode": "Scanner un code",
+  "verify": "Vérifier",
+  "enterCodeHint": "Saisir le code à 6 caractères de votre appli d'authentification",
+  "lostDeviceTitle": "Appareil perdu ?",
+  "twoFactorAuthTitle": "Authentification à deux facteurs",
+  "recoverAccount": "Récupérer un compte",
+  "enterRecoveryKeyHint": "Saisissez votre clé de récupération",
+  "recover": "Restaurer",
+  "contactSupportViaEmailMessage": "Veuillez envoyer un e-mail à {email} depuis votre adresse enregistrée",
+  "@contactSupportViaEmailMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "noRecoveryKeyTitle": "Pas de clé de récupération ?",
+  "enterEmailHint": "Entrez votre adresse e-mail",
+  "invalidEmailTitle": "Adresse e-mail non valide",
+  "invalidEmailMessage": "Veuillez saisir une adresse e-mail valide.",
+  "deleteAccount": "Supprimer le compte",
+  "deleteAccountQuery": "Nous sommes désolés de vous voir partir. Êtes-vous confronté à un problème?",
+  "yesSendFeedbackAction": "Oui, envoyer un commentaire",
+  "noDeleteAccountAction": "Non, supprimer le compte",
+  "initiateAccountDeleteTitle": "Veuillez vous authentifier pour débuter la suppression du compte",
+  "confirmAccountDeleteTitle": "Êtes-vous sûr de vouloir supprimer votre compte ente ?",
+  "confirmAccountDeleteMessage": "Vos données téléchargées, à travers toutes les applications (Photos et Authenticator), seront planifiées pour la suppression, et votre compte sera définitivement supprimé.",
+  "sendEmail": "Envoyer un e-mail",
+  "createNewAccount": "Créer un nouveau compte",
+  "weakStrength": "Faible",
+  "strongStrength": "Fort",
+  "moderateStrength": "Modéré",
+  "confirmPassword": "Confirmer le mot de passe",
+  "close": "Fermer",
+  "oopsSomethingWentWrong": "Oops ! Une erreur s'est produite.",
+  "selectLanguage": "Sélectionnez la langue",
+  "language": "Langue",
+  "social": "Réseaux Sociaux",
+  "security": "Sécurité",
+  "lockscreen": "Ecran de vérouillage",
+  "searchHint": "Rechercher...",
+  "search": "Rechercher",
+  "sorryUnableToGenCode": "Désolé, impossible de générer un code pour {issuerName}",
+  "noResult": "Aucun résultat",
+  "addCode": "Ajouter un code",
+  "scanAQrCode": "Scanner un QR Code",
+  "enterDetailsManually": "Saisir les détails manuellement",
+  "edit": "Éditer",
+  "copiedToClipboard": "Copié dans le presse-papiers",
+  "error": "Erreur",
+  "recoveryKeyCopiedToClipboard": "Clé de récupération copiée dans le presse-papiers",
+  "recoveryKeyOnForgotPassword": "Si vous oubliez votre mot de passe, la seule façon de récupérer vos données sera grâce à cette clé.",
+  "recoveryKeySaveDescription": "Nous ne stockons pas cette clé, veuillez enregistrer cette clé de 24 mots dans un endroit sûr.",
+  "doThisLater": "Plus tard",
+  "saveKey": "Enregistrer la clé",
+  "createAccount": "Créer un compte",
+  "passwordStrength": "Force du mot de passe : {passwordStrengthValue}",
+  "@passwordStrength": {
+    "description": "Text to indicate the password strength",
+    "placeholders": {
+      "passwordStrengthValue": {
+        "description": "The strength of the password as a string",
+        "type": "String",
+        "example": "Weak or Moderate or Strong"
+      }
+    },
+    "message": "Password Strength: {passwordStrengthText}"
+  },
+  "password": "Mot de passe",
+  "signUpTerms": "J'accepte les <u-terms>conditions d'utilisation</u-terms> et la <u-policy>politique de confidentialité</u-policy>",
+  "privacyPolicyTitle": "Politique de confidentialité",
+  "termsOfServicesTitle": "Conditions",
+  "encryption": "Chiffrement",
+  "ackPasswordLostWarning": "Je comprends que si je perds mon mot de passe, je risque de perdre mes données puisque celles-ci sont <underline>chiffrées de bout en bout</underline>.",
+  "loginTerms": "En cliquant sur \"Connexion\", j'accepte les <u-terms>conditions d'utilisation</u-terms> et la <u-policy>politique de confidentialité</u-policy>",
+  "logInLabel": "Connexion",
+  "logout": "Déconnexion",
+  "yesLogout": "Oui, se déconnecter",
+  "exit": "Quitter",
+  "verifyingRecoveryKey": "Vérification de la clé de récupération...",
+  "recoveryKeyVerified": "Clé de récupération vérifiée",
+  "recoveryKeySuccessBody": "Parfait ! Votre clé de récupération est valide. Merci pour la vérification.\n\nN'oubliez pas de garder cette clé de récupération en lieu sûr.",
+  "invalidRecoveryKey": "La clé de récupération que vous avez saisie n'est pas valide. Assurez-vous qu'elle contient 24 mots et vérifiez l'orthographe de chacun.\n\nSi vous avez entré un ancien code de récupération, assurez-vous qu'il fait 64 caractères de long et vérifiez chacun d'entre eux.",
+  "recreatePasswordTitle": "Recréer le mot de passe",
+  "recreatePasswordBody": "L'appareil actuel n'est pas assez puissant pour vérifier votre mot de passe, donc nous avons besoin de le régénérer une fois d'une manière qu'il fonctionne avec tous les périphériques.\n\nVeuillez vous connecter en utilisant votre clé de récupération et régénérer votre mot de passe (vous pouvez utiliser le même si vous le souhaitez).",
+  "invalidKey": "Clé non valide",
+  "tryAgain": "Réessayer",
+  "viewRecoveryKey": "Voir la clé de récupération",
+  "confirmRecoveryKey": "Confirmer la clé de récupération",
+  "recoveryKeyVerifyReason": "Votre clé de récupération est la seule façon de récupérer vos photos si vous oubliez votre mot de passe. Vous pouvez trouver votre clé de récupération dans Paramètres > Compte.\n\nVeuillez entrer votre clé de récupération ici pour vous assurer que vous l'avez enregistrée correctement.",
+  "confirmYourRecoveryKey": "Confirmer la clé de récupération",
+  "confirm": "Confirmer",
+  "emailYourLogs": "Envoyez vos logs par e-mail",
+  "pleaseSendTheLogsTo": "Envoyez les logs à {toEmail}",
+  "copyEmailAddress": "Copier l’adresse e-mail",
+  "exportLogs": "Exporter les journaux",
+  "enterYourRecoveryKey": "Entrez votre clé de récupération",
+  "tempErrorContactSupportIfPersists": "Il semble qu'une erreur s'est produite. Veuillez réessayer après un certain temps. Si l'erreur persiste, veuillez contacter notre équipe d'assistance.",
+  "itLooksLikeSomethingWentWrongPleaseRetryAfterSome": "Il semble qu'une erreur s'est produite. Veuillez réessayer après un certain temps. Si l'erreur persiste, veuillez contacter notre équipe d'assistance."
+}

lib/l10n/arb/app_it.arb

@@ -0,0 +1,117 @@
+{
+  "counterAppBarTitle": "Contatore",
+  "@counterAppBarTitle": {
+    "description": "Text shown in the AppBar of the Counter Page"
+  },
+  "onBoardingBody": "Proteggi i tuoi codici 2FA",
+  "onBoardingGetStarted": "Per iniziare",
+  "setupFirstAccount": "Configura il tuo primo account",
+  "importScanQrCode": "Scansiona un codice QR",
+  "importEnterSetupKey": "Inserisci il codice segreto",
+  "importAccountPageTitle": "Inserisci i dettagli del tuo account",
+  "codeIssuerHint": "Emittente",
+  "codeSecretKeyHint": "Codice segreto",
+  "codeAccountHint": "Account (username@dominio.it)",
+  "accountKeyType": "Tipo di chiave",
+  "timeBasedKeyType": "Basata sul tempo (TOTP)",
+  "counterBasedKeyType": "Basata su contatore (HOTP)",
+  "saveAction": "Salva",
+  "nextTotpTitle": "successivo",
+  "deleteCodeTitle": "Eliminare il codice?",
+  "deleteCodeMessage": "Sei sicuro di voler rimuovere questo codice? L'azione è irreversibile.",
+  "viewLogsAction": "Visualizza i log",
+  "sendLogsDescription": "Invierai i tuoi log per aiutarci a risolvere il tuo problema. Prendiamo precauzioni per garantire che le informazioni sensibili non siano registrate, tuttavia ti invitiamo a leggerli prima di condividerli con noi.",
+  "preparingLogsTitle": "Preparando i log...",
+  "emailLogsTitle": "Invia i log per email",
+  "emailLogsMessage": "Invia i log all'indirizzo {email}",
+  "@emailLogsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "copyEmailAction": "Copia email",
+  "exportLogsAction": "Esporta log",
+  "reportABug": "Segnala un problema",
+  "crashAndErrorReporting": "Segnalazione degli errori e dei crash",
+  "reportBug": "Segnala un bug",
+  "emailUsMessage": "Per favore inviaci un'email a {email}",
+  "@emailUsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "contactSupport": "Contatta il supporto",
+  "verifyPassword": "Verifica la password",
+  "pleaseWait": "Attendere prego...",
+  "generatingEncryptionKeysTitle": "Generazione delle chiavi di crittografia...",
+  "recreatePassword": "Crea una nuova password",
+  "recreatePasswordMessage": "Il tuo dispositivo non è abbastanza potente per verificare la tua password, quindi abbiamo bisogno di rigenerarla in un modo che funziona con tutti i dispositivi. \n\nEffettua il login utilizzando la tua chiave di recupero e rigenera la tua password (puoi utilizzare nuovamente la stessa se vuoi).",
+  "useRecoveryKey": "Utilizza un codice di recupero",
+  "incorrectPasswordTitle": "Password sbagliata",
+  "welcomeBack": "Bentornato!",
+  "madeWithLoveAtPrefix": "realizzato con ❤️ a ",
+  "supportDevs": "Iscriviti a <bold-green>ente</bold-green> per supportare questo progetto.",
+  "supportDiscount": "Utilizzare il codice coupon \"AUTH\" per ottenere il 10% di sconto al primo anno",
+  "changeEmail": "modifica email",
+  "ok": "OK",
+  "cancel": "Annulla",
+  "yes": "Si",
+  "no": "No",
+  "email": "Email",
+  "support": "Supporto",
+  "settings": "Impostazioni",
+  "copied": "Copiato",
+  "pleaseTryAgain": "Per favore riprova",
+  "existingUser": "Accedi",
+  "newUser": "Nuovo utente",
+  "delete": "Cancella",
+  "enterYourPasswordHint": "Inserisci la tua password",
+  "forgotPassword": "Password dimenticata",
+  "oops": "Oops",
+  "somethingWentWrongMessage": "Qualcosa è andato storto, per favore riprova",
+  "leaveFamily": "Abbandona il piano famiglia",
+  "leaveFamilyMessage": "Sei sicuro di voler uscire dal piano famiglia?",
+  "inFamilyPlanMessage": "Sei un utente con piano famiglia!",
+  "swipeHint": "Scorri a sinistra per modificare o rimuovere i codici",
+  "scan": "Scansiona",
+  "scanACode": "Scansiona un codice",
+  "verify": "Verifica",
+  "enterCodeHint": "Inserisci il codice di 6 cifre dalla tua app di autenticazione",
+  "lostDeviceTitle": "Dispositivo perso?",
+  "twoFactorAuthTitle": "Autenticazione a due fattori",
+  "recoverAccount": "Recupera account",
+  "enterRecoveryKeyHint": "Inserisci la tua chiave di recupero",
+  "recover": "Recupera",
+  "contactSupportViaEmailMessage": "Per favore invia un'email a {email} dal tuo indirizzo email registrato",
+  "@contactSupportViaEmailMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "noRecoveryKeyTitle": "Nessuna chiave di recupero?",
+  "enterEmailHint": "Inserisci il tuo indirizzo email",
+  "invalidEmailTitle": "Indirizzo email non valido",
+  "invalidEmailMessage": "Inserisci un indirizzo email valido.",
+  "deleteAccount": "Elimina account",
+  "deleteAccountQuery": "Ci dispiace vederti andare via. Stai avendo qualche problema?",
+  "yesSendFeedbackAction": "Sì, invia un feedback",
+  "noDeleteAccountAction": "No, elimina l'account",
+  "initiateAccountDeleteTitle": "Si prega di autenticarsi per avviare l'eliminazione dell'account",
+  "confirmAccountDeleteTitle": "Sei sicuro di voler eliminare il tuo account?",
+  "confirmAccountDeleteMessage": "I tuoi dati caricati, in tutte le app (sia foto che autenticatore), verranno pianificati per la cancellazione, e il tuo account sarà eliminato in modo permanente.",
+  "sendEmail": "Invia email",
+  "createNewAccount": "Crea un nuovo account",
+  "weakStrength": "Debole",
+  "strongStrength": "Forte",
+  "moderateStrength": "Mediocre",
+  "confirmPassword": "Conferma la password",
+  "close": "Chiudi",
+  "oopsSomethingWentWrong": "Oops, qualcosa è andato storto.",
+  "selectLanguage": "Seleziona lingua"
+}

lib/l10n/arb/app_nl.arb

@@ -0,0 +1,115 @@
+{
+  "counterAppBarTitle": "Teller",
+  "@counterAppBarTitle": {
+    "description": "Text shown in the AppBar of the Counter Page"
+  },
+  "onBoardingBody": "Beveilig je 2FA codes",
+  "onBoardingGetStarted": "Begin",
+  "setupFirstAccount": "Maak je account aan",
+  "importScanQrCode": "Scan een QR-code",
+  "importEnterSetupKey": "Voer een toegangssleutel in",
+  "importAccountPageTitle": "Accountgegevens invoeren",
+  "codeIssuerHint": "Uitgever",
+  "codeSecretKeyHint": "Geheime code",
+  "codeAccountHint": "Account (jij@domein.nl)",
+  "accountKeyType": "Type sleutel",
+  "timeBasedKeyType": "Tijd gebaseerd (TOTP)",
+  "counterBasedKeyType": "Teller gebaseerd (HOTP)",
+  "saveAction": "Opslaan",
+  "nextTotpTitle": "volgende",
+  "deleteCodeTitle": "Code verwijderen?",
+  "deleteCodeMessage": "Weet je zeker dat je deze code wilt verwijderen? Deze actie is onomkeerbaar.",
+  "viewLogsAction": "Bekijk logs",
+  "sendLogsDescription": "Dit zal logs verzenden om ons te helpen uw probleem op te lossen. Hoewel we voorzorgsmaatregelen nemen om ervoor te zorgen dat gevoelige informatie niet wordt gedeeld, raden we je aan deze logs te bekijken voordat je ze deelt.",
+  "preparingLogsTitle": "Klaarmaken...",
+  "emailLogsTitle": "E-mail logs",
+  "emailLogsMessage": "Verstuur de logs alsjeblieft naar {email}",
+  "@emailLogsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "copyEmailAction": "E-mail kopiëren",
+  "exportLogsAction": "Logs exporteren",
+  "reportABug": "Een fout melden",
+  "crashAndErrorReporting": "Crash- en foutrapportage",
+  "reportBug": "Een fout melden",
+  "emailUsMessage": "Stuur ons een e-mail op {email}",
+  "@emailUsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "contactSupport": "Klantenservice",
+  "verifyPassword": "Bevestig wachtwoord",
+  "pleaseWait": "Een ogenblik geduld...",
+  "generatingEncryptionKeysTitle": "Encryptiesleutels genereren...",
+  "recreatePassword": "Wachtwoord opnieuw instellen",
+  "recreatePasswordMessage": "Het huidige apparaat is niet krachtig genoeg om je wachtwoord te verifiëren, dus moeten we de code een keer opnieuw genereren op een manier die met alle apparaten werkt.\n\nLog in met behulp van uw herstelcode en genereer opnieuw uw wachtwoord (je kunt dezelfde indien gewenst opnieuw gebruiken).",
+  "useRecoveryKey": "Herstelcode gebruiken",
+  "incorrectPasswordTitle": "Onjuist wachtwoord",
+  "welcomeBack": "Welkom terug!",
+  "madeWithLoveAtPrefix": "gemaakt met ❤️ door ",
+  "supportDiscount": "Gebruik couponcode \"AUTH\" om 10% korting te krijgen op het eerste jaar",
+  "changeEmail": "e-mailadres wijzigen",
+  "ok": "Oké",
+  "cancel": "Annuleer",
+  "yes": "Ja",
+  "no": "Nee",
+  "email": "E-mail",
+  "support": "Ondersteuning",
+  "settings": "Instellingen",
+  "copied": "Gekopieerd",
+  "pleaseTryAgain": "Probeer het nog eens",
+  "existingUser": "Bestaande gebruiker",
+  "newUser": "Nieuw bij ente",
+  "delete": "Verwijderen",
+  "enterYourPasswordHint": "Voer je wachtwoord in",
+  "forgotPassword": "Wachtwoord vergeten",
+  "oops": "Oeps",
+  "somethingWentWrongMessage": "Er is iets fout gegaan, probeer het opnieuw",
+  "leaveFamily": "Familie verlaten",
+  "leaveFamilyMessage": "Weet je zeker dat je het familie-plan wil verlaten?",
+  "inFamilyPlanMessage": "Je hebt een familie-plan!",
+  "swipeHint": "Veeg naar links om codes te bewerken of te verwijderen",
+  "scan": "Scannen",
+  "scanACode": "Scan een code",
+  "verify": "Verifiëren",
+  "enterCodeHint": "Voer de 6-cijferige code van je verificatie-app in",
+  "lostDeviceTitle": "Apparaat verloren?",
+  "twoFactorAuthTitle": "Tweestapsverificatie",
+  "recoverAccount": "Account herstellen",
+  "enterRecoveryKeyHint": "Voer je herstelcode in",
+  "recover": "Herstellen",
+  "contactSupportViaEmailMessage": "Verstuur a.u.b. een e-mail naar {email} van uw geregistreerde e-mailadres",
+  "@contactSupportViaEmailMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "noRecoveryKeyTitle": "Geen herstelcode?",
+  "enterEmailHint": "Voer je e-mailadres in",
+  "invalidEmailTitle": "Ongeldig e-mailadres",
+  "invalidEmailMessage": "Voer een geldig e-mailadres in.",
+  "deleteAccount": "Account verwijderen",
+  "deleteAccountQuery": "We zullen het vervelend vinden om je te zien vertrekken. Zijn er problemen?",
+  "yesSendFeedbackAction": "Ja, geef feedback",
+  "noDeleteAccountAction": "Nee, verwijder account",
+  "initiateAccountDeleteTitle": "Gelieve te verifiëren om het account te verwijderen",
+  "confirmAccountDeleteTitle": "Weet je zeker dat je je ente account wil verwijderen?",
+  "confirmAccountDeleteMessage": "Uw geüploade gegevens, in alle apps (Photos en Authenticator), worden ingepland voor verwijdering en uw account zal permanent worden verwijderd.",
+  "sendEmail": "E-mail versturen",
+  "createNewAccount": "Nieuw account aanmaken",
+  "weakStrength": "Zwak",
+  "strongStrength": "Sterk",
+  "moderateStrength": "Matig",
+  "confirmPassword": "Wachtwoord bevestigen",
+  "close": "Sluiten",
+  "oopsSomethingWentWrong": "Oeps, er is iets fout gegaan."
+}

lib/l10n/arb/app_pt.arb

@@ -0,0 +1 @@
+{}

lib/l10n/arb/app_ru.arb

@@ -0,0 +1,115 @@
+{
+  "counterAppBarTitle": "Счетчик",
+  "@counterAppBarTitle": {
+    "description": "Text shown in the AppBar of the Counter Page"
+  },
+  "onBoardingBody": "Защитите ваши 2FA коды",
+  "onBoardingGetStarted": "Начать",
+  "setupFirstAccount": "Настройте свой первый аккаунт",
+  "importScanQrCode": "Сканировать QR-код",
+  "importEnterSetupKey": "Введите ключ установки",
+  "importAccountPageTitle": "Введите данные аккаунта",
+  "codeIssuerHint": "Эмитент",
+  "codeSecretKeyHint": "Секретный ключ",
+  "codeAccountHint": "Аккаунт (you@domain.com)",
+  "accountKeyType": "Тип ключа",
+  "timeBasedKeyType": "Основанный на времени (TOTP)",
+  "counterBasedKeyType": "На основе счётчиков (HOTP)",
+  "saveAction": "Сохранить",
+  "nextTotpTitle": "далее",
+  "deleteCodeTitle": "Удалить код?",
+  "deleteCodeMessage": "Вы уверены, что хотите удалить этот код? Это действие необратимо.",
+  "viewLogsAction": "Посмотреть журнал",
+  "sendLogsDescription": "Это отправит все журналы, чтобы помочь нам отладить вашу проблему. Хотя мы принимаем меры предосторожности, чтобы конфиденциальная информация не регистрировалась, мы рекомендуем вам просмотреть эти журналы, прежде чем делиться ими.",
+  "preparingLogsTitle": "Подготовка журналов...",
+  "emailLogsTitle": "Отправляйте журналы по электронной почте",
+  "emailLogsMessage": "Пожалуйста, отправьте журналы на {email}",
+  "@emailLogsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "copyEmailAction": "Скопировать адрес",
+  "exportLogsAction": "Экспорт журналов",
+  "reportABug": "Сообщить об ошибке",
+  "crashAndErrorReporting": "Отчёт об ошибках",
+  "reportBug": "Сообщить об ошибке",
+  "emailUsMessage": "Пожалуйста, напишите нам на {email}",
+  "@emailUsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "contactSupport": "Связаться с поддержкой",
+  "verifyPassword": "Подтверждение пароля",
+  "pleaseWait": "Пожалуйста, подождите...",
+  "generatingEncryptionKeysTitle": "Генерируем ключи шифрования...",
+  "recreatePassword": "Воссоздать пароль заново",
+  "recreatePasswordMessage": "Текущее устройство недостаточно мощное для проверки пароля, поэтому нам нужно регенерировать его один раз таким образом, чтобы работать со всеми устройствами. \n\nПожалуйста, войдите, используя ваш ключ восстановления и сгенерируйте ваш пароль (вы можете использовать тот же самый, если пожелаете).",
+  "useRecoveryKey": "Использовать ключ восстановления",
+  "incorrectPasswordTitle": "Неправильный пароль",
+  "welcomeBack": "С возвращением!",
+  "madeWithLoveAtPrefix": "сделана с ❤️ в ",
+  "supportDevs": "Подпишитесь на <bold-green>ente</bold-green> для поддержки этого проекта.",
+  "supportDiscount": "Используйте код скидки \"AUTH\", чтобы получить скидку 10% в первый год",
+  "changeEmail": "изменить почту",
+  "cancel": "Отменить",
+  "yes": "Да",
+  "no": "Нет",
+  "email": "Электронная почта",
+  "support": "Поддержка",
+  "settings": "Настройки",
+  "copied": "Скопировано",
+  "pleaseTryAgain": "Пожалуйста, попробуйте ещё раз",
+  "existingUser": "Существующий пользователь",
+  "newUser": "Новый аккаунт",
+  "delete": "Удалить",
+  "enterYourPasswordHint": "Введите пароль",
+  "forgotPassword": "Забыл пароль",
+  "oops": "Ой",
+  "somethingWentWrongMessage": "Что-то пошло не так. Попробуйте еще раз",
+  "leaveFamily": "Покинуть семью",
+  "leaveFamilyMessage": "Вы уверены, что хотите отказаться от семейного плана?",
+  "inFamilyPlanMessage": "Вы на семейном плане!",
+  "swipeHint": "Проведите пальцем влево, чтобы отредактировать или удалить коды",
+  "scan": "Сканировать",
+  "scanACode": "Сканировать QR-код",
+  "verify": "Подтвердить",
+  "enterCodeHint": "Введите 6-значный код из\nвашего приложения-аутентификатора",
+  "lostDeviceTitle": "Потеряно устройство?",
+  "twoFactorAuthTitle": "Двухфакторная аутентификация",
+  "recoverAccount": "Восстановить аккаунт",
+  "enterRecoveryKeyHint": "Введите свой ключ восстановления",
+  "recover": "Восстановить",
+  "contactSupportViaEmailMessage": "Пожалуйста, отправьте электронное письмо на адрес {email} с вашего зарегистрированного адреса электронной почты",
+  "@contactSupportViaEmailMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "noRecoveryKeyTitle": "Нет ключа восстановления?",
+  "enterEmailHint": "Введите свою почту",
+  "invalidEmailTitle": "Неверный адрес электронной почты",
+  "invalidEmailMessage": "Пожалуйста, введите действительный адрес электронной почты.",
+  "deleteAccount": "Удалить аккаунт",
+  "deleteAccountQuery": "Нам будет жаль, если вы уйдете. Вы столкнулись с какой-то проблемой?",
+  "yesSendFeedbackAction": "Да, отправить отзыв",
+  "noDeleteAccountAction": "Нет, удалить аккаунт",
+  "initiateAccountDeleteTitle": "Пожалуйста, авторизуйтесь, чтобы начать удаление аккаунта",
+  "confirmAccountDeleteTitle": "Вы уверены, что хотите удалить ваш аккаунт ente?",
+  "confirmAccountDeleteMessage": "Ваши загруженные данные во всех приложениях (как фотографии, так и средство аутентификации) будут запланированы к удалению, а ваш аккаунт будет удален безвозвратно.",
+  "sendEmail": "Отправить электронное письмо",
+  "createNewAccount": "Создать новый аккаунт",
+  "weakStrength": "Слабый",
+  "strongStrength": "Крепкий",
+  "moderateStrength": "Средний",
+  "confirmPassword": "Подтвердить пароль",
+  "close": "Закрыть",
+  "oopsSomethingWentWrong": "Ой, что-то пошло не так."
+}

lib/l10n/arb/app_tr.arb

@@ -0,0 +1,122 @@
+{
+  "counterAppBarTitle": "Sayaç",
+  "@counterAppBarTitle": {
+    "description": "Text shown in the AppBar of the Counter Page"
+  },
+  "onBoardingBody": "2 faktörlü kimlik doğrulama kodlarınızı koruyun",
+  "onBoardingGetStarted": "Başlayın",
+  "setupFirstAccount": "İlk hesabınızı ekleyin",
+  "importScanQrCode": "Karekodu tara",
+  "importEnterSetupKey": "Kurulum anahtarını giriniz",
+  "importAccountPageTitle": "Hesap bilgilerinizi girin",
+  "codeIssuerHint": "Yayınlayan",
+  "codeSecretKeyHint": "Gizli Anahtar",
+  "codeAccountHint": "Hesap (örnek@domain.com)",
+  "accountKeyType": "Anahtar türü",
+  "sessionExpired": "Oturum süresi doldu",
+  "@sessionExpired": {
+    "description": "Title of the dialog when the users current session is invalid/expired"
+  },
+  "pleaseLoginAgain": "Lütfen tekrar giriş yapın",
+  "loggingOut": "Çıkış yapılıyor...",
+  "timeBasedKeyType": "Zaman tabanlı (TOTP)",
+  "counterBasedKeyType": "Sayaç tabanlı (HOTP)",
+  "saveAction": "Kaydet",
+  "nextTotpTitle": "ileri",
+  "deleteCodeTitle": "Kodu silmek istiyor musunuz?",
+  "deleteCodeMessage": "Bu kodu silmek istediğinize emin misiniz? Bu geri alınamaz bir işlemdir.",
+  "viewLogsAction": "Günlüğü görüntüle",
+  "sendLogsDescription": "Günlüğünüz hatanızı çözmemize yardımcı olacaktır. Hassas bilginin kaydedilmediğine dikkat etsek de bu günlükleri paylaşmadan önce kontrol etmenizi isteriz.",
+  "preparingLogsTitle": "Günlük hazırlanıyor...",
+  "emailLogsTitle": "E-postaların Günlüğü",
+  "emailLogsMessage": "Lütfen günlüğünüzü {email} adresine gönderin",
+  "@emailLogsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "copyEmailAction": "E-postayı Kopyala",
+  "exportLogsAction": "Günlüğü dışa aktar",
+  "reportABug": "Bir hata bildir",
+  "crashAndErrorReporting": "Çökme ve hata bildirimi",
+  "reportBug": "Hata bildir",
+  "emailUsMessage": "Lütfen bize {email} adresinden ulaşın",
+  "@emailUsMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "contactSupport": "Destek ekibiyle iletişime geçin",
+  "verifyPassword": "Şifreyi doğrulayın",
+  "pleaseWait": "Lütfen bekleyin...",
+  "generatingEncryptionKeysTitle": "Şifreleme anahtarları üretiliyor...",
+  "recreatePassword": "Şifreyi yeniden oluştur",
+  "recreatePasswordMessage": "Bu cihaz, şifrenizi doğrulayabilecek kadar güçlü değil, bu sebeple şifreyi her cihazda çalışabilecek bir yolla oluşturmamız gerekiyor.\n\nLütfen kurtarma anahtarınızla giriş yapın ve şifrenizi tekrar oluşturun (dilerseniz aynı şifreyi kullanabilirsiniz).",
+  "useRecoveryKey": "Kurtarma anahtarını kullan",
+  "incorrectPasswordTitle": "Yanlış şifre",
+  "welcomeBack": "Tekrar hoş geldiniz!",
+  "madeWithLoveAtPrefix": "❤️ ile yapılmıştır ",
+  "supportDevs": "Bu projeyi desteklemek için <bold-green>ente</bold-green> kanalına abone olun.",
+  "supportDiscount": "İlk yılda %10 indirim için \"AUTH\" kupon kodunu kullanın",
+  "changeEmail": "E-postayı değiştir",
+  "ok": "Tamam",
+  "cancel": "İptal Et",
+  "yes": "Evet",
+  "no": "Hayır",
+  "email": "E-Posta",
+  "support": "Destek",
+  "settings": "Ayarlar",
+  "copied": "Kopyalandı",
+  "pleaseTryAgain": "Lütfen tekrar deneyin",
+  "existingUser": "Mevcut kullanıcı",
+  "newUser": "Yeni ente kullanıcısı",
+  "delete": "Sil",
+  "enterYourPasswordHint": "Parolanızı girin",
+  "forgotPassword": "Şifremi unuttum",
+  "oops": "Hay aksi",
+  "somethingWentWrongMessage": "Bir şeyler ters gitti, lütfen tekrar deneyin",
+  "leaveFamily": "Aile planından ayrıl",
+  "leaveFamilyMessage": "Aile planından ayrılmak istediğinize emin misiniz?",
+  "inFamilyPlanMessage": "Aile planı kullanıyorsunuz!",
+  "swipeHint": "Kodları düzenlemek ya da kaldırmak için sola kaydırın",
+  "scan": "Tara",
+  "scanACode": "Bir kodu tarayın",
+  "verify": "Doğrula",
+  "enterCodeHint": "Kimlik doğrulayıcı uygulamanızdaki 6 haneli doğrulama kodunu girin",
+  "lostDeviceTitle": "Cihazınızı mı kaybettiniz?",
+  "twoFactorAuthTitle": "İki faktörlü kimlik doğrulama",
+  "recoverAccount": "Hesap kurtarma",
+  "enterRecoveryKeyHint": "Kurtarma anahtarınızı girin",
+  "recover": "Kurtar",
+  "contactSupportViaEmailMessage": "Lütfen kayıtlı e-posta adresinizden {email} adresine e-posta gönderin",
+  "@contactSupportViaEmailMessage": {
+    "placeholders": {
+      "email": {
+        "type": "String"
+      }
+    }
+  },
+  "noRecoveryKeyTitle": "Kurtarma anahtarınız yok mu?",
+  "enterEmailHint": "E-posta adresinizi girin",
+  "invalidEmailTitle": "Geçersiz e-posta adresi",
+  "invalidEmailMessage": "Lütfen geçerli bir e-posta adresi girin.",
+  "deleteAccount": "Hesabı sil",
+  "deleteAccountQuery": "Sizin gitmenizi görmekten üzüleceğiz. Bazı problemlerle mi karşılaşıyorsunuz?",
+  "yesSendFeedbackAction": "Evet, geri bildirimi gönder",
+  "noDeleteAccountAction": "Hayır, hesabı sil",
+  "initiateAccountDeleteTitle": "Hesap silme işlemini yapabilmek için lütfen kimliğinizi doğrulayın",
+  "confirmAccountDeleteTitle": "ente hesabınızı silmek istediğinizden emin misiniz?",
+  "confirmAccountDeleteMessage": "Tüm uygulamalarda (Fotoğraflar ve Kimlik doğrulayıcı) kaydedilen verileriniz zamanlı silinmeye ayarlanacak ve hesabınız kalıcı olarak silinecektir.",
+  "sendEmail": "E-posta gönder",
+  "createNewAccount": "Yeni hesap oluşturun",
+  "weakStrength": "Zayıf",
+  "strongStrength": "Güçlü",
+  "moderateStrength": "Orta",
+  "confirmPassword": "Şifreyi onayla",
+  "close": "Kapat",
+  "oopsSomethingWentWrong": "Hay aksi, bir sorun oluştu."
+}

lib/l10n/arb/app_zh.arb

@@ -0,0 +1 @@
+{}

lib/locale.dart

@@ -1,13 +1,17 @@
-import 'dart:ui';
+import 'package:flutter/cupertino.dart';
+import 'package:shared_preferences/shared_preferences.dart';
 
 // list of locales which are enabled for auth app.
 // Add more language to the list only when at least 90% of the strings are
 // translated in the corresponding language.
 const List<Locale> appSupportedLocales = <Locale>[
   Locale('en'),
+  Locale('es'),
+  Locale('fr'),
 ];
 
 Locale localResolutionCallBack(locales, supportedLocales) {
+  // print call stacktrace to identify caller
   for (Locale locale in locales) {
     if (appSupportedLocales.contains(locale)) {
       return locale;
@@ -16,3 +20,21 @@ Locale localResolutionCallBack(locales, supportedLocales) {
   // if device language is not supported by the app, use en as default
   return const Locale('en');
 }
+
+Future<Locale> getLocale() async {
+  final String? savedLocale =
+      (await SharedPreferences.getInstance()).getString('locale');
+  if (savedLocale != null &&
+      appSupportedLocales.contains(Locale(savedLocale))) {
+    return Locale(savedLocale);
+  }
+  return const Locale('en');
+}
+
+Future<void> setLocale(Locale locale) async {
+  if (!appSupportedLocales.contains(locale)) {
+    throw Exception('Locale $locale is not supported by the app');
+  }
+  await (await SharedPreferences.getInstance())
+      .setString('locale', locale.languageCode);
+}

lib/main.dart

@@ -1,10 +1,11 @@
-// @dart=2.9
+import 'package:adaptive_theme/adaptive_theme.dart';
 import "package:ente_auth/app/view/app.dart";
 import 'package:ente_auth/core/configuration.dart';
 import 'package:ente_auth/core/constants.dart';
 import 'package:ente_auth/core/logging/super_logging.dart';
 import 'package:ente_auth/core/network.dart';
 import 'package:ente_auth/ente_theme_data.dart';
+import 'package:ente_auth/locale.dart';
 import 'package:ente_auth/services/authenticator_service.dart';
 import 'package:ente_auth/services/billing_service.dart';
 import 'package:ente_auth/services/notification_service.dart';
@@ -24,26 +25,37 @@ final _logger = Logger("main");
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
-  await _runInForeground();
+  final savedThemeMode = await AdaptiveTheme.getThemeMode();
+  await _runInForeground(savedThemeMode);
 }
 
-Future<void> _runInForeground() async {
+Future<void> _runInForeground(AdaptiveThemeMode? savedThemeMode) async {
   return await _runWithLogs(() async {
     _logger.info("Starting app in foreground");
     await _init(false, via: 'mainMethod');
+    final Locale locale = await getLocale();
     UpdateService.instance.showUpdateNotification();
     runApp(
       AppLock(
-        builder: (args) => const App(),
+        builder: (args) => App(locale: locale),
         lockScreen: const LockScreen(),
         enabled: Configuration.instance.shouldShowLockScreen(),
+        locale: locale,
         lightTheme: lightThemeData,
         darkTheme: darkThemeData,
+        savedThemeMode: _themeMode(savedThemeMode),
       ),
     );
   });
 }
 
+ThemeMode _themeMode(AdaptiveThemeMode? savedThemeMode) {
+  if (savedThemeMode == null) return ThemeMode.system;
+  if (savedThemeMode.isLight) return ThemeMode.light;
+  if (savedThemeMode.isDark) return ThemeMode.dark;
+  return ThemeMode.system;
+}
+
 Future _runWithLogs(Function() function, {String prefix = ""}) async {
   await SuperLogging.main(
     LogConfig(
@@ -57,7 +69,7 @@ Future _runWithLogs(Function() function, {String prefix = ""}) async {
   );
 }
 
-Future<void> _init(bool bool, {String via}) async {
+Future<void> _init(bool bool, {String? via}) async {
   CryptoUtil.init();
   await PreferenceService.instance.init();
   await CodeStore.instance.init();

lib/models/authenticator/local_auth_entity.dart

@@ -5,15 +5,18 @@ import 'package:flutter/material.dart';
 @immutable
 class LocalAuthEntity {
   final int generatedID;
+
   // id can be null if a code has been scanned locally but it's yet to be
   // synced with the remote server.
   final String? id;
   final String encryptedData;
   final String header;
+
   // createdAt and updateAt will be equal to local time of creation or updation
   // till remote sync is completed.
   final int createdAt;
   final int updatedAt;
+
   // shouldSync indicates that the entry was locally created or updated. The
   // app should try to sync it to the server during next sync
   final bool shouldSync;

lib/models/code.dart

@@ -46,7 +46,7 @@ class Code {
           account +
           "?algorithm=SHA1&digits=6&issuer=" +
           issuer +
-          "period=30&secret=" +
+          "&period=30&secret=" +
           secret,
     );
   }
@@ -67,7 +67,15 @@ class Code {
 
   static String _getAccount(Uri uri) {
     try {
-      final String path = Uri.decodeComponent(uri.path);
+      String path = Uri.decodeComponent(uri.path);
+      if (path.startsWith("/")) {
+        path = path.substring(1, path.length);
+      }
+      // Parse account name from documented auth URI
+      // otpauth://totp/ACCOUNT?secret=SUPERSECRET&issuer=SERVICE
+      if (uri.queryParameters.containsKey("issuer") && !path.contains(":")) {
+        return path;
+      }
       return path.split(':')[1];
     } catch (e) {
       return "";
@@ -76,6 +84,15 @@ class Code {
 
   static String _getIssuer(Uri uri) {
     try {
+      if (uri.queryParameters.containsKey("issuer")) {
+        String issuerName = uri.queryParameters['issuer']!;
+        // Handle issuer name with period
+        // See https://github.com/ente-io/auth/pull/77
+        if (issuerName.contains("period=")) {
+          return issuerName.substring(0, issuerName.indexOf("period="));
+        }
+        return issuerName;
+      }
       final String path = Uri.decodeComponent(uri.path);
       return path.split(':')[0].substring(1);
     } catch (e) {

lib/models/execution_states.dart

@@ -0,0 +1,6 @@
+enum ExecutionState {
+  idle,
+  inProgress,
+  error,
+  successful
+}

lib/models/typedefs.dart

@@ -0,0 +1,7 @@
+import 'dart:async';
+
+typedef FutureVoidCallback = Future<void> Function();
+typedef BoolCallBack = bool Function();
+typedef FutureVoidCallbackParamStr = Future<void> Function(String);
+typedef VoidCallbackParamStr = void Function(String);
+typedef FutureOrVoidCallback = FutureOr<void> Function();

lib/onboarding/view/onboarding_page.dart

@@ -1,14 +1,24 @@
 // ignore_for_file: import_of_legacy_library_into_null_safe
 
+import 'dart:async';
+
+import 'package:ente_auth/app/view/app.dart';
 import 'package:ente_auth/core/configuration.dart';
+import 'package:ente_auth/core/event_bus.dart';
 import 'package:ente_auth/ente_theme_data.dart';
+import 'package:ente_auth/events/trigger_logout_event.dart';
 import "package:ente_auth/l10n/l10n.dart";
+import 'package:ente_auth/locale.dart';
 import 'package:ente_auth/ui/account/email_entry_page.dart';
 import 'package:ente_auth/ui/account/login_page.dart';
+import 'package:ente_auth/ui/account/logout_dialog.dart';
 import 'package:ente_auth/ui/account/password_entry_page.dart';
 import 'package:ente_auth/ui/account/password_reentry_page.dart';
 import 'package:ente_auth/ui/common/gradient_button.dart';
 import 'package:ente_auth/ui/home_page.dart';
+import 'package:ente_auth/ui/settings/language_picker.dart';
+import 'package:ente_auth/utils/navigation_util.dart';
+import 'package:flutter/foundation.dart';
 import "package:flutter/material.dart";
 
 class OnboardingPage extends StatefulWidget {
@@ -19,6 +29,23 @@ class OnboardingPage extends StatefulWidget {
 }
 
 class _OnboardingPageState extends State<OnboardingPage> {
+  late StreamSubscription<TriggerLogoutEvent> _triggerLogoutEvent;
+
+  @override
+  void initState() {
+    _triggerLogoutEvent =
+        Bus.instance.on<TriggerLogoutEvent>().listen((event) async {
+      await autoLogoutAlert(context);
+    });
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _triggerLogoutEvent.cancel();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     debugPrint("Building OnboardingPage");
@@ -37,6 +64,30 @@ class _OnboardingPageState extends State<OnboardingPage> {
                   children: [
                     Column(
                       children: [
+                        kDebugMode
+                            ? GestureDetector(
+                                child: const Align(
+                                  alignment: Alignment.topRight,
+                                  child: Text("Lang"),
+                                ),
+                                onTap: () async {
+                                  final locale = await getLocale();
+                                  routeToPage(
+                                    context,
+                                    LanguageSelectorPage(
+                                      appSupportedLocales,
+                                      (locale) async {
+                                        await setLocale(locale);
+                                        App.setLocale(context, locale);
+                                      },
+                                      locale,
+                                    ),
+                                  ).then((value) {
+                                    setState(() {});
+                                  });
+                                },
+                              )
+                            : const SizedBox(),
                         Image.asset(
                           "assets/sheild-front-gradient.png",
                           width: 200,

lib/services/authenticator_service.dart

@@ -8,6 +8,7 @@ import 'package:ente_auth/core/event_bus.dart';
 import 'package:ente_auth/core/network.dart';
 import 'package:ente_auth/events/codes_updated_event.dart';
 import 'package:ente_auth/events/signed_in_event.dart';
+import 'package:ente_auth/events/trigger_logout_event.dart';
 import 'package:ente_auth/gateway/authenticator.dart';
 import 'package:ente_auth/models/authenticator/auth_entity.dart';
 import 'package:ente_auth/models/authenticator/auth_key.dart';
@@ -132,6 +133,13 @@ class AuthenticatorService {
       await _localToRemoteSync();
       _logger.info("local push completed");
       Bus.instance.fire(CodesUpdatedEvent());
+    } on UnauthorizedError {
+      if ((await _db.removeSyncedData()) > 0) {
+        Bus.instance.fire(CodesUpdatedEvent());
+      }
+      debugPrint("Firing logout event");
+
+      Bus.instance.fire(TriggerLogoutEvent());
     } catch (e) {
       _logger.severe("Failed to sync with remote", e);
     }
@@ -140,7 +148,7 @@ class AuthenticatorService {
   Future<void> _remoteToLocalSync() async {
     _logger.info('Initiating remote to local sync');
     final int lastSyncTime = _prefs.getInt(_lastEntitySyncTime) ?? 0;
-    _logger.info("Current synctime is " + lastSyncTime.toString());
+    _logger.info("Current sync is " + lastSyncTime.toString());
     const int fetchLimit = 500;
     final List<AuthEntity> result =
         await _gateway.getDiff(lastSyncTime, limit: fetchLimit);

lib/services/billing_service.dart

@@ -1,5 +1,3 @@
-// @dart=2.9
-
 import 'dart:io';
 
 import 'package:dio/dio.dart';
@@ -32,10 +30,11 @@ class BillingService {
 
   bool _isOnSubscriptionPage = false;
 
-  Future<BillingPlans> _future;
+  Subscription? _cachedSubscription;
 
-  Future<void> init() async {
-  }
+  Future<BillingPlans>? _future;
+
+  Future<void> init() async {}
 
   void clearCache() {
     _future = null;
@@ -48,7 +47,7 @@ class BillingService {
         .then((response) {
       return BillingPlans.fromMap(response.data);
     });
-    return _future;
+    return _future!;
   }
 
   Future<Response<dynamic>> _fetchPrivateBillingPlans() {
@@ -88,7 +87,7 @@ class BillingService {
       );
       return Subscription.fromMap(response.data["subscription"]);
     } on DioError catch (e) {
-      if (e.response != null && e.response.statusCode == 409) {
+      if (e.response != null && e.response!.statusCode == 409) {
         throw SubscriptionAlreadyClaimedError();
       } else {
         rethrow;
@@ -99,22 +98,25 @@ class BillingService {
     }
   }
 
-  Future<Subscription> fetchSubscription() async {
-    try {
-      final response = await _dio.get(
-        _config.getHttpEndpoint() + "/billing/subscription",
-        options: Options(
-          headers: {
-            "X-Auth-Token": _config.getToken(),
-          },
-        ),
-      );
-      final subscription = Subscription.fromMap(response.data["subscription"]);
-      return subscription;
-    } on DioError catch (e, s) {
-      _logger.severe(e, s);
-      rethrow;
+  Future<Subscription> getSubscription() async {
+    if (_cachedSubscription == null) {
+      try {
+        final response = await _dio.get(
+          _config.getHttpEndpoint() + "/billing/subscription",
+          options: Options(
+            headers: {
+              "X-Auth-Token": _config.getToken(),
+            },
+          ),
+        );
+        _cachedSubscription =
+            Subscription.fromMap(response.data["subscription"]);
+      } on DioError catch (e, s) {
+        _logger.severe(e, s);
+        rethrow;
+      }
     }
+    return _cachedSubscription!;
   }
 
   Future<Subscription> cancelStripeSubscription() async {

lib/services/local_authentication_service.dart

@@ -1,4 +1,4 @@
-// @dart=2.9
+
 
 import 'package:ente_auth/core/configuration.dart';
 import 'package:ente_auth/ui/tools/app_lock.dart';
@@ -18,9 +18,9 @@ class LocalAuthenticationService {
     String infoMessage,
   ) async {
     if (await _isLocalAuthSupportedOnDevice()) {
-      AppLock.of(context).setEnabled(false);
+      AppLock.of(context)!.setEnabled(false);
       final result = await requestAuthentication(infoMessage);
-      AppLock.of(context).setEnabled(
+      AppLock.of(context)!.setEnabled(
         Configuration.instance.shouldShowLockScreen(),
       );
       if (!result) {
@@ -41,17 +41,17 @@ class LocalAuthenticationService {
     String errorDialogTitle = "",
   ]) async {
     if (await LocalAuthentication().isDeviceSupported()) {
-      AppLock.of(context).disable();
+      AppLock.of(context)!.disable();
       final result = await requestAuthentication(
         infoMessage,
       );
       if (result) {
-        AppLock.of(context).setEnabled(shouldEnableLockScreen);
+        AppLock.of(context)!.setEnabled(shouldEnableLockScreen);
         await Configuration.instance
             .setShouldShowLockScreen(shouldEnableLockScreen);
         return true;
       } else {
-        AppLock.of(context)
+        AppLock.of(context)!
             .setEnabled(Configuration.instance.shouldShowLockScreen());
       }
     } else {

lib/services/update_service.dart

@@ -1,4 +1,4 @@
-// @dart=2.9
+
 
 import 'dart:io';
 
@@ -16,10 +16,10 @@ class UpdateService {
   static final UpdateService instance = UpdateService._privateConstructor();
   static const kUpdateAvailableShownTimeKey = "update_available_shown_time_key";
 
-  LatestVersionInfo _latestVersion;
+  LatestVersionInfo? _latestVersion;
   final _logger = Logger("UpdateService");
-  PackageInfo _packageInfo;
-  SharedPreferences _prefs;
+  late PackageInfo _packageInfo;
+  late SharedPreferences _prefs;
 
   Future<void> init() async {
     _packageInfo = await PackageInfo.fromPlatform();
@@ -33,27 +33,27 @@ class UpdateService {
     try {
       _latestVersion = await _getLatestVersionInfo();
       final currentVersionCode = int.parse(_packageInfo.buildNumber);
-      return currentVersionCode < _latestVersion.code;
+      return currentVersionCode < _latestVersion!.code!;
     } catch (e) {
       _logger.severe(e);
       return false;
     }
   }
 
-  bool shouldForceUpdate(LatestVersionInfo info) {
+  bool shouldForceUpdate(LatestVersionInfo? info) {
     if (!isIndependent()) {
       return false;
     }
     try {
       final currentVersionCode = int.parse(_packageInfo.buildNumber);
-      return currentVersionCode < info.lastSupportedVersionCode;
+      return currentVersionCode < info!.lastSupportedVersionCode;
     } catch (e) {
       _logger.severe(e);
       return false;
     }
   }
 
-  LatestVersionInfo getLatestVersionInfo() {
+  LatestVersionInfo? getLatestVersionInfo() {
     return _latestVersion;
   }
 
@@ -69,7 +69,7 @@ class UpdateService {
         (now - lastNotificationShownTime) > (3 * microSecondsInDay);
     if (shouldUpdate &&
         hasBeen3DaysSinceLastNotification &&
-        _latestVersion.shouldNotify) {
+        _latestVersion!.shouldNotify!) {
       NotificationService.instance.showNotification(
         "Update available",
         "Click to install our best version yet",
@@ -96,14 +96,14 @@ class UpdateService {
 }
 
 class LatestVersionInfo {
-  final String name;
-  final int code;
+  final String? name;
+  final int? code;
   final List<String> changelog;
-  final bool shouldForceUpdate;
+  final bool? shouldForceUpdate;
   final int lastSupportedVersionCode;
-  final String url;
-  final int size;
-  final bool shouldNotify;
+  final String? url;
+  final int? size;
+  final bool? shouldNotify;
 
   LatestVersionInfo(
     this.name,

lib/services/user_service.dart

@@ -1,5 +1,3 @@
-// @dart=2.9
-
 import 'package:bip39/bip39.dart' as bip39;
 import 'package:dio/dio.dart';
 import 'package:ente_auth/core/configuration.dart';
@@ -32,14 +30,14 @@ class UserService {
   final _dio = Network.instance.getDio();
   final _logger = Logger("UserSerivce");
   final _config = Configuration.instance;
-  ValueNotifier<String> emailValueNotifier;
+  late ValueNotifier<String?> emailValueNotifier;
 
   UserService._privateConstructor();
   static final UserService instance = UserService._privateConstructor();
 
   Future<void> init() async {
     emailValueNotifier =
-        ValueNotifier<String>(Configuration.instance.getEmail());
+        ValueNotifier<String?>(Configuration.instance.getEmail());
   }
 
   Future<void> sendOtt(
@@ -49,7 +47,7 @@ class UserService {
     bool isCreateAccountScreen = false,
   }) async {
     final l10n = context.l10n;
-    final dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
+    final dialog = createProgressDialog(context, l10n.pleaseWait);
     await dialog.show();
     try {
       final response = await _dio.post(
@@ -75,19 +73,19 @@ class UserService {
         );
         return;
       }
-      showGenericErrorDialog(context);
+      showGenericErrorDialog(context: context);
     } on DioError catch (e) {
       await dialog.hide();
       _logger.info(e);
-      if (e.response != null && e.response.statusCode == 403) {
+      if (e.response != null && e.response!.statusCode == 403) {
         showErrorDialog(context, "Oops", "This email is already in use");
       } else {
-        showGenericErrorDialog(context);
+        showGenericErrorDialog(context: context);
       }
     } catch (e) {
       await dialog.hide();
       _logger.severe(e);
-      showGenericErrorDialog(context);
+      showGenericErrorDialog(context: context);
     }
   }
 
@@ -186,15 +184,15 @@ class UserService {
     } catch (e) {
       _logger.severe(e);
       await dialog.hide();
-      showGenericErrorDialog(context);
+      showGenericErrorDialog(context: context);
     }
   }
 
-  Future<DeleteChallengeResponse> getDeleteChallenge(
+  Future<DeleteChallengeResponse?> getDeleteChallenge(
     BuildContext context,
   ) async {
     final l10n = context.l10n;
-    final dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
+    final dialog = createProgressDialog(context, l10n.pleaseWait);
     await dialog.show();
     try {
       final response = await _dio.get(
@@ -218,7 +216,7 @@ class UserService {
     } catch (e) {
       _logger.severe(e);
       await dialog.hide();
-      await showGenericErrorDialog(context);
+      await showGenericErrorDialog(context: context);
       return null;
     }
   }
@@ -257,13 +255,13 @@ class UserService {
     } catch (e) {
       _logger.severe(e);
       await dialog.hide();
-      showGenericErrorDialog(context);
+      showGenericErrorDialog(context: context);
     }
   }
 
   Future<void> verifyEmail(BuildContext context, String ott) async {
     final l10n = context.l10n;
-    final dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
+    final dialog = createProgressDialog(context, l10n.pleaseWait);
     await dialog.show();
     try {
       final response = await _dio.post(
@@ -302,7 +300,7 @@ class UserService {
     } on DioError catch (e) {
       _logger.info(e);
       await dialog.hide();
-      if (e.response != null && e.response.statusCode == 410) {
+      if (e.response != null && e.response!.statusCode == 410) {
         await showErrorDialog(
           context,
           "Oops",
@@ -334,7 +332,7 @@ class UserService {
     String ott,
   ) async {
     final l10n = context.l10n;
-    final dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
+    final dialog = createProgressDialog(context, l10n.pleaseWait);
     await dialog.show();
     try {
       final response = await _dio.post(
@@ -360,7 +358,7 @@ class UserService {
       showErrorDialog(context, "Oops", "Verification failed, please try again");
     } on DioError catch (e) {
       await dialog.hide();
-      if (e.response != null && e.response.statusCode == 403) {
+      if (e.response != null && e.response!.statusCode == 403) {
         showErrorDialog(context, "Oops", "This email is already in use");
       } else {
         showErrorDialog(
@@ -447,7 +445,7 @@ class UserService {
     }
   }
 
-  Future<String> getPaymentToken() async {
+  Future<String?> getPaymentToken() async {
     try {
       final response = await _dio.get(
         "${_config.getHttpEndpoint()}/users/payment-token",
@@ -504,7 +502,7 @@ class UserService {
 
   Future<void> recoverTwoFactor(BuildContext context, String sessionID) async {
     final l10n = context.l10n;
-    final dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
+    final dialog = createProgressDialog(context, l10n.pleaseWait);
     await dialog.show();
     try {
       final response = await _dio.get(
@@ -529,7 +527,7 @@ class UserService {
       }
     } on DioError catch (e) {
       _logger.severe(e);
-      if (e.response != null && e.response.statusCode == 404) {
+      if (e.response != null && e.response!.statusCode == 404) {
         showToast(context, "Session expired");
         Navigator.of(context).pushAndRemoveUntil(
           MaterialPageRoute(
@@ -589,7 +587,7 @@ class UserService {
     } on DioError catch (e) {
       await dialog.hide();
       _logger.severe(e);
-      if (e.response != null && e.response.statusCode == 404) {
+      if (e.response != null && e.response!.statusCode == 404) {
         showToast(context, "Session expired");
         Navigator.of(context).pushAndRemoveUntil(
           MaterialPageRoute(
@@ -625,7 +623,7 @@ class UserService {
     String secretDecryptionNonce,
   ) async {
     final l10n = context.l10n;
-    final dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
+    final dialog = createProgressDialog(context, l10n.pleaseWait);
     await dialog.show();
     String secret;
     try {
@@ -675,7 +673,7 @@ class UserService {
       }
     } on DioError catch (e) {
       _logger.severe(e);
-      if (e.response != null && e.response.statusCode == 404) {
+      if (e.response != null && e.response!.statusCode == 404) {
         showToast(context, "Session expired");
         Navigator.of(context).pushAndRemoveUntil(
           MaterialPageRoute(

lib/store/authenticator_db.dart

@@ -135,6 +135,21 @@ class AuthenticatorDB {
     return _convertRows(rows);
   }
 
+  // removeSyncedData will remove all the data which is synced with the server
+  Future<int> removeSyncedData() async {
+    final db = await instance.database;
+    return await db
+        .delete(entityTable, where: 'shouldSync = ?', whereArgs: [0]);
+  }
+
+  // getCount of entries which are not synced with the server
+  Future<int> getNeedSyncCount() async {
+    final db = await instance.database;
+    final rows = await db
+        .rawQuery("SELECT COUNT(*) from $entityTable WHERE shouldSync = 1");
+    return Sqflite.firstIntValue(rows)!;
+  }
+
 // deleteByID will prefer generated id if both ids are passed during deletion
   Future<void> deleteByIDs({List<int>? generatedIDs, List<String>? ids}) async {
     final db = await instance.database;

lib/theme/colors.dart

@@ -11,6 +11,7 @@ class EnteColorScheme {
   // Backdrop Colors
   final Color backdropBase;
   final Color backdropBaseMute;
+  final Color backdropFaint;
 
   // Text Colors
   final Color textBase;
@@ -19,15 +20,22 @@ class EnteColorScheme {
 
   // Fill Colors
   final Color fillBase;
+  final Color fillBasePressed;
   final Color fillMuted;
   final Color fillFaint;
+  final Color fillFaintPressed;
 
   // Stroke Colors
   final Color strokeBase;
   final Color strokeMuted;
   final Color strokeFaint;
+  final Color strokeFainter;
+  final Color blurStrokeBase;
+  final Color blurStrokeFaint;
+  final Color blurStrokePressed;
 
   // Fixed Colors
+  final Color primaryGreen;
   final Color primary700;
   final Color primary500;
   final Color primary400;
@@ -36,6 +44,8 @@ class EnteColorScheme {
   final Color warning700;
   final Color warning500;
   final Color warning400;
+  final Color warning800;
+
   final Color caution500;
 
   const EnteColorScheme(
@@ -44,20 +54,29 @@ class EnteColorScheme {
     this.backgroundElevated2,
     this.backdropBase,
     this.backdropBaseMute,
+    this.backdropFaint,
     this.textBase,
     this.textMuted,
     this.textFaint,
     this.fillBase,
+    this.fillBasePressed,
     this.fillMuted,
     this.fillFaint,
+    this.fillFaintPressed,
     this.strokeBase,
     this.strokeMuted,
-    this.strokeFaint, {
+    this.strokeFaint,
+    this.strokeFainter,
+    this.blurStrokeBase,
+    this.blurStrokeFaint,
+    this.blurStrokePressed, {
+    this.primaryGreen = _primaryGreen,
     this.primary700 = _primary700,
     this.primary500 = _primary500,
     this.primary400 = _primary400,
     this.primary300 = _primary300,
     this.warning700 = _warning700,
+    this.warning800 = _warning800,
     this.warning500 = _warning500,
     this.warning400 = _warning700,
     this.caution500 = _caution500,
@@ -69,16 +88,23 @@ const EnteColorScheme lightScheme = EnteColorScheme(
   backgroundElevatedLight,
   backgroundElevated2Light,
   backdropBaseLight,
-  backdropBaseMuteLight,
+  backdropMutedLight,
+  backdropFaintLight,
   textBaseLight,
   textMutedLight,
   textFaintLight,
   fillBaseLight,
+  fillBasePressedLight,
   fillMutedLight,
   fillFaintLight,
+  fillFaintPressedLight,
   strokeBaseLight,
   strokeMutedLight,
   strokeFaintLight,
+  strokeFainterLight,
+  blurStrokeBaseLight,
+  blurStrokeFaintLight,
+  blurStrokePressedLight,
 );
 
 const EnteColorScheme darkScheme = EnteColorScheme(
@@ -86,16 +112,23 @@ const EnteColorScheme darkScheme = EnteColorScheme(
   backgroundElevatedDark,
   backgroundElevated2Dark,
   backdropBaseDark,
-  backdropBaseMuteDark,
+  backdropMutedDark,
+  backdropFaintDark,
   textBaseDark,
   textMutedDark,
   textFaintDark,
   fillBaseDark,
+  fillBasePressedDark,
   fillMutedDark,
   fillFaintDark,
+  fillFaintPressedDark,
   strokeBaseDark,
   strokeMutedDark,
   strokeFaintDark,
+  strokeFainterDark,
+  blurStrokeBaseDark,
+  blurStrokeFaintDark,
+  blurStrokePressedDark,
 );
 
 // Background Colors
@@ -108,11 +141,13 @@ const Color backgroundElevatedDark = Color.fromRGBO(27, 27, 27, 1);
 const Color backgroundElevated2Dark = Color.fromRGBO(37, 37, 37, 1);
 
 // Backdrop Colors
-const Color backdropBaseLight = Color.fromRGBO(255, 255, 255, 0.75);
-const Color backdropBaseMuteLight = Color.fromRGBO(255, 255, 255, 0.30);
+const Color backdropBaseLight = Color.fromRGBO(255, 255, 255, 0.92);
+const Color backdropMutedLight = Color.fromRGBO(255, 255, 255, 0.75);
+const Color backdropFaintLight = Color.fromRGBO(255, 255, 255, 0.30);
 
-const Color backdropBaseDark = Color.fromRGBO(0, 0, 0, 0.65);
-const Color backdropBaseMuteDark = Color.fromRGBO(0, 0, 0, 0.20);
+const Color backdropBaseDark = Color.fromRGBO(0, 0, 0, 0.90);
+const Color backdropMutedDark = Color.fromRGBO(0, 0, 0, 0.65);
+const Color backdropFaintDark = Color.fromRGBO(0, 0, 0, 0.20);
 
 // Text Colors
 const Color textBaseLight = Color.fromRGBO(0, 0, 0, 1);
@@ -125,24 +160,38 @@ const Color textFaintDark = Color.fromRGBO(255, 255, 255, 0.5);
 
 // Fill Colors
 const Color fillBaseLight = Color.fromRGBO(0, 0, 0, 1);
+const Color fillBasePressedLight = Color.fromRGBO(0, 0, 0, 0.87);
 const Color fillMutedLight = Color.fromRGBO(0, 0, 0, 0.12);
 const Color fillFaintLight = Color.fromRGBO(0, 0, 0, 0.04);
+const Color fillFaintPressedLight = Color.fromRGBO(0, 0, 0, 0.08);
 
 const Color fillBaseDark = Color.fromRGBO(255, 255, 255, 1);
+const Color fillBasePressedDark = Color.fromRGBO(255, 255, 255, 0.9);
 const Color fillMutedDark = Color.fromRGBO(255, 255, 255, 0.16);
 const Color fillFaintDark = Color.fromRGBO(255, 255, 255, 0.12);
+const Color fillFaintPressedDark = Color.fromRGBO(255, 255, 255, 0.06);
 
 // Stroke Colors
 const Color strokeBaseLight = Color.fromRGBO(0, 0, 0, 1);
 const Color strokeMutedLight = Color.fromRGBO(0, 0, 0, 0.24);
 const Color strokeFaintLight = Color.fromRGBO(0, 0, 0, 0.04);
+const Color strokeFainterLight = Color.fromRGBO(0, 0, 0, 0.06);
+const Color blurStrokeBaseLight = Color.fromRGBO(0, 0, 0, 0.65);
+const Color blurStrokeFaintLight = Color.fromRGBO(0, 0, 0, 0.08);
+const Color blurStrokePressedLight = Color.fromRGBO(0, 0, 0, 0.50);
 
 const Color strokeBaseDark = Color.fromRGBO(255, 255, 255, 1);
 const Color strokeMutedDark = Color.fromRGBO(255, 255, 255, 0.24);
 const Color strokeFaintDark = Color.fromRGBO(255, 255, 255, 0.16);
+const Color strokeFainterDark = Color.fromRGBO(255, 255, 255, 0.08);
+const Color blurStrokeBaseDark = Color.fromRGBO(255, 255, 255, 0.90);
+const Color blurStrokeFaintDark = Color.fromRGBO(255, 255, 255, 0.06);
+const Color blurStrokePressedDark = Color.fromRGBO(255, 255, 255, 0.50);
 
 // Fixed Colors
 
+const Color _primaryGreen = Color.fromRGBO(29, 185, 84, 1);
+
 const Color _primary700 = Color.fromARGB(255, 164, 0, 182);
 const Color _primary500 = Color.fromARGB(255, 204, 10, 101);
 const Color _primary400 = Color.fromARGB(255, 122, 41, 193);
@@ -150,6 +199,7 @@ const Color _primary300 = Color.fromARGB(255, 152, 77, 244);
 
 const Color _warning700 = Color.fromRGBO(234, 63, 63, 1);
 const Color _warning500 = Color.fromRGBO(255, 101, 101, 1);
+const Color _warning800 = Color(0xFFF53434);
 const Color warning500 = Color.fromRGBO(255, 101, 101, 1);
 const Color _warning400 = Color.fromRGBO(255, 111, 111, 1);
 

lib/theme/effects.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 
-const blurBase = 96;
-const blurMuted = 48;
-const blurFaint = 24;
+const blurBase = 96.0;
+const blurMuted = 48.0;
+const blurFaint = 24.0;
 
 List<BoxShadow> shadowFloatLight = const [
   BoxShadow(blurRadius: 10, color: Color.fromRGBO(0, 0, 0, 0.25)),

lib/theme/ente_theme.dart

@@ -36,10 +36,20 @@ EnteTheme darkTheme = EnteTheme(
   shadowButton: shadowButtonDark,
 );
 
-EnteColorScheme getEnteColorScheme(BuildContext context) {
-  return Theme.of(context).colorScheme.enteTheme.colorScheme;
+EnteColorScheme getEnteColorScheme(
+  BuildContext context, {
+  bool inverse = false,
+}) {
+  return inverse
+      ? Theme.of(context).colorScheme.inverseEnteTheme.colorScheme
+      : Theme.of(context).colorScheme.enteTheme.colorScheme;
 }
 
-EnteTextTheme getEnteTextTheme(BuildContext context) {
-  return Theme.of(context).colorScheme.enteTheme.textTheme;
+EnteTextTheme getEnteTextTheme(
+  BuildContext context, {
+  bool inverse = false,
+}) {
+  return inverse
+      ? Theme.of(context).colorScheme.inverseEnteTheme.textTheme
+      : Theme.of(context).colorScheme.enteTheme.textTheme;
 }

lib/ui/account/delete_account_page.dart

@@ -1,5 +1,3 @@
-// @dart=2.9
-
 import 'dart:convert';
 
 import 'package:ente_auth/core/configuration.dart';
@@ -16,7 +14,7 @@ import 'package:flutter_sodium/flutter_sodium.dart';
 
 class DeleteAccountPage extends StatelessWidget {
   const DeleteAccountPage({
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override
@@ -153,7 +151,7 @@ class DeleteAccountPage extends StatelessWidget {
     );
 
     if (hasAuthenticated) {
-      final choice = await showChoiceDialog(
+      final choice = await showChoiceDialogOld(
         context,
         l10n.confirmAccountDeleteTitle,
         l10n.confirmAccountDeleteMessage,
@@ -167,8 +165,8 @@ class DeleteAccountPage extends StatelessWidget {
       }
       final decryptChallenge = CryptoUtil.openSealSync(
         Sodium.base642bin(response.encryptedChallenge),
-        Sodium.base642bin(Configuration.instance.getKeyAttributes().publicKey),
-        Configuration.instance.getSecretKey(),
+        Sodium.base642bin(Configuration.instance.getKeyAttributes()!.publicKey),
+        Configuration.instance.getSecretKey()!,
       );
       final challengeResponseStr = utf8.decode(decryptChallenge);
       await UserService.instance.deleteAccount(context, challengeResponseStr);

lib/ui/account/email_entry_page.dart

@@ -1,26 +1,18 @@
-// @dart=2.9
-
-import 'dart:io';
-
 import 'package:email_validator/email_validator.dart';
 import 'package:ente_auth/core/configuration.dart';
 import 'package:ente_auth/ente_theme_data.dart';
 import 'package:ente_auth/l10n/l10n.dart';
-import 'package:ente_auth/models/billing_plan.dart';
-import 'package:ente_auth/services/billing_service.dart';
 import 'package:ente_auth/services/user_service.dart';
 import 'package:ente_auth/ui/common/dynamic_fab.dart';
-import 'package:ente_auth/ui/common/loading_widget.dart';
 import 'package:ente_auth/ui/common/web_page.dart';
-import 'package:ente_auth/utils/data_util.dart';
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:password_strength/password_strength.dart';
 import 'package:step_progress_indicator/step_progress_indicator.dart';
+import "package:styled_text/styled_text.dart";
 
 class EmailEntryPage extends StatefulWidget {
-  const EmailEntryPage({Key key}) : super(key: key);
+  const EmailEntryPage({Key? key}) : super(key: key);
 
   @override
   State<EmailEntryPage> createState() => _EmailEntryPageState();
@@ -35,8 +27,8 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
   final _passwordController2 = TextEditingController();
   final Color _validFieldValueColor = const Color.fromARGB(51, 157, 45, 194);
 
-  String _email;
-  String _password;
+  String? _email;
+  String? _password;
   String _cnfPassword = '';
   double _passwordStrength = 0.0;
   bool _emailIsValid = false;
@@ -72,7 +64,7 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
   Widget build(BuildContext context) {
     final isKeypadOpen = MediaQuery.of(context).viewInsets.bottom > 100;
 
-    FloatingActionButtonLocation fabLocation() {
+    FloatingActionButtonLocation? fabLocation() {
       if (isKeypadOpen) {
         return null;
       } else {
@@ -108,12 +100,12 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
       floatingActionButton: DynamicFAB(
         isKeypadOpen: isKeypadOpen,
         isFormValid: _isFormValid(),
-        buttonText: 'Create account',
+        buttonText: context.l10n.createAccount,
         onPressedFunction: () {
           _config.setVolatilePassword(_passwordController1.text);
-          UserService.instance.setEmail(_email);
+          UserService.instance.setEmail(_email!);
           UserService.instance
-              .sendOtt(context, _email, isCreateAccountScreen: true);
+              .sendOtt(context, _email!, isCreateAccountScreen: true);
           FocusScope.of(context).unfocus();
         },
       ),
@@ -123,14 +115,13 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
   }
 
   Widget _getBody() {
-    final l10n = context.l10n;
-    var passwordStrengthText = l10n.passwordStrengthWeak;
+    var passwordStrengthText = context.l10n.weakStrength;
     var passwordStrengthColor = Colors.redAccent;
     if (_passwordStrength > kStrongPasswordStrengthThreshold) {
-      passwordStrengthText = l10n.passwordStrengthStrong;
+      passwordStrengthText = context.l10n.strongStrength;
       passwordStrengthColor = Colors.greenAccent;
     } else if (_passwordStrength > kMildPasswordStrengthThreshold) {
-      passwordStrengthText = l10n.passwordStrengthModerate;
+      passwordStrengthText = context.l10n.moderateStrength;
       passwordStrengthColor = Colors.orangeAccent;
     }
     return Column(
@@ -143,7 +134,7 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
                   padding:
                       const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
                   child: Text(
-                    l10n.createNewAccount,
+                    context.l10n.createNewAccount,
                     style: Theme.of(context).textTheme.headline4,
                   ),
                 ),
@@ -155,7 +146,7 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
                     decoration: InputDecoration(
                       fillColor: _emailIsValid ? _validFieldValueColor : null,
                       filled: true,
-                      hintText: l10n.email,
+                      hintText: context.l10n.email,
                       contentPadding: const EdgeInsets.symmetric(
                         horizontal: 16,
                         vertical: 14,
@@ -170,7 +161,7 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
                               size: 20,
                               color: Theme.of(context)
                                   .inputDecorationTheme
-                                  .focusedBorder
+                                  .focusedBorder!
                                   .borderSide
                                   .color,
                             )
@@ -178,9 +169,9 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
                     ),
                     onChanged: (value) {
                       _email = value.trim();
-                      if (_emailIsValid != EmailValidator.validate(_email)) {
+                      if (_emailIsValid != EmailValidator.validate(_email!)) {
                         setState(() {
-                          _emailIsValid = EmailValidator.validate(_email);
+                          _emailIsValid = EmailValidator.validate(_email!);
                         });
                       }
                     },
@@ -203,7 +194,7 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
                       fillColor:
                           _passwordIsValid ? _validFieldValueColor : null,
                       filled: true,
-                      hintText: "Password",
+                      hintText: context.l10n.password,
                       contentPadding: const EdgeInsets.symmetric(
                         horizontal: 16,
                         vertical: 14,
@@ -228,7 +219,7 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
                                   Icons.check,
                                   color: Theme.of(context)
                                       .inputDecorationTheme
-                                      .focusedBorder
+                                      .focusedBorder!
                                       .borderSide
                                       .color,
                                 )
@@ -268,9 +259,11 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
                     autofillHints: const [AutofillHints.newPassword],
                     onEditingComplete: () => TextInput.finishAutofillContext(),
                     decoration: InputDecoration(
-                      fillColor: _passwordsMatch ? _validFieldValueColor : null,
+                      fillColor: _passwordsMatch && _passwordIsValid
+                          ? _validFieldValueColor
+                          : null,
                       filled: true,
-                      hintText: l10n.confirmPassword,
+                      hintText: context.l10n.confirmPassword,
                       contentPadding: const EdgeInsets.symmetric(
                         horizontal: 16,
                         vertical: 14,
@@ -295,7 +288,7 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
                                   Icons.check,
                                   color: Theme.of(context)
                                       .inputDecorationTheme
-                                      .focusedBorder
+                                      .focusedBorder!
                                       .borderSide
                                       .color,
                                 )
@@ -322,7 +315,7 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
                     padding:
                         const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
                     child: Text(
-                      'Password strength: $passwordStrengthText',
+                      context.l10n.passwordStrength(passwordStrengthText),
                       style: TextStyle(
                         color: passwordStrengthColor,
                         fontWeight: FontWeight.w500,
@@ -371,63 +364,51 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
             side: CheckboxTheme.of(context).side,
             onChanged: (value) {
               setState(() {
-                _hasAgreedToTOS = value;
+                _hasAgreedToTOS = value!;
               });
             },
           ),
           Expanded(
-            child: RichText(
-              text: TextSpan(
-                children: [
-                  const TextSpan(
-                    text: "I agree to the ",
+            child: StyledText(
+              text: context.l10n.signUpTerms,
+              style:
+                  Theme.of(context).textTheme.subtitle1!.copyWith(fontSize: 12),
+              tags: {
+                'u-terms': StyledTextActionTag(
+                  (String? text, Map<String?, String?> attrs) => {
+                    Navigator.of(context).push(
+                      MaterialPageRoute(
+                        builder: (BuildContext context) {
+                          return WebPage(
+                            context.l10n.termsOfServicesTitle,
+                            "https://ente.io/terms",
+                          );
+                        },
+                      ),
+                    )
+                  },
+                  style: const TextStyle(
+                    decoration: TextDecoration.underline,
                   ),
-                  TextSpan(
-                    text: "terms of service",
-                    style: const TextStyle(
-                      decoration: TextDecoration.underline,
-                    ),
-                    recognizer: TapGestureRecognizer()
-                      ..onTap = () {
-                        Navigator.of(context).push(
-                          MaterialPageRoute(
-                            builder: (BuildContext context) {
-                              return const WebPage(
-                                "Terms",
-                                "https://ente.io/terms",
-                              );
-                            },
-                          ),
-                        );
-                      },
+                ),
+                'u-policy': StyledTextActionTag(
+                  (String? text, Map<String?, String?> attrs) => {
+                    Navigator.of(context).push(
+                      MaterialPageRoute(
+                        builder: (BuildContext context) {
+                          return WebPage(
+                            context.l10n.privacyPolicyTitle,
+                            "https://ente.io/privacy",
+                          );
+                        },
+                      ),
+                    )
+                  },
+                  style: const TextStyle(
+                    decoration: TextDecoration.underline,
                   ),
-                  const TextSpan(text: " and "),
-                  TextSpan(
-                    text: "privacy policy",
-                    style: const TextStyle(
-                      decoration: TextDecoration.underline,
-                    ),
-                    recognizer: TapGestureRecognizer()
-                      ..onTap = () {
-                        Navigator.of(context).push(
-                          MaterialPageRoute(
-                            builder: (BuildContext context) {
-                              return const WebPage(
-                                "Privacy",
-                                "https://ente.io/privacy",
-                              );
-                            },
-                          ),
-                        );
-                      },
-                  ),
-                ],
-                style: Theme.of(context)
-                    .textTheme
-                    .subtitle1
-                    .copyWith(fontSize: 12),
-              ),
-              textAlign: TextAlign.left,
+                )
+              },
             ),
           ),
         ],
@@ -450,45 +431,34 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
             side: CheckboxTheme.of(context).side,
             onChanged: (value) {
               setState(() {
-                _hasAgreedToE2E = value;
+                _hasAgreedToE2E = value!;
               });
             },
           ),
           Expanded(
-            child: RichText(
-              text: TextSpan(
-                children: [
-                  const TextSpan(
-                    text:
-                        "I understand that if I lose my password, I may lose my data since my data is ",
+            child: StyledText(
+              text: context.l10n.ackPasswordLostWarning,
+              style:
+                  Theme.of(context).textTheme.subtitle1!.copyWith(fontSize: 12),
+              tags: {
+                'underline': StyledTextActionTag(
+                  (String? text, Map<String?, String?> attrs) => {
+                    Navigator.of(context).push(
+                      MaterialPageRoute(
+                        builder: (BuildContext context) {
+                          return WebPage(
+                            context.l10n.encryption,
+                            "https://ente.io/architecture",
+                          );
+                        },
+                      ),
+                    )
+                  },
+                  style: const TextStyle(
+                    decoration: TextDecoration.underline,
                   ),
-                  TextSpan(
-                    text: "end-to-end encrypted",
-                    style: const TextStyle(
-                      decoration: TextDecoration.underline,
-                    ),
-                    recognizer: TapGestureRecognizer()
-                      ..onTap = () {
-                        Navigator.of(context).push(
-                          MaterialPageRoute(
-                            builder: (BuildContext context) {
-                              return const WebPage(
-                                "Encryption",
-                                "https://ente.io/architecture",
-                              );
-                            },
-                          ),
-                        );
-                      },
-                  ),
-                  const TextSpan(text: " with ente"),
-                ],
-                style: Theme.of(context)
-                    .textTheme
-                    .subtitle1
-                    .copyWith(fontSize: 12),
-              ),
-              textAlign: TextAlign.left,
+                ),
+              },
             ),
           ),
         ],
@@ -504,136 +474,3 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
         _passwordIsValid;
   }
 }
-
-class PricingWidget extends StatelessWidget {
-  const PricingWidget({
-    Key key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = context.l10n;
-    return FutureBuilder<BillingPlans>(
-      future: BillingService.instance.getBillingPlans(),
-      builder: (BuildContext context, AsyncSnapshot snapshot) {
-        if (snapshot.hasData) {
-          return _buildPlans(context, snapshot.data);
-        } else if (snapshot.hasError) {
-          return Text(l10n.oopsSomethingWentWrong);
-        }
-        return const EnteLoadingWidget();
-      },
-    );
-  }
-
-  Container _buildPlans(BuildContext context, BillingPlans plans) {
-    final l10n = context.l10n;
-    final planWidgets = <BillingPlanWidget>[];
-    for (final plan in plans.plans) {
-      final productID = Platform.isAndroid ? plan.androidID : plan.iosID;
-      if (productID != null && productID.isNotEmpty) {
-        planWidgets.add(BillingPlanWidget(plan));
-      }
-    }
-    final freePlan = plans.freePlan;
-    return Container(
-      height: 280,
-      color: Theme.of(context).cardColor,
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-        children: <Widget>[
-          const Text(
-            "Pricing",
-            style: TextStyle(
-              fontWeight: FontWeight.bold,
-              fontSize: 18,
-            ),
-          ),
-          SingleChildScrollView(
-            scrollDirection: Axis.horizontal,
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: planWidgets,
-            ),
-          ),
-          Text(
-            "We offer a free trial of " +
-                convertBytesToReadableFormat(freePlan.storage) +
-                " for " +
-                freePlan.duration.toString() +
-                " " +
-                freePlan.period,
-          ),
-          GestureDetector(
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                const Icon(
-                  Icons.close,
-                  size: 12,
-                  color: Colors.white38,
-                ),
-                const Padding(padding: EdgeInsets.all(1)),
-                Text(
-                  l10n.close,
-                  style: const TextStyle(
-                    color: Colors.white38,
-                  ),
-                ),
-              ],
-            ),
-            onTap: () => Navigator.pop(context),
-          )
-        ],
-      ),
-    );
-  }
-}
-
-class BillingPlanWidget extends StatelessWidget {
-  final BillingPlan plan;
-
-  const BillingPlanWidget(
-    this.plan, {
-    Key key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(2.0),
-      child: Card(
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(12.0),
-        ),
-        color: Colors.black.withOpacity(0.2),
-        child: Container(
-          padding: const EdgeInsets.fromLTRB(12, 20, 12, 20),
-          child: Column(
-            children: [
-              Text(
-                convertBytesToGBs(plan.storage, precision: 0).toString() +
-                    " GB",
-                style: const TextStyle(
-                  fontWeight: FontWeight.bold,
-                  fontSize: 16,
-                ),
-              ),
-              const Padding(
-                padding: EdgeInsets.all(4),
-              ),
-              Text(
-                plan.price + " / " + plan.period,
-                style: const TextStyle(
-                  fontSize: 12,
-                  color: Colors.white70,
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}

lib/ui/account/login_page.dart

@@ -1,15 +1,14 @@
-// @dart=2.9
-
 import 'package:email_validator/email_validator.dart';
 import 'package:ente_auth/core/configuration.dart';
+import "package:ente_auth/l10n/l10n.dart";
 import 'package:ente_auth/services/user_service.dart';
 import 'package:ente_auth/ui/common/dynamic_fab.dart';
 import 'package:ente_auth/ui/common/web_page.dart';
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import "package:styled_text/styled_text.dart";
 
 class LoginPage extends StatefulWidget {
-  const LoginPage({Key key}) : super(key: key);
+  const LoginPage({Key? key}) : super(key: key);
 
   @override
   State<LoginPage> createState() => _LoginPageState();
@@ -18,8 +17,8 @@ class LoginPage extends StatefulWidget {
 class _LoginPageState extends State<LoginPage> {
   final _config = Configuration.instance;
   bool _emailIsValid = false;
-  String _email;
-  Color _emailInputFieldColor;
+  String? _email;
+  Color? _emailInputFieldColor;
 
   @override
   void initState() {
@@ -31,7 +30,7 @@ class _LoginPageState extends State<LoginPage> {
   Widget build(BuildContext context) {
     final isKeypadOpen = MediaQuery.of(context).viewInsets.bottom > 100;
 
-    FloatingActionButtonLocation fabLocation() {
+    FloatingActionButtonLocation? fabLocation() {
       if (isKeypadOpen) {
         return null;
       } else {
@@ -55,11 +54,11 @@ class _LoginPageState extends State<LoginPage> {
       floatingActionButton: DynamicFAB(
         isKeypadOpen: isKeypadOpen,
         isFormValid: _emailIsValid,
-        buttonText: 'Log in',
+        buttonText: context.l10n.logInLabel,
         onPressedFunction: () {
-          UserService.instance.setEmail(_email);
+          UserService.instance.setEmail(_email!);
           UserService.instance
-              .sendOtt(context, _email, isCreateAccountScreen: false);
+              .sendOtt(context, _email!, isCreateAccountScreen: false);
           FocusScope.of(context).unfocus();
         },
       ),
@@ -69,6 +68,7 @@ class _LoginPageState extends State<LoginPage> {
   }
 
   Widget _getBody() {
+    final l10n = context.l10n;
     return Column(
       children: [
         Expanded(
@@ -79,7 +79,7 @@ class _LoginPageState extends State<LoginPage> {
                   padding:
                       const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
                   child: Text(
-                    'Welcome back!',
+                    l10n.welcomeBack,
                     style: Theme.of(context).textTheme.headline4,
                   ),
                 ),
@@ -90,7 +90,7 @@ class _LoginPageState extends State<LoginPage> {
                     decoration: InputDecoration(
                       fillColor: _emailInputFieldColor,
                       filled: true,
-                      hintText: 'Email',
+                      hintText: l10n.email,
                       contentPadding: const EdgeInsets.symmetric(
                         horizontal: 15,
                         vertical: 15,
@@ -105,7 +105,7 @@ class _LoginPageState extends State<LoginPage> {
                               size: 20,
                               color: Theme.of(context)
                                   .inputDecorationTheme
-                                  .focusedBorder
+                                  .focusedBorder!
                                   .borderSide
                                   .color,
                             )
@@ -114,7 +114,7 @@ class _LoginPageState extends State<LoginPage> {
                     onChanged: (value) {
                       setState(() {
                         _email = value.trim();
-                        _emailIsValid = EmailValidator.validate(_email);
+                        _emailIsValid = EmailValidator.validate(_email!);
                         if (_emailIsValid) {
                           _emailInputFieldColor =
                               const Color.fromARGB(51, 157, 45, 194);
@@ -141,58 +141,48 @@ class _LoginPageState extends State<LoginPage> {
                     children: [
                       Expanded(
                         flex: 5,
-                        child: RichText(
-                          text: TextSpan(
-                            style: Theme.of(context)
-                                .textTheme
-                                .subtitle1
-                                .copyWith(fontSize: 12),
-                            children: [
-                              const TextSpan(
-                                text: "By clicking log in, I agree to the ",
+                        child: StyledText(
+                          text: context.l10n.loginTerms,
+                          style: Theme.of(context)
+                              .textTheme
+                              .subtitle1!
+                              .copyWith(fontSize: 12),
+                          tags: {
+                            'u-terms': StyledTextActionTag(
+                              (String? text, Map<String?, String?> attrs) => {
+                                Navigator.of(context).push(
+                                  MaterialPageRoute(
+                                    builder: (BuildContext context) {
+                                      return WebPage(
+                                        context.l10n.termsOfServicesTitle,
+                                        "https://ente.io/terms",
+                                      );
+                                    },
+                                  ),
+                                )
+                              },
+                              style: const TextStyle(
+                                decoration: TextDecoration.underline,
                               ),
-                              TextSpan(
-                                text: "terms of service",
-                                style: const TextStyle(
-                                  decoration: TextDecoration.underline,
-                                ),
-                                recognizer: TapGestureRecognizer()
-                                  ..onTap = () {
-                                    Navigator.of(context).push(
-                                      MaterialPageRoute(
-                                        builder: (BuildContext context) {
-                                          return const WebPage(
-                                            "terms",
-                                            "https://ente.io/terms",
-                                          );
-                                        },
-                                      ),
-                                    );
-                                  },
+                            ),
+                            'u-policy': StyledTextActionTag(
+                              (String? text, Map<String?, String?> attrs) => {
+                                Navigator.of(context).push(
+                                  MaterialPageRoute(
+                                    builder: (BuildContext context) {
+                                      return WebPage(
+                                        context.l10n.privacyPolicyTitle,
+                                        "https://ente.io/privacy",
+                                      );
+                                    },
+                                  ),
+                                )
+                              },
+                              style: const TextStyle(
+                                decoration: TextDecoration.underline,
                               ),
-                              const TextSpan(text: " and "),
-                              TextSpan(
-                                text: "privacy policy",
-                                style: const TextStyle(
-                                  decoration: TextDecoration.underline,
-                                ),
-                                recognizer: TapGestureRecognizer()
-                                  ..onTap = () {
-                                    Navigator.of(context).push(
-                                      MaterialPageRoute(
-                                        builder: (BuildContext context) {
-                                          return const WebPage(
-                                            "privacy",
-                                            "https://ente.io/privacy",
-                                          );
-                                        },
-                                      ),
-                                    );
-                                  },
-                              ),
-                            ],
-                          ),
-                          textAlign: TextAlign.left,
+                            )
+                          },
                         ),
                       ),
                       Expanded(

lib/ui/account/logout_dialog.dart

@@ -0,0 +1,56 @@
+import 'package:ente_auth/core/configuration.dart';
+import 'package:ente_auth/l10n/l10n.dart';
+import 'package:ente_auth/store/authenticator_db.dart';
+import 'package:ente_auth/utils/dialog_util.dart';
+import 'package:flutter/material.dart';
+
+Future<void> autoLogoutAlert(BuildContext context) async {
+  final l10n = context.l10n;
+  final AlertDialog alert = AlertDialog(
+    title: Text(l10n.sessionExpired),
+    content: Text(l10n.pleaseLoginAgain),
+    actions: [
+      TextButton(
+        child: Text(
+          l10n.ok,
+          style: TextStyle(
+            color: Theme.of(context).colorScheme.primary,
+          ),
+        ),
+        onPressed: () async {
+          Navigator.of(context, rootNavigator: true).pop('dialog');
+          Navigator.of(context).popUntil((route) => route.isFirst);
+          int pendingSyncCount =
+              await AuthenticatorDB.instance.getNeedSyncCount();
+          if (pendingSyncCount > 0) {
+            showChoiceActionSheet(
+              context,
+              title: l10n.pendingSyncs,
+              body: l10n.pendingSyncsWarningBody,
+              firstButtonLabel: context.l10n.yesLogout,
+              isCritical: true,
+              firstButtonOnTap: () async {
+                await _logout(context, l10n);
+              },
+            );
+          } else {
+            await _logout(context, l10n);
+          }
+        },
+      ),
+    ],
+  );
+  await showDialog(
+    context: context,
+    builder: (BuildContext context) {
+      return alert;
+    },
+  );
+}
+
+Future<void> _logout(BuildContext context, AppLocalizations l10n) async {
+  final dialog = createProgressDialog(context, l10n.loggingOut);
+  await dialog.show();
+  await Configuration.instance.logout();
+  await dialog.hide();
+}

lib/ui/account/ott_verification_page.dart

@@ -1,4 +1,4 @@
-// @dart=2.9
+
 
 import 'package:ente_auth/ente_theme_data.dart';
 import 'package:ente_auth/services/user_service.dart';
@@ -15,7 +15,7 @@ class OTTVerificationPage extends StatefulWidget {
     this.email, {
     this.isChangeEmail = false,
     this.isCreateAccountScreen = false,
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override
@@ -29,7 +29,7 @@ class _OTTVerificationPageState extends State<OTTVerificationPage> {
   Widget build(BuildContext context) {
     final isKeypadOpen = MediaQuery.of(context).viewInsets.bottom > 100;
 
-    FloatingActionButtonLocation fabLocation() {
+    FloatingActionButtonLocation? fabLocation() {
       if (isKeypadOpen) {
         return null;
       } else {
@@ -114,7 +114,7 @@ class _OTTVerificationPageState extends State<OTTVerificationPage> {
                             text: TextSpan(
                               style: Theme.of(context)
                                   .textTheme
-                                  .subtitle1
+                                  .subtitle1!
                                   .copyWith(fontSize: 14),
                               children: [
                                 const TextSpan(text: "We've sent a mail to "),
@@ -134,7 +134,7 @@ class _OTTVerificationPageState extends State<OTTVerificationPage> {
                           'Please check your inbox (and spam) to complete verification',
                           style: Theme.of(context)
                               .textTheme
-                              .subtitle1
+                              .subtitle1!
                               .copyWith(fontSize: 14),
                         ),
                       ],
@@ -187,7 +187,7 @@ class _OTTVerificationPageState extends State<OTTVerificationPage> {
                     },
                     child: Text(
                       "Resend email",
-                      style: Theme.of(context).textTheme.subtitle1.copyWith(
+                      style: Theme.of(context).textTheme.subtitle1!.copyWith(
                             fontSize: 14,
                             decoration: TextDecoration.underline,
                           ),

lib/ui/account/password_entry_page.dart

@@ -1,4 +1,4 @@
-// @dart=2.9
+
 
 import 'package:ente_auth/core/configuration.dart';
 import 'package:ente_auth/l10n/l10n.dart';
@@ -24,7 +24,7 @@ enum PasswordEntryMode {
 class PasswordEntryPage extends StatefulWidget {
   final PasswordEntryMode mode;
 
-  const PasswordEntryPage({this.mode = PasswordEntryMode.set, Key key})
+  const PasswordEntryPage({this.mode = PasswordEntryMode.set, Key? key})
       : super(key: key);
 
   @override
@@ -39,7 +39,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
   final _passwordController1 = TextEditingController(),
       _passwordController2 = TextEditingController();
   final Color _validFieldValueColor = const Color.fromRGBO(45, 194, 98, 0.2);
-  String _volatilePassword;
+  String? _volatilePassword;
   String _passwordInInputBox = '';
   String _passwordInInputConfirmationBox = '';
   double _passwordStrength = 0.0;
@@ -60,7 +60,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
     if (_volatilePassword != null) {
       Future.delayed(
         Duration.zero,
-        () => _showRecoveryCodeDialog(_volatilePassword),
+        () => _showRecoveryCodeDialog(_volatilePassword!),
       );
     }
     _password1FocusNode.addListener(() {
@@ -79,7 +79,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
   Widget build(BuildContext context) {
     final isKeypadOpen = MediaQuery.of(context).viewInsets.bottom > 100;
 
-    FloatingActionButtonLocation fabLocation() {
+    FloatingActionButtonLocation? fabLocation() {
       if (isKeypadOpen) {
         return null;
       } else {
@@ -165,7 +165,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
                     textAlign: TextAlign.start,
                     style: Theme.of(context)
                         .textTheme
-                        .subtitle1
+                        .subtitle1!
                         .copyWith(fontSize: 14),
                   ),
                 ),
@@ -176,7 +176,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
                     text: TextSpan(
                       style: Theme.of(context)
                           .textTheme
-                          .subtitle1
+                          .subtitle1!
                           .copyWith(fontSize: 14),
                       children: [
                         const TextSpan(
@@ -185,7 +185,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
                         ),
                         TextSpan(
                           text: "we cannot decrypt your data",
-                          style: Theme.of(context).textTheme.subtitle1.copyWith(
+                          style: Theme.of(context).textTheme.subtitle1!.copyWith(
                                 fontSize: 14,
                                 decoration: TextDecoration.underline,
                               ),
@@ -243,7 +243,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
                                   Icons.check,
                                   color: Theme.of(context)
                                       .inputDecorationTheme
-                                      .focusedBorder
+                                      .focusedBorder!
                                       .borderSide
                                       .color,
                                 )
@@ -305,7 +305,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
                                   Icons.check,
                                   color: Theme.of(context)
                                       .inputDecorationTheme
-                                      .focusedBorder
+                                      .focusedBorder!
                                       .borderSide
                                       .color,
                                 )
@@ -362,7 +362,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
                     child: RichText(
                       text: TextSpan(
                         text: "How it works",
-                        style: Theme.of(context).textTheme.subtitle1.copyWith(
+                        style: Theme.of(context).textTheme.subtitle1!.copyWith(
                               fontSize: 14,
                               decoration: TextDecoration.underline,
                             ),
@@ -396,7 +396,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
     } catch (e, s) {
       _logger.severe(e, s);
       await dialog.hide();
-      showGenericErrorDialog(context);
+      showGenericErrorDialog(context: context);
     }
   }
 
@@ -410,7 +410,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
       Configuration.instance.setVolatilePassword(null);
       await dialog.hide();
       onDone() async {
-        final dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
+        final dialog = createProgressDialog(context, l10n.pleaseWait);
         await dialog.show();
         try {
           await UserService.instance.setAttributes(result);
@@ -426,7 +426,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
         } catch (e, s) {
           _logger.severe(e, s);
           await dialog.hide();
-          showGenericErrorDialog(context);
+          showGenericErrorDialog(context: context);
         }
       }
 
@@ -451,7 +451,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
           "Sorry, we could not generate secure keys on this device.\n\nplease sign up from a different device.",
         );
       } else {
-        showGenericErrorDialog(context);
+        showGenericErrorDialog(context: context);
       }
     }
   }

lib/ui/account/password_reentry_page.dart

@@ -1,12 +1,11 @@
-// @dart=2.9
+import 'dart:async';
 
 import 'package:ente_auth/core/configuration.dart';
 import 'package:ente_auth/core/errors.dart';
 import 'package:ente_auth/l10n/l10n.dart';
-import 'package:ente_auth/models/key_attributes.dart';
 import 'package:ente_auth/ui/account/recovery_page.dart';
-import 'package:ente_auth/ui/common/dialogs.dart';
 import 'package:ente_auth/ui/common/dynamic_fab.dart';
+import 'package:ente_auth/ui/components/buttons/button_widget.dart';
 import 'package:ente_auth/ui/home_page.dart';
 import 'package:ente_auth/utils/dialog_util.dart';
 import 'package:ente_auth/utils/email_util.dart';
@@ -14,7 +13,7 @@ import 'package:flutter/material.dart';
 import 'package:logging/logging.dart';
 
 class PasswordReentryPage extends StatefulWidget {
-  const PasswordReentryPage({Key key}) : super(key: key);
+  const PasswordReentryPage({Key? key}) : super(key: key);
 
   @override
   State<PasswordReentryPage> createState() => _PasswordReentryPageState();
@@ -24,7 +23,7 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
   final _logger = Logger((_PasswordReentryPageState).toString());
   final _passwordController = TextEditingController();
   final FocusNode _passwordFocusNode = FocusNode();
-  String email;
+  String? email;
   bool _passwordInFocus = false;
   bool _passwordVisible = false;
 
@@ -41,10 +40,9 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
 
   @override
   Widget build(BuildContext context) {
-    final l10n = context.l10n;
     final isKeypadOpen = MediaQuery.of(context).viewInsets.bottom > 100;
 
-    FloatingActionButtonLocation fabLocation() {
+    FloatingActionButtonLocation? fabLocation() {
       if (isKeypadOpen) {
         return null;
       } else {
@@ -68,29 +66,26 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
       floatingActionButton: DynamicFAB(
         isKeypadOpen: isKeypadOpen,
         isFormValid: _passwordController.text.isNotEmpty,
-        buttonText: l10n.verifyPassword,
+        buttonText: context.l10n.verifyPassword,
         onPressedFunction: () async {
           FocusScope.of(context).unfocus();
-          final dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
+          final dialog = createProgressDialog(context, context.l10n.pleaseWait);
           await dialog.show();
           try {
             await Configuration.instance.decryptAndSaveSecrets(
               _passwordController.text,
-              Configuration.instance.getKeyAttributes(),
+              Configuration.instance.getKeyAttributes()!,
             );
           } on KeyDerivationError catch (e, s) {
             _logger.severe("Password verification failed", e, s);
             await dialog.hide();
-            final dialogUserChoice = await showChoiceDialog(
+            final dialogChoice = await showChoiceDialog(
               context,
-              l10n.recreatePassword,
-              l10n.recreatePasswordMessage,
-              firstAction: l10n.cancel,
-              firstActionColor: Theme.of(context).colorScheme.primary,
-              secondAction: l10n.useRecoveryKeyAction,
-              secondActionColor: Theme.of(context).colorScheme.primary,
+              title: context.l10n.recreatePasswordTitle,
+              body: context.l10n.recreatePasswordBody,
+              firstButtonLabel: context.l10n.useRecoveryKey,
             );
-            if (dialogUserChoice == DialogUserChoice.secondChoice) {
+            if (dialogChoice!.action == ButtonAction.first) {
               Navigator.of(context).push(
                 MaterialPageRoute(
                   builder: (BuildContext context) {
@@ -103,20 +98,17 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
           } catch (e, s) {
             _logger.severe("Password verification failed", e, s);
             await dialog.hide();
-
-            final dialogUserChoice = await showChoiceDialog(
+            final dialogChoice = await showChoiceDialog(
               context,
-              l10n.incorrectPassword,
-              l10n.tryAgainMessage,
-              firstAction: l10n.contactSupport,
-              firstActionColor: Theme.of(context).colorScheme.primary,
-              secondAction: l10n.ok,
-              secondActionColor: Theme.of(context).colorScheme.primary,
+              title: context.l10n.incorrectPasswordTitle,
+              body: context.l10n.pleaseTryAgain,
+              firstButtonLabel: context.l10n.contactSupport,
+              secondButtonLabel: context.l10n.ok,
             );
-            if (dialogUserChoice == DialogUserChoice.firstChoice) {
+            if (dialogChoice!.action == ButtonAction.first) {
               await sendLogs(
                 context,
-                l10n.contactSupport,
+                context.l10n.contactSupport,
                 "support@ente.io",
                 postShare: () {},
               );
@@ -124,13 +116,15 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
             return;
           }
           await dialog.hide();
-          Navigator.of(context).pushAndRemoveUntil(
-            MaterialPageRoute(
-              builder: (BuildContext context) {
-                return const HomePage();
-              },
+          unawaited(
+            Navigator.of(context).pushAndRemoveUntil(
+              MaterialPageRoute(
+                builder: (BuildContext context) {
+                  return const HomePage();
+                },
+              ),
+              (route) => false,
             ),
-            (route) => false,
           );
         },
       ),
@@ -140,7 +134,6 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
   }
 
   Widget _getBody() {
-    final l10n = context.l10n;
     return Column(
       children: [
         Expanded(
@@ -151,7 +144,7 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
                   padding:
                       const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
                   child: Text(
-                    l10n.welcomeBackTitle,
+                    context.l10n.welcomeBack,
                     style: Theme.of(context).textTheme.headline4,
                   ),
                 ),
@@ -174,7 +167,7 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
                   child: TextFormField(
                     autofillHints: const [AutofillHints.password],
                     decoration: InputDecoration(
-                      hintText: l10n.enterYourPasswordHint,
+                      hintText: context.l10n.enterYourPasswordHint,
                       filled: true,
                       contentPadding: const EdgeInsets.all(20),
                       border: UnderlineInputBorder(
@@ -236,9 +229,9 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
                         },
                         child: Center(
                           child: Text(
-                            l10n.forgotPassword,
+                            context.l10n.forgotPassword,
                             style:
-                                Theme.of(context).textTheme.subtitle1.copyWith(
+                                Theme.of(context).textTheme.subtitle1!.copyWith(
                                       fontSize: 14,
                                       decoration: TextDecoration.underline,
                                     ),
@@ -250,7 +243,7 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
                         onTap: () async {
                           final dialog = createProgressDialog(
                             context,
-                            l10n.pleaseWaitTitle,
+                            context.l10n.pleaseWait,
                           );
                           await dialog.show();
                           await Configuration.instance.logout();
@@ -260,9 +253,9 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
                         },
                         child: Center(
                           child: Text(
-                            l10n.changeEmail,
+                            context.l10n.changeEmail,
                             style:
-                                Theme.of(context).textTheme.subtitle1.copyWith(
+                                Theme.of(context).textTheme.subtitle1!.copyWith(
                                       fontSize: 14,
                                       decoration: TextDecoration.underline,
                                     ),
@@ -279,10 +272,4 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
       ],
     );
   }
-
-  void validatePreVerificationState(KeyAttributes keyAttributes) {
-    if (keyAttributes == null) {
-      throw Exception("Key Attributes can not be null");
-    }
-  }
 }

lib/ui/account/recovery_key_page.dart

@@ -1,5 +1,3 @@
-// @dart=2.9
-
 import 'dart:io' as io;
 
 import 'package:bip39/bip39.dart' as bip39;
@@ -7,6 +5,7 @@ import 'package:dotted_border/dotted_border.dart';
 import 'package:ente_auth/core/configuration.dart';
 import 'package:ente_auth/core/constants.dart';
 import 'package:ente_auth/ente_theme_data.dart';
+import 'package:ente_auth/l10n/l10n.dart';
 import 'package:ente_auth/ui/common/gradient_button.dart';
 import 'package:ente_auth/utils/toast_util.dart';
 import 'package:flutter/material.dart';
@@ -15,20 +14,20 @@ import 'package:share_plus/share_plus.dart';
 import 'package:step_progress_indicator/step_progress_indicator.dart';
 
 class RecoveryKeyPage extends StatefulWidget {
-  final bool showAppBar;
+  final bool? showAppBar;
   final String recoveryKey;
   final String doneText;
-  final Function() onDone;
-  final bool isDismissible;
-  final String title;
-  final String text;
-  final String subText;
+  final Function()? onDone;
+  final bool? isDismissible;
+  final String? title;
+  final String? text;
+  final String? subText;
   final bool showProgressBar;
 
   const RecoveryKeyPage(
     this.recoveryKey,
     this.doneText, {
-    Key key,
+    Key? key,
     this.showAppBar,
     this.onDone,
     this.isDismissible,
@@ -56,7 +55,7 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
         'recovery code should have $mnemonicKeyWordCount words',
       );
     }
-    final double topPadding = widget.showAppBar
+    final double topPadding = widget.showAppBar!
         ? 40
         : widget.showProgressBar
             ? 32
@@ -65,6 +64,7 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
     return Scaffold(
       appBar: widget.showProgressBar
           ? AppBar(
+              automaticallyImplyLeading: false,
               elevation: 0,
               title: Hero(
                 tag: "recovery_key",
@@ -78,10 +78,10 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
                 ),
               ),
             )
-          : widget.showAppBar
+          : widget.showAppBar!
               ? AppBar(
                   elevation: 0,
-                  title: Text(widget.title ?? "Recovery key"),
+                  title: Text(widget.title ?? context.l10n.recoveryKey),
                 )
               : null,
       body: Padding(
@@ -97,19 +97,19 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
                 child: IntrinsicHeight(
                   child: Column(
                     mainAxisSize: MainAxisSize.max,
+                    crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
-                      widget.showAppBar
+                      widget.showAppBar!
                           ? const SizedBox.shrink()
                           : Text(
-                              widget.title ?? "Recovery key",
+                              widget.title ?? context.l10n.recoveryKey,
                               style: Theme.of(context).textTheme.headline4,
                             ),
                       Padding(
-                        padding: EdgeInsets.all(widget.showAppBar ? 0 : 12),
+                        padding: EdgeInsets.all(widget.showAppBar! ? 0 : 12),
                       ),
                       Text(
-                        widget.text ??
-                            "If you forget your password, the only way you can recover your data is with this key.",
+                        widget.text ?? context.l10n.recoveryKeyOnForgotPassword,
                         style: Theme.of(context).textTheme.subtitle1,
                       ),
                       const Padding(padding: EdgeInsets.only(top: 24)),
@@ -134,9 +134,9 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
                                   await Clipboard.setData(
                                     ClipboardData(text: recoveryKey),
                                   );
-                                  showToast(
+                                  showShortToast(
                                     context,
-                                    "Recovery key copied to clipboard",
+                                    context.l10n.recoveryKeyCopiedToClipboard,
                                   );
                                   setState(() {
                                     _hasTriedToSave = true;
@@ -145,11 +145,11 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
                                 child: Container(
                                   decoration: BoxDecoration(
                                     border: Border.all(
-                                      color: const Color.fromARGB(
-                                        51,
-                                        147,
-                                        43,
-                                        200,
+                                      color: const Color.fromRGBO(
+                                        49,
+                                        155,
+                                        86,
+                                        .2,
                                       ),
                                     ),
                                     borderRadius: const BorderRadius.all(
@@ -172,16 +172,12 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
                           ),
                         ),
                       ),
-                      SizedBox(
-                        height: 80,
-                        width: double.infinity,
-                        child: Padding(
-                          padding: const EdgeInsets.symmetric(vertical: 20),
-                          child: Text(
-                            widget.subText ??
-                                "We don’t store this key, please save this in a safe place.",
-                            style: Theme.of(context).textTheme.bodyText1,
-                          ),
+                      Padding(
+                        padding: const EdgeInsets.symmetric(vertical: 20),
+                        child: Text(
+                          widget.subText ??
+                              context.l10n.recoveryKeySaveDescription,
+                          style: Theme.of(context).textTheme.bodyText1,
                         ),
                       ),
                       Expanded(
@@ -216,7 +212,7 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
           onPressed: () async {
             await _saveKeys();
           },
-          child: const Text('Do this later'),
+          child: Text(context.l10n.doThisLater),
         ),
       );
       childrens.add(const SizedBox(height: 10));
@@ -227,7 +223,7 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
         onTap: () async {
           await _shareRecoveryKey(recoveryKey);
         },
-        text: 'Save key',
+        text: context.l10n.saveKey,
       ),
     );
     if (_hasTriedToSave) {
@@ -265,6 +261,6 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
     if (_recoveryKeyFile.existsSync()) {
       await _recoveryKeyFile.delete();
     }
-    widget.onDone();
+    widget.onDone!();
   }
 }

lib/ui/account/recovery_page.dart

@@ -1,4 +1,4 @@
-// @dart=2.9
+
 
 import 'dart:ui';
 
@@ -10,7 +10,7 @@ import 'package:ente_auth/utils/toast_util.dart';
 import 'package:flutter/material.dart';
 
 class RecoveryPage extends StatefulWidget {
-  const RecoveryPage({Key key}) : super(key: key);
+  const RecoveryPage({Key? key}) : super(key: key);
 
   @override
   State<RecoveryPage> createState() => _RecoveryPageState();
@@ -22,7 +22,7 @@ class _RecoveryPageState extends State<RecoveryPage> {
   @override
   Widget build(BuildContext context) {
     final isKeypadOpen = MediaQuery.of(context).viewInsets.bottom > 100;
-    FloatingActionButtonLocation fabLocation() {
+    FloatingActionButtonLocation? fabLocation() {
       if (isKeypadOpen) {
         return null;
       } else {
@@ -140,7 +140,7 @@ class _RecoveryPageState extends State<RecoveryPage> {
                           child: Text(
                             "No recovery key?",
                             style:
-                                Theme.of(context).textTheme.subtitle1.copyWith(
+                                Theme.of(context).textTheme.subtitle1!.copyWith(
                                       fontSize: 14,
                                       decoration: TextDecoration.underline,
                                     ),

lib/ui/account/sessions_page.dart

@@ -1,4 +1,4 @@
-// @dart=2.9
+
 
 import 'package:ente_auth/core/configuration.dart';
 import 'package:ente_auth/ente_theme_data.dart';
@@ -13,14 +13,14 @@ import 'package:flutter/material.dart';
 import 'package:logging/logging.dart';
 
 class SessionsPage extends StatefulWidget {
-  const SessionsPage({Key key}) : super(key: key);
+  const SessionsPage({Key? key}) : super(key: key);
 
   @override
   State<SessionsPage> createState() => _SessionsPageState();
 }
 
 class _SessionsPageState extends State<SessionsPage> {
-  Sessions _sessions;
+  Sessions? _sessions;
   final Logger _logger = Logger("SessionsPageState");
 
   @override
@@ -46,7 +46,7 @@ class _SessionsPageState extends State<SessionsPage> {
     }
     final List<Widget> rows = [];
     rows.add(const Padding(padding: EdgeInsets.all(4)));
-    for (final session in _sessions.sessions) {
+    for (final session in _sessions!.sessions) {
       rows.add(_getSessionWidget(session));
     }
     return SingleChildScrollView(
@@ -113,7 +113,7 @@ class _SessionsPageState extends State<SessionsPage> {
 
   Future<void> _terminateSession(Session session) async {
     final l10n = context.l10n;
-    final dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
+    final dialog = createProgressDialog(context, l10n.pleaseWait);
     await dialog.show();
     try {
       await UserService.instance.terminateSession(session.token);
@@ -133,11 +133,11 @@ class _SessionsPageState extends State<SessionsPage> {
   Future<void> _fetchActiveSessions() async {
     _sessions = await UserService.instance
         .getActiveSessions()
-        .onError((error, stackTrace) {
+        .onError((dynamic error, stackTrace) {
       showToast(context, "Failed to fetch active sessions");
       throw error;
     });
-    _sessions.sessions.sort((first, second) {
+    _sessions!.sessions.sort((first, second) {
       return second.lastUsedTime.compareTo(first.lastUsedTime);
     });
     setState(() {});

lib/ui/account/verify_recovery_page.dart

@@ -1,18 +1,15 @@
-// ignore_for_file: import_of_legacy_library_into_null_safe
-
 import 'dart:ui';
 
 import 'package:bip39/bip39.dart' as bip39;
 import 'package:dio/dio.dart';
 import 'package:ente_auth/core/configuration.dart';
-import 'package:ente_auth/core/event_bus.dart';
 import 'package:ente_auth/ente_theme_data.dart';
-import 'package:ente_auth/events/notification_event.dart';
+import 'package:ente_auth/l10n/l10n.dart';
 import 'package:ente_auth/services/local_authentication_service.dart';
 import 'package:ente_auth/services/user_remote_flag_service.dart';
 import 'package:ente_auth/ui/account/recovery_key_page.dart';
-import 'package:ente_auth/ui/common/dialogs.dart';
 import 'package:ente_auth/ui/common/gradient_button.dart';
+import 'package:ente_auth/ui/components/buttons/button_widget.dart';
 import 'package:ente_auth/utils/dialog_util.dart';
 import 'package:ente_auth/utils/navigation_util.dart';
 import 'package:flutter/material.dart';
@@ -31,7 +28,8 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
   final Logger _logger = Logger((_VerifyRecoveryPageState).toString());
 
   void _verifyRecoveryKey() async {
-    final dialog = createProgressDialog(context, "Verifying recovery key...");
+    final dialog =
+        createProgressDialog(context, context.l10n.verifyingRecoveryKey);
     await dialog.show();
     try {
       final String inputKey = _recoveryKey.text.trim();
@@ -50,19 +48,17 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
               "Please check your internet connection and try again.",
             );
           } else {
-            await showGenericErrorDialog(context);
+            await showGenericErrorDialog(context: context);
           }
           return;
         }
-        Bus.instance.fire(NotificationEvent());
+
         await dialog.hide();
         // todo: change this as per figma once the component is ready
         await showErrorDialog(
           context,
-          "Recovery key verified",
-          "Great! Your recovery key is valid. Thank you for verifying.\n"
-              "\nPlease"
-              " remember to keep your recovery key safely backed up.",
+          context.l10n.recoveryKeyVerified,
+          context.l10n.recoveryKeySuccessBody,
         );
         Navigator.of(context).pop();
       } else {
@@ -71,18 +67,16 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
     } catch (e, s) {
       _logger.severe("failed to verify recovery key", e, s);
       await dialog.hide();
-      const String errMessage =
-          "The recovery key you entered is not valid. Please make sure it "
-          "contains 24 words, and check the spelling of each.\n\nIf you "
-          "entered an older recovery code, make sure it is 64 characters long, and check each of them.";
+      final String errMessage = context.l10n.invalidRecoveryKey;
       final result = await showChoiceDialog(
         context,
-        "Invalid key",
-        errMessage,
-        firstAction: "Try again",
-        secondAction: "View recovery key",
+        title: context.l10n.invalidKey,
+        body: errMessage,
+        firstButtonLabel: context.l10n.tryAgain,
+        secondButtonLabel: context.l10n.viewRecoveryKey,
+        secondButtonAction: ButtonAction.second,
       );
-      if (result == DialogUserChoice.secondChoice) {
+      if (result!.action == ButtonAction.second) {
         await _onViewRecoveryKeyClick();
       }
     }
@@ -102,7 +96,7 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
           context,
           RecoveryKeyPage(
             recoveryKey,
-            "OK",
+            context.l10n.ok,
             showAppBar: true,
             onDone: () {
               Navigator.of(context).pop();
@@ -110,7 +104,7 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
           ),
         );
       } catch (e) {
-        showGenericErrorDialog(context);
+        showGenericErrorDialog(context: context);
         return;
       }
     }
@@ -147,16 +141,14 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
                       SizedBox(
                         width: double.infinity,
                         child: Text(
-                          'Verify recovery key',
+                          context.l10n.confirmRecoveryKey,
                           style: enteTheme.textTheme.h3Bold,
                           textAlign: TextAlign.left,
                         ),
                       ),
                       const SizedBox(height: 18),
                       Text(
-                        "If you forget your password, your recovery key is the "
-                        "only way to recover your photos.\n\nPlease verify that "
-                        "you have safely backed up your 24 word recovery key by re-entering it.",
+                        context.l10n.recoveryKeyVerifyReason,
                         style: enteTheme.textTheme.small
                             .copyWith(color: enteTheme.colorScheme.textMuted),
                       ),
@@ -164,7 +156,7 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
                       TextFormField(
                         decoration: InputDecoration(
                           filled: true,
-                          hintText: "Enter your recovery key",
+                          hintText: context.l10n.enterYourRecoveryKey,
                           contentPadding: const EdgeInsets.all(20),
                           border: UnderlineInputBorder(
                             borderSide: BorderSide.none,
@@ -186,12 +178,6 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
                         },
                       ),
                       const SizedBox(height: 12),
-                      Text(
-                        "If you saved the recovery key from older app versions, you might have a 64 character recovery code instead of 24 words. You can enter that too.",
-                        style: enteTheme.textTheme.mini
-                            .copyWith(color: enteTheme.colorScheme.textMuted),
-                      ),
-                      const SizedBox(height: 8),
                       Expanded(
                         child: Container(
                           alignment: Alignment.bottomCenter,
@@ -203,8 +189,7 @@ class _VerifyRecoveryPageState extends State<VerifyRecoveryPage> {
                             children: [
                               GradientButton(
                                 onTap: _verifyRecoveryKey,
-                                text: "Verify",
-                                iconData: Icons.shield_outlined,
+                                text: context.l10n.confirm,
                               ),
                               const SizedBox(height: 8),
                             ],

lib/ui/code_timer_progress.dart

@@ -1,7 +1,6 @@
-import 'dart:async';
-
+import 'package:ente_auth/ui/linear_progress_widget.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart';
+import 'package:flutter/scheduler.dart';
 
 class CodeTimerProgress extends StatefulWidget {
   final int period;
@@ -15,46 +14,42 @@ class CodeTimerProgress extends StatefulWidget {
   _CodeTimerProgressState createState() => _CodeTimerProgressState();
 }
 
-class _CodeTimerProgressState extends State<CodeTimerProgress> {
-  Timer? _everySecondTimer;
-  late int _timeRemaining;
+class _CodeTimerProgressState extends State<CodeTimerProgress>
+    with SingleTickerProviderStateMixin {
+  late final Ticker _ticker;
+  double _progress = 0.0;
+  late final int _microSecondsInPeriod;
 
   @override
   void initState() {
     super.initState();
-    _timeRemaining = widget.period;
-    _updateTimeRemaining();
-    _everySecondTimer =
-        Timer.periodic(const Duration(milliseconds: 200), (Timer t) {
+    _microSecondsInPeriod = widget.period * 1000000;
+    _ticker = createTicker((elapsed) {
       _updateTimeRemaining();
     });
+    _ticker.start();
+    _updateTimeRemaining();
   }
 
   void _updateTimeRemaining() {
-    int newTimeRemaining =
-        widget.period - (DateTime.now().second % widget.period);
-    if (newTimeRemaining != _timeRemaining) {
-      setState(() {
-        _timeRemaining = newTimeRemaining;
-      });
-    }
+    int timeRemaining = (_microSecondsInPeriod) -
+        (DateTime.now().microsecondsSinceEpoch % _microSecondsInPeriod);
+    setState(() {
+      _progress = (timeRemaining / _microSecondsInPeriod);
+    });
   }
 
   @override
   void dispose() {
-    _everySecondTimer?.cancel();
+    _ticker.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    return FAProgressBar(
-      currentValue: _timeRemaining / widget.period * 100,
-      size: 4,
-      animatedDuration: const Duration(milliseconds: 200),
-      progressColor: Colors.orange,
-      changeColorValue: 40,
-      changeProgressColor: Colors.green,
+    return LinearProgressWidget(
+      color: _progress > 0.4 ? Colors.green : Colors.orange,
+      fractionOfStorage: _progress,
     );
   }
 }

lib/ui/code_widget.dart

@@ -68,7 +68,7 @@ class _CodeWidgetState extends State<CodeWidget> {
               foregroundColor:
                   Theme.of(context).colorScheme.inverseBackgroundColor,
               icon: Icons.edit_outlined,
-              label: 'Edit',
+              label: l10n.edit,
               padding: const EdgeInsets.only(left: 4, right: 0),
               spacing: 8,
             ),
@@ -81,7 +81,7 @@ class _CodeWidgetState extends State<CodeWidget> {
               borderRadius: const BorderRadius.all(Radius.circular(12.0)),
               foregroundColor: const Color(0xFFFE4A49),
               icon: Icons.delete,
-              label: 'Delete',
+              label: l10n.delete,
               padding: const EdgeInsets.only(left: 0, right: 0),
               spacing: 8,
             ),
@@ -212,9 +212,8 @@ class _CodeWidgetState extends State<CodeWidget> {
   }
 
   void _copyToClipboard() {
-    FlutterClipboard.copy(_getTotp()).then(
-      (value) => showToast(context, "Copied to clipboard"),
-    );
+    FlutterClipboard.copy(_getTotp())
+        .then((value) => showToast(context, context.l10n.copiedToClipboard));
   }
 
   Future<void> _onEditPressed(_) async {
@@ -256,7 +255,7 @@ class _CodeWidgetState extends State<CodeWidget> {
         ),
         TextButton(
           child: Text(
-            "Cancel",
+            l10n.cancel,
             style: TextStyle(
               color: Theme.of(context).colorScheme.onSurface,
             ),
@@ -291,7 +290,7 @@ class _CodeWidgetState extends State<CodeWidget> {
     try {
       return getTotp(widget.code);
     } catch (e) {
-      return "Error";
+      return context.l10n.error;
     }
   }
 
@@ -299,7 +298,7 @@ class _CodeWidgetState extends State<CodeWidget> {
     try {
       return getNextTotp(widget.code);
     } catch (e) {
-      return "Error";
+      return context.l10n.error;
     }
   }
 }

lib/ui/common/DividerWithPadding.dart

@@ -1,11 +1,11 @@
-// @dart=2.9
+
 
 import 'package:flutter/material.dart';
 
 class DividerWithPadding extends StatelessWidget {
   final double left, top, right, bottom, thinckness;
   const DividerWithPadding({
-    Key key,
+    Key? key,
     this.left = 0,
     this.top = 0,
     this.right = 0,

lib/ui/common/bottom_shadow.dart

@@ -1,11 +1,11 @@
-// @dart=2.9
+
 
 import 'package:flutter/material.dart';
 
 class BottomShadowWidget extends StatelessWidget {
   final double offsetDy;
-  final Color shadowColor;
-  const BottomShadowWidget({this.offsetDy = 28, this.shadowColor, Key key})
+  final Color? shadowColor;
+  const BottomShadowWidget({this.offsetDy = 28, this.shadowColor, Key? key})
       : super(key: key);
 
   @override

lib/ui/common/dialogs.dart

@@ -1,8 +1,10 @@
-// @dart=2.9
-
 import 'package:ente_auth/ente_theme_data.dart';
+import 'package:ente_auth/models/typedefs.dart';
+import 'package:ente_auth/ui/components/buttons/button_widget.dart';
+import 'package:ente_auth/ui/components/dialog_widget.dart';
+import 'package:ente_auth/ui/components/models/button_result.dart';
+import 'package:ente_auth/ui/components/models/button_type.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 
 enum DialogUserChoice { firstChoice, secondChoice }
 
@@ -12,14 +14,14 @@ enum ActionType {
 }
 
 // if dialog is dismissed by tapping outside, this will return null
-Future<DialogUserChoice> showChoiceDialog<T>(
+Future<DialogUserChoice?> showChoiceDialogOld<T>(
   BuildContext context,
   String title,
   String content, {
   String firstAction = 'Ok',
-  Color firstActionColor,
+  Color? firstActionColor,
   String secondAction = 'Cancel',
-  Color secondActionColor,
+  Color? secondActionColor,
   ActionType actionType = ActionType.confirm,
 }) {
   final AlertDialog alert = AlertDialog(
@@ -69,7 +71,7 @@ Future<DialogUserChoice> showChoiceDialog<T>(
     ],
   );
 
-  return showDialog(
+  return showDialog<DialogUserChoice>(
     context: context,
     builder: (BuildContext context) {
       return alert;
@@ -77,3 +79,46 @@ Future<DialogUserChoice> showChoiceDialog<T>(
     barrierColor: Colors.black87,
   );
 }
+
+///Will return null if dismissed by tapping outside
+Future<ButtonResult?> showChoiceDialog(
+  BuildContext context, {
+  required String title,
+  String? body,
+  required String firstButtonLabel,
+  String secondButtonLabel = "Cancel",
+  ButtonType firstButtonType = ButtonType.neutral,
+  ButtonType secondButtonType = ButtonType.secondary,
+  ButtonAction firstButtonAction = ButtonAction.first,
+  ButtonAction secondButtonAction = ButtonAction.cancel,
+  FutureVoidCallback? firstButtonOnTap,
+  FutureVoidCallback? secondButtonOnTap,
+  bool isCritical = false,
+  IconData? icon,
+  bool isDismissible = true,
+}) async {
+  final buttons = [
+    ButtonWidget(
+      buttonType: isCritical ? ButtonType.critical : firstButtonType,
+      labelText: firstButtonLabel,
+      isInAlert: true,
+      onTap: firstButtonOnTap,
+      buttonAction: firstButtonAction,
+    ),
+    ButtonWidget(
+      buttonType: secondButtonType,
+      labelText: secondButtonLabel,
+      isInAlert: true,
+      onTap: secondButtonOnTap,
+      buttonAction: secondButtonAction,
+    ),
+  ];
+  return showDialogWidget(
+    context: context,
+    title: title,
+    body: body,
+    buttons: buttons,
+    icon: icon,
+    isDismissible: isDismissible,
+  );
+}

lib/ui/common/dynamic_fab.dart

@@ -1,4 +1,4 @@
-// @dart=2.9
+
 
 import 'dart:math' as math;
 
@@ -6,13 +6,13 @@ import 'package:ente_auth/ente_theme_data.dart';
 import 'package:flutter/material.dart';
 
 class DynamicFAB extends StatelessWidget {
-  final bool isKeypadOpen;
-  final bool isFormValid;
-  final String buttonText;
-  final Function onPressedFunction;
+  final bool? isKeypadOpen;
+  final bool? isFormValid;
+  final String? buttonText;
+  final Function? onPressedFunction;
 
   const DynamicFAB({
-    Key key,
+    Key? key,
     this.isKeypadOpen,
     this.buttonText,
     this.isFormValid,
@@ -21,7 +21,7 @@ class DynamicFAB extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    if (isKeypadOpen) {
+    if (isKeypadOpen!) {
       return Container(
         decoration: BoxDecoration(
           boxShadow: [
@@ -43,13 +43,13 @@ class DynamicFAB extends StatelessWidget {
                   Theme.of(context).colorScheme.dynamicFABBackgroundColor,
               foregroundColor:
                   Theme.of(context).colorScheme.dynamicFABTextColor,
-              onPressed: isFormValid
-                  ? onPressedFunction
+              onPressed: isFormValid!
+                  ? onPressedFunction as void Function()?
                   : () {
                       FocusScope.of(context).unfocus();
                     },
               child: Transform.rotate(
-                angle: isFormValid ? 0 : math.pi / 2,
+                angle: isFormValid! ? 0 : math.pi / 2,
                 child: const Icon(
                   Icons.chevron_right,
                   size: 36,
@@ -65,8 +65,8 @@ class DynamicFAB extends StatelessWidget {
         height: 56,
         padding: const EdgeInsets.symmetric(horizontal: 20),
         child: OutlinedButton(
-          onPressed: isFormValid ? onPressedFunction : null,
-          child: Text(buttonText),
+          onPressed: isFormValid! ? onPressedFunction as void Function()? : null,
+          child: Text(buttonText!),
         ),
       );
     }
@@ -75,17 +75,17 @@ class DynamicFAB extends StatelessWidget {
 
 class NoScalingAnimation extends FloatingActionButtonAnimator {
   @override
-  Offset getOffset({Offset begin, Offset end, double progress}) {
+  Offset getOffset({Offset? begin, required Offset end, double? progress}) {
     return end;
   }
 
   @override
-  Animation<double> getRotationAnimation({Animation<double> parent}) {
+  Animation<double> getRotationAnimation({required Animation<double> parent}) {
     return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
   }
 
   @override
-  Animation<double> getScaleAnimation({Animation<double> parent}) {
+  Animation<double> getScaleAnimation({required Animation<double> parent}) {
     return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
   }
 }

lib/ui/common/gradient_button.dart

@@ -1,22 +1,22 @@
-// @dart=2.9
+
 
 import 'package:flutter/material.dart';
 
 class GradientButton extends StatelessWidget {
   final List<Color> linearGradientColors;
-  final Function onTap;
+  final Function? onTap;
 
   // text is ignored if child is specified
   final String text;
 
   // nullable
-  final IconData iconData;
+  final IconData? iconData;
 
   // padding between the text and icon
   final double paddingValue;
 
   const GradientButton({
-    Key key,
+    Key? key,
     this.linearGradientColors = const [
       Color.fromARGB(255, 133, 44, 210),
       Color.fromARGB(255, 187, 26, 93),
@@ -64,7 +64,7 @@ class GradientButton extends StatelessWidget {
       );
     }
     return InkWell(
-      onTap: onTap,
+      onTap: onTap as void Function()?,
       child: Container(
         height: 56,
         decoration: BoxDecoration(

lib/ui/common/linear_progress_dialog.dart

@@ -1,4 +1,4 @@
-// @dart=2.9
+
 
 import 'package:ente_auth/ente_theme_data.dart';
 import 'package:flutter/material.dart';
@@ -6,14 +6,14 @@ import 'package:flutter/material.dart';
 class LinearProgressDialog extends StatefulWidget {
   final String message;
 
-  const LinearProgressDialog(this.message, {Key key}) : super(key: key);
+  const LinearProgressDialog(this.message, {Key? key}) : super(key: key);
 
   @override
   LinearProgressDialogState createState() => LinearProgressDialogState();
 }
 
 class LinearProgressDialogState extends State<LinearProgressDialog> {
-  double _progress;
+  double? _progress;
 
   @override
   void initState() {

lib/ui/common/loading_widget.dart

@@ -1,14 +1,32 @@
-import 'package:flutter/cupertino.dart';
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:flutter/material.dart';
 
 class EnteLoadingWidget extends StatelessWidget {
-  const EnteLoadingWidget({Key? key}) : super(key: key);
+  final Color? color;
+  final double size;
+  final double padding;
+  final Alignment alignment;
+  const EnteLoadingWidget({
+    this.color,
+    this.size = 14,
+    this.padding = 5,
+    this.alignment = Alignment.center,
+    Key? key,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Center(
-      child: SizedBox.fromSize(
-        size: const Size.square(30),
-        child: const CupertinoActivityIndicator(),
+    return Align(
+      alignment: alignment,
+      child: Padding(
+        padding: EdgeInsets.all(padding),
+        child: SizedBox.fromSize(
+          size: Size.square(size),
+          child: CircularProgressIndicator(
+            strokeWidth: 2,
+            color: color ?? getEnteColorScheme(context).strokeBase,
+          ),
+        ),
       ),
     );
   }

lib/ui/common/progress_dialog.dart

@@ -1,5 +1,3 @@
-// @dart=2.9
-
 import 'package:flutter/material.dart';
 
 enum ProgressDialogType { normal, download }
@@ -7,7 +5,7 @@ enum ProgressDialogType { normal, download }
 String _dialogMessage = "Loading...";
 double _progress = 0.0, _maxProgress = 100.0;
 
-Widget _customBody;
+Widget? _customBody;
 
 TextAlign _textAlign = TextAlign.left;
 Alignment _progressWidgetAlignment = Alignment.centerLeft;
@@ -15,10 +13,10 @@ Alignment _progressWidgetAlignment = Alignment.centerLeft;
 TextDirection _direction = TextDirection.ltr;
 
 bool _isShowing = false;
-BuildContext _context, _dismissingContext;
-ProgressDialogType _progressDialogType;
+BuildContext? _context, _dismissingContext;
+ProgressDialogType? _progressDialogType;
 bool _barrierDismissible = true, _showLogs = false;
-Color _barrierColor;
+Color? _barrierColor;
 
 TextStyle _progressTextStyle = const TextStyle(
       color: Colors.black,
@@ -42,16 +40,16 @@ Widget _progressWidget = Image.asset(
 );
 
 class ProgressDialog {
-  _Body _dialog;
+  _Body? _dialog;
 
   ProgressDialog(
     BuildContext context, {
-    ProgressDialogType type,
-    bool isDismissible,
-    bool showLogs,
-    TextDirection textDirection,
-    Widget customBody,
-    Color barrierColor,
+    ProgressDialogType? type,
+    bool? isDismissible,
+    bool? showLogs,
+    TextDirection? textDirection,
+    Widget? customBody,
+    Color? barrierColor,
   }) {
     _context = context;
     _progressDialogType = type ?? ProgressDialogType.normal;
@@ -63,20 +61,20 @@ class ProgressDialog {
   }
 
   void style({
-    Widget child,
-    double progress,
-    double maxProgress,
-    String message,
-    Widget progressWidget,
-    Color backgroundColor,
-    TextStyle progressTextStyle,
-    TextStyle messageTextStyle,
-    double elevation,
-    TextAlign textAlign,
-    double borderRadius,
-    Curve insetAnimCurve,
-    EdgeInsets padding,
-    Alignment progressWidgetAlignment,
+    Widget? child,
+    double? progress,
+    double? maxProgress,
+    String? message,
+    Widget? progressWidget,
+    Color? backgroundColor,
+    TextStyle? progressTextStyle,
+    TextStyle? messageTextStyle,
+    double? elevation,
+    TextAlign? textAlign,
+    double? borderRadius,
+    Curve? insetAnimCurve,
+    EdgeInsets? padding,
+    Alignment? progressWidgetAlignment,
   }) {
     if (_isShowing) return;
     if (_progressDialogType == ProgressDialogType.download) {
@@ -100,12 +98,12 @@ class ProgressDialog {
   }
 
   void update({
-    double progress,
-    double maxProgress,
-    String message,
-    Widget progressWidget,
-    TextStyle progressTextStyle,
-    TextStyle messageTextStyle,
+    double? progress,
+    double? maxProgress,
+    String? message,
+    Widget? progressWidget,
+    TextStyle? progressTextStyle,
+    TextStyle? messageTextStyle,
   }) {
     if (_progressDialogType == ProgressDialogType.download) {
       _progress = progress ?? _progress;
@@ -117,7 +115,7 @@ class ProgressDialog {
     _messageStyle = messageTextStyle ?? _messageStyle;
     _progressTextStyle = progressTextStyle ?? _progressTextStyle;
 
-    if (_isShowing) _dialog.update();
+    if (_isShowing) _dialog!.update();
   }
 
   bool isShowing() {
@@ -128,7 +126,9 @@ class ProgressDialog {
     try {
       if (_isShowing) {
         _isShowing = false;
-        Navigator.of(_dismissingContext).pop();
+        if (_dismissingContext != null) {
+          Navigator.of(_dismissingContext!).pop();
+        }
         if (_showLogs) debugPrint('ProgressDialog dismissed');
         return Future.value(true);
       } else {
@@ -147,7 +147,7 @@ class ProgressDialog {
       if (!_isShowing) {
         _dialog = _Body();
         showDialog<dynamic>(
-          context: _context,
+          context: _context!,
           barrierDismissible: _barrierDismissible,
           barrierColor: _barrierColor,
           builder: (BuildContext context) {

lib/ui/common/rename_dialog.dart

@@ -1,4 +1,4 @@
-// @dart=2.9
+
 
 import 'package:ente_auth/utils/dialog_util.dart';
 import 'package:flutter/material.dart';
@@ -8,7 +8,7 @@ class RenameDialog extends StatefulWidget {
   final String type;
   final int maxLength;
 
-  const RenameDialog(this.name, this.type, {Key key, this.maxLength = 100})
+  const RenameDialog(this.name, this.type, {Key? key, this.maxLength = 100})
       : super(key: key);
 
   @override
@@ -16,7 +16,7 @@ class RenameDialog extends StatefulWidget {
 }
 
 class _RenameDialogState extends State<RenameDialog> {
-  String _newName;
+  String? _newName;
 
   @override
   void initState() {
@@ -74,7 +74,7 @@ class _RenameDialogState extends State<RenameDialog> {
             ),
           ),
           onPressed: () {
-            if (_newName.trim().isEmpty) {
+            if (_newName!.trim().isEmpty) {
               showErrorDialog(
                 context,
                 "Empty name",
@@ -82,7 +82,7 @@ class _RenameDialogState extends State<RenameDialog> {
               );
               return;
             }
-            if (_newName.trim().length > widget.maxLength) {
+            if (_newName!.trim().length > widget.maxLength) {
               showErrorDialog(
                 context,
                 "Name too large",
@@ -90,7 +90,7 @@ class _RenameDialogState extends State<RenameDialog> {
               );
               return;
             }
-            Navigator.of(context).pop(_newName.trim());
+            Navigator.of(context).pop(_newName!.trim());
           },
         ),
       ],

lib/ui/common/web_page.dart

@@ -1,5 +1,3 @@
-// @dart=2.9
-
 import 'package:ente_auth/ui/common/loading_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_inappwebview/flutter_inappwebview.dart';
@@ -8,7 +6,7 @@ class WebPage extends StatefulWidget {
   final String title;
   final String url;
 
-  const WebPage(this.title, this.url, {Key key}) : super(key: key);
+  const WebPage(this.title, this.url, {Key? key}) : super(key: key);
 
   @override
   State<WebPage> createState() => _WebPageState();

lib/ui/components/action_sheet_widget.dart

@@ -0,0 +1,221 @@
+import 'dart:ui';
+
+import 'package:ente_auth/theme/colors.dart';
+import 'package:ente_auth/theme/effects.dart';
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:ente_auth/ui/components/buttons/button_widget.dart';
+import 'package:ente_auth/ui/components/components_constants.dart';
+import 'package:ente_auth/ui/components/models/button_result.dart';
+import 'package:ente_auth/ui/components/separators.dart';
+import 'package:flutter/material.dart';
+import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
+
+enum ActionSheetType {
+  defaultActionSheet,
+  iconOnly,
+}
+
+///Returns null if dismissed
+Future<ButtonResult?> showActionSheet({
+  required BuildContext context,
+  required List<ButtonWidget> buttons,
+  ActionSheetType actionSheetType = ActionSheetType.defaultActionSheet,
+  bool enableDrag = true,
+  bool isDismissible = true,
+  bool isCheckIconGreen = false,
+  String? title,
+  Widget? bodyWidget,
+  String? body,
+  String? bodyHighlight,
+}) {
+  return showMaterialModalBottomSheet(
+    backgroundColor: Colors.transparent,
+    barrierColor: backdropFaintDark,
+    useRootNavigator: true,
+    context: context,
+    isDismissible: isDismissible,
+    enableDrag: enableDrag,
+    builder: (_) {
+      return ActionSheetWidget(
+        title: title,
+        bodyWidget: bodyWidget,
+        body: body,
+        bodyHighlight: bodyHighlight,
+        actionButtons: buttons,
+        actionSheetType: actionSheetType,
+        isCheckIconGreen: isCheckIconGreen,
+      );
+    },
+  );
+}
+
+class ActionSheetWidget extends StatelessWidget {
+  final String? title;
+  final Widget? bodyWidget;
+  final String? body;
+  final String? bodyHighlight;
+  final List<ButtonWidget> actionButtons;
+  final ActionSheetType actionSheetType;
+  final bool isCheckIconGreen;
+
+  const ActionSheetWidget({
+    required this.actionButtons,
+    required this.actionSheetType,
+    required this.isCheckIconGreen,
+    this.title,
+    this.bodyWidget,
+    this.body,
+    this.bodyHighlight,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final isTitleAndBodyNull =
+        title == null && bodyWidget == null && body == null;
+    final blur = MediaQuery.of(context).platformBrightness == Brightness.light
+        ? blurMuted
+        : blurBase;
+    final extraWidth = MediaQuery.of(context).size.width - restrictedMaxWidth;
+    final double? horizontalPadding = extraWidth > 0 ? extraWidth / 2 : null;
+    return Padding(
+      padding: EdgeInsets.fromLTRB(
+        horizontalPadding ?? 12,
+        12,
+        horizontalPadding ?? 12,
+        32,
+      ),
+      child: Container(
+        decoration: BoxDecoration(boxShadow: shadowMenuLight),
+        child: ClipRRect(
+          borderRadius: const BorderRadius.all(Radius.circular(8)),
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
+            child: Container(
+              color: backdropMutedDark,
+              child: Padding(
+                padding: EdgeInsets.fromLTRB(
+                  24,
+                  24,
+                  24,
+                  isTitleAndBodyNull ? 24 : 28,
+                ),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    isTitleAndBodyNull
+                        ? const SizedBox.shrink()
+                        : Padding(
+                            padding: const EdgeInsets.only(bottom: 36),
+                            child: ContentContainerWidget(
+                              title: title,
+                              bodyWidget: bodyWidget,
+                              body: body,
+                              bodyHighlight: bodyHighlight,
+                              actionSheetType: actionSheetType,
+                              isCheckIconGreen: isCheckIconGreen,
+                            ),
+                          ),
+                    ActionButtons(
+                      actionButtons,
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class ContentContainerWidget extends StatelessWidget {
+  final String? title;
+  final Widget? bodyWidget;
+  final String? body;
+  final String? bodyHighlight;
+  final ActionSheetType actionSheetType;
+  final bool isCheckIconGreen;
+
+  const ContentContainerWidget({
+    required this.actionSheetType,
+    required this.isCheckIconGreen,
+    this.title,
+    this.bodyWidget,
+    this.body,
+    this.bodyHighlight,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = getEnteTextTheme(context);
+    final bool bodyMissing = body == null && bodyWidget == null;
+    debugPrint("body missing $bodyMissing");
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      //todo: set cross axis to center when icon should be shown in place of body
+      crossAxisAlignment: actionSheetType == ActionSheetType.defaultActionSheet
+          ? CrossAxisAlignment.stretch
+          : CrossAxisAlignment.center,
+      children: [
+        title == null
+            ? const SizedBox.shrink()
+            : Text(
+                title!,
+                style: textTheme.largeBold
+                    .copyWith(color: textBaseDark), //constant color
+              ),
+        title == null || bodyMissing
+            ? const SizedBox.shrink()
+            : const SizedBox(height: 19),
+        actionSheetType == ActionSheetType.defaultActionSheet
+            ? bodyMissing
+                ? const SizedBox.shrink()
+                : (bodyWidget != null
+                    ? bodyWidget!
+                    : Text(
+                        body!,
+                        style: textTheme.body
+                            .copyWith(color: textMutedDark), //constant color
+                      ))
+            : Icon(
+                Icons.check_outlined,
+                size: 48,
+                color: isCheckIconGreen
+                    ? getEnteColorScheme(context).primary700
+                    : strokeBaseDark,
+              ),
+        actionSheetType == ActionSheetType.defaultActionSheet &&
+                bodyHighlight != null
+            ? Padding(
+                padding: const EdgeInsets.only(top: 19.0),
+                child: Text(
+                  bodyHighlight!,
+                  style: textTheme.body
+                      .copyWith(color: textBaseDark), //constant color
+                ),
+              )
+            : const SizedBox.shrink(),
+      ],
+    );
+  }
+}
+
+class ActionButtons extends StatelessWidget {
+  final List<Widget> actionButtons;
+  const ActionButtons(this.actionButtons, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final actionButtonsWithSeparators = actionButtons;
+    return Column(
+      children:
+          //Separator height is 8pts in figma. -2pts here as the action
+          //buttons are 2pts extra in height in code compared to figma because
+          //of the border(1pt top + 1pt bottom) of action buttons.
+          addSeparators(actionButtonsWithSeparators, const SizedBox(height: 6)),
+    );
+  }
+}

lib/ui/components/buttons/button_widget.dart

@@ -0,0 +1,526 @@
+import 'package:ente_auth/models/execution_states.dart';
+import 'package:ente_auth/models/typedefs.dart';
+import 'package:ente_auth/theme/colors.dart';
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:ente_auth/theme/text_style.dart';
+import 'package:ente_auth/ui/common/loading_widget.dart';
+import 'package:ente_auth/ui/components/models/button_result.dart';
+import 'package:ente_auth/ui/components/models/button_type.dart';
+import 'package:ente_auth/ui/components/models/custom_button_style.dart';
+import 'package:ente_auth/utils/debouncer.dart';
+import "package:ente_auth/utils/dialog_util.dart";
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+
+enum ButtonSize { small, large }
+
+enum ButtonAction { first, second, third, fourth, cancel, error }
+
+class ButtonWidget extends StatelessWidget {
+  final IconData? icon;
+  final String? labelText;
+  final ButtonType buttonType;
+  final FutureVoidCallback? onTap;
+  final bool isDisabled;
+  final ButtonSize buttonSize;
+
+  ///Setting this flag to true will show a success confirmation as a 'check'
+  ///icon once the onTap(). This is expected to be used only if time taken to
+  ///execute onTap() takes less than debouce time.
+  final bool shouldShowSuccessConfirmation;
+
+  ///Setting this flag to false will restrict the loading and success states of
+  ///the button from surfacing on the UI. The ExecutionState of the button will
+  ///change irrespective of the value of this flag. Only that it won't be
+  ///surfaced on the UI
+  final bool shouldSurfaceExecutionStates;
+
+  /// iconColor should only be specified when we do not want to honor the default
+  /// iconColor based on buttonType. Most of the items, default iconColor is what
+  /// we need unless we want to pop out the icon in a non-primary button type
+  final Color? iconColor;
+
+  ///Button action will only work if isInAlert is true
+  final ButtonAction? buttonAction;
+
+  ///setting this flag to true will make the button appear like how it would
+  ///on dark theme irrespective of the app's theme.
+  final bool shouldStickToDarkTheme;
+
+  ///isInAlert is to dismiss the alert if the action on the button is completed.
+  ///This should be set to true if the alert which uses this button needs to
+  ///return the Button's action.
+  final bool isInAlert;
+
+  /// progressStatus can be used to display information about the action
+  /// progress when ExecutionState is in Progress.
+  final ValueNotifier<String>? progressStatus;
+
+  const ButtonWidget({
+    Key? key,
+    required this.buttonType,
+    this.buttonSize = ButtonSize.large,
+    this.icon,
+    this.labelText,
+    this.onTap,
+    this.shouldStickToDarkTheme = false,
+    this.isDisabled = false,
+    this.buttonAction,
+    this.isInAlert = false,
+    this.iconColor,
+    this.shouldSurfaceExecutionStates = true,
+    this.progressStatus,
+    this.shouldShowSuccessConfirmation = false,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme =
+        shouldStickToDarkTheme ? darkScheme : getEnteColorScheme(context);
+    final inverseColorScheme = shouldStickToDarkTheme
+        ? lightScheme
+        : getEnteColorScheme(context, inverse: true);
+    final textTheme =
+        shouldStickToDarkTheme ? darkTextTheme : getEnteTextTheme(context);
+    final inverseTextTheme = shouldStickToDarkTheme
+        ? lightTextTheme
+        : getEnteTextTheme(context, inverse: true);
+    final buttonStyle = CustomButtonStyle(
+      //Dummy default values since we need to keep these properties non-nullable
+      defaultButtonColor: Colors.transparent,
+      defaultBorderColor: Colors.transparent,
+      defaultIconColor: Colors.transparent,
+      defaultLabelStyle: textTheme.body,
+    );
+    buttonStyle.defaultButtonColor = buttonType.defaultButtonColor(colorScheme);
+    buttonStyle.pressedButtonColor = buttonType.pressedButtonColor(colorScheme);
+    buttonStyle.disabledButtonColor =
+        buttonType.disabledButtonColor(colorScheme, buttonSize);
+    buttonStyle.defaultBorderColor =
+        buttonType.defaultBorderColor(colorScheme, buttonSize);
+    buttonStyle.pressedBorderColor = buttonType.pressedBorderColor(
+      colorScheme: colorScheme,
+      buttonSize: buttonSize,
+    );
+    buttonStyle.disabledBorderColor =
+        buttonType.disabledBorderColor(colorScheme, buttonSize);
+    buttonStyle.defaultIconColor = iconColor ??
+        buttonType.defaultIconColor(
+          colorScheme: colorScheme,
+          inverseColorScheme: inverseColorScheme,
+        );
+    buttonStyle.pressedIconColor =
+        buttonType.pressedIconColor(colorScheme, buttonSize);
+    buttonStyle.disabledIconColor =
+        buttonType.disabledIconColor(colorScheme, buttonSize);
+    buttonStyle.defaultLabelStyle = buttonType.defaultLabelStyle(
+      textTheme: textTheme,
+      inverseTextTheme: inverseTextTheme,
+    );
+    buttonStyle.pressedLabelStyle =
+        buttonType.pressedLabelStyle(textTheme, colorScheme, buttonSize);
+    buttonStyle.disabledLabelStyle =
+        buttonType.disabledLabelStyle(textTheme, colorScheme);
+    buttonStyle.checkIconColor = buttonType.checkIconColor(colorScheme);
+
+    return ButtonChildWidget(
+      buttonStyle: buttonStyle,
+      buttonType: buttonType,
+      isDisabled: isDisabled,
+      buttonSize: buttonSize,
+      isInAlert: isInAlert,
+      onTap: onTap,
+      labelText: labelText,
+      icon: icon,
+      buttonAction: buttonAction,
+      shouldSurfaceExecutionStates: shouldSurfaceExecutionStates,
+      progressStatus: progressStatus,
+      shouldShowSuccessConfirmation: shouldShowSuccessConfirmation,
+    );
+  }
+}
+
+class ButtonChildWidget extends StatefulWidget {
+  final CustomButtonStyle buttonStyle;
+  final FutureVoidCallback? onTap;
+  final ButtonType buttonType;
+  final String? labelText;
+  final IconData? icon;
+  final bool isDisabled;
+  final ButtonSize buttonSize;
+  final ButtonAction? buttonAction;
+  final bool isInAlert;
+  final bool shouldSurfaceExecutionStates;
+  final ValueNotifier<String>? progressStatus;
+  final bool shouldShowSuccessConfirmation;
+
+  const ButtonChildWidget({
+    Key? key,
+    required this.buttonStyle,
+    required this.buttonType,
+    required this.isDisabled,
+    required this.buttonSize,
+    required this.isInAlert,
+    required this.shouldSurfaceExecutionStates,
+    required this.shouldShowSuccessConfirmation,
+    this.progressStatus,
+    this.onTap,
+    this.labelText,
+    this.icon,
+    this.buttonAction,
+  }) : super(key: key);
+
+  @override
+  State<ButtonChildWidget> createState() => _ButtonChildWidgetState();
+}
+
+class _ButtonChildWidgetState extends State<ButtonChildWidget> {
+  late Color buttonColor;
+  late Color borderColor;
+  late Color iconColor;
+  late TextStyle labelStyle;
+  late Color checkIconColor;
+  late Color loadingIconColor;
+  ValueNotifier<String>? progressStatus;
+
+  ///This is used to store the width of the button in idle state (small button)
+  ///to be used as width for the button when the loading/succes states comes.
+  double? widthOfButton;
+  final _debouncer = Debouncer(const Duration(milliseconds: 300));
+  ExecutionState executionState = ExecutionState.idle;
+  Exception? _exception;
+
+  @override
+  void initState() {
+    _setButtonTheme();
+    super.initState();
+  }
+
+  @override
+  void didUpdateWidget(covariant ButtonChildWidget oldWidget) {
+    _setButtonTheme();
+    super.didUpdateWidget(oldWidget);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (executionState == ExecutionState.successful) {
+      Future.delayed(Duration(seconds: widget.isInAlert ? 1 : 2), () {
+        setState(() {
+          executionState = ExecutionState.idle;
+        });
+      });
+    }
+    return GestureDetector(
+      onTap: _shouldRegisterGestures ? _onTap : null,
+      onTapDown: _shouldRegisterGestures ? _onTapDown : null,
+      onTapUp: _shouldRegisterGestures ? _onTapUp : null,
+      onTapCancel: _shouldRegisterGestures ? _onTapCancel : null,
+      child: Container(
+        decoration: BoxDecoration(
+          borderRadius: const BorderRadius.all(Radius.circular(4)),
+          border: widget.buttonType == ButtonType.tertiaryCritical
+              ? Border.all(color: borderColor)
+              : null,
+        ),
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 16),
+          width: widget.buttonSize == ButtonSize.large ? double.infinity : null,
+          decoration: BoxDecoration(
+            borderRadius: const BorderRadius.all(Radius.circular(4)),
+            color: buttonColor,
+          ),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
+            child: AnimatedSwitcher(
+              duration: const Duration(milliseconds: 175),
+              switchInCurve: Curves.easeInOutExpo,
+              switchOutCurve: Curves.easeInOutExpo,
+              child: executionState == ExecutionState.idle ||
+                      !widget.shouldSurfaceExecutionStates
+                  ? widget.buttonType.hasTrailingIcon
+                      ? Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            widget.labelText == null
+                                ? const SizedBox.shrink()
+                                : Flexible(
+                                    child: Padding(
+                                      padding: widget.icon == null
+                                          ? const EdgeInsets.symmetric(
+                                              horizontal: 8,
+                                            )
+                                          : const EdgeInsets.only(right: 16),
+                                      child: Text(
+                                        widget.labelText!,
+                                        overflow: TextOverflow.ellipsis,
+                                        maxLines: 2,
+                                        style: labelStyle,
+                                      ),
+                                    ),
+                                  ),
+                            widget.icon == null
+                                ? const SizedBox.shrink()
+                                : Icon(
+                                    widget.icon,
+                                    size: 20,
+                                    color: iconColor,
+                                  ),
+                          ],
+                        )
+                      : Builder(
+                          builder: (context) {
+                            SchedulerBinding.instance.addPostFrameCallback(
+                              (timeStamp) {
+                                final box =
+                                    context.findRenderObject() as RenderBox;
+                                widthOfButton = box.size.width;
+                              },
+                            );
+                            return Row(
+                              mainAxisSize:
+                                  widget.buttonSize == ButtonSize.large
+                                      ? MainAxisSize.max
+                                      : MainAxisSize.min,
+                              mainAxisAlignment: MainAxisAlignment.center,
+                              children: [
+                                widget.icon == null
+                                    ? const SizedBox.shrink()
+                                    : Icon(
+                                        widget.icon,
+                                        size: 20,
+                                        color: iconColor,
+                                      ),
+                                widget.icon == null || widget.labelText == null
+                                    ? const SizedBox.shrink()
+                                    : const SizedBox(width: 8),
+                                widget.labelText == null
+                                    ? const SizedBox.shrink()
+                                    : Flexible(
+                                        child: Padding(
+                                          padding: const EdgeInsets.symmetric(
+                                            horizontal: 8,
+                                          ),
+                                          child: Text(
+                                            widget.labelText!,
+                                            style: labelStyle,
+                                            maxLines: 2,
+                                            overflow: TextOverflow.ellipsis,
+                                          ),
+                                        ),
+                                      )
+                              ],
+                            );
+                          },
+                        )
+                  : executionState == ExecutionState.inProgress
+                      ? SizedBox(
+                          width: widthOfButton,
+                          child: Row(
+                            mainAxisAlignment: MainAxisAlignment.center,
+                            mainAxisSize: MainAxisSize.min,
+                            children: [
+                              progressStatus == null
+                                  ? const SizedBox.shrink()
+                                  : ValueListenableBuilder<String>(
+                                      valueListenable: progressStatus!,
+                                      builder: (
+                                        BuildContext context,
+                                        String value,
+                                        Widget? child,
+                                      ) {
+                                        return Padding(
+                                          padding:
+                                              const EdgeInsets.only(right: 8.0),
+                                          child: Text(
+                                            value,
+                                            style: lightTextTheme.smallBold,
+                                          ),
+                                        );
+                                      },
+                                    ),
+                              EnteLoadingWidget(
+                                padding: 3,
+                                color: loadingIconColor,
+                              ),
+                            ],
+                          ),
+                        )
+                      : executionState == ExecutionState.successful
+                          ? SizedBox(
+                              width: widthOfButton,
+                              child: Icon(
+                                Icons.check_outlined,
+                                size: 20,
+                                color: checkIconColor,
+                              ),
+                            )
+                          : const SizedBox.shrink(), //fallback
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _setButtonTheme() {
+    progressStatus = widget.progressStatus;
+    checkIconColor = widget.buttonStyle.checkIconColor ??
+        widget.buttonStyle.defaultIconColor;
+    loadingIconColor = widget.buttonStyle.defaultIconColor;
+    if (widget.isDisabled) {
+      buttonColor = widget.buttonStyle.disabledButtonColor ??
+          widget.buttonStyle.defaultButtonColor;
+      borderColor = widget.buttonStyle.disabledBorderColor ??
+          widget.buttonStyle.defaultBorderColor;
+      iconColor = widget.buttonStyle.disabledIconColor ??
+          widget.buttonStyle.defaultIconColor;
+      labelStyle = widget.buttonStyle.disabledLabelStyle ??
+          widget.buttonStyle.defaultLabelStyle;
+    } else {
+      buttonColor = widget.buttonStyle.defaultButtonColor;
+      borderColor = widget.buttonStyle.defaultBorderColor;
+      iconColor = widget.buttonStyle.defaultIconColor;
+      labelStyle = widget.buttonStyle.defaultLabelStyle;
+    }
+  }
+
+  bool get _shouldRegisterGestures =>
+      !widget.isDisabled && executionState == ExecutionState.idle;
+
+  void _onTap() async {
+    if (widget.onTap != null) {
+      _debouncer.run(
+        () => Future(() {
+          setState(() {
+            executionState = ExecutionState.inProgress;
+          });
+        }),
+      );
+      await widget.onTap!.call().then(
+        (value) {
+          _exception = null;
+        },
+        onError: (error, stackTrace) {
+          executionState = ExecutionState.error;
+          _exception = error as Exception;
+          _debouncer.cancelDebounce();
+        },
+      );
+      widget.shouldShowSuccessConfirmation && _debouncer.isActive()
+          ? executionState = ExecutionState.successful
+          : null;
+      _debouncer.cancelDebounce();
+      if (executionState == ExecutionState.successful) {
+        setState(() {});
+      }
+
+      // when the time taken by widget.onTap is approximately equal to the debounce
+      // time, the callback is getting executed when/after the if condition
+      // below is executing/executed which results in execution state stuck at
+      // idle state. This Future is for delaying the execution of the if
+      // condition so that the calback in the debouncer finishes execution before.
+      await Future.delayed(const Duration(milliseconds: 5));
+    }
+    if (executionState == ExecutionState.inProgress ||
+        executionState == ExecutionState.error) {
+      if (executionState == ExecutionState.inProgress) {
+        if (mounted) {
+          setState(() {
+            executionState = ExecutionState.successful;
+            Future.delayed(
+                Duration(
+                  seconds: widget.shouldSurfaceExecutionStates
+                      ? (widget.isInAlert ? 1 : 2)
+                      : 0,
+                ), () {
+              widget.isInAlert
+                  ? _popWithButtonAction(
+                      context,
+                      buttonAction: widget.buttonAction,
+                    )
+                  : null;
+              if (mounted) {
+                setState(() {
+                  executionState = ExecutionState.idle;
+                });
+              }
+            });
+          });
+        }
+      }
+      if (executionState == ExecutionState.error) {
+        setState(() {
+          executionState = ExecutionState.idle;
+          widget.isInAlert
+              ? Future.delayed(
+                  const Duration(seconds: 0),
+                  () => _popWithButtonAction(
+                    context,
+                    buttonAction: ButtonAction.error,
+                    exception: _exception,
+                  ),
+                )
+              : null;
+        });
+      }
+    } else {
+      if (widget.isInAlert) {
+        Future.delayed(
+          Duration(seconds: widget.shouldShowSuccessConfirmation ? 1 : 0),
+          () =>
+              _popWithButtonAction(context, buttonAction: widget.buttonAction),
+        );
+      }
+    }
+  }
+
+  void _popWithButtonAction(
+    BuildContext context, {
+    required ButtonAction? buttonAction,
+    Exception? exception,
+  }) {
+    if (Navigator.of(context).canPop()) {
+      Navigator.of(context).pop(ButtonResult(widget.buttonAction, exception));
+    } else if (exception != null) {
+      //This is to show the execution was unsuccessful if the dialog is manually
+      //closed before the execution completes.
+      showGenericErrorDialog(context: context);
+    }
+  }
+
+  void _onTapDown(details) {
+    setState(() {
+      buttonColor = widget.buttonStyle.pressedButtonColor ??
+          widget.buttonStyle.defaultButtonColor;
+      borderColor = widget.buttonStyle.pressedBorderColor ??
+          widget.buttonStyle.defaultBorderColor;
+      iconColor = widget.buttonStyle.pressedIconColor ??
+          widget.buttonStyle.defaultIconColor;
+      labelStyle = widget.buttonStyle.pressedLabelStyle ??
+          widget.buttonStyle.defaultLabelStyle;
+    });
+  }
+
+  void _onTapUp(details) {
+    Future.delayed(
+      const Duration(milliseconds: 84),
+      () => setState(() {
+        setAllStylesToDefault();
+      }),
+    );
+  }
+
+  void _onTapCancel() {
+    setState(() {
+      setAllStylesToDefault();
+    });
+  }
+
+  void setAllStylesToDefault() {
+    buttonColor = widget.buttonStyle.defaultButtonColor;
+    borderColor = widget.buttonStyle.defaultBorderColor;
+    iconColor = widget.buttonStyle.defaultIconColor;
+    labelStyle = widget.buttonStyle.defaultLabelStyle;
+  }
+}

lib/ui/components/buttons/icon_button_widget.dart

@@ -0,0 +1,109 @@
+import 'package:ente_auth/theme/colors.dart';
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:flutter/material.dart';
+
+enum IconButtonType {
+  primary,
+  secondary,
+  rounded,
+}
+
+class IconButtonWidget extends StatefulWidget {
+  final IconButtonType iconButtonType;
+  final IconData icon;
+  final bool disableGestureDetector;
+  final VoidCallback? onTap;
+  final Color? defaultColor;
+  final Color? pressedColor;
+  final Color? iconColor;
+  const IconButtonWidget({
+    Key? key,
+    required this.icon,
+    required this.iconButtonType,
+    this.disableGestureDetector = false,
+    this.onTap,
+    this.defaultColor,
+    this.pressedColor,
+    this.iconColor,
+  }) : super(key: key);
+
+  @override
+  State<IconButtonWidget> createState() => _IconButtonWidgetState();
+}
+
+class _IconButtonWidgetState extends State<IconButtonWidget> {
+  Color? iconStateColor;
+  @override
+  void didChangeDependencies() {
+    setState(() {
+      iconStateColor = null;
+    });
+    super.didChangeDependencies();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final bool hasPressedState = widget.onTap != null;
+    final colorTheme = getEnteColorScheme(context);
+    iconStateColor ??
+        (iconStateColor = widget.defaultColor ??
+            (widget.iconButtonType == IconButtonType.rounded
+                ? colorTheme.fillFaint
+                : null));
+    return widget.disableGestureDetector
+        ? _iconButton(colorTheme)
+        : GestureDetector(
+            onTapDown: hasPressedState ? _onTapDown : null,
+            onTapUp: hasPressedState ? _onTapUp : null,
+            onTapCancel: hasPressedState ? _onTapCancel : null,
+            onTap: widget.onTap,
+            child: _iconButton(colorTheme),
+          );
+  }
+
+  Widget _iconButton(EnteColorScheme colorTheme) {
+    return Padding(
+      padding: const EdgeInsets.all(4.0),
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 20),
+        padding: const EdgeInsets.all(8),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(20),
+          color: iconStateColor,
+        ),
+        child: Icon(
+          widget.icon,
+          color: widget.iconColor ??
+              (widget.iconButtonType == IconButtonType.secondary
+                  ? colorTheme.strokeMuted
+                  : colorTheme.strokeBase),
+          size: 24,
+        ),
+      ),
+    );
+  }
+
+  _onTapDown(details) {
+    final colorTheme = getEnteColorScheme(context);
+    setState(() {
+      iconStateColor = widget.pressedColor ??
+          (widget.iconButtonType == IconButtonType.rounded
+              ? colorTheme.fillMuted
+              : colorTheme.fillFaint);
+    });
+  }
+
+  _onTapUp(details) {
+    Future.delayed(const Duration(milliseconds: 100), () {
+      setState(() {
+        iconStateColor = null;
+      });
+    });
+  }
+
+  _onTapCancel() {
+    setState(() {
+      iconStateColor = null;
+    });
+  }
+}

lib/ui/components/components_constants.dart

@@ -0,0 +1,4 @@
+const double mobileSmallThreshold = 336;
+
+//Screen width of iPhone 14 pro max in points is taken as maximum
+const double restrictedMaxWidth = 430;

lib/ui/components/dialog_widget.dart

@@ -0,0 +1,286 @@
+import 'dart:math';
+
+import 'package:ente_auth/l10n/l10n.dart';
+import 'package:ente_auth/models/typedefs.dart';
+import 'package:ente_auth/theme/colors.dart';
+import 'package:ente_auth/theme/effects.dart';
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:ente_auth/ui/components/buttons/button_widget.dart';
+import 'package:ente_auth/ui/components/components_constants.dart';
+import 'package:ente_auth/ui/components/models/button_result.dart';
+import 'package:ente_auth/ui/components/models/button_type.dart';
+import 'package:ente_auth/ui/components/separators.dart';
+import 'package:ente_auth/ui/components/text_input_widget.dart';
+import 'package:flutter/material.dart';
+
+///Will return null if dismissed by tapping outside
+Future<ButtonResult?> showDialogWidget({
+  required BuildContext context,
+  required String title,
+  String? body,
+  required List<ButtonWidget> buttons,
+  IconData? icon,
+  bool isDismissible = true,
+}) {
+  return showDialog(
+    barrierDismissible: isDismissible,
+    barrierColor: backdropFaintDark,
+    context: context,
+    builder: (context) {
+      final widthOfScreen = MediaQuery.of(context).size.width;
+      final isMobileSmall = widthOfScreen <= mobileSmallThreshold;
+      return Padding(
+        padding: EdgeInsets.symmetric(horizontal: isMobileSmall ? 8 : 0),
+        child: Dialog(
+          insetPadding: EdgeInsets.zero,
+          child: DialogWidget(
+            title: title,
+            body: body,
+            buttons: buttons,
+            icon: icon,
+          ),
+        ),
+      );
+    },
+  );
+}
+
+class DialogWidget extends StatelessWidget {
+  final String title;
+  final String? body;
+  final List<ButtonWidget> buttons;
+  final IconData? icon;
+  const DialogWidget({
+    required this.title,
+    this.body,
+    required this.buttons,
+    this.icon,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final widthOfScreen = MediaQuery.of(context).size.width;
+    final isMobileSmall = widthOfScreen <= mobileSmallThreshold;
+    final colorScheme = getEnteColorScheme(context);
+    return Container(
+      width: min(widthOfScreen, 320),
+      padding: isMobileSmall
+          ? const EdgeInsets.all(0)
+          : const EdgeInsets.fromLTRB(6, 8, 6, 6),
+      decoration: BoxDecoration(
+        color: colorScheme.backgroundElevated,
+        boxShadow: shadowFloatLight,
+        borderRadius: const BorderRadius.all(Radius.circular(8)),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            ContentContainer(
+              title: title,
+              body: body,
+              icon: icon,
+            ),
+            const SizedBox(height: 36),
+            Actions(buttons),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class ContentContainer extends StatelessWidget {
+  final String title;
+  final String? body;
+  final IconData? icon;
+  const ContentContainer({
+    required this.title,
+    this.body,
+    this.icon,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = getEnteTextTheme(context);
+    final colorScheme = getEnteColorScheme(context);
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        icon == null
+            ? const SizedBox.shrink()
+            : Row(
+                children: [
+                  Icon(
+                    icon,
+                    size: 32,
+                  ),
+                ],
+              ),
+        icon == null ? const SizedBox.shrink() : const SizedBox(height: 19),
+        Text(title, style: textTheme.largeBold),
+        body != null ? const SizedBox(height: 19) : const SizedBox.shrink(),
+        body != null
+            ? Text(
+                body!,
+                style: textTheme.body.copyWith(color: colorScheme.textMuted),
+              )
+            : const SizedBox.shrink(),
+      ],
+    );
+  }
+}
+
+class Actions extends StatelessWidget {
+  final List<ButtonWidget> buttons;
+  const Actions(this.buttons, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: addSeparators(
+        buttons,
+        const SizedBox(
+          // In figma this white space is of height 8pts. But the Button
+          // component has 1pts of invisible border by default in code. So two
+          // 1pts borders will visually make the whitespace 8pts.
+          // Height of button component in figma = 48, in code = 50 (2pts for
+          // top + bottom border)
+          height: 6,
+        ),
+      ),
+    );
+  }
+}
+
+class TextInputDialog extends StatefulWidget {
+  final String title;
+  final String? body;
+  final String submitButtonLabel;
+  final IconData? icon;
+  final String? label;
+  final String? message;
+  final FutureVoidCallbackParamStr onSubmit;
+  final String? hintText;
+  final IconData? prefixIcon;
+  final String? initialValue;
+  final Alignment? alignMessage;
+  final int? maxLength;
+  final bool showOnlyLoadingState;
+  final TextCapitalization? textCapitalization;
+  final bool alwaysShowSuccessState;
+  final bool isPasswordInput;
+  const TextInputDialog({
+    required this.title,
+    this.body,
+    required this.submitButtonLabel,
+    required this.onSubmit,
+    this.icon,
+    this.label,
+    this.message,
+    this.hintText,
+    this.prefixIcon,
+    this.initialValue,
+    this.alignMessage,
+    this.maxLength,
+    this.textCapitalization,
+    this.showOnlyLoadingState = false,
+    this.alwaysShowSuccessState = false,
+    this.isPasswordInput = false,
+    super.key,
+  });
+
+  @override
+  State<TextInputDialog> createState() => _TextInputDialogState();
+}
+
+class _TextInputDialogState extends State<TextInputDialog> {
+  //the value of this ValueNotifier has no significance
+  final _submitNotifier = ValueNotifier(false);
+
+  @override
+  void dispose() {
+    _submitNotifier.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final widthOfScreen = MediaQuery.of(context).size.width;
+    final isMobileSmall = widthOfScreen <= mobileSmallThreshold;
+    final colorScheme = getEnteColorScheme(context);
+    return Container(
+      width: min(widthOfScreen, 320),
+      padding: isMobileSmall
+          ? const EdgeInsets.all(0)
+          : const EdgeInsets.fromLTRB(6, 8, 6, 6),
+      decoration: BoxDecoration(
+        color: colorScheme.backgroundElevated,
+        boxShadow: shadowFloatLight,
+        borderRadius: const BorderRadius.all(Radius.circular(8)),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            ContentContainer(
+              title: widget.title,
+              body: widget.body,
+              icon: widget.icon,
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 19),
+              child: TextInputWidget(
+                label: widget.label,
+                message: widget.message,
+                hintText: widget.hintText,
+                prefixIcon: widget.prefixIcon,
+                initialValue: widget.initialValue,
+                alignMessage: widget.alignMessage,
+                autoFocus: true,
+                maxLength: widget.maxLength,
+                submitNotifier: _submitNotifier,
+                onSubmit: widget.onSubmit,
+                popNavAfterSubmission: true,
+                showOnlyLoadingState: widget.showOnlyLoadingState,
+                textCapitalization: widget.textCapitalization,
+                alwaysShowSuccessState: widget.alwaysShowSuccessState,
+                isPasswordInput: widget.isPasswordInput,
+              ),
+            ),
+            const SizedBox(height: 36),
+            Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Expanded(
+                  child: ButtonWidget(
+                    buttonType: ButtonType.secondary,
+                    buttonSize: ButtonSize.small,
+                    labelText: context.l10n.cancel,
+                    isInAlert: true,
+                  ),
+                ),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: ButtonWidget(
+                    buttonSize: ButtonSize.small,
+                    buttonType: ButtonType.neutral,
+                    labelText: widget.submitButtonLabel,
+                    onTap: () async {
+                      _submitNotifier.value = !_submitNotifier.value;
+                    },
+                  ),
+                ),
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/ui/components/divider_widget.dart

@@ -0,0 +1,69 @@
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:flutter/material.dart';
+
+enum DividerType {
+  solid,
+  menu,
+  menuNoIcon,
+  bottomBar,
+}
+
+class DividerWidget extends StatelessWidget {
+  final DividerType dividerType;
+  final Color bgColor;
+  final bool divColorHasBlur;
+  final EdgeInsets? padding;
+  const DividerWidget({
+    Key? key,
+    required this.dividerType,
+    this.bgColor = Colors.transparent,
+    this.divColorHasBlur = true,
+    this.padding,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final dividerColor = divColorHasBlur
+        ? getEnteColorScheme(context).blurStrokeFaint
+        : getEnteColorScheme(context).strokeFaint;
+
+    if (dividerType == DividerType.solid) {
+      return Container(
+        color: getEnteColorScheme(context).strokeFaint,
+        width: double.infinity,
+        height: 1,
+      );
+    }
+    if (dividerType == DividerType.bottomBar) {
+      return Container(
+        color: dividerColor,
+        width: double.infinity,
+        height: 1,
+      );
+    }
+
+    return Container(
+      color: bgColor,
+      padding: padding ?? EdgeInsets.zero,
+      child: Row(
+        children: [
+          SizedBox(
+            width: dividerType == DividerType.menu
+                ? 48
+                : dividerType == DividerType.menuNoIcon
+                    ? 16
+                    : 0,
+            height: 1,
+          ),
+          Expanded(
+            child: Container(
+              color: dividerColor,
+              height: 1,
+              width: double.infinity,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/ui/components/expandable_menu_item_widget.dart

@@ -69,7 +69,7 @@ class _ExpandableMenuItemWidgetState extends State<ExpandableMenuItemWidget> {
             ),
             collapsed: const SizedBox.shrink(),
             expanded: widget.selectionOptionsWidget,
-            theme: getExpandableTheme(context),
+            theme: getExpandableTheme(),
             controller: expandableController,
           ),
         ),

lib/ui/components/menu_item_child_widgets.dart

@@ -0,0 +1,173 @@
+import 'package:ente_auth/models/execution_states.dart';
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:ente_auth/ui/common/loading_widget.dart';
+import 'package:flutter/material.dart';
+
+class TrailingWidget extends StatefulWidget {
+  final ValueNotifier executionStateNotifier;
+  final IconData? trailingIcon;
+  final Color? trailingIconColor;
+  final Widget? trailingWidget;
+  final bool trailingIconIsMuted;
+  final double trailingExtraMargin;
+  final bool showExecutionStates;
+  const TrailingWidget({
+    Key? key,
+    required this.executionStateNotifier,
+    this.trailingIcon,
+    this.trailingIconColor,
+    this.trailingWidget,
+    required this.trailingIconIsMuted,
+    required this.trailingExtraMargin,
+    required this.showExecutionStates,
+  }) : super(key: key);
+  @override
+  State<TrailingWidget> createState() => _TrailingWidgetState();
+}
+
+class _TrailingWidgetState extends State<TrailingWidget> {
+  Widget? trailingWidget;
+  @override
+  void initState() {
+    widget.showExecutionStates
+        ? widget.executionStateNotifier.addListener(_executionStateListener)
+        : null;
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    widget.executionStateNotifier.removeListener(_executionStateListener);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (trailingWidget == null || !widget.showExecutionStates) {
+      _setTrailingIcon();
+    }
+    return AnimatedSwitcher(
+      duration: const Duration(milliseconds: 175),
+      switchInCurve: Curves.easeInExpo,
+      switchOutCurve: Curves.easeOutExpo,
+      child: trailingWidget,
+    );
+  }
+
+  void _executionStateListener() {
+    final colorScheme = getEnteColorScheme(context);
+    setState(() {
+      if (widget.executionStateNotifier.value == ExecutionState.idle) {
+        _setTrailingIcon();
+      } else if (widget.executionStateNotifier.value ==
+          ExecutionState.inProgress) {
+        trailingWidget = EnteLoadingWidget(
+          color: colorScheme.strokeMuted,
+        );
+      } else if (widget.executionStateNotifier.value ==
+          ExecutionState.successful) {
+        trailingWidget = Icon(
+          Icons.check_outlined,
+          size: 22,
+          color: colorScheme.primary500,
+        );
+      } else {
+        trailingWidget = const SizedBox.shrink();
+      }
+    });
+  }
+
+  void _setTrailingIcon() {
+    if (widget.trailingIcon != null) {
+      trailingWidget = Padding(
+        padding: EdgeInsets.only(
+          right: widget.trailingExtraMargin,
+        ),
+        child: Icon(
+          widget.trailingIcon,
+          color: widget.trailingIconIsMuted
+              ? getEnteColorScheme(context).strokeMuted
+              : widget.trailingIconColor,
+        ),
+      );
+    } else {
+      trailingWidget = widget.trailingWidget ?? const SizedBox.shrink();
+    }
+  }
+}
+
+class ExpansionTrailingIcon extends StatelessWidget {
+  final bool isExpanded;
+  final IconData? trailingIcon;
+  final Color? trailingIconColor;
+  const ExpansionTrailingIcon({
+    Key? key,
+    required this.isExpanded,
+    this.trailingIcon,
+    this.trailingIconColor,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedOpacity(
+      duration: const Duration(milliseconds: 100),
+      curve: Curves.easeInOut,
+      opacity: isExpanded ? 0 : 1,
+      child: AnimatedSwitcher(
+        transitionBuilder: (child, animation) {
+          return ScaleTransition(scale: animation, child: child);
+        },
+        duration: const Duration(milliseconds: 200),
+        switchInCurve: Curves.easeOut,
+        child: isExpanded
+            ? const SizedBox.shrink()
+            : Icon(
+                trailingIcon,
+                color: trailingIconColor,
+              ),
+      ),
+    );
+  }
+}
+
+class LeadingWidget extends StatelessWidget {
+  final IconData? leadingIcon;
+  final Color? leadingIconColor;
+
+  final Widget? leadingIconWidget;
+  // leadIconSize deafult value is 20.
+  final double leadingIconSize;
+  const LeadingWidget({
+    Key? key,
+    required this.leadingIconSize,
+    this.leadingIcon,
+    this.leadingIconColor,
+    this.leadingIconWidget,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(right: 10),
+      child: SizedBox(
+        height: leadingIconSize,
+        width: leadingIconSize,
+        child: leadingIcon == null
+            ? (leadingIconWidget != null
+                ? FittedBox(
+                    fit: BoxFit.contain,
+                    child: leadingIconWidget,
+                  )
+                : const SizedBox.shrink())
+            : FittedBox(
+                fit: BoxFit.contain,
+                child: Icon(
+                  leadingIcon,
+                  color: leadingIconColor ??
+                      getEnteColorScheme(context).strokeBase,
+                ),
+              ),
+      ),
+    );
+  }
+}

lib/ui/components/menu_item_widget.dart

@@ -1,43 +1,91 @@
-import 'package:ente_auth/ente_theme_data.dart';
+import 'package:ente_auth/models/execution_states.dart';
+import 'package:ente_auth/models/typedefs.dart';
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:ente_auth/ui/components/menu_item_child_widgets.dart';
+import 'package:ente_auth/utils/debouncer.dart';
 import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 
 class MenuItemWidget extends StatefulWidget {
   final Widget captionedTextWidget;
   final bool isExpandable;
-// leading icon can be passed without specifing size of icon, this component sets size to 20x20 irrespective of passed icon's size
+
+  /// leading icon can be passed without specifing size of icon,
+  /// this component sets size to 20x20 irrespective of passed icon's size
   final IconData? leadingIcon;
   final Color? leadingIconColor;
-// trailing icon can be passed without size as default size set by flutter is what this component expects
+
+  final Widget? leadingIconWidget;
+
+  // leadIconSize deafult value is 20.
+  final double leadingIconSize;
+
+  /// trailing icon can be passed without size as default size set by
+  /// flutter is what this component expects
   final IconData? trailingIcon;
-  final Widget? trailingSwitch;
+  final Color? trailingIconColor;
+  final Widget? trailingWidget;
   final bool trailingIconIsMuted;
 
   /// If provided, add this much extra spacing to the right of the trailing icon.
   final double trailingExtraMargin;
-  final VoidCallback? onTap;
+  final FutureVoidCallback? onTap;
   final VoidCallback? onDoubleTap;
   final Color? menuItemColor;
   final bool alignCaptionedTextToLeft;
-  final double borderRadius;
+
+  // singleBorderRadius is applied to the border when it's a standalone menu item.
+  // Widget will apply singleBorderRadius if value of both isTopBorderRadiusRemoved
+  // and isBottomBorderRadiusRemoved is false. Otherwise, multipleBorderRadius will
+  // be applied
+  final double singleBorderRadius;
+  final double multipleBorderRadius;
   final Color? pressedColor;
   final ExpandableController? expandableController;
+  final bool isBottomBorderRadiusRemoved;
+  final bool isTopBorderRadiusRemoved;
+
+  /// disable gesture detector if not used
+  final bool isGestureDetectorDisabled;
+
+  ///Success state will not be shown if this flag is set to true, only idle and
+  ///loading state
+  final bool showOnlyLoadingState;
+
+  final bool surfaceExecutionStates;
+
+  ///To show success state even when execution time < debouce time, set this
+  ///flag to true. If the loading state needs to be shown and success state not,
+  ///set the showOnlyLoadingState flag to true, setting this flag to false won't
+  ///help.
+  final bool alwaysShowSuccessState;
+
   const MenuItemWidget({
     required this.captionedTextWidget,
     this.isExpandable = false,
     this.leadingIcon,
     this.leadingIconColor,
+    this.leadingIconSize = 20.0,
+    this.leadingIconWidget,
     this.trailingIcon,
-    this.trailingSwitch,
+    this.trailingIconColor,
+    this.trailingWidget,
     this.trailingIconIsMuted = false,
     this.trailingExtraMargin = 0.0,
     this.onTap,
     this.onDoubleTap,
     this.menuItemColor,
     this.alignCaptionedTextToLeft = false,
-    this.borderRadius = 4.0,
+    this.singleBorderRadius = 4.0,
+    this.multipleBorderRadius = 8.0,
     this.pressedColor,
     this.expandableController,
+    this.isBottomBorderRadiusRemoved = false,
+    this.isTopBorderRadiusRemoved = false,
+    this.isGestureDetectorDisabled = false,
+    this.showOnlyLoadingState = false,
+    this.surfaceExecutionStates = true,
+    this.alwaysShowSuccessState = false,
     Key? key,
   }) : super(key: key);
 
@@ -46,10 +94,20 @@ class MenuItemWidget extends StatefulWidget {
 }
 
 class _MenuItemWidgetState extends State<MenuItemWidget> {
+  final _debouncer = Debouncer(const Duration(milliseconds: 300));
+  ValueNotifier<ExecutionState> executionStateNotifier =
+      ValueNotifier(ExecutionState.idle);
+
   Color? menuItemColor;
+  late double borderRadius;
+
   @override
   void initState() {
     menuItemColor = widget.menuItemColor;
+    borderRadius =
+        (widget.isBottomBorderRadiusRemoved || widget.isTopBorderRadiusRemoved)
+            ? widget.multipleBorderRadius
+            : widget.singleBorderRadius;
     if (widget.expandableController != null) {
       widget.expandableController!.addListener(() {
         setState(() {});
@@ -64,20 +122,27 @@ class _MenuItemWidgetState extends State<MenuItemWidget> {
     super.didChangeDependencies();
   }
 
+  @override
+  void didUpdateWidget(covariant MenuItemWidget oldWidget) {
+    menuItemColor = widget.menuItemColor;
+    super.didUpdateWidget(oldWidget);
+  }
+
   @override
   void dispose() {
     if (widget.expandableController != null) {
       widget.expandableController!.dispose();
     }
+    executionStateNotifier.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    return widget.isExpandable
+    return widget.isExpandable || widget.isGestureDetectorDisabled
         ? menuItemWidget(context)
         : GestureDetector(
-            onTap: widget.onTap,
+            onTap: _onTap,
             onDoubleTap: widget.onDoubleTap,
             onTapDown: _onTapDown,
             onTapUp: _onTapUp,
@@ -87,20 +152,23 @@ class _MenuItemWidgetState extends State<MenuItemWidget> {
   }
 
   Widget menuItemWidget(BuildContext context) {
-    final enteColorScheme = Theme.of(context).colorScheme.enteTheme.colorScheme;
-    final borderRadius = Radius.circular(widget.borderRadius);
+    final circularRadius = Radius.circular(borderRadius);
     final isExpanded = widget.expandableController?.value;
-    final bottomBorderRadius = isExpanded != null && isExpanded
+    final bottomBorderRadius =
+        (isExpanded != null && isExpanded) || widget.isBottomBorderRadiusRemoved
+            ? const Radius.circular(0)
+            : circularRadius;
+    final topBorderRadius = widget.isTopBorderRadiusRemoved
         ? const Radius.circular(0)
-        : borderRadius;
+        : circularRadius;
     return AnimatedContainer(
       duration: const Duration(milliseconds: 20),
       width: double.infinity,
-      padding: const EdgeInsets.symmetric(horizontal: 12),
+      padding: const EdgeInsets.only(left: 16, right: 12),
       decoration: BoxDecoration(
         borderRadius: BorderRadius.only(
-          topLeft: borderRadius,
-          topRight: borderRadius,
+          topLeft: topBorderRadius,
+          topRight: topBorderRadius,
           bottomLeft: bottomBorderRadius,
           bottomRight: bottomBorderRadius,
         ),
@@ -111,63 +179,93 @@ class _MenuItemWidgetState extends State<MenuItemWidget> {
         children: [
           widget.alignCaptionedTextToLeft && widget.leadingIcon == null
               ? const SizedBox.shrink()
-              : Padding(
-                  padding: const EdgeInsets.only(right: 10),
-                  child: SizedBox(
-                    height: 20,
-                    width: 20,
-                    child: widget.leadingIcon == null
-                        ? const SizedBox.shrink()
-                        : FittedBox(
-                            fit: BoxFit.contain,
-                            child: Icon(
-                              widget.leadingIcon,
-                              color: widget.leadingIconColor,
-                            ),
-                          ),
-                  ),
+              : LeadingWidget(
+                  leadingIconSize: widget.leadingIconSize,
+                  leadingIcon: widget.leadingIcon,
+                  leadingIconColor: widget.leadingIconColor,
+                  leadingIconWidget: widget.leadingIconWidget,
                 ),
           widget.captionedTextWidget,
-          widget.expandableController != null
-              ? AnimatedOpacity(
-                  duration: const Duration(milliseconds: 100),
-                  curve: Curves.easeInOut,
-                  opacity: isExpanded! ? 0 : 1,
-                  child: AnimatedSwitcher(
-                    transitionBuilder: (child, animation) {
-                      return ScaleTransition(scale: animation, child: child);
-                    },
-                    duration: const Duration(milliseconds: 200),
-                    switchInCurve: Curves.easeOut,
-                    child: isExpanded
-                        ? const SizedBox.shrink()
-                        : Icon(widget.trailingIcon),
-                  ),
-                )
-              : widget.trailingIcon != null
-                  ? Padding(
-                      padding:
-                          EdgeInsets.only(right: widget.trailingExtraMargin),
-                      child: Icon(
-                        widget.trailingIcon,
-                        color: widget.trailingIconIsMuted
-                            ? enteColorScheme.strokeMuted
-                            : null,
-                      ),
-                    )
-                  : widget.trailingSwitch ?? const SizedBox.shrink(),
+          if (widget.expandableController != null)
+            ExpansionTrailingIcon(
+              isExpanded: isExpanded!,
+              trailingIcon: widget.trailingIcon,
+              trailingIconColor: widget.trailingIconColor,
+            )
+          else
+            TrailingWidget(
+              executionStateNotifier: executionStateNotifier,
+              trailingIcon: widget.trailingIcon,
+              trailingIconColor: widget.trailingIconColor,
+              trailingWidget: widget.trailingWidget,
+              trailingIconIsMuted: widget.trailingIconIsMuted,
+              trailingExtraMargin: widget.trailingExtraMargin,
+              showExecutionStates: widget.surfaceExecutionStates,
+              key: ValueKey(widget.trailingIcon.hashCode),
+            ),
         ],
       ),
     );
   }
 
+  Future<void> _onTap() async {
+    if (executionStateNotifier.value == ExecutionState.inProgress ||
+        executionStateNotifier.value == ExecutionState.successful) return;
+    _debouncer.run(
+      () => Future(
+        () {
+          executionStateNotifier.value = ExecutionState.inProgress;
+        },
+      ),
+    );
+    await widget.onTap?.call().then(
+      (value) {
+        widget.alwaysShowSuccessState
+            ? executionStateNotifier.value = ExecutionState.successful
+            : null;
+      },
+      onError: (error, stackTrace) => _debouncer.cancelDebounce(),
+    );
+    _debouncer.cancelDebounce();
+    if (widget.alwaysShowSuccessState) {
+      Future.delayed(const Duration(seconds: 2), () {
+        executionStateNotifier.value = ExecutionState.idle;
+      });
+      return;
+    }
+    if (executionStateNotifier.value == ExecutionState.inProgress) {
+      if (widget.showOnlyLoadingState) {
+        executionStateNotifier.value = ExecutionState.idle;
+      } else {
+        executionStateNotifier.value = ExecutionState.successful;
+        Future.delayed(const Duration(seconds: 2), () {
+          executionStateNotifier.value = ExecutionState.idle;
+        });
+      }
+    }
+  }
+
   void _onTapDown(details) {
+    if (executionStateNotifier.value == ExecutionState.inProgress ||
+        executionStateNotifier.value == ExecutionState.successful) return;
     setState(() {
-      menuItemColor = widget.pressedColor;
+      if (widget.pressedColor == null) {
+        hasPassedGestureCallbacks()
+            ? menuItemColor = getEnteColorScheme(context).fillFaintPressed
+            : menuItemColor = widget.menuItemColor;
+      } else {
+        menuItemColor = widget.pressedColor;
+      }
     });
   }
 
+  bool hasPassedGestureCallbacks() {
+    return widget.onDoubleTap != null || widget.onTap != null;
+  }
+
   void _onTapUp(details) {
+    if (executionStateNotifier.value == ExecutionState.inProgress ||
+        executionStateNotifier.value == ExecutionState.successful) return;
     Future.delayed(
       const Duration(milliseconds: 100),
       () => setState(() {
@@ -177,6 +275,8 @@ class _MenuItemWidgetState extends State<MenuItemWidget> {
   }
 
   void _onCancel() {
+    if (executionStateNotifier.value == ExecutionState.inProgress ||
+        executionStateNotifier.value == ExecutionState.successful) return;
     setState(() {
       menuItemColor = widget.menuItemColor;
     });

lib/ui/components/menu_section_description_widget.dart

@@ -0,0 +1,22 @@
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:flutter/material.dart';
+
+class MenuSectionDescriptionWidget extends StatelessWidget {
+  final String content;
+  const MenuSectionDescriptionWidget({Key? key, required this.content})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
+      child: Text(
+        content,
+        textAlign: TextAlign.left,
+        style: getEnteTextTheme(context)
+            .mini
+            .copyWith(color: getEnteColorScheme(context).textMuted),
+      ),
+    );
+  }
+}

lib/ui/components/models/button_result.dart

@@ -0,0 +1,11 @@
+import 'package:ente_auth/ui/components/buttons/button_widget.dart';
+
+class ButtonResult {
+  ///action can be null when action for the button that is returned when popping
+  ///the widget (dialog, actionSheet) which uses a ButtonWidget isn't
+  ///relevant/useful and so is not assigned a value when an instance of
+  ///ButtonWidget is created.
+  final ButtonAction? action;
+  final Exception? exception;
+  ButtonResult([this.action, this.exception]);
+}

lib/ui/components/models/button_type.dart

@@ -0,0 +1,205 @@
+import 'package:ente_auth/theme/colors.dart';
+import 'package:ente_auth/theme/text_style.dart';
+import 'package:ente_auth/ui/components/buttons/button_widget.dart';
+import 'package:flutter/material.dart';
+
+enum ButtonType {
+  primary,
+  secondary,
+  neutral,
+  trailingIcon,
+  critical,
+  tertiaryCritical,
+  trailingIconPrimary,
+  trailingIconSecondary,
+  tertiary;
+
+  bool get isPrimary =>
+      this == ButtonType.primary || this == ButtonType.trailingIconPrimary;
+
+  bool get hasTrailingIcon =>
+      this == ButtonType.trailingIcon ||
+      this == ButtonType.trailingIconPrimary ||
+      this == ButtonType.trailingIconSecondary;
+
+  bool get isSecondary =>
+      this == ButtonType.secondary || this == ButtonType.trailingIconSecondary;
+
+  bool get isCritical =>
+      this == ButtonType.critical || this == ButtonType.tertiaryCritical;
+
+  bool get isNeutral =>
+      this == ButtonType.neutral || this == ButtonType.trailingIcon;
+
+  Color defaultButtonColor(EnteColorScheme colorScheme) {
+    if (isPrimary) {
+      return colorScheme.primary500;
+    }
+    if (isSecondary) {
+      return colorScheme.fillFaint;
+    }
+    if (this == ButtonType.neutral || this == ButtonType.trailingIcon) {
+      return colorScheme.fillBase;
+    }
+    if (this == ButtonType.critical) {
+      return colorScheme.warning700;
+    }
+    if (this == ButtonType.tertiaryCritical) {
+      return Colors.transparent;
+    }
+    return Colors.transparent;
+  }
+
+  //Returning null to fallback to default color
+  Color? pressedButtonColor(EnteColorScheme colorScheme) {
+    if (isPrimary) {
+      return colorScheme.primary700;
+    }
+    if (isSecondary) {
+      return colorScheme.fillFaintPressed;
+    }
+    if (isNeutral) {
+      return colorScheme.fillBasePressed;
+    }
+    if (this == ButtonType.critical) {
+      return colorScheme.warning800;
+    }
+    return null;
+  }
+
+  //Returning null to fallback to default color
+  Color? disabledButtonColor(
+    EnteColorScheme colorScheme,
+    ButtonSize buttonSize,
+  ) {
+    if (buttonSize == ButtonSize.small &&
+        (this == ButtonType.primary ||
+            this == ButtonType.neutral ||
+            this == ButtonType.critical)) {
+      return colorScheme.fillMuted;
+    }
+    if (isPrimary || this == ButtonType.critical || isNeutral) {
+      return colorScheme.fillFaint;
+    }
+    return null;
+  }
+
+  Color defaultBorderColor(EnteColorScheme colorScheme, ButtonSize buttonSize) {
+    if (this == ButtonType.tertiaryCritical && buttonSize == ButtonSize.large) {
+      return colorScheme.warning700;
+    }
+    return Colors.transparent;
+  }
+
+  //Returning null to fallback to default color
+  Color? pressedBorderColor({
+    required EnteColorScheme colorScheme,
+    required ButtonSize buttonSize,
+  }) {
+    if (this == ButtonType.tertiaryCritical && buttonSize == ButtonSize.large) {
+      return colorScheme.warning700;
+    }
+    return null;
+  }
+
+  //Returning null to fallback to default color
+  Color? disabledBorderColor(
+    EnteColorScheme colorScheme,
+    ButtonSize buttonSize,
+  ) {
+    if (this == ButtonType.tertiaryCritical && buttonSize == ButtonSize.large) {
+      return colorScheme.strokeMuted;
+    }
+    return null;
+  }
+
+  Color defaultIconColor({
+    required EnteColorScheme colorScheme,
+    required EnteColorScheme inverseColorScheme,
+  }) {
+    if (isPrimary || this == ButtonType.critical) {
+      return strokeBaseDark;
+    }
+    if (this == ButtonType.neutral || this == ButtonType.trailingIcon) {
+      return inverseColorScheme.strokeBase;
+    }
+    if (this == ButtonType.tertiaryCritical) {
+      return colorScheme.warning500;
+    }
+    //fallback
+    return colorScheme.strokeBase;
+  }
+
+  //Returning null to fallback to default color
+  Color? pressedIconColor(EnteColorScheme colorScheme, ButtonSize buttonSize) {
+    if (this == ButtonType.tertiaryCritical) {
+      return colorScheme.warning700;
+    }
+    if (this == ButtonType.tertiary && buttonSize == ButtonSize.small) {
+      return colorScheme.fillBasePressed;
+    }
+    return null;
+  }
+
+  //Returning null to fallback to default color
+  Color? disabledIconColor(EnteColorScheme colorScheme, ButtonSize buttonSize) {
+    if (isPrimary ||
+        isSecondary ||
+        isNeutral ||
+        buttonSize == ButtonSize.small) {
+      return colorScheme.strokeMuted;
+    }
+    if (isCritical) {
+      return colorScheme.strokeFaint;
+    }
+    return null;
+  }
+
+  TextStyle defaultLabelStyle({
+    required EnteTextTheme textTheme,
+    required EnteTextTheme inverseTextTheme,
+  }) {
+    if (isPrimary || this == ButtonType.critical) {
+      return textTheme.bodyBold.copyWith(color: textBaseDark);
+    }
+    if (this == ButtonType.neutral || this == ButtonType.trailingIcon) {
+      return inverseTextTheme.bodyBold;
+    }
+    if (this == ButtonType.tertiaryCritical) {
+      return textTheme.bodyBold.copyWith(color: warning500);
+    }
+    //fallback
+    return textTheme.bodyBold;
+  }
+
+  //Returning null to fallback to default color
+  TextStyle? pressedLabelStyle(
+    EnteTextTheme textTheme,
+    EnteColorScheme colorScheme,
+    ButtonSize buttonSize,
+  ) {
+    if (this == ButtonType.tertiaryCritical) {
+      return textTheme.bodyBold.copyWith(color: colorScheme.warning700);
+    }
+    if (this == ButtonType.tertiary && buttonSize == ButtonSize.small) {
+      return textTheme.bodyBold.copyWith(color: colorScheme.fillBasePressed);
+    }
+    return null;
+  }
+
+  //Returning null to fallback to default color
+  TextStyle? disabledLabelStyle(
+    EnteTextTheme textTheme,
+    EnteColorScheme colorScheme,
+  ) {
+    return textTheme.bodyBold.copyWith(color: colorScheme.textFaint);
+  }
+
+  //Returning null to fallback to default color
+  Color? checkIconColor(EnteColorScheme colorScheme) {
+    if (isSecondary) {
+      return colorScheme.primary500;
+    }
+    return null;
+  }
+}

lib/ui/components/models/custom_button_style.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+class CustomButtonStyle {
+  Color defaultButtonColor;
+  Color? pressedButtonColor;
+  Color? disabledButtonColor;
+  Color defaultBorderColor;
+  Color? pressedBorderColor;
+  Color? disabledBorderColor;
+  Color defaultIconColor;
+  Color? pressedIconColor;
+  Color? disabledIconColor;
+  TextStyle defaultLabelStyle;
+  TextStyle? pressedLabelStyle;
+  TextStyle? disabledLabelStyle;
+  Color? checkIconColor;
+
+  CustomButtonStyle({
+    required this.defaultButtonColor,
+    this.pressedButtonColor,
+    this.disabledButtonColor,
+    required this.defaultBorderColor,
+    this.pressedBorderColor,
+    this.disabledBorderColor,
+    required this.defaultIconColor,
+    this.pressedIconColor,
+    this.disabledIconColor,
+    required this.defaultLabelStyle,
+    this.pressedLabelStyle,
+    this.disabledLabelStyle,
+    this.checkIconColor,
+  });
+}

lib/ui/components/separators.dart

@@ -0,0 +1,13 @@
+//This method returns a newly declared list with separators. It will not
+//modify the original list
+import 'package:flutter/widgets.dart';
+
+List<Widget> addSeparators(List<Widget> listOfWidgets, Widget separator) {
+  final int initialLength = listOfWidgets.length;
+  final listOfWidgetsWithSeparators = <Widget>[];
+  listOfWidgetsWithSeparators.addAll(listOfWidgets);
+  for (var i = 1; i < initialLength; i++) {
+    listOfWidgetsWithSeparators.insert((2 * i) - 1, separator);
+  }
+  return listOfWidgetsWithSeparators;
+}

lib/ui/components/text_input_widget.dart

@@ -0,0 +1,382 @@
+import 'package:ente_auth/models/execution_states.dart';
+import 'package:ente_auth/models/typedefs.dart';
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:ente_auth/ui/common/loading_widget.dart';
+import 'package:ente_auth/ui/components/separators.dart';
+import 'package:ente_auth/utils/debouncer.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+class TextInputWidget extends StatefulWidget {
+  final String? label;
+  final String? message;
+  final String? hintText;
+  final IconData? prefixIcon;
+  final String? initialValue;
+  final Alignment? alignMessage;
+  final bool? autoFocus;
+  final int? maxLength;
+
+  ///TextInputWidget will listen to this notifier and executes onSubmit when
+  ///notified.
+  final ValueNotifier? submitNotifier;
+  final bool alwaysShowSuccessState;
+  final bool showOnlyLoadingState;
+  final FutureVoidCallbackParamStr? onSubmit;
+  final VoidCallbackParamStr? onChange;
+  final bool popNavAfterSubmission;
+  final bool shouldSurfaceExecutionStates;
+  final TextCapitalization? textCapitalization;
+  final bool isPasswordInput;
+  final bool cancellable;
+  final bool shouldUnfocusOnCancelOrSubmit;
+  const TextInputWidget({
+    this.onSubmit,
+    this.onChange,
+    this.label,
+    this.message,
+    this.hintText,
+    this.prefixIcon,
+    this.initialValue,
+    this.alignMessage,
+    this.autoFocus,
+    this.maxLength,
+    this.submitNotifier,
+    this.alwaysShowSuccessState = false,
+    this.showOnlyLoadingState = false,
+    this.popNavAfterSubmission = false,
+    this.shouldSurfaceExecutionStates = true,
+    this.textCapitalization = TextCapitalization.none,
+    this.isPasswordInput = false,
+    this.cancellable = false,
+    this.shouldUnfocusOnCancelOrSubmit = false,
+    super.key,
+  });
+
+  @override
+  State<TextInputWidget> createState() => _TextInputWidgetState();
+}
+
+class _TextInputWidgetState extends State<TextInputWidget> {
+  ExecutionState executionState = ExecutionState.idle;
+  final _textController = TextEditingController();
+  final _debouncer = Debouncer(const Duration(milliseconds: 300));
+  late final ValueNotifier<bool> _obscureTextNotifier;
+
+  ///This is to pass if the TextInputWidget is in a dialog and an error is
+  ///thrown in executing onSubmit by passing it as arg in Navigator.pop()
+  Exception? _exception;
+
+  @override
+  void initState() {
+    widget.submitNotifier?.addListener(_onSubmit);
+
+    if (widget.initialValue != null) {
+      _textController.value = TextEditingValue(
+        text: widget.initialValue!,
+        selection: TextSelection.collapsed(offset: widget.initialValue!.length),
+      );
+    }
+    if (widget.onChange != null) {
+      _textController.addListener(() {
+        widget.onChange!.call(_textController.text);
+      });
+    }
+    _obscureTextNotifier = ValueNotifier(widget.isPasswordInput);
+    _obscureTextNotifier.addListener(_safeRefresh);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    widget.submitNotifier?.removeListener(_onSubmit);
+    _obscureTextNotifier.dispose();
+    _textController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (executionState == ExecutionState.successful) {
+      Future.delayed(Duration(seconds: widget.popNavAfterSubmission ? 1 : 2),
+          () {
+        setState(() {
+          executionState = ExecutionState.idle;
+        });
+      });
+    }
+    final colorScheme = getEnteColorScheme(context);
+    final textTheme = getEnteTextTheme(context);
+    var textInputChildren = <Widget>[];
+    if (widget.label != null) {
+      textInputChildren.add(Text(widget.label!));
+    }
+    textInputChildren.add(
+      ClipRRect(
+        borderRadius: const BorderRadius.all(Radius.circular(8)),
+        child: Material(
+          child: TextFormField(
+            textCapitalization: widget.textCapitalization!,
+            autofocus: widget.autoFocus ?? false,
+            controller: _textController,
+            inputFormatters: widget.maxLength != null
+                ? [LengthLimitingTextInputFormatter(50)]
+                : null,
+            obscureText: _obscureTextNotifier.value,
+            decoration: InputDecoration(
+              hintText: widget.hintText,
+              hintStyle: textTheme.body.copyWith(color: colorScheme.textMuted),
+              filled: true,
+              fillColor: colorScheme.fillFaint,
+              contentPadding: const EdgeInsets.fromLTRB(
+                12,
+                12,
+                0,
+                12,
+              ),
+              border: const UnderlineInputBorder(
+                borderSide: BorderSide.none,
+              ),
+              focusedBorder: OutlineInputBorder(
+                borderSide: BorderSide(color: colorScheme.strokeFaint),
+                borderRadius: BorderRadius.circular(8),
+              ),
+              suffixIcon: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 12),
+                child: AnimatedSwitcher(
+                  duration: const Duration(milliseconds: 175),
+                  switchInCurve: Curves.easeInExpo,
+                  switchOutCurve: Curves.easeOutExpo,
+                  child: SuffixIconWidget(
+                    key: ValueKey(executionState),
+                    executionState: executionState,
+                    shouldSurfaceExecutionStates:
+                        widget.shouldSurfaceExecutionStates,
+                    obscureTextNotifier: _obscureTextNotifier,
+                    isPasswordInput: widget.isPasswordInput,
+                    textController: _textController,
+                    isCancellable: widget.cancellable,
+                    shouldUnfocusOnCancelOrSubmit:
+                        widget.shouldUnfocusOnCancelOrSubmit,
+                  ),
+                ),
+              ),
+              prefixIconConstraints: const BoxConstraints(
+                maxHeight: 44,
+                maxWidth: 44,
+                minHeight: 44,
+                minWidth: 44,
+              ),
+              suffixIconConstraints: const BoxConstraints(
+                maxHeight: 24,
+                maxWidth: 48,
+                minHeight: 24,
+                minWidth: 48,
+              ),
+              prefixIcon: widget.prefixIcon != null
+                  ? Icon(
+                      widget.prefixIcon,
+                      color: colorScheme.strokeMuted,
+                    )
+                  : null,
+            ),
+            onEditingComplete: () {
+              _onSubmit();
+            },
+          ),
+        ),
+      ),
+    );
+    if (widget.message != null) {
+      textInputChildren.add(
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 8),
+          child: Align(
+            alignment: widget.alignMessage ?? Alignment.centerLeft,
+            child: Text(
+              widget.message!,
+              style: textTheme.small.copyWith(color: colorScheme.textMuted),
+            ),
+          ),
+        ),
+      );
+    }
+    textInputChildren =
+        addSeparators(textInputChildren, const SizedBox(height: 4));
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: textInputChildren,
+    );
+  }
+
+  void _safeRefresh() {
+    if (mounted) {
+      setState(() {});
+    }
+  }
+
+  void _onSubmit() async {
+    _debouncer.run(
+      () => Future(() {
+        setState(() {
+          executionState = ExecutionState.inProgress;
+        });
+      }),
+    );
+    if (widget.shouldUnfocusOnCancelOrSubmit) {
+      FocusScope.of(context).unfocus();
+    }
+    try {
+      await widget.onSubmit!.call(_textController.text);
+    } catch (e) {
+      executionState = ExecutionState.error;
+      _debouncer.cancelDebounce();
+      _exception = e as Exception;
+      if (!widget.popNavAfterSubmission) {
+        rethrow;
+      }
+    }
+    widget.alwaysShowSuccessState && _debouncer.isActive()
+        ? executionState = ExecutionState.successful
+        : null;
+    _debouncer.cancelDebounce();
+    if (executionState == ExecutionState.successful) {
+      setState(() {});
+    }
+
+    // when the time taken by widget.onSubmit is approximately equal to the debounce
+    // time, the callback is getting executed when/after the if condition
+    // below is executing/executed which results in execution state stuck at
+    // idle state. This Future is for delaying the execution of the if
+    // condition so that the calback in the debouncer finishes execution before.
+    await Future.delayed(const Duration(milliseconds: 5));
+    if (executionState == ExecutionState.inProgress ||
+        executionState == ExecutionState.error) {
+      if (executionState == ExecutionState.inProgress) {
+        if (mounted) {
+          if (widget.showOnlyLoadingState) {
+            setState(() {
+              executionState = ExecutionState.idle;
+            });
+            _popNavigatorStack(context);
+          } else {
+            setState(() {
+              executionState = ExecutionState.successful;
+              Future.delayed(
+                  Duration(
+                    seconds: widget.shouldSurfaceExecutionStates
+                        ? (widget.popNavAfterSubmission ? 1 : 2)
+                        : 0,
+                  ), () {
+                widget.popNavAfterSubmission
+                    ? _popNavigatorStack(context)
+                    : null;
+                if (mounted) {
+                  setState(() {
+                    executionState = ExecutionState.idle;
+                  });
+                }
+              });
+            });
+          }
+        }
+      }
+      if (executionState == ExecutionState.error) {
+        setState(() {
+          executionState = ExecutionState.idle;
+          widget.popNavAfterSubmission
+              ? Future.delayed(
+                  const Duration(seconds: 0),
+                  () => _popNavigatorStack(context, e: _exception),
+                )
+              : null;
+        });
+      }
+    } else {
+      if (widget.popNavAfterSubmission) {
+        Future.delayed(
+          Duration(seconds: widget.alwaysShowSuccessState ? 1 : 0),
+          () => _popNavigatorStack(context),
+        );
+      }
+    }
+  }
+
+  void _popNavigatorStack(BuildContext context, {Exception? e}) {
+    Navigator.of(context).canPop() ? Navigator.of(context).pop(e) : null;
+  }
+}
+
+//todo: Add clear and custom icon for suffic icon
+class SuffixIconWidget extends StatelessWidget {
+  final ExecutionState executionState;
+  final bool shouldSurfaceExecutionStates;
+  final TextEditingController textController;
+  final ValueNotifier? obscureTextNotifier;
+  final bool isPasswordInput;
+  final bool isCancellable;
+  final bool shouldUnfocusOnCancelOrSubmit;
+
+  const SuffixIconWidget({
+    required this.executionState,
+    required this.shouldSurfaceExecutionStates,
+    required this.textController,
+    this.obscureTextNotifier,
+    this.isPasswordInput = false,
+    this.isCancellable = false,
+    this.shouldUnfocusOnCancelOrSubmit = false,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final Widget trailingWidget;
+    final colorScheme = getEnteColorScheme(context);
+    if (executionState == ExecutionState.idle ||
+        !shouldSurfaceExecutionStates) {
+      if (isCancellable) {
+        trailingWidget = GestureDetector(
+          onTap: () {
+            textController.clear();
+            if (shouldUnfocusOnCancelOrSubmit) {
+              FocusScope.of(context).unfocus();
+            }
+          },
+          child: Icon(
+            Icons.cancel_rounded,
+            color: colorScheme.strokeMuted,
+          ),
+        );
+      } else if (isPasswordInput) {
+        assert(obscureTextNotifier != null);
+        trailingWidget = GestureDetector(
+          onTap: () {
+            obscureTextNotifier!.value = !obscureTextNotifier!.value;
+          },
+          child: Icon(
+            obscureTextNotifier!.value
+                ? Icons.visibility_off_outlined
+                : Icons.visibility,
+            color: obscureTextNotifier!.value ? colorScheme.strokeMuted : null,
+          ),
+        );
+      } else {
+        trailingWidget = const SizedBox.shrink();
+      }
+    } else if (executionState == ExecutionState.inProgress) {
+      trailingWidget = EnteLoadingWidget(
+        color: colorScheme.strokeMuted,
+      );
+    } else if (executionState == ExecutionState.successful) {
+      trailingWidget = Icon(
+        Icons.check_outlined,
+        size: 22,
+        color: colorScheme.primary500,
+      );
+    } else {
+      trailingWidget = const SizedBox.shrink();
+    }
+    return trailingWidget;
+  }
+}

lib/ui/components/title_bar_title_widget.dart

@@ -0,0 +1,55 @@
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:flutter/material.dart';
+
+class TitleBarTitleWidget extends StatelessWidget {
+  final String? title;
+  final bool isTitleH2;
+  final IconData? icon;
+  const TitleBarTitleWidget({
+    Key? key,
+    this.title,
+    this.isTitleH2 = false,
+    this.icon,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = getEnteTextTheme(context);
+    final colorTheme = getEnteColorScheme(context);
+    if (title != null) {
+      if (icon != null) {
+        return Row(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: <Widget>[
+            Text(
+              title!,
+              style: textTheme.h3Bold,
+              overflow: TextOverflow.ellipsis,
+              maxLines: 1,
+            ),
+            const SizedBox(width: 8),
+            Icon(icon, size: 20, color: colorTheme.strokeMuted),
+          ],
+        );
+      }
+      if (isTitleH2) {
+        return Text(
+          title!,
+          style: textTheme.h2Bold,
+          overflow: TextOverflow.ellipsis,
+          maxLines: 1,
+        );
+      } else {
+        return Text(
+          title!,
+          style: textTheme.h3Bold,
+          overflow: TextOverflow.ellipsis,
+          maxLines: 1,
+        );
+      }
+    }
+
+    return const SizedBox.shrink();
+  }
+}

lib/ui/components/title_bar_widget.dart

@@ -0,0 +1,152 @@
+import 'package:ente_auth/theme/ente_theme.dart';
+import 'package:ente_auth/ui/components/buttons/icon_button_widget.dart';
+import 'package:flutter/material.dart';
+
+class TitleBarWidget extends StatelessWidget {
+  final IconButtonWidget? leading;
+  final String? title;
+  final String? caption;
+  final Widget? flexibleSpaceTitle;
+  final String? flexibleSpaceCaption;
+  final List<Widget>? actionIcons;
+  final bool isTitleH2WithoutLeading;
+  final bool isFlexibleSpaceDisabled;
+  final bool isOnTopOfScreen;
+  final Color? backgroundColor;
+  const TitleBarWidget({
+    Key? key,
+    this.leading,
+    this.title,
+    this.caption,
+    this.flexibleSpaceTitle,
+    this.flexibleSpaceCaption,
+    this.actionIcons,
+    this.isTitleH2WithoutLeading = false,
+    this.isFlexibleSpaceDisabled = false,
+    this.isOnTopOfScreen = true,
+    this.backgroundColor,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    const toolbarHeight = 48.0;
+    final textTheme = getEnteTextTheme(context);
+    final colorTheme = getEnteColorScheme(context);
+    return SliverAppBar(
+      backgroundColor: backgroundColor,
+      primary: isOnTopOfScreen ? true : false,
+      toolbarHeight: toolbarHeight,
+      leadingWidth: 48,
+      automaticallyImplyLeading: false,
+      pinned: true,
+      expandedHeight: isFlexibleSpaceDisabled ? toolbarHeight : 102,
+      centerTitle: false,
+      titleSpacing: 4,
+      title: Padding(
+        padding: EdgeInsets.only(left: isTitleH2WithoutLeading ? 16 : 0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            title == null
+                ? const SizedBox.shrink()
+                : Text(
+                    title!,
+                    style: isTitleH2WithoutLeading
+                        ? textTheme.h2Bold
+                        : textTheme.largeBold,
+                  ),
+            caption == null || isTitleH2WithoutLeading
+                ? const SizedBox.shrink()
+                : Text(
+                    caption!,
+                    style: textTheme.mini.copyWith(color: colorTheme.textMuted),
+                  )
+          ],
+        ),
+      ),
+      actions: [
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 4),
+          child: Row(
+            children: _actionsWithPaddingInBetween(),
+          ),
+        ),
+      ],
+      leading: isTitleH2WithoutLeading
+          ? null
+          : leading ??
+              IconButtonWidget(
+                icon: Icons.arrow_back_outlined,
+                iconButtonType: IconButtonType.primary,
+                onTap: () {
+                  Navigator.pop(context);
+                },
+              ),
+      flexibleSpace: isFlexibleSpaceDisabled
+          ? null
+          : FlexibleSpaceBar(
+              background: SafeArea(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: <Widget>[
+                    const SizedBox(height: toolbarHeight),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(
+                        vertical: 4,
+                        horizontal: 16,
+                      ),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          flexibleSpaceTitle == null
+                              ? const SizedBox.shrink()
+                              : flexibleSpaceTitle!,
+                          flexibleSpaceCaption == null
+                              ? const SizedBox.shrink()
+                              : Text(
+                                  flexibleSpaceCaption!,
+                                  style: textTheme.small.copyWith(
+                                    color: colorTheme.textMuted,
+                                  ),
+                                  overflow: TextOverflow.ellipsis,
+                                  maxLines: 1,
+                                )
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+    );
+  }
+
+  _actionsWithPaddingInBetween() {
+    if (actionIcons == null) {
+      return <Widget>[const SizedBox.shrink()];
+    }
+    final actions = <Widget>[];
+    bool addWhiteSpace = false;
+    final length = actionIcons!.length;
+    int index = 0;
+    if (length == 0) {
+      return <Widget>[const SizedBox.shrink()];
+    }
+    if (length == 1) {
+      return actionIcons;
+    }
+    while (index < length) {
+      if (!addWhiteSpace) {
+        actions.add(actionIcons![index]);
+        index++;
+        addWhiteSpace = true;
+      } else {
+        actions.add(const SizedBox(width: 4));
+        addWhiteSpace = false;
+      }
+    }
+    return actions;
+  }
+}

lib/ui/home_page.dart

@@ -7,12 +7,14 @@ import 'dart:ui';
 import 'package:ente_auth/core/event_bus.dart';
 import 'package:ente_auth/ente_theme_data.dart';
 import 'package:ente_auth/events/codes_updated_event.dart';
+import 'package:ente_auth/events/trigger_logout_event.dart';
 import "package:ente_auth/l10n/l10n.dart";
 import 'package:ente_auth/models/code.dart';
 import 'package:ente_auth/onboarding/view/setup_enter_secret_key_page.dart';
 import 'package:ente_auth/services/preference_service.dart';
 import 'package:ente_auth/services/user_service.dart';
 import 'package:ente_auth/store/code_store.dart';
+import 'package:ente_auth/ui/account/logout_dialog.dart';
 import 'package:ente_auth/ui/code_widget.dart';
 import 'package:ente_auth/ui/common/loading_widget.dart';
 import 'package:ente_auth/ui/scanner_page.dart';
@@ -43,6 +45,7 @@ class _HomePageState extends State<HomePage> {
   List<Code> _codes = [];
   List<Code> _filteredCodes = [];
   StreamSubscription<CodesUpdatedEvent>? _streamSubscription;
+  StreamSubscription<TriggerLogoutEvent>? _triggerLogoutEvent;
 
   @override
   void initState() {
@@ -51,6 +54,10 @@ class _HomePageState extends State<HomePage> {
     _streamSubscription = Bus.instance.on<CodesUpdatedEvent>().listen((event) {
       _loadCodes();
     });
+    _triggerLogoutEvent =
+        Bus.instance.on<TriggerLogoutEvent>().listen((event) async {
+      await autoLogoutAlert(context);
+    });
     super.initState();
   }
 
@@ -84,6 +91,7 @@ class _HomePageState extends State<HomePage> {
   @override
   void dispose() {
     _streamSubscription?.cancel();
+    _triggerLogoutEvent?.cancel();
     _textController.removeListener(_applyFiltering);
     super.dispose();
   }
@@ -116,6 +124,7 @@ class _HomePageState extends State<HomePage> {
 
   @override
   Widget build(BuildContext context) {
+    final l10n = context.l10n;
     return WillPopScope(
       onWillPop: () async {
         if (_isSettingsOpen) {
@@ -158,8 +167,8 @@ class _HomePageState extends State<HomePage> {
                     _searchText = val;
                     _applyFiltering();
                   },
-                  decoration: const InputDecoration(
-                    hintText: 'Search...',
+                  decoration: InputDecoration(
+                    hintText: l10n.searchHint,
                     border: InputBorder.none,
                   ),
                 ),
@@ -168,7 +177,7 @@ class _HomePageState extends State<HomePage> {
               icon: _showSearchBox
                   ? const Icon(Icons.clear)
                   : const Icon(Icons.search),
-              tooltip: 'Search',
+              tooltip: l10n.search,
               onPressed: () {
                 setState(
                   () {
@@ -195,6 +204,7 @@ class _HomePageState extends State<HomePage> {
   }
 
   Widget _getBody() {
+    final l10n = context.l10n;
     if (_hasLoaded) {
       if (_filteredCodes.isEmpty && _searchText.isEmpty) {
         return _getEmptyState();
@@ -229,7 +239,7 @@ class _HomePageState extends State<HomePage> {
                               child: Padding(
                                 padding: const EdgeInsets.all(8.0),
                                 child: Text(
-                                  'Sorry, unable to generate code ${code?.issuer ?? ""}',
+                                  l10n.sorryUnableToGenCode(code?.issuer ?? ""),
                                 ),
                               ),
                             );
@@ -237,7 +247,7 @@ class _HomePageState extends State<HomePage> {
                         }),
                         itemCount: _filteredCodes.length,
                       )
-                    : const Center(child: (Text("No result"))),
+                    : Center(child: (Text(l10n.noResult))),
               ),
             ],
           );
@@ -257,7 +267,7 @@ class _HomePageState extends State<HomePage> {
       spacing: 3,
       childPadding: const EdgeInsets.all(5),
       spaceBetweenChildren: 4,
-      tooltip: 'Add Code',
+      tooltip: context.l10n.addCode,
       foregroundColor: Theme.of(context).colorScheme.fabForegroundColor,
       backgroundColor: Theme.of(context).colorScheme.fabBackgroundColor,
       overlayOpacity: 0.5,
@@ -269,14 +279,14 @@ class _HomePageState extends State<HomePage> {
           child: const Icon(Icons.qr_code),
           foregroundColor: Theme.of(context).colorScheme.fabForegroundColor,
           backgroundColor: Theme.of(context).colorScheme.fabBackgroundColor,
-          labelWidget: const SpeedDialLabelWidget("Scan a QR Code"),
+          labelWidget: SpeedDialLabelWidget(context.l10n.scanAQrCode),
           onTap: _redirectToScannerPage,
         ),
         SpeedDialChild(
           child: const Icon(Icons.keyboard),
           foregroundColor: Theme.of(context).colorScheme.fabForegroundColor,
           backgroundColor: Theme.of(context).colorScheme.fabBackgroundColor,
-          labelWidget: const SpeedDialLabelWidget("Enter details manually"),
+          labelWidget: SpeedDialLabelWidget(context.l10n.enterDetailsManually),
           onTap: _redirectToManualEntryPage,
         ),
       ],

lib/ui/lifecycle_event_handler.dart

@@ -1,11 +1,11 @@
-// @dart=2.9
+
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 
 class LifecycleEventHandler extends WidgetsBindingObserver {
-  final AsyncCallback resumeCallBack;
-  final AsyncCallback suspendingCallBack;
+  final AsyncCallback? resumeCallBack;
+  final AsyncCallback? suspendingCallBack;
 
   LifecycleEventHandler({
     this.resumeCallBack,
@@ -17,14 +17,14 @@ class LifecycleEventHandler extends WidgetsBindingObserver {
     switch (state) {
       case AppLifecycleState.resumed:
         if (resumeCallBack != null) {
-          await resumeCallBack();
+          await resumeCallBack!();
         }
         break;
       case AppLifecycleState.inactive:
       case AppLifecycleState.paused:
       case AppLifecycleState.detached:
         if (suspendingCallBack != null) {
-          await suspendingCallBack();
+          await suspendingCallBack!();
         }
         break;
     }

lib/ui/linear_progress_widget.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+class LinearProgressWidget extends StatelessWidget {
+  final Color color;
+  final double fractionOfStorage;
+  const LinearProgressWidget({
+    required this.color,
+    required this.fractionOfStorage,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constrains) {
+        return Container(
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(4),
+            color: color,
+          ),
+          width: constrains.maxWidth * fractionOfStorage,
+          height: 4,
+        );
+      },
+    );
+  }
+}

lib/ui/payment/billing_questions_widget.dart

@@ -1,153 +0,0 @@
-// @dart=2.9
-
-import 'dart:convert';
-
-import 'package:ente_auth/core/network.dart';
-import 'package:ente_auth/ente_theme_data.dart';
-import 'package:ente_auth/ui/common/loading_widget.dart';
-import 'package:expansion_tile_card/expansion_tile_card.dart';
-import 'package:flutter/material.dart';
-
-class BillingQuestionsWidget extends StatelessWidget {
-  const BillingQuestionsWidget({
-    Key key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return FutureBuilder(
-      future: Network.instance
-          .getDio()
-          .get("https://static.ente.io/faq.json")
-          .then((response) {
-        final faqItems = <FaqItem>[];
-        for (final item in response.data as List) {
-          faqItems.add(FaqItem.fromMap(item));
-        }
-        return faqItems;
-      }),
-      builder: (BuildContext context, AsyncSnapshot snapshot) {
-        if (snapshot.hasData) {
-          final faqs = <Widget>[];
-          faqs.add(
-            const Padding(
-              padding: EdgeInsets.all(24),
-              child: Text(
-                "FAQs",
-                style: TextStyle(
-                  fontSize: 18,
-                  fontWeight: FontWeight.bold,
-                ),
-              ),
-            ),
-          );
-          for (final faq in snapshot.data) {
-            faqs.add(FaqWidget(faq: faq));
-          }
-          faqs.add(
-            const Padding(
-              padding: EdgeInsets.all(16),
-            ),
-          );
-          return SingleChildScrollView(
-            child: Column(
-              children: faqs,
-            ),
-          );
-        } else {
-          return const EnteLoadingWidget();
-        }
-      },
-    );
-  }
-}
-
-class FaqWidget extends StatelessWidget {
-  const FaqWidget({
-    Key key,
-    @required this.faq,
-  }) : super(key: key);
-
-  final FaqItem faq;
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(2),
-      child: ExpansionTileCard(
-        elevation: 0,
-        title: Text(faq.q),
-        expandedTextColor: Theme.of(context).colorScheme.alternativeColor,
-        baseColor: Theme.of(context).cardColor,
-        children: [
-          Padding(
-            padding: const EdgeInsets.only(
-              left: 16,
-              right: 16,
-              bottom: 12,
-            ),
-            child: Text(
-              faq.a,
-              style: const TextStyle(
-                height: 1.5,
-              ),
-            ),
-          )
-        ],
-      ),
-    );
-  }
-}
-
-class FaqItem {
-  final String q;
-  final String a;
-  FaqItem({
-    this.q,
-    this.a,
-  });
-
-  FaqItem copyWith({
-    String q,
-    String a,
-  }) {
-    return FaqItem(
-      q: q ?? this.q,
-      a: a ?? this.a,
-    );
-  }
-
-  Map<String, dynamic> toMap() {
-    return {
-      'q': q,
-      'a': a,
-    };
-  }
-
-  factory FaqItem.fromMap(Map<String, dynamic> map) {
-    if (map == null) return null;
-
-    return FaqItem(
-      q: map['q'],
-      a: map['a'],
-    );
-  }
-
-  String toJson() => json.encode(toMap());
-
-  factory FaqItem.fromJson(String source) =>
-      FaqItem.fromMap(json.decode(source));
-
-  @override
-  String toString() => 'FaqItem(q: $q, a: $a)';
-
-  @override
-  bool operator ==(Object o) {
-    if (identical(this, o)) return true;
-
-    return o is FaqItem && o.q == q && o.a == a;
-  }
-
-  @override
-  int get hashCode => q.hashCode ^ a.hashCode;
-}

lib/ui/payment/child_subscription_widget.dart

@@ -1,149 +0,0 @@
-// @dart=2.9
-
-import 'package:ente_auth/ente_theme_data.dart';
-import 'package:ente_auth/l10n/l10n.dart';
-import 'package:ente_auth/models/user_details.dart';
-import 'package:ente_auth/services/user_service.dart';
-import 'package:ente_auth/ui/common/dialogs.dart';
-import 'package:ente_auth/utils/dialog_util.dart';
-import 'package:flutter/material.dart';
-
-class ChildSubscriptionWidget extends StatelessWidget {
-  const ChildSubscriptionWidget({
-    Key key,
-    @required this.userDetails,
-  }) : super(key: key);
-
-  final UserDetails userDetails;
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = context.l10n;
-    final String familyAdmin = userDetails.familyData.members
-        .firstWhere((element) => element.isAdmin)
-        .email;
-    return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 32),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          Center(
-            child: Text(
-              l10n.inFamilyPlanMessage,
-              style: Theme.of(context).textTheme.bodyText1,
-            ),
-          ),
-          const Padding(
-            padding: EdgeInsets.symmetric(vertical: 8),
-          ),
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 16),
-            child: RichText(
-              textAlign: TextAlign.center,
-              text: TextSpan(
-                children: [
-                  const TextSpan(
-                    text: "Please contact ",
-                  ),
-                  TextSpan(
-                    text: familyAdmin,
-                    style:
-                        const TextStyle(color: Color.fromRGBO(29, 185, 84, 1)),
-                  ),
-                  const TextSpan(
-                    text: " to manage your subscription",
-                  ),
-                ],
-                style: Theme.of(context).textTheme.bodyText1,
-              ),
-            ),
-          ),
-          const Padding(
-            padding: EdgeInsets.symmetric(vertical: 8),
-          ),
-          Image.asset(
-            "assets/family_plan_leave.png",
-            height: 256,
-          ),
-          const Padding(
-            padding: EdgeInsets.symmetric(vertical: 0),
-          ),
-          InkWell(
-            child: OutlinedButton(
-              style: OutlinedButton.styleFrom(
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(10),
-                ),
-                padding:
-                    const EdgeInsets.symmetric(vertical: 18, horizontal: 100),
-                backgroundColor: Colors.red[500],
-              ),
-              child: Text(
-                l10n.leaveFamily,
-                style: const TextStyle(
-                  fontWeight: FontWeight.bold,
-                  fontSize: 18,
-                  color: Colors.white, // same for both themes
-                ),
-                textAlign: TextAlign.center,
-              ),
-              onPressed: () async => {await _leaveFamilyPlan(context)},
-            ),
-          ),
-          Expanded(
-            child: Align(
-              alignment: Alignment.bottomCenter,
-              child: RichText(
-                textAlign: TextAlign.center,
-                text: TextSpan(
-                  children: [
-                    TextSpan(
-                      text: "Please contact ",
-                      style: Theme.of(context).textTheme.bodyText2,
-                    ),
-                    TextSpan(
-                      text: "support@ente.io",
-                      style: Theme.of(context).textTheme.bodyText2.copyWith(
-                            color: const Color.fromRGBO(29, 185, 84, 1),
-                          ),
-                    ),
-                    TextSpan(
-                      text: " for help",
-                      style: Theme.of(context).textTheme.bodyText2,
-                    ),
-                  ],
-                ),
-              ),
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-
-  Future<void> _leaveFamilyPlan(BuildContext context) async {
-    final l10n = context.l10n;
-    final choice = await showChoiceDialog(
-      context,
-      l10n.leaveFamily,
-      l10n.leaveFamilyMessage,
-      firstAction: l10n.no,
-      secondAction: l10n.yes,
-      firstActionColor: Theme.of(context).colorScheme.alternativeColor,
-      secondActionColor: Theme.of(context).colorScheme.onSurface,
-    );
-    if (choice != DialogUserChoice.secondChoice) {
-      return;
-    }
-    final dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
-    await dialog.show();
-    try {
-      await UserService.instance.leaveFamilyPlan();
-      dialog.hide();
-      Navigator.of(context).pop('');
-    } catch (e) {
-      dialog.hide();
-      showGenericErrorDialog(context);
-    }
-  }
-}

lib/ui/payment/payment_web_page.dart

@@ -1,268 +0,0 @@
-// @dart=2.9
-
-import 'dart:io';
-
-import 'package:ente_auth/ente_theme_data.dart';
-import 'package:ente_auth/l10n/l10n.dart';
-import 'package:ente_auth/models/subscription.dart';
-import 'package:ente_auth/services/billing_service.dart';
-import 'package:ente_auth/services/user_service.dart';
-import 'package:ente_auth/ui/common/loading_widget.dart';
-import 'package:ente_auth/ui/common/progress_dialog.dart';
-import 'package:ente_auth/utils/dialog_util.dart';
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_inappwebview/flutter_inappwebview.dart';
-import 'package:logging/logging.dart';
-
-class PaymentWebPage extends StatefulWidget {
-  final String planId;
-  final String actionType;
-
-  const PaymentWebPage({Key key, this.planId, this.actionType})
-      : super(key: key);
-
-  @override
-  State<StatefulWidget> createState() => _PaymentWebPageState();
-}
-
-class _PaymentWebPageState extends State<PaymentWebPage> {
-  final _logger = Logger("PaymentWebPageState");
-  final UserService userService = UserService.instance;
-  final BillingService billingService = BillingService.instance;
-  final String basePaymentUrl = kWebPaymentBaseEndpoint;
-  ProgressDialog _dialog;
-  InAppWebViewController webView;
-  double progress = 0;
-  Uri initPaymentUrl;
-
-  @override
-  void initState() {
-    userService.getPaymentToken().then((token) {
-      initPaymentUrl = _getPaymentUrl(token);
-      setState(() {});
-    });
-    if (Platform.isAndroid && kDebugMode) {
-      AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true);
-    }
-    super.initState();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = context.l10n;
-    _dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
-    if (initPaymentUrl == null) {
-      return const EnteLoadingWidget();
-    }
-    return WillPopScope(
-      onWillPop: () async => _buildPageExitWidget(context),
-      child: Scaffold(
-        appBar: AppBar(
-          title: const Text('Subscription'),
-        ),
-        body: Column(
-          children: <Widget>[
-            (progress != 1.0)
-                ? LinearProgressIndicator(value: progress)
-                : Container(),
-            Expanded(
-              child: InAppWebView(
-                initialUrlRequest: URLRequest(url: initPaymentUrl),
-                onProgressChanged:
-                    (InAppWebViewController controller, int progress) {
-                  setState(() {
-                    this.progress = progress / 100;
-                  });
-                },
-                initialOptions: InAppWebViewGroupOptions(
-                  crossPlatform: InAppWebViewOptions(
-                    useShouldOverrideUrlLoading: true,
-                  ),
-                ),
-                shouldOverrideUrlLoading: (controller, navigationAction) async {
-                  final loadingUri = navigationAction.request.url;
-                  _logger.info("Loading url $loadingUri");
-                  // handle the payment response
-                  if (_isPaymentActionComplete(loadingUri)) {
-                    await _handlePaymentResponse(loadingUri);
-                    return NavigationActionPolicy.CANCEL;
-                  }
-                  return NavigationActionPolicy.ALLOW;
-                },
-                onConsoleMessage: (controller, consoleMessage) {
-                  _logger.info(consoleMessage);
-                },
-                onLoadStart: (controller, navigationAction) async {
-                  if (!_dialog.isShowing()) {
-                    await _dialog.show();
-                  }
-                },
-                onLoadError: (controller, navigationAction, code, msg) async {
-                  if (_dialog.isShowing()) {
-                    await _dialog.hide();
-                  }
-                },
-                onLoadHttpError:
-                    (controller, navigationAction, code, msg) async {
-                  _logger.info("onHttpError with $code and msg = $msg");
-                },
-                onLoadStop: (controller, navigationAction) async {
-                  _logger.info("loadStart" + navigationAction.toString());
-                  if (_dialog.isShowing()) {
-                    await _dialog.hide();
-                  }
-                },
-              ),
-            ),
-          ].where((Object o) => o != null).toList(),
-        ),
-      ),
-    );
-  }
-
-  @override
-  void dispose() {
-    _dialog.hide();
-    super.dispose();
-  }
-
-  Uri _getPaymentUrl(String paymentToken) {
-    final queryParameters = {
-      'productID': widget.planId,
-      'paymentToken': paymentToken,
-      'action': widget.actionType,
-      'redirectURL': kWebPaymentRedirectUrl,
-    };
-    final tryParse = Uri.tryParse(kWebPaymentBaseEndpoint);
-    if (kDebugMode && kWebPaymentBaseEndpoint.startsWith("http://")) {
-      return Uri.http(tryParse.authority, tryParse.path, queryParameters);
-    } else {
-      return Uri.https(tryParse.authority, tryParse.path, queryParameters);
-    }
-  }
-
-  // show dialog to handle accidental back press.
-  Future<bool> _buildPageExitWidget(BuildContext context) {
-    return showDialog(
-      context: context,
-      builder: (context) => AlertDialog(
-        title: const Text('Are you sure you want to exit?'),
-        actions: <Widget>[
-          TextButton(
-            child: const Text(
-              'Yes',
-              style: TextStyle(
-                color: Colors.redAccent,
-              ),
-            ),
-            onPressed: () => Navigator.of(context).pop(true),
-          ),
-          TextButton(
-            child: Text(
-              'No',
-              style: TextStyle(
-                color: Theme.of(context).colorScheme.alternativeColor,
-              ),
-            ),
-            onPressed: () => Navigator.of(context).pop(false),
-          ),
-        ],
-      ),
-    );
-  }
-
-  bool _isPaymentActionComplete(Uri loadingUri) {
-    return loadingUri.toString().startsWith(kWebPaymentRedirectUrl);
-  }
-
-  Future<void> _handlePaymentResponse(Uri uri) async {
-    final queryParams = uri.queryParameters;
-    final paymentStatus = uri.queryParameters['status'] ?? '';
-    _logger.fine('handle payment response with status $paymentStatus');
-    if (paymentStatus == 'success') {
-      await _handlePaymentSuccess(queryParams);
-    } else if (paymentStatus == 'fail') {
-      final reason = queryParams['reason'] ?? '';
-      await _handlePaymentFailure(reason);
-    } else {
-      // should never reach here
-      _logger.severe("unexpected status", uri.toString());
-      showGenericErrorDialog(context);
-    }
-  }
-
-  Future<void> _handlePaymentFailure(String reason) async {
-    await showDialog(
-      context: context,
-      barrierDismissible: false,
-      builder: (context) => AlertDialog(
-        title: const Text('Payment failed'),
-        content: Text("Unfortunately your payment failed due to $reason"),
-        actions: <Widget>[
-          TextButton(
-            child: const Text('Ok'),
-            onPressed: () {
-              Navigator.of(context).pop('dialog');
-            },
-          ),
-        ],
-      ),
-    );
-    Navigator.of(context).pop(true);
-  }
-
-  // return true if verifySubscription didn't throw any exceptions
-  Future<void> _handlePaymentSuccess(Map<String, String> queryParams) async {
-    final checkoutSessionID = queryParams['session_id'] ?? '';
-    await _dialog.show();
-    try {
-      final response = await billingService.verifySubscription(
-        widget.planId,
-        checkoutSessionID,
-        paymentProvider: stripe,
-      );
-      await _dialog.hide();
-      if (response != null) {
-        final content = widget.actionType == 'buy'
-            ? 'Your purchase was successful'
-            : 'Your subscription was updated successfully';
-        await _showExitPageDialog(title: 'Thank you', content: content);
-      } else {
-        throw Exception("verifySubscription api failed");
-      }
-    } catch (error) {
-      _logger.severe(error);
-      await _dialog.hide();
-      await _showExitPageDialog(
-        title: 'Failed to verify payment status',
-        content: 'Please wait for sometime before retrying',
-      );
-    }
-  }
-
-  // warn the user to wait for sometime before trying another payment
-  Future<dynamic> _showExitPageDialog({String title, String content}) {
-    return showDialog(
-      context: context,
-      barrierDismissible: false,
-      builder: (context) => AlertDialog(
-        title: Text(title),
-        content: Text(content),
-        actions: <Widget>[
-          TextButton(
-            child: Text(
-              'Ok',
-              style: TextStyle(
-                color: Theme.of(context).colorScheme.alternativeColor,
-              ),
-            ),
-            onPressed: () {
-              Navigator.of(context).pop('dialog');
-            },
-          ),
-        ],
-      ),
-    ).then((val) => Navigator.pop(context, true));
-  }
-}

lib/ui/payment/subscription_common_widgets.dart

@@ -1,142 +0,0 @@
-// @dart=2.9
-
-import 'package:ente_auth/ente_theme_data.dart';
-import 'package:ente_auth/models/subscription.dart';
-import 'package:ente_auth/ui/payment/billing_questions_widget.dart';
-import 'package:ente_auth/utils/data_util.dart';
-import 'package:ente_auth/utils/date_time_util.dart';
-import 'package:flutter/material.dart';
-
-class SubscriptionHeaderWidget extends StatefulWidget {
-  final bool isOnboarding;
-  final int currentUsage;
-
-  const SubscriptionHeaderWidget({
-    Key key,
-    this.isOnboarding,
-    this.currentUsage,
-  }) : super(key: key);
-
-  @override
-  State<StatefulWidget> createState() {
-    return _SubscriptionHeaderWidgetState();
-  }
-}
-
-class _SubscriptionHeaderWidgetState extends State<SubscriptionHeaderWidget> {
-  @override
-  Widget build(BuildContext context) {
-    if (widget.isOnboarding) {
-      return Padding(
-        padding: const EdgeInsets.fromLTRB(20, 20, 20, 24),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Row(
-              children: [
-                Text(
-                  "Select your plan",
-                  style: Theme.of(context).textTheme.headline4,
-                ),
-              ],
-            ),
-            const SizedBox(
-              height: 10,
-            ),
-            Text(
-              "Ente preserves your memories, so they're always available to you, even if you lose your device ",
-              style: Theme.of(context).textTheme.caption,
-            ),
-          ],
-        ),
-      );
-    } else {
-      return SizedBox(
-        height: 72,
-        width: double.infinity,
-        child: Padding(
-          padding: const EdgeInsets.all(24.0),
-          child: RichText(
-            text: TextSpan(
-              children: [
-                TextSpan(
-                  text: "Current usage is ",
-                  style: Theme.of(context).textTheme.subtitle1,
-                ),
-                TextSpan(
-                  text: formatBytes(widget.currentUsage),
-                  style: Theme.of(context)
-                      .textTheme
-                      .subtitle1
-                      .copyWith(fontWeight: FontWeight.bold),
-                )
-              ],
-            ),
-          ),
-        ),
-      );
-    }
-  }
-}
-
-class ValidityWidget extends StatelessWidget {
-  final Subscription currentSubscription;
-
-  const ValidityWidget({Key key, this.currentSubscription}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    if (currentSubscription == null) {
-      return const SizedBox.shrink();
-    }
-    final endDate = getDateAndMonthAndYear(
-      DateTime.fromMicrosecondsSinceEpoch(currentSubscription.expiryTime),
-    );
-    var message = "Renews on $endDate";
-    if (currentSubscription.productID == freeProductID) {
-      message = "Free plan valid till $endDate";
-    } else if (currentSubscription.attributes?.isCancelled ?? false) {
-      message = "Your subscription will be cancelled on $endDate";
-    }
-    return Padding(
-      padding: const EdgeInsets.only(top: 8),
-      child: Text(
-        message,
-        style: Theme.of(context).textTheme.caption,
-      ),
-    );
-  }
-}
-
-class SubFaqWidget extends StatelessWidget {
-  const SubFaqWidget({Key key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Align(
-      alignment: Alignment.bottomCenter,
-      child: GestureDetector(
-        behavior: HitTestBehavior.translucent,
-        onTap: () {
-          showModalBottomSheet<void>(
-            backgroundColor: Theme.of(context).colorScheme.bgColorForQuestions,
-            barrierColor: Colors.black87,
-            context: context,
-            builder: (context) {
-              return const BillingQuestionsWidget();
-            },
-          );
-        },
-        child: Container(
-          padding: const EdgeInsets.all(40),
-          child: RichText(
-            text: TextSpan(
-              text: "Questions?",
-              style: Theme.of(context).textTheme.overline,
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}

lib/ui/payment/subscription_plan_widget.dart

@@ -1,77 +0,0 @@
-// @dart=2.9
-
-import 'package:ente_auth/utils/data_util.dart';
-import 'package:flutter/material.dart';
-
-class SubscriptionPlanWidget extends StatelessWidget {
-  const SubscriptionPlanWidget({
-    Key key,
-    @required this.storage,
-    @required this.price,
-    @required this.period,
-    this.isActive = false,
-  }) : super(key: key);
-
-  final int storage;
-  final String price;
-  final String period;
-  final bool isActive;
-
-  String _displayPrice() {
-    final result = price + (period.isNotEmpty ? " / " + period : "");
-    return result.isNotEmpty ? result : "Trial plan";
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final Color textColor = isActive ? Colors.white : Colors.black;
-    return Container(
-      width: double.infinity,
-      color: Theme.of(context).colorScheme.onPrimary,
-      padding: EdgeInsets.symmetric(horizontal: isActive ? 8 : 16, vertical: 4),
-      child: Container(
-        decoration: BoxDecoration(
-          color: isActive
-              ? const Color(0xFF22763F)
-              : const Color.fromRGBO(240, 240, 240, 1.0),
-          gradient: isActive
-              ? const LinearGradient(
-                  begin: Alignment.centerLeft,
-                  end: Alignment.centerRight,
-                  colors: [
-                    Color(0xFF2CD267),
-                    Color(0xFF1DB954),
-                  ],
-                )
-              : null,
-        ),
-        // color: Colors.yellow,
-        padding:
-            EdgeInsets.symmetric(horizontal: isActive ? 22 : 20, vertical: 18),
-        child: Column(
-          children: [
-            Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                Text(
-                  convertBytesToReadableFormat(storage),
-                  style: Theme.of(context)
-                      .textTheme
-                      .headline6
-                      .copyWith(color: textColor),
-                ),
-                Text(
-                  _displayPrice(),
-                  style: Theme.of(context).textTheme.headline6.copyWith(
-                        color: textColor,
-                        fontWeight: FontWeight.normal,
-                      ),
-                ),
-              ],
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}

lib/ui/settings/about_section_widget.dart

@@ -1,5 +1,4 @@
-// @dart=2.9
-
+import 'package:ente_auth/l10n/l10n.dart';
 import 'package:ente_auth/services/update_service.dart';
 import 'package:ente_auth/theme/ente_theme.dart';
 import 'package:ente_auth/ui/common/web_page.dart';
@@ -14,12 +13,12 @@ import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class AboutSectionWidget extends StatelessWidget {
-  const AboutSectionWidget({Key key}) : super(key: key);
+  const AboutSectionWidget({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return ExpandableMenuItemWidget(
-      title: "About",
+      title: context.l10n.about,
       selectionOptionsWidget: _getSectionOptions(context),
       leadingIcon: Icons.info_outline,
     );
@@ -28,42 +27,42 @@ class AboutSectionWidget extends StatelessWidget {
   Widget _getSectionOptions(BuildContext context) {
     return Column(
       children: [
-        sectionOptionSpacing,
-        const AboutMenuItemWidget(
-          title: "Terms",
-          url: "https://ente.io/terms",
-        ),
-        sectionOptionSpacing,
-        const AboutMenuItemWidget(
-          title: "Privacy",
-          url: "https://ente.io/privacy",
-        ),
         sectionOptionSpacing,
         MenuItemWidget(
-          captionedTextWidget: const CaptionedTextWidget(
-            title: "Source code",
+          captionedTextWidget: CaptionedTextWidget(
+            title: context.l10n.weAreOpenSource,
           ),
           pressedColor: getEnteColorScheme(context).fillFaint,
           trailingIcon: Icons.chevron_right_outlined,
           trailingIconIsMuted: true,
           onTap: () async {
-            launchUrl(Uri.parse("https://github.com/ente-io/auth"));
+            launchUrl(Uri.parse("https://github.com/ente-io/photos-app"));
           },
         ),
         sectionOptionSpacing,
+        AboutMenuItemWidget(
+          title: context.l10n.privacy,
+          url: "https://ente.io/privacy",
+        ),
+        sectionOptionSpacing,
+        AboutMenuItemWidget(
+          title: context.l10n.termsOfServicesTitle,
+          url: "https://ente.io/terms",
+        ),
+        sectionOptionSpacing,
         UpdateService.instance.isIndependent()
             ? Column(
                 children: [
                   MenuItemWidget(
-                    captionedTextWidget: const CaptionedTextWidget(
-                      title: "Check for updates",
+                    captionedTextWidget: CaptionedTextWidget(
+                      title: context.l10n.checkForUpdates,
                     ),
                     pressedColor: getEnteColorScheme(context).fillFaint,
                     trailingIcon: Icons.chevron_right_outlined,
                     trailingIconIsMuted: true,
                     onTap: () async {
                       final dialog =
-                          createProgressDialog(context, "Checking...");
+                          createProgressDialog(context, context.l10n.checking);
                       await dialog.show();
                       final shouldUpdate =
                           await UpdateService.instance.shouldUpdate();
@@ -79,7 +78,10 @@ class AboutSectionWidget extends StatelessWidget {
                           barrierColor: Colors.black.withOpacity(0.85),
                         );
                       } else {
-                        showToast(context, "You are on the latest version");
+                        showShortToast(
+                          context,
+                          context.l10n.youAreOnTheLatestVersion,
+                        );
                       }
                     },
                   ),
@@ -95,12 +97,12 @@ class AboutSectionWidget extends StatelessWidget {
 class AboutMenuItemWidget extends StatelessWidget {
   final String title;
   final String url;
-  final String webPageTitle;
+  final String? webPageTitle;
   const AboutMenuItemWidget({
-    @required this.title,
-    @required this.url,
+    required this.title,
+    required this.url,
     this.webPageTitle,
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override

lib/ui/settings/account_section_widget.dart

@@ -1,6 +1,9 @@
-// @dart=2.9
 
+
+import 'package:ente_auth/app/view/app.dart';
 import 'package:ente_auth/core/configuration.dart';
+import 'package:ente_auth/l10n/l10n.dart';
+import 'package:ente_auth/locale.dart';
 import 'package:ente_auth/services/local_authentication_service.dart';
 import 'package:ente_auth/theme/ente_theme.dart';
 import 'package:ente_auth/ui/account/change_email_dialog.dart';
@@ -10,30 +13,33 @@ import 'package:ente_auth/ui/components/captioned_text_widget.dart';
 import 'package:ente_auth/ui/components/expandable_menu_item_widget.dart';
 import 'package:ente_auth/ui/components/menu_item_widget.dart';
 import 'package:ente_auth/ui/settings/common_settings.dart';
+import 'package:ente_auth/ui/settings/language_picker.dart';
 import 'package:ente_auth/utils/dialog_util.dart';
 import 'package:ente_auth/utils/navigation_util.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_sodium/flutter_sodium.dart';
 
 class AccountSectionWidget extends StatelessWidget {
-  AccountSectionWidget({Key key}) : super(key: key);
+  AccountSectionWidget({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    final l10n = context.l10n;
     return ExpandableMenuItemWidget(
-      title: "Account",
+      title: l10n.account,
       selectionOptionsWidget: _getSectionOptions(context),
       leadingIcon: Icons.account_circle_outlined,
     );
   }
 
   Column _getSectionOptions(BuildContext context) {
+    final l10n = context.l10n;
     List<Widget> children = [];
     children.addAll([
       sectionOptionSpacing,
       MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          title: "Recovery key",
+        captionedTextWidget: CaptionedTextWidget(
+          title: l10n.recoveryKey,
         ),
         pressedColor: getEnteColorScheme(context).fillFaint,
         trailingIcon: Icons.chevron_right_outlined,
@@ -42,7 +48,7 @@ class AccountSectionWidget extends StatelessWidget {
           final hasAuthenticated = await LocalAuthenticationService.instance
               .requestLocalAuthentication(
             context,
-            "Please authenticate to view your recovery key",
+            l10n.authToViewYourRecoveryKey,
           );
           if (hasAuthenticated) {
             String recoveryKey;
@@ -50,14 +56,14 @@ class AccountSectionWidget extends StatelessWidget {
               recoveryKey =
                   Sodium.bin2hex(Configuration.instance.getRecoveryKey());
             } catch (e) {
-              showGenericErrorDialog(context);
+              showGenericErrorDialog(context: context);
               return;
             }
             routeToPage(
               context,
               RecoveryKeyPage(
                 recoveryKey,
-                "OK",
+                l10n.ok,
                 showAppBar: true,
                 onDone: () {},
               ),
@@ -67,8 +73,8 @@ class AccountSectionWidget extends StatelessWidget {
       ),
       sectionOptionSpacing,
       MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          title: "Change email",
+        captionedTextWidget: CaptionedTextWidget(
+          title: l10n.changeEmail,
         ),
         pressedColor: getEnteColorScheme(context).fillFaint,
         trailingIcon: Icons.chevron_right_outlined,
@@ -77,7 +83,7 @@ class AccountSectionWidget extends StatelessWidget {
           final hasAuthenticated = await LocalAuthenticationService.instance
               .requestLocalAuthentication(
             context,
-            "Please authenticate to change your email",
+            l10n.authToChangeYourEmail,
           );
           if (hasAuthenticated) {
             showDialog(
@@ -93,8 +99,8 @@ class AccountSectionWidget extends StatelessWidget {
       ),
       sectionOptionSpacing,
       MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          title: "Change password",
+        captionedTextWidget: CaptionedTextWidget(
+          title: l10n.changePassword,
         ),
         pressedColor: getEnteColorScheme(context).fillFaint,
         trailingIcon: Icons.chevron_right_outlined,
@@ -103,7 +109,7 @@ class AccountSectionWidget extends StatelessWidget {
           final hasAuthenticated = await LocalAuthenticationService.instance
               .requestLocalAuthentication(
             context,
-            "Please authenticate to change your password",
+            l10n.authToChangeYourPassword,
           );
           if (hasAuthenticated) {
             Navigator.of(context).push(
@@ -119,6 +125,29 @@ class AccountSectionWidget extends StatelessWidget {
         },
       ),
       sectionOptionSpacing,
+      MenuItemWidget(
+        captionedTextWidget: CaptionedTextWidget(
+          title: l10n.language,
+        ),
+        pressedColor: getEnteColorScheme(context).fillFaint,
+        trailingIcon: Icons.chevron_right_outlined,
+        trailingIconIsMuted: true,
+        onTap: () async {
+          final locale = await getLocale();
+          routeToPage(
+            context,
+            LanguageSelectorPage(
+              appSupportedLocales,
+              (locale) async {
+                await setLocale(locale);
+                App.setLocale(context, locale);
+              },
+              locale,
+            ),
+          );
+        },
+      ),
+      sectionOptionSpacing,
     ]);
     return Column(
       children: children,

lib/ui/settings/app_update_dialog.dart

@@ -1,4 +1,4 @@
-// @dart=2.9
+
 
 import 'package:ente_auth/core/configuration.dart';
 import 'package:ente_auth/core/network.dart';
@@ -9,9 +9,9 @@ import 'package:logging/logging.dart';
 import 'package:open_filex/open_filex.dart';
 
 class AppUpdateDialog extends StatefulWidget {
-  final LatestVersionInfo latestVersionInfo;
+  final LatestVersionInfo? latestVersionInfo;
 
-  const AppUpdateDialog(this.latestVersionInfo, {Key key}) : super(key: key);
+  const AppUpdateDialog(this.latestVersionInfo, {Key? key}) : super(key: key);
 
   @override
   State<AppUpdateDialog> createState() => _AppUpdateDialogState();
@@ -21,13 +21,13 @@ class _AppUpdateDialogState extends State<AppUpdateDialog> {
   @override
   Widget build(BuildContext context) {
     final List<Widget> changelog = [];
-    for (final log in widget.latestVersionInfo.changelog) {
+    for (final log in widget.latestVersionInfo!.changelog) {
       changelog.add(
         Padding(
           padding: const EdgeInsets.fromLTRB(8, 4, 0, 4),
           child: Text(
             "- " + log,
-            style: Theme.of(context).textTheme.caption.copyWith(
+            style: Theme.of(context).textTheme.caption!.copyWith(
                   fontSize: 14,
                 ),
           ),
@@ -39,7 +39,7 @@ class _AppUpdateDialogState extends State<AppUpdateDialog> {
       mainAxisSize: MainAxisSize.min,
       children: [
         Text(
-          widget.latestVersionInfo.name,
+          widget.latestVersionInfo!.name!,
           style: const TextStyle(
             fontSize: 20,
             fontWeight: FontWeight.bold,
@@ -62,8 +62,8 @@ class _AppUpdateDialogState extends State<AppUpdateDialog> {
           width: double.infinity,
           height: 64,
           child: OutlinedButton(
-            style: Theme.of(context).outlinedButtonTheme.style.copyWith(
-              textStyle: MaterialStateProperty.resolveWith<TextStyle>(
+            style: Theme.of(context).outlinedButtonTheme.style!.copyWith(
+              textStyle: MaterialStateProperty.resolveWith<TextStyle?>(
                 (Set<MaterialState> states) {
                   return Theme.of(context).textTheme.subtitle1;
                 },
@@ -101,24 +101,24 @@ class _AppUpdateDialogState extends State<AppUpdateDialog> {
 }
 
 class ApkDownloaderDialog extends StatefulWidget {
-  final LatestVersionInfo versionInfo;
+  final LatestVersionInfo? versionInfo;
 
-  const ApkDownloaderDialog(this.versionInfo, {Key key}) : super(key: key);
+  const ApkDownloaderDialog(this.versionInfo, {Key? key}) : super(key: key);
 
   @override
   State<ApkDownloaderDialog> createState() => _ApkDownloaderDialogState();
 }
 
 class _ApkDownloaderDialogState extends State<ApkDownloaderDialog> {
-  String _saveUrl;
-  double _downloadProgress;
+  String? _saveUrl;
+  double? _downloadProgress;
 
   @override
   void initState() {
     super.initState();
     _saveUrl = Configuration.instance.getTempDirectory() +
         "ente-" +
-        widget.versionInfo.name +
+        widget.versionInfo!.name! +
         ".apk";
     _downloadApk();
   }
@@ -148,11 +148,11 @@ class _ApkDownloaderDialogState extends State<ApkDownloaderDialog> {
   Future<void> _downloadApk() async {
     try {
       await Network.instance.getDio().download(
-        widget.versionInfo.url,
+        widget.versionInfo!.url!,
         _saveUrl,
         onReceiveProgress: (count, _) {
           setState(() {
-            _downloadProgress = count / widget.versionInfo.size;
+            _downloadProgress = count / widget.versionInfo!.size!;
           });
         },
       );

lib/ui/settings/app_version_widget.dart

@@ -1,12 +1,10 @@
-// @dart=2.9
-
 import 'package:ente_auth/utils/dialog_util.dart';
 import 'package:flutter/material.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 
 class AppVersionWidget extends StatefulWidget {
   const AppVersionWidget({
-    Key key,
+    Key? key,
   }) : super(key: key);
 
   @override
@@ -18,7 +16,7 @@ class _AppVersionWidgetState extends State<AppVersionWidget> {
   static const kConsecutiveTapTimeWindowInMilliseconds = 2000;
   static const kDummyDelayDurationInMilliseconds = 1500;
 
-  int _lastTap;
+  int? _lastTap;
   int _consecutiveTaps = 0;
 
   @override
@@ -43,14 +41,14 @@ class _AppVersionWidgetState extends State<AppVersionWidget> {
         }
         _lastTap = now;
       },
-      child: FutureBuilder(
+      child: FutureBuilder<String>(
         future: _getAppVersion(),
         builder: (context, snapshot) {
           if (snapshot.hasData) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: Text(
-                "Version: " + snapshot.data,
+                "Version: " + snapshot.data!,
                 style: Theme.of(context).textTheme.caption,
               ),
             );

lib/ui/settings/common_settings.dart

@@ -1,18 +1,10 @@
-// @dart=2.9
-
-import 'dart:io';
-
 import 'package:expandable/expandable.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
-Widget sectionOptionDivider = Padding(
-  padding: EdgeInsets.all(Platform.isIOS ? 4 : 2),
-);
-
 Widget sectionOptionSpacing = const SizedBox(height: 6);
 
-ExpandableThemeData getExpandableTheme(BuildContext context) {
+ExpandableThemeData getExpandableTheme() {
   return const ExpandableThemeData(
     hasIcon: false,
     useInkWell: false,

lib/ui/settings/danger_section_widget.dart

@@ -1,5 +1,4 @@
-// @dart=2.9
-
+import 'package:ente_auth/l10n/l10n.dart';
 import 'package:ente_auth/services/user_service.dart';
 import 'package:ente_auth/theme/ente_theme.dart';
 import 'package:ente_auth/ui/account/delete_account_page.dart';
@@ -7,16 +6,17 @@ import 'package:ente_auth/ui/components/captioned_text_widget.dart';
 import 'package:ente_auth/ui/components/expandable_menu_item_widget.dart';
 import 'package:ente_auth/ui/components/menu_item_widget.dart';
 import 'package:ente_auth/ui/settings/common_settings.dart';
+import 'package:ente_auth/utils/dialog_util.dart';
 import 'package:ente_auth/utils/navigation_util.dart';
 import 'package:flutter/material.dart';
 
 class DangerSectionWidget extends StatelessWidget {
-  const DangerSectionWidget({Key key}) : super(key: key);
+  const DangerSectionWidget({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return ExpandableMenuItemWidget(
-      title: "Exit",
+      title: context.l10n.exit,
       selectionOptionsWidget: _getSectionOptions(context),
       leadingIcon: Icons.logout_outlined,
     );
@@ -27,25 +27,25 @@ class DangerSectionWidget extends StatelessWidget {
       children: [
         sectionOptionSpacing,
         MenuItemWidget(
-          captionedTextWidget: const CaptionedTextWidget(
-            title: "Logout",
+          captionedTextWidget: CaptionedTextWidget(
+            title: context.l10n.logout,
           ),
           pressedColor: getEnteColorScheme(context).fillFaint,
           trailingIcon: Icons.chevron_right_outlined,
           trailingIconIsMuted: true,
-          onTap: () {
+          onTap: () async {
             _onLogoutTapped(context);
           },
         ),
         sectionOptionSpacing,
         MenuItemWidget(
-          captionedTextWidget: const CaptionedTextWidget(
-            title: "Delete account",
+          captionedTextWidget: CaptionedTextWidget(
+            title: context.l10n.deleteAccount,
           ),
           pressedColor: getEnteColorScheme(context).fillFaint,
           trailingIcon: Icons.chevron_right_outlined,
           trailingIconIsMuted: true,
-          onTap: () {
+          onTap: () async {
             routeToPage(context, const DeleteAccountPage());
           },
         ),
@@ -54,41 +54,14 @@ class DangerSectionWidget extends StatelessWidget {
     );
   }
 
-  Future<void> _onLogoutTapped(BuildContext context) async {
-    final AlertDialog alert = AlertDialog(
-      title: const Text(
-        "Logout",
-        style: TextStyle(
-          color: Colors.red,
-        ),
-      ),
-      content: const Text("Are you sure you want to logout?"),
-      actions: [
-        TextButton(
-          child: const Text(
-            "Yes, logout",
-            style: TextStyle(
-              color: Colors.red,
-            ),
-          ),
-          onPressed: () async {
-            Navigator.of(context, rootNavigator: true).pop('dialog');
-            await UserService.instance.logout(context);
-          },
-        ),
-        TextButton(
-          child: const Text("No"),
-          onPressed: () {
-            Navigator.of(context, rootNavigator: true).pop('dialog');
-          },
-        ),
-      ],
-    );
-
-    showDialog(
-      context: context,
-      builder: (BuildContext context) {
-        return alert;
+  void _onLogoutTapped(BuildContext context) {
+    showChoiceActionSheet(
+      context,
+      title: context.l10n.areYouSureYouWantToLogout,
+      firstButtonLabel: context.l10n.yesLogout,
+      isCritical: true,
+      firstButtonOnTap: () async {
+        await UserService.instance.logout(context);
       },
     );
   }

lib/ui/settings/data_section_widget.dart

@@ -1,5 +1,3 @@
-// @dart=2.9
-
 import 'dart:async';
 import 'dart:io';
 import 'dart:ui';
@@ -13,8 +11,10 @@ import 'package:ente_auth/services/local_authentication_service.dart';
 import 'package:ente_auth/store/code_store.dart';
 import 'package:ente_auth/theme/ente_theme.dart';
 import 'package:ente_auth/ui/components/captioned_text_widget.dart';
+import 'package:ente_auth/ui/components/dialog_widget.dart';
 import 'package:ente_auth/ui/components/expandable_menu_item_widget.dart';
 import 'package:ente_auth/ui/components/menu_item_widget.dart';
+import 'package:ente_auth/ui/components/models/button_type.dart';
 import 'package:ente_auth/ui/settings/common_settings.dart';
 import 'package:ente_auth/utils/dialog_util.dart';
 import 'package:file_picker/file_picker.dart';
@@ -29,24 +29,26 @@ class DataSectionWidget extends StatelessWidget {
     Configuration.instance.getTempDirectory() + "ente-authenticator-codes.txt",
   );
 
-  DataSectionWidget({Key key}) : super(key: key);
+  DataSectionWidget({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    final l10n = context.l10n;
     return ExpandableMenuItemWidget(
-      title: "Data",
+      title: l10n.data,
       selectionOptionsWidget: _getSectionOptions(context),
       leadingIcon: Icons.key_outlined,
     );
   }
 
   Column _getSectionOptions(BuildContext context) {
+    final l10n = context.l10n;
     List<Widget> children = [];
     children.addAll([
       sectionOptionSpacing,
       MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          title: "Import codes",
+        captionedTextWidget: CaptionedTextWidget(
+          title: l10n.importCodes,
         ),
         pressedColor: getEnteColorScheme(context).fillFaint,
         trailingIcon: Icons.chevron_right_outlined,
@@ -57,8 +59,8 @@ class DataSectionWidget extends StatelessWidget {
       ),
       sectionOptionSpacing,
       MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          title: "Export codes",
+        captionedTextWidget: CaptionedTextWidget(
+          title: l10n.exportCodes,
         ),
         pressedColor: getEnteColorScheme(context).fillFaint,
         trailingIcon: Icons.chevron_right_outlined,
@@ -75,17 +77,18 @@ class DataSectionWidget extends StatelessWidget {
   }
 
   Future<void> _showImportInstructionDialog(BuildContext context) async {
+    final l10n = context.l10n;
     final AlertDialog alert = AlertDialog(
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
       title: Text(
-        "Import codes",
+        l10n.importCodes,
         style: Theme.of(context).textTheme.headline6,
       ),
       content: SingleChildScrollView(
         child: Column(
           children: [
-            const Text(
-              "Please select a file that contains a list of your codes in the following format",
+            Text(
+              l10n.importInstruction,
             ),
             const SizedBox(
               height: 20,
@@ -107,17 +110,15 @@ class DataSectionWidget extends StatelessWidget {
             const SizedBox(
               height: 20,
             ),
-            const Text(
-              "The codes can be separated by a comma or a new line",
-            ),
+            Text(l10n.importCodeDelimiterInfo),
           ],
         ),
       ),
       actions: [
         TextButton(
-          child: const Text(
-            "Cancel",
-            style: TextStyle(
+          child: Text(
+            l10n.cancel,
+            style: const TextStyle(
               color: Colors.red,
             ),
           ),
@@ -126,9 +127,7 @@ class DataSectionWidget extends StatelessWidget {
           },
         ),
         TextButton(
-          child: const Text(
-            "Select file",
-          ),
+          child: Text(l10n.selectFile),
           onPressed: () {
             Navigator.of(context, rootNavigator: true).pop('dialog');
             _pickImportFile(context);
@@ -150,17 +149,17 @@ class DataSectionWidget extends StatelessWidget {
     final AlertDialog alert = AlertDialog(
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
       title: Text(
-        "Warning",
+        context.l10n.warning,
         style: Theme.of(context).textTheme.headline6,
       ),
-      content: const Text(
-        "The exported file contains sensitive information. Please store this safely.",
+      content: Text(
+        context.l10n.exportWarningDesc,
       ),
       actions: [
         TextButton(
-          child: const Text(
-            "I understand",
-            style: TextStyle(
+          child: Text(
+            context.l10n.iUnderStand,
+            style: const TextStyle(
               color: Colors.red,
             ),
           ),
@@ -170,8 +169,8 @@ class DataSectionWidget extends StatelessWidget {
           },
         ),
         TextButton(
-          child: const Text(
-            "Cancel",
+          child: Text(
+            context.l10n.cancel,
           ),
           onPressed: () {
             Navigator.of(context, rootNavigator: true).pop('dialog');
@@ -190,11 +189,8 @@ class DataSectionWidget extends StatelessWidget {
   }
 
   Future<void> _exportCodes(BuildContext context) async {
-    final hasAuthenticated =
-        await LocalAuthenticationService.instance.requestLocalAuthentication(
-      context,
-      "Please authenticate to export your codes",
-    );
+    final hasAuthenticated = await LocalAuthenticationService.instance
+        .requestLocalAuthentication(context, context.l10n.authToExportCodes);
     if (!hasAuthenticated) {
       return;
     }
@@ -217,14 +213,14 @@ class DataSectionWidget extends StatelessWidget {
 
   Future<void> _pickImportFile(BuildContext context) async {
     final l10n = context.l10n;
-    FilePickerResult result = await FilePicker.platform.pickFiles();
+    FilePickerResult? result = await FilePicker.platform.pickFiles();
     if (result == null) {
       return;
     }
-    final dialog = createProgressDialog(context, l10n.pleaseWaitTitle);
+    final dialog = createProgressDialog(context, l10n.pleaseWait);
     await dialog.show();
     try {
-      File file = File(result.files.single.path);
+      File file = File(result.files.single.path!);
       final codes = await file.readAsString();
       List<String> splitCodes = codes.split(",");
       if (splitCodes.length == 1) {
@@ -242,42 +238,29 @@ class DataSectionWidget extends StatelessWidget {
         await CodeStore.instance.addCode(code, shouldSync: false);
       }
       unawaited(AuthenticatorService.instance.sync());
-      await dialog.hide();
+
+      final DialogWidget dialog = choiceDialog(
+        title: context.l10n.importSuccessTitle,
+        body: context.l10n.importSuccessDesc(parsedCodes.length),
+        // body: "You have imported " + parsedCodes.length.toString() + " codes!",
+        firstButtonLabel: l10n.ok,
+        firstButtonOnTap: () async {
+          Navigator.of(context, rootNavigator: true).pop('dialog');
+        },
+        firstButtonType: ButtonType.primary,
+      );
       await showConfettiDialog(
         context: context,
-        builder: (BuildContext context) {
-          return AlertDialog(
-            shape:
-                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
-            title: Text(
-              "Yay!",
-              style: Theme.of(context).textTheme.headline6,
-            ),
-            content: Text(
-              "You have imported " + parsedCodes.length.toString() + " codes!",
-            ),
-            actions: [
-              TextButton(
-                child: Text(
-                  l10n.ok,
-                  style: TextStyle(
-                    color: Theme.of(context).colorScheme.onSurface,
-                  ),
-                ),
-                onPressed: () {
-                  Navigator.of(context, rootNavigator: true).pop('dialog');
-                },
-              ),
-            ],
-          );
+        dialogBuilder: (BuildContext context) {
+          return dialog;
         },
       );
     } catch (e) {
       await dialog.hide();
       await showErrorDialog(
         context,
-        "Sorry",
-        "Could not parse the selected file.\nPlease write to support@ente.io if you need help!",
+        context.l10n.sorry,
+        context.l10n.importFailureDesc,
       );
     }
   }