add users

lib/config/bloc_config.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:selfprivacy/logic/cubit/services/services_cubit.dart';
+import 'package:selfprivacy/logic/cubit/users/users_cubit.dart';
 
 class BlocAndProviderConfig extends StatelessWidget {
   const BlocAndProviderConfig({Key key, this.child}) : super(key: key);
@@ -14,6 +15,9 @@ class BlocAndProviderConfig extends StatelessWidget {
         BlocProvider<ServicesCubit>(
           create: (BuildContext context) => ServicesCubit(),
         ),
+        BlocProvider<UsersCubit>(
+          create: (BuildContext context) => UsersCubit(),
+        ),
       ],
       child: child,
     );

lib/config/brand_theme.dart

@@ -8,12 +8,25 @@ final theme = ThemeData(
   primaryColor: BrandColors.primary,
   brightness: Brightness.light,
   scaffoldBackgroundColor: BrandColors.scaffoldBackground,
+  inputDecorationTheme: InputDecorationTheme(
+    border: InputBorder.none,
+    contentPadding: EdgeInsets.all(16),
+    enabledBorder: OutlineInputBorder(
+      borderRadius: BorderRadius.all(Radius.circular(4)),
+      borderSide: BorderSide(color: BrandColors.inputInactive),
+    ),
+    focusedBorder: OutlineInputBorder(
+      borderRadius: BorderRadius.all(Radius.circular(4)),
+      borderSide: BorderSide(color: BrandColors.blue),
+    ),
+  ),
   textTheme: GoogleFonts.interTextTheme(
     TextTheme(
       headline1: headline1Style,
       headline2: headline2Style,
       caption: captionStyle,
       bodyText1: body1Style,
+      subtitle1: TextStyle(fontSize: 15, height: 1.6), // text input style
     ),
   ),
 );

lib/config/text_themes.dart

@@ -39,3 +39,5 @@ final body1Style = defaultTextStyle;
 final body2Style = defaultTextStyle.copyWith(
   color: BrandColors.textColor2,
 );
+
+final smallStyle = defaultTextStyle.copyWith(fontSize: 11, height: 1.45);

lib/logic/cubit/users/users_cubit.dart

@@ -0,0 +1,43 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:selfprivacy/logic/models/user.dart';
+import 'package:selfprivacy/utils/password_generator.dart';
+export 'package:provider/provider.dart';
+
+part 'users_state.dart';
+
+class UsersCubit extends Cubit<UsersState> {
+  UsersCubit() : super(UsersState(initMockUsers));
+
+  void add(User user) {
+    var users = state.users;
+    users.add(user);
+
+    emit(UsersState(users));
+  }
+
+  void remove(User user) {
+    var users = state.users;
+    users.remove(user);
+
+    emit(UsersState(users));
+  }
+}
+
+final initMockUsers = <User>[
+  User(login: 'Heartbreaking.Goose', password: genPass()),
+  User(login: 'Alma.lawson', password: genPass()),
+  User(login: 'Bee.gees', password: genPass()),
+  User(login: 'Bim.jennings', password: genPass()),
+  User(login: 'Debra.holt', password: genPass()),
+  User(login: 'Georgia.young', password: genPass()),
+  User(login: 'Kenzi.lawson', password: genPass()),
+  User(login: 'Le.jennings', password: genPass()),
+  User(login: 'Kirill.Zh', password: genPass()),
+  User(login: 'Tina.Bolton', password: genPass()),
+  User(login: 'Rebekah.Lynn', password: genPass()),
+  User(login: 'Aleena.Armstrong', password: genPass()),
+  User(login: 'Rosemary.Williams', password: genPass()),
+  User(login: 'Sullivan.Nixon', password: genPass()),
+  User(login: 'Aleena.Armstrong', password: genPass()),
+];

lib/logic/cubit/users/users_state.dart

@@ -0,0 +1,10 @@
+part of 'users_cubit.dart';
+
+class UsersState extends Equatable {
+  const UsersState(this.users);
+
+  final List<User> users;
+
+  @override
+  List<Object> get props => users;
+}

lib/logic/models/user.dart

@@ -0,0 +1,20 @@
+import 'dart:ui';
+
+import 'package:equatable/equatable.dart';
+import 'package:flutter/foundation.dart';
+import 'package:selfprivacy/utils/color_utils.dart';
+
+class User extends Equatable {
+  User({
+    @required this.login,
+    @required this.password,
+  });
+
+  final String login;
+  final String password;
+
+  @override
+  List<Object> get props => [login, password];
+
+  Color get color => stringToColor(login);
+}

lib/main.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:selfprivacy/ui/pages/onboarding/onboarding.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:selfprivacy/ui/pages/rootRoute.dart';
 
 import 'config/bloc_config.dart';
 import 'config/brand_theme.dart';
@@ -19,6 +20,8 @@ void main() {
   );
 }
 
+var _showOnbording = false;
+
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
@@ -32,7 +35,7 @@ class MyApp extends StatelessWidget {
         debugShowCheckedModeBanner: false,
         title: 'SelfPrivacy',
         theme: theme,
-        home: OnboardingPage(),
+        home: _showOnbording ? OnboardingPage() : RootPage(),
       ),
     );
   }

lib/ui/components/brand_button/brand_button.dart

@@ -2,8 +2,9 @@ import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:selfprivacy/config/brand_colors.dart';
+import 'package:selfprivacy/utils/extensions/text_extension.dart';
 
-enum BrandButtonTypes { rised, text }
+enum BrandButtonTypes { rised, text, iconText }
 
 class BrandButton extends StatelessWidget {
   const BrandButton({
@@ -11,11 +12,13 @@ class BrandButton extends StatelessWidget {
     this.onPressed,
     this.type,
     this.title,
+    this.icon,
   }) : super(key: key);
 
   final VoidCallback onPressed;
   final BrandButtonTypes type;
   final String title;
+  final Icon icon;
 
   static rised({
     Key key,
@@ -41,6 +44,19 @@ class BrandButton extends StatelessWidget {
         type: BrandButtonTypes.text,
       );
 
+  static iconText({
+    Key key,
+    @required VoidCallback onPressed,
+    @required String title,
+    @required Icon icon,
+  }) =>
+      BrandButton(
+        key: key,
+        onPressed: onPressed,
+        title: title,
+        type: BrandButtonTypes.iconText,
+        icon: icon,
+      );
   @override
   Widget build(BuildContext context) {
     switch (type) {
@@ -55,6 +71,13 @@ class BrandButton extends StatelessWidget {
           onPressed: onPressed,
         );
         break;
+      case BrandButtonTypes.iconText:
+        return _IconTextButton(
+          title: title,
+          onPressed: onPressed,
+          icon: icon,
+        );
+        break;
     }
 
     return null;
@@ -135,3 +158,39 @@ class _TextButton extends StatelessWidget {
     );
   }
 }
+
+class _IconTextButton extends StatelessWidget {
+  const _IconTextButton({Key key, this.onPressed, this.title, this.icon})
+      : super(key: key);
+
+  final VoidCallback onPressed;
+  final String title;
+  final Icon icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: onPressed,
+        child: Container(
+          height: 48,
+          width: double.infinity,
+          alignment: Alignment.center,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                title,
+              ).body1,
+              Padding(
+                padding: const EdgeInsets.all(12.0),
+                child: icon,
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/ui/components/brand_header/brand_header.dart

@@ -15,9 +15,9 @@ class BrandHeader extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
+      height: 52,
+      alignment: Alignment.centerLeft,
       padding: EdgeInsets.only(
-        top: hasBackButton ? 4 : 17,
-        bottom: hasBackButton ? 7 : 20,
         left: hasBackButton ? 1 : 15,
       ),
       child: Container(

lib/ui/components/brand_icons/brand_icons.dart

@@ -35,6 +35,8 @@ class BrandIcons {
       IconData(0xe805, fontFamily: _kFontFam, fontPackage: _kFontPkg);
   static const IconData help =
       IconData(0xe806, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData refresh_1 =
+      IconData(0xe807, fontFamily: _kFontFam, fontPackage: _kFontPkg);
   static const IconData refresh =
       IconData(0xe80a, fontFamily: _kFontFam, fontPackage: _kFontPkg);
   static const IconData settings =

lib/ui/components/brand_modal_sheet/brand_modal_sheet.dart

@@ -10,7 +10,15 @@ class BrandModalSheet extends StatelessWidget {
   final Widget child;
   @override
   Widget build(BuildContext context) {
+    return DraggableScrollableSheet(
+        minChildSize: 0.5,
+        initialChildSize: 1,
+        maxChildSize: 1,
+        builder: (context, scrollController) {
           return SingleChildScrollView(
+            controller: scrollController,
+            physics: ClampingScrollPhysics(),
+            child: Container(
               child: Column(
                 children: [
                   Padding(
@@ -25,17 +33,21 @@ class BrandModalSheet extends StatelessWidget {
                     ),
                   ),
                   Container(
-            constraints: BoxConstraints(minHeight: 400),
+                    constraints: BoxConstraints(
+                      minHeight: MediaQuery.of(context).size.height - 32 - 4,
+                    ),
                     decoration: BoxDecoration(
-              borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+                      borderRadius:
+                          BorderRadius.vertical(top: Radius.circular(20)),
                       color: BrandColors.white,
                     ),
                     width: double.infinity,
-            padding: EdgeInsets.symmetric(vertical: 40, horizontal: 15),
                     child: child,
                   ),
                 ],
               ),
+            ),
           );
+        });
   }
 }

lib/ui/components/brand_tab_bar/brand_tab_bar.dart

@@ -39,7 +39,7 @@ class _BottomTabBarState extends State<BottomTabBar> {
           crossAxisAlignment: CrossAxisAlignment.stretch,
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            _getIconButton('Серверы', BrandIcons.server, 0),
+            _getIconButton('Провайдеры', BrandIcons.server, 0),
             _getIconButton('Сервисы', BrandIcons.box, 1),
             _getIconButton('Пользователи', BrandIcons.users, 2),
             _getIconButton('Еще', BrandIcons.menu, 3),

lib/ui/pages/about/about.dart

@@ -11,20 +11,18 @@ class AboutPage extends StatelessWidget {
   Widget build(BuildContext context) {
     return SafeArea(
       child: Scaffold(
+        appBar: PreferredSize(
+          child: BrandHeader(title: 'О проекте', hasBackButton: true),
+          preferredSize: Size.fromHeight(52),
+        ),
         body: ListView(
-          children: [
-            BrandHeader(title: 'О проекте', hasBackButton: true),
-            Padding(
           padding: brandPagePadding2,
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             BrandDivider(),
             SizedBox(height: 20),
             Text('О проекте').h3,
             SizedBox(height: 10),
-                  Text('Всё больше организаций хотят владеть нашими данными')
+            Text('Всё больше организаций хотят владеть нашими данными').body1,
-                      .body1,
             SizedBox(height: 10),
             Text('А мы сами хотим распоряжаться своими данными на своем сервере.')
                 .body1,
@@ -33,8 +31,7 @@ class AboutPage extends StatelessWidget {
             SizedBox(height: 10),
             Text('Миссия проекта').h3,
             SizedBox(height: 10),
-                  Text(
+            Text('Цифровая независимость и приватность доступная каждому'),
-                      'Цифровая независимость и приватность доступная каждому'),
             SizedBox(height: 20),
             BrandDivider(),
             SizedBox(height: 10),
@@ -48,9 +45,6 @@ class AboutPage extends StatelessWidget {
           ],
         ),
       ),
-          ],
-        ),
-      ),
     );
   }
 }

lib/ui/pages/info/info.dart

@@ -12,14 +12,12 @@ class InfoPage extends StatelessWidget {
   Widget build(BuildContext context) {
     return SafeArea(
       child: Scaffold(
+        appBar: PreferredSize(
+          child: BrandHeader(title: 'О приложении', hasBackButton: true),
+          preferredSize: Size.fromHeight(52),
+        ),
         body: ListView(
-          children: [
-            BrandHeader(title: 'О приложении', hasBackButton: true),
-            Padding(
           padding: brandPagePadding2,
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.start,
-                crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
             BrandDivider(),
             SizedBox(height: 10),
@@ -33,9 +31,6 @@ class InfoPage extends StatelessWidget {
           ],
         ),
       ),
-          ],
-        ),
-      ),
     );
   }
 

lib/ui/pages/more/more.dart

@@ -15,9 +15,13 @@ class MorePage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListView(
+    return Scaffold(
+      appBar: PreferredSize(
+        child: BrandHeader(title: 'Еще'),
+        preferredSize: Size.fromHeight(52),
+      ),
+      body: ListView(
         children: [
-        BrandHeader(title: 'Еще'),
           Padding(
             padding: brandPagePadding2,
             child: Column(
@@ -42,6 +46,7 @@ class MorePage extends StatelessWidget {
             ),
           )
         ],
+      ),
     );
   }
 }
@@ -76,8 +81,10 @@ class _NavItem extends StatelessWidget {
           children: [
             Text(title).body1,
             Spacer(),
-            Icon(iconData, size: 20),
+            SizedBox(
-            SizedBox(width: 18),
+              width: 56,
+              child: Icon(iconData, size: 20),
+            ),
           ],
         ),
       ),

lib/ui/pages/onboarding/onboarding.dart

@@ -1,7 +1,10 @@
 import 'package:flutter/material.dart';
+import 'package:selfprivacy/config/brand_theme.dart';
+import 'package:selfprivacy/config/text_themes.dart';
 import 'package:selfprivacy/ui/components/brand_button/brand_button.dart';
-import 'package:selfprivacy/ui/pages/rootRoute.dart';
+import 'package:selfprivacy/ui/components/brand_card/brand_card.dart';
-import 'package:selfprivacy/utils/route_transitions/basic.dart';
+import 'package:selfprivacy/ui/components/brand_modal_sheet/brand_modal_sheet.dart';
+import 'package:selfprivacy/ui/components/brand_span_button/brand_span_button.dart';
 import 'package:selfprivacy/utils/extensions/text_extension.dart';
 
 class OnboardingPage extends StatelessWidget {
@@ -9,45 +12,217 @@ class OnboardingPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SafeArea(
+    return Scaffold(
-      child: Scaffold(
+      body: ListView(
-        body: Padding(
+        padding: brandPagePadding1,
-          padding: const EdgeInsets.symmetric(
+        children: [
-            horizontal: 15,
+          Text('Начало').caption,
-            vertical: 45,
+          Text('SelfPrivacy').h1,
+          SizedBox(
+            height: 10,
           ),
-          child: Column(
+          RichText(
-            crossAxisAlignment: CrossAxisAlignment.start,
+            text: TextSpan(
               children: [
-              Expanded(
+                TextSpan(
-                child: Align(
+                  text:
-                  alignment: Alignment.centerLeft,
+                      'Для устойчивости и приватности требует много учёток. Полная инструкция на ',
-                  child: Column(
+                  style: body2Style,
-                    mainAxisAlignment: MainAxisAlignment.center,
+                ),
-                    crossAxisAlignment: CrossAxisAlignment.start,
+                BrandSpanButton.link(
-                    children: [
+                  text: 'selfprivacy.org/start',
-                      Text(
+                  urlString: 'https://selfprivacy.org/start',
-                        'Онбординг',
+                ),
-                      ).h1,
-                      SizedBox(height: 20),
-                      Text(
-                        'Тут рассказ на 1-2 слайда о том, что делает это приложение, какие твои проблемы решает и как (в общем чего ожидать от сервиса).',
-                      ).body2,
               ],
             ),
           ),
+          SizedBox(height: 50),
+          BrandCard(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Image.asset('assets/images/logos/hetzner.png'),
+                SizedBox(height: 10),
+                Text('1. Подключите сервер Hetzner').h2,
+                SizedBox(height: 10),
+                Text('Здесь будут жить наши данные и SelfPrivacy-сервисы')
+                    .body2,
+                _MockForm(
+                  hintText: 'Hetzner API Token',
+                ),
+                SizedBox(height: 20),
+                BrandButton.text(
+                  onPressed: () => _showModal(context, _HowHetzner()),
+                  title: 'Как получить API Token',
+                ),
+              ],
+            ),
+          ),
+          BrandCard(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Image.asset('assets/images/logos/namecheap.png'),
+                SizedBox(height: 10),
+                Text('2. Настройте домен ').h2,
+                SizedBox(height: 10),
+                RichText(
+                  text: TextSpan(
+                    children: [
+                      TextSpan(
+                        text: 'Зарегистрируйте домен в ',
+                        style: body2Style,
+                      ),
+                      BrandSpanButton.link(
+                        text: 'NameCheap',
+                        urlString: 'https://www.namecheap.com',
+                      ),
+                      TextSpan(
+                        text:
+                            ' или у любого другого регистратора. После этого настройте его на DNS-сервер CloudFlare',
+                        style: body2Style,
+                      ),
+                    ],
+                  ),
+                ),
+                _MockForm(
+                  hintText: 'Домен, например, selfprivacy.org',
+                  submitButtonText: 'Проверить DNS',
+                ),
+                SizedBox(height: 20),
+                BrandButton.text(
+                  onPressed: () {},
+                  title: 'Как настроить DNS CloudFlare',
+                ),
+              ],
+            ),
+          ),
+          BrandCard(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Image.asset('assets/images/logos/cloudflare.png'),
+                SizedBox(height: 10),
+                Text('3. Подключите CloudFlare DNS').h2,
+                SizedBox(height: 10),
+                Text('Для управления DNS вашего домена').body2,
+                _MockForm(
+                  hintText: 'CloudFlare API Token',
+                ),
+                SizedBox(height: 20),
+                BrandButton.text(
+                  onPressed: () {},
+                  title: 'Как получить API Token',
+                ),
+              ],
+            ),
+          ),
+          BrandCard(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Image.asset('assets/images/logos/aws.png'),
+                SizedBox(height: 10),
+                Text('4. Подключите Amazon AWS для бекапа').h2,
+                SizedBox(height: 10),
+                Text('IaaS-провайдер, для бесплатного хранения резервных копии ваших данных в зашифрованном виде')
+                    .body2,
+                _MockForm(
+                  hintText: 'Amazon AWS Access Key',
+                ),
+                SizedBox(height: 20),
+                BrandButton.text(
+                  onPressed: () {},
+                  title: 'Как получить API Token',
+                ),
+              ],
             ),
-              BrandButton.rised(
-                onPressed: () {
-                  Navigator.of(context)
-                      .pushReplacement(materialRoute(RootPage()));
-                },
-                title: 'Приступим!',
           )
         ],
       ),
+    );
+  }
+
+  void _showModal(BuildContext context, Widget widget) {
+    showModalBottomSheet<void>(
+      context: context,
+      isScrollControlled: true,
+      backgroundColor: Colors.transparent,
+      builder: (BuildContext context) {
+        return widget;
+      },
+    );
+  }
+}
+
+class _HowHetzner extends StatelessWidget {
+  const _HowHetzner({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return BrandModalSheet(
+      child: Column(
+        children: [
+          SizedBox(height: 40),
+          Text('Как получить Hetzner API Token').h2,
+          SizedBox(height: 20),
+          RichText(
+            text: TextSpan(
+              children: [
+                TextSpan(
+                  text: '1 Переходим по ссылке ',
+                  style: body1Style,
                 ),
+                BrandSpanButton.link(
+                  text: 'hetzner.com/sdfsdfsdfsdf',
+                  urlString: 'https://hetzner.com/sdfsdfsdfsdf',
+                ),
+                TextSpan(
+                  text: '''
+                                
+2 Заходим в созданный нами проект. Если такового - нет, значит создаём.
+
+3 Наводим мышкой на боковую панель. Она должна раскрыться, показав нам пункты меню. Нас интересует последний — Security (с иконкой ключика).
+
+4 Далее, в верхней части интерфейса видим примерно такой список: SSH Keys, API Tokens, Certificates, Members. Нам нужен API Tokens. Переходим по нему.
+
+5 В правой части интерфейса, нас будет ожидать кнопка Generate API token. Если же вы используете мобильную версию сайта, в нижнем правом углу вы увидите красный плюсик. Нажимаем на эту кнопку.
+
+6 В поле Description, даём нашему токену название (это может быть любое название, которые вам нравиться. Сути оно не меняет.
+
+                                ''',
+                  style: body1Style,
+                ),
+              ],
+            ),
+          ),
+        ],
       ),
     );
   }
 }
+
+class _MockForm extends StatelessWidget {
+  const _MockForm({
+    Key key,
+    @required this.hintText,
+    this.submitButtonText = 'Подключить',
+  }) : super(key: key);
+
+  final String hintText;
+  final String submitButtonText;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        SizedBox(height: 20),
+        TextField(decoration: InputDecoration(hintText: hintText)),
+        SizedBox(height: 20),
+        BrandButton.rised(onPressed: () {}, title: submitButtonText),
+      ],
+    );
+  }
+}

lib/ui/pages/providers/providers.dart

@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:selfprivacy/config/brand_theme.dart';
+import 'package:selfprivacy/logic/cubit/services/services_cubit.dart';
+import 'package:selfprivacy/logic/models/service.dart';
+import 'package:selfprivacy/ui/components/brand_button/brand_button.dart';
+import 'package:selfprivacy/ui/components/brand_card/brand_card.dart';
+import 'package:selfprivacy/ui/components/brand_header/brand_header.dart';
+import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart';
+import 'package:selfprivacy/ui/components/icon_status_mask/icon_status_mask.dart';
+import 'package:selfprivacy/utils/extensions/text_extension.dart';
+
+class ProvidersPage extends StatefulWidget {
+  ProvidersPage({Key key}) : super(key: key);
+
+  @override
+  _ProvidersPageState createState() => _ProvidersPageState();
+}
+
+class _ProvidersPageState extends State<ProvidersPage> {
+  @override
+  Widget build(BuildContext context) {
+    final serviceCubit = context.watch<ServicesCubit>();
+    final connected = serviceCubit.state.connected;
+    final uninitialized = serviceCubit.state.uninitialized;
+    return Scaffold(
+      appBar: PreferredSize(
+        child: BrandHeader(title: 'Провайдеры'),
+        preferredSize: Size.fromHeight(52),
+      ),
+      body: ListView(
+        padding: brandPagePadding2,
+        children: [
+          SizedBox(height: 24),
+          ...connected.map((service) => _Card(service: service)).toList(),
+          if (uninitialized.isNotEmpty) ...[
+            Text('не подключены').body1,
+            SizedBox(height: 30),
+          ],
+          ...uninitialized.map((service) => _Card(service: service)).toList()
+        ],
+      ),
+    );
+  }
+}
+
+class _Card extends StatelessWidget {
+  const _Card({Key key, @required this.service}) : super(key: key);
+
+  final Service service;
+  @override
+  Widget build(BuildContext context) {
+    String title;
+    IconData iconData;
+    String description;
+
+    switch (service.type) {
+      case ServiceTypes.messanger:
+        iconData = BrandIcons.messanger;
+        title = 'Мессенджер';
+        description =
+            'Delta Chat срфеТекст-текст описание. Если бы мне надо было обсудить что-то от чего зависит жизнь. Я бы выбрал Delta.Chat + свой почтовый сервер.';
+        break;
+      case ServiceTypes.mail:
+        iconData = BrandIcons.envelope;
+        title = 'Почта';
+        description = 'Электронная почта для семьи или компании ';
+        break;
+      case ServiceTypes.passwordManager:
+        iconData = BrandIcons.key;
+        title = 'Менеджер паролей';
+        description = 'Надёжное хранилище для ваших паролей и ключей доступа';
+        break;
+      case ServiceTypes.github:
+        iconData = BrandIcons.github;
+        title = 'Git сервер';
+        description = 'Сервис для приватного хранения своих разработок';
+        break;
+      case ServiceTypes.backup:
+        iconData = BrandIcons.save;
+        title = 'Резервное копирование';
+        description = 'Обеспеченье целосности и сохранности ваших данных';
+        break;
+      case ServiceTypes.cloud:
+        iconData = BrandIcons.upload;
+        title = 'Файловое Облако';
+        description = 'Сервис для доступа к вашим файлам в любой точке мира';
+        break;
+    }
+    return BrandCard(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          IconStatusMaks(
+            status: service.state,
+            child: Icon(iconData, size: 30, color: Colors.white),
+          ),
+          SizedBox(height: 10),
+          Text(title).h2,
+          SizedBox(height: 10),
+          if (service.state == ServiceStateType.uninitialized) ...[
+            Text(description).body1,
+            SizedBox(height: 10),
+            BrandButton.text(
+                title: 'Подключить',
+                onPressed: () {
+                  context.read<ServicesCubit>().connect(service);
+                })
+          ],
+          if (service.state == ServiceStateType.stable) Text('Подключен').body1,
+        ],
+      ),
+    );
+  }
+}

lib/ui/pages/rootRoute.dart

@@ -2,8 +2,9 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:selfprivacy/ui/components/brand_tab_bar/brand_tab_bar.dart';
 import 'package:selfprivacy/ui/pages/more/more.dart';
-import 'package:selfprivacy/ui/pages/servers/servers.dart';
+import 'package:selfprivacy/ui/pages/providers/providers.dart';
 import 'package:selfprivacy/ui/pages/services/services.dart';
+import 'package:selfprivacy/ui/pages/users/users.dart';
 
 class RootPage extends StatefulWidget {
   const RootPage({Key key}) : super(key: key);
@@ -35,9 +36,9 @@ class _RootPageState extends State<RootPage>
         body: TabBarView(
           controller: tabController,
           children: [
-            ServersPage(),
+            ProvidersPage(),
             ServicesPage(),
-            Text('users'),
+            UsersPage(),
             MorePage(),
           ],
         ),

lib/ui/pages/servers/servers.dart

@@ -1,230 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:selfprivacy/config/brand_colors.dart';
-import 'package:selfprivacy/config/brand_theme.dart';
-import 'package:selfprivacy/config/text_themes.dart';
-import 'package:selfprivacy/ui/components/brand_button/brand_button.dart';
-import 'package:selfprivacy/ui/components/brand_card/brand_card.dart';
-import 'package:selfprivacy/ui/components/brand_modal_sheet/brand_modal_sheet.dart';
-import 'package:selfprivacy/ui/components/brand_span_button/brand_span_button.dart';
-import 'package:selfprivacy/utils/extensions/text_extension.dart';
-export 'package:bloc/bloc.dart';
-
-class ServersPage extends StatelessWidget {
-  const ServersPage({Key key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      body: ListView(
-        padding: brandPagePadding1,
-        children: [
-          Text('Начало').caption,
-          Text('SelfPrivacy').h1,
-          SizedBox(
-            height: 10,
-          ),
-          RichText(
-            text: TextSpan(
-              children: [
-                TextSpan(
-                  text:
-                      'Для устойчивости и приватности требует много учёток. Полная инструкция на ',
-                  style: body2Style,
-                ),
-                BrandSpanButton.link(
-                  text: 'selfprivacy.org/start',
-                  urlString: 'https://selfprivacy.org/start',
-                ),
-              ],
-            ),
-          ),
-          SizedBox(height: 50),
-          BrandCard(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Image.asset('assets/images/logos/hetzner.png'),
-                SizedBox(height: 10),
-                Text('1. Подключите сервер Hetzner').h2,
-                SizedBox(height: 10),
-                Text('Здесь будут жить наши данные и SelfPrivacy-сервисы')
-                    .body2,
-                _MockForm(
-                  hintText: 'Hetzner API Token',
-                ),
-                SizedBox(height: 20),
-                BrandButton.text(
-                  onPressed: () => showModalBottomSheet<void>(
-                    context: context,
-                    isScrollControlled: true,
-                    backgroundColor: Colors.transparent,
-                    builder: (BuildContext context) {
-                      return BrandModalSheet(
-                        child: Column(
-                          children: [
-                            Text('Как получить Hetzner API Token').h2,
-                            SizedBox(height: 20),
-                            RichText(
-                              text: TextSpan(
-                                children: [
-                                  TextSpan(
-                                    text: '1 Переходим по ссылке ',
-                                    style: body1Style,
-                                  ),
-                                  BrandSpanButton.link(
-                                    text: 'hetzner.com/sdfsdfsdfsdf',
-                                    urlString:
-                                        'https://hetzner.com/sdfsdfsdfsdf',
-                                  ),
-                                  TextSpan(
-                                    text: '''
-                                    
-2 Заходим в созданный нами проект. Если такового - нет, значит создаём.
-
-3 Наводим мышкой на боковую панель. Она должна раскрыться, показав нам пункты меню. Нас интересует последний — Security (с иконкой ключика).
-
-4 Далее, в верхней части интерфейса видим примерно такой список: SSH Keys, API Tokens, Certificates, Members. Нам нужен API Tokens. Переходим по нему.
-
-5 В правой части интерфейса, нас будет ожидать кнопка Generate API token. Если же вы используете мобильную версию сайта, в нижнем правом углу вы увидите красный плюсик. Нажимаем на эту кнопку.
-
-6 В поле Description, даём нашему токену название (это может быть любое название, которые вам нравиться. Сути оно не меняет.
-
-                                    ''',
-                                    style: body1Style,
-                                  ),
-                                ],
-                              ),
-                            ),
-                          ],
-                        ),
-                      );
-                    },
-                  ),
-                  title: 'Как получить API Token',
-                ),
-              ],
-            ),
-          ),
-          BrandCard(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Image.asset('assets/images/logos/namecheap.png'),
-                SizedBox(height: 10),
-                Text('2. Настройте домен ').h2,
-                SizedBox(height: 10),
-                RichText(
-                  text: TextSpan(
-                    children: [
-                      TextSpan(
-                        text: 'Зарегистрируйте домен в ',
-                        style: body2Style,
-                      ),
-                      BrandSpanButton.link(
-                        text: 'NameCheap',
-                        urlString: 'https://www.namecheap.com',
-                      ),
-                      TextSpan(
-                        text:
-                            ' или у любого другого регистратора. После этого настройте его на DNS-сервер CloudFlare',
-                        style: body2Style,
-                      ),
-                    ],
-                  ),
-                ),
-                _MockForm(
-                  hintText: 'Домен, например, selfprivacy.org',
-                  submitButtonText: 'Проверить DNS',
-                ),
-                SizedBox(height: 20),
-                BrandButton.text(
-                  onPressed: () {},
-                  title: 'Как настроить DNS CloudFlare',
-                ),
-              ],
-            ),
-          ),
-          BrandCard(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Image.asset('assets/images/logos/cloudflare.png'),
-                SizedBox(height: 10),
-                Text('3. Подключите CloudFlare DNS').h2,
-                SizedBox(height: 10),
-                Text('Для управления DNS вашего домена').body2,
-                _MockForm(
-                  hintText: 'CloudFlare API Token',
-                ),
-                SizedBox(height: 20),
-                BrandButton.text(
-                  onPressed: () {},
-                  title: 'Как получить API Token',
-                ),
-              ],
-            ),
-          ),
-          BrandCard(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Image.asset('assets/images/logos/aws.png'),
-                SizedBox(height: 10),
-                Text('4. Подключите Amazon AWS для бекапа').h2,
-                SizedBox(height: 10),
-                Text('IaaS-провайдер, для бесплатного хранения резервных копии ваших данных в зашифрованном виде')
-                    .body2,
-                _MockForm(
-                  hintText: 'Amazon AWS Access Key',
-                ),
-                SizedBox(height: 20),
-                BrandButton.text(
-                  onPressed: () {},
-                  title: 'Как получить API Token',
-                ),
-              ],
-            ),
-          )
-        ],
-      ),
-    );
-  }
-}
-
-class _MockForm extends StatelessWidget {
-  const _MockForm({
-    Key key,
-    @required this.hintText,
-    this.submitButtonText = 'Подключить',
-  }) : super(key: key);
-
-  final String hintText;
-  final String submitButtonText;
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      children: [
-        SizedBox(height: 20),
-        TextField(
-          style: TextStyle(fontSize: 15, height: 1.6),
-          decoration: InputDecoration(
-            hintText: hintText,
-            contentPadding: EdgeInsets.all(16),
-            border: InputBorder.none,
-            enabledBorder: OutlineInputBorder(
-              borderRadius: BorderRadius.all(Radius.circular(4)),
-              borderSide: BorderSide(color: BrandColors.inputInactive),
-            ),
-            focusedBorder: OutlineInputBorder(
-              borderRadius: BorderRadius.all(Radius.circular(4)),
-              borderSide: BorderSide(color: BrandColors.blue),
-            ),
-          ),
-        ),
-        SizedBox(height: 20),
-        BrandButton.rised(onPressed: () {}, title: submitButtonText),
-      ],
-    );
-  }
-}

lib/ui/pages/services/services.dart

@@ -4,6 +4,7 @@ import 'package:selfprivacy/logic/cubit/services/services_cubit.dart';
 import 'package:selfprivacy/logic/models/service.dart';
 import 'package:selfprivacy/ui/components/brand_button/brand_button.dart';
 import 'package:selfprivacy/ui/components/brand_card/brand_card.dart';
+import 'package:selfprivacy/ui/components/brand_header/brand_header.dart';
 import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart';
 import 'package:selfprivacy/ui/components/icon_status_mask/icon_status_mask.dart';
 import 'package:selfprivacy/utils/extensions/text_extension.dart';
@@ -22,10 +23,13 @@ class _ServicesPageState extends State<ServicesPage> {
     final connected = serviceCubit.state.connected;
     final uninitialized = serviceCubit.state.uninitialized;
     return Scaffold(
+      appBar: PreferredSize(
+        child: BrandHeader(title: 'Сервисы'),
+        preferredSize: Size.fromHeight(52),
+      ),
       body: ListView(
-        padding: brandPagePadding1,
+        padding: brandPagePadding2,
         children: [
-          Text('Сервисы').caption,
           SizedBox(height: 24),
           ...connected.map((service) => _Card(service: service)).toList(),
           if (uninitialized.isNotEmpty) ...[

lib/ui/pages/settings/setting.dart

@@ -12,13 +12,12 @@ class SettingsPage extends StatelessWidget {
   Widget build(BuildContext context) {
     return SafeArea(
       child: Scaffold(
+        appBar: PreferredSize(
+          child: BrandHeader(title: 'Настройки', hasBackButton: true),
+          preferredSize: Size.fromHeight(52),
+        ),
         body: ListView(
-          children: [
-            BrandHeader(title: 'Настройки', hasBackButton: true),
-            Padding(
           padding: brandPagePadding2,
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
             BrandDivider(),
             _SwitcherBlock(
@@ -59,9 +58,6 @@ class SettingsPage extends StatelessWidget {
             )
           ],
         ),
-            )
-          ],
-        ),
       ),
     );
   }

lib/ui/pages/users/users.dart

@@ -0,0 +1,288 @@
+import 'package:flutter/material.dart';
+import 'package:selfprivacy/config/brand_colors.dart';
+import 'package:selfprivacy/config/brand_theme.dart';
+import 'package:selfprivacy/logic/cubit/users/users_cubit.dart';
+import 'package:selfprivacy/logic/models/user.dart';
+import 'package:selfprivacy/ui/components/brand_button/brand_button.dart';
+import 'package:selfprivacy/ui/components/brand_divider/brand_divider.dart';
+import 'package:selfprivacy/ui/components/brand_header/brand_header.dart';
+import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart';
+import 'package:selfprivacy/ui/components/brand_modal_sheet/brand_modal_sheet.dart';
+import 'package:selfprivacy/utils/extensions/text_extension.dart';
+import 'package:selfprivacy/utils/password_generator.dart';
+
+class UsersPage extends StatelessWidget {
+  const UsersPage({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final usersCubit = context.watch<UsersCubit>();
+    final users = usersCubit.state.users;
+    return Scaffold(
+      appBar: PreferredSize(
+        child: BrandHeader(title: 'Пользователи'),
+        preferredSize: Size.fromHeight(52),
+      ),
+      floatingActionButton: Container(
+        width: 48.0,
+        height: 48.0,
+        child: RawMaterialButton(
+          fillColor: BrandColors.blue,
+          shape: CircleBorder(),
+          elevation: 0.0,
+          highlightElevation: 2,
+          child: Icon(
+            Icons.add,
+            color: Colors.white,
+            size: 34,
+          ),
+          onPressed: () {
+            showModalBottomSheet<void>(
+              context: context,
+              isScrollControlled: true,
+              backgroundColor: Colors.transparent,
+              builder: (BuildContext context) {
+                return _NewUser();
+              },
+            );
+          },
+        ),
+      ),
+      body: ListView(
+        children: [
+          ...users.map((user) => _User(user: user)),
+        ],
+      ),
+    );
+  }
+}
+
+class _User extends StatelessWidget {
+  const _User({Key key, this.user}) : super(key: key);
+
+  final User user;
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: () {
+        showModalBottomSheet<void>(
+          context: context,
+          isScrollControlled: true,
+          backgroundColor: Colors.transparent,
+          builder: (BuildContext context) {
+            return _UserDetails(user: user);
+          },
+        );
+      },
+      child: Container(
+        padding: brandPagePadding2,
+        height: 48,
+        child: Row(
+          children: [
+            Container(
+              width: 17,
+              height: 17,
+              decoration: BoxDecoration(
+                color: user.color,
+                shape: BoxShape.circle,
+              ),
+            ),
+            SizedBox(width: 20),
+            Text(user.login).caption,
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _NewUser extends StatefulWidget {
+  const _NewUser({Key key}) : super(key: key);
+
+  @override
+  __NewUserState createState() => __NewUserState();
+}
+
+class __NewUserState extends State<_NewUser> {
+  var passController = TextEditingController(text: genPass());
+
+  @override
+  Widget build(BuildContext context) {
+    return BrandModalSheet(
+      child: Container(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            BrandHeader(title: 'Новый пользователь'),
+            SizedBox(width: 14),
+            Padding(
+              padding: brandPagePadding2,
+              child: Column(
+                children: [
+                  TextField(
+                    decoration: InputDecoration(
+                      labelText: 'Логин',
+                      suffixText: '@example',
+                    ),
+                  ),
+                  SizedBox(height: 20),
+                  TextField(
+                    controller: passController,
+                    decoration: InputDecoration(
+                      alignLabelWithHint: false,
+                      labelText: 'Пароль',
+                      suffixIcon: Padding(
+                        padding: const EdgeInsets.only(right: 8),
+                        child: IconButton(
+                          icon: Icon(
+                            BrandIcons.refresh,
+                            color: BrandColors.blue,
+                          ),
+                          onPressed: () {
+                            passController.value =
+                                TextEditingValue(text: genPass());
+                          },
+                        ),
+                      ),
+                    ),
+                  ),
+                  SizedBox(height: 30),
+                  BrandButton.rised(
+                    onPressed: () {
+                      Navigator.pop(context);
+                    },
+                    title: 'Создать',
+                  ),
+                  SizedBox(height: 40),
+                  Text(
+                      'Новый пользователь автоматически получит доступ ко всем сервисам. Ещё какое-то описание.'),
+                  SizedBox(height: 30),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _UserDetails extends StatelessWidget {
+  const _UserDetails({
+    Key key,
+    this.user,
+  }) : super(key: key);
+
+  final User user;
+
+  @override
+  Widget build(BuildContext context) {
+    return BrandModalSheet(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Container(
+            height: 200,
+            decoration: BoxDecoration(
+              color: user.color,
+              borderRadius: BorderRadius.vertical(
+                top: Radius.circular(20),
+              ),
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Align(
+                  alignment: Alignment.centerRight,
+                  child: Padding(
+                    padding: EdgeInsets.symmetric(
+                      vertical: 4,
+                      horizontal: 2,
+                    ),
+                    child: PopupMenuButton<int>(
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(10.0),
+                      ),
+                      // onSelected: (WhyFarther result) {
+                      //   setState(() {
+                      //     _selection = result;
+                      //   });
+                      // },
+                      icon: Icon(Icons.more_vert),
+                      itemBuilder: (BuildContext context) => [
+                        PopupMenuItem<int>(
+                          value: 1,
+                          child: Container(
+                            padding: EdgeInsets.only(left: 5),
+                            child: Text('Сбросить пароль'),
+                          ),
+                        ),
+                        PopupMenuItem<int>(
+                          value: 2,
+                          child: Container(
+                            padding: EdgeInsets.only(left: 5),
+                            child: Text(
+                              'Удалить',
+                              style: TextStyle(color: BrandColors.red),
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+                Spacer(),
+                Padding(
+                  padding: EdgeInsets.symmetric(
+                    vertical: 20,
+                    horizontal: 15,
+                  ),
+                  child: Text(
+                    user.login,
+                    softWrap: true,
+                    overflow: TextOverflow.ellipsis,
+                  ).h1,
+                ),
+              ],
+            ),
+          ),
+          SizedBox(height: 20),
+          Padding(
+            padding: brandPagePadding2.copyWith(bottom: 20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text('Учетная запись').small,
+                Container(
+                  height: 40,
+                  alignment: Alignment.centerLeft,
+                  child: Text('${user.login}@example.com').caption,
+                ),
+                SizedBox(height: 14),
+                Text('Пароль').small,
+                Container(
+                  height: 40,
+                  alignment: Alignment.centerLeft,
+                  child: Text(user.password).caption,
+                ),
+                SizedBox(height: 24),
+                BrandDivider(),
+                SizedBox(height: 20),
+                BrandButton.iconText(
+                  title: 'Отправить реквизиты для входа',
+                  icon: Icon(BrandIcons.share),
+                  onPressed: () {},
+                ),
+                SizedBox(height: 20),
+                BrandDivider(),
+                SizedBox(height: 20),
+                Text(
+                    'Вам был создан доступ к сервисам с логином <login> и паролем <password> к сервисам:
-  E-mail с адресом <username@domain.com>
-  Менеджер паролей: <pass.domain.com>
- Файловое облако: <cloud.mydomain.com>
- Видеоконференция <meet.domain.com>
- Git сервер <git.mydomain.com>'),
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/utils/extensions/text_extension.dart

@@ -13,6 +13,7 @@ extension TextExtension on Text {
 
   Text get body1 => copyWith(style: body1Style);
   Text get body2 => copyWith(style: body2Style);
+  Text get small => copyWith(style: smallStyle);
 
   Text setKey(Key key) => copyWith(key: key);
 

lib/utils/password_generator.dart

@@ -0,0 +1,138 @@
+import 'dart:math';
+
+var generator = PasswordGenerator();
+
+String genPass() {
+  generator.generate(8);
+  return generator.getGeneratedValue();
+}
+
+///Generates a password.
+///
+///The password [_generatedValue] is of a specified length, including letters [_letterGen] of mixed cases,
+///numbers [_numGen], and symbols[_symGen] depending on user choice.
+class PasswordGenerator {
+  bool _letterGen;
+  bool _numGen;
+  bool _symGen;
+  String _generatedValue;
+
+  ///Constructor.
+  ///
+  ///[_letterGen] is true to make password generation possible from the opening of the application, and
+  ///[_generatedValue] is intialized to the value below so the text containing it can be first generated
+  ///upon users request
+  PasswordGenerator() {
+    _letterGen = true;
+    _numGen = true;
+    _symGen = false;
+    _generatedValue = "Press Generate";
+  }
+
+  ///Call to generate a value, of [n] length
+  void generate(int n) {
+    //Discards the old value
+    _generatedValue = "";
+
+    ///Cannot generate a value without any character types selected
+    if (!_letterGen && !_numGen && !_symGen) {
+      _generatedValue = "No character type selected";
+      return;
+    }
+
+    ///'Randomly' selectes caracter type to generate and append [toAppend] to [_generatedValue]
+    // ignore: unnecessary_statements
+    for (n; n > 0; n--) {
+      String toAppend;
+      var random = new Random();
+
+      ///loops until a valid character is generated, meaning the user has to check the character value
+      ///to be generated. 'Randomly' picks a character type.
+      while (toAppend == null) {
+        int selector = random.nextInt(3);
+
+        if (selector == 0) {
+          toAppend = _generateLetter();
+        } else if (selector == 1) {
+          toAppend = _generateNumber();
+        } else {
+          toAppend = _generateSymbol();
+        }
+      }
+
+      _generatedValue += toAppend;
+      toAppend = null;
+    }
+  }
+
+  ///Generates a letter when called.
+  String _generateLetter() {
+    if (!_letterGen) return null;
+
+    ///Finds the integer value for the range between a-z and A-Z, with [base] UTF-16 value for lowercase letters and
+    ///[baseUpper] UTF-16 value for uppercase letters
+    int base = "a".codeUnitAt(0);
+    int baseUpper = "A".codeUnitAt(0);
+    int maxRand = ("z".codeUnitAt(0) - base) + 1;
+    Random random = new Random();
+
+    ///Randomly selects between upper and lower case generation, randomly generates value from [maxRand], then adding base,
+    ///which creates a UTF-16 encoded character to be converted into a string of one character between a-z/A-Z.
+    ///This string is then returned.
+    if (random.nextInt(2) == 0) {
+      return String.fromCharCodes([random.nextInt(maxRand) + base]);
+    } else {
+      return String.fromCharCodes([random.nextInt(maxRand) + baseUpper]);
+    }
+  }
+
+  ///Generates a number when called
+  String _generateNumber() {
+    if (!_numGen) return null;
+
+    ///Finds the integer value for the range between 0-9
+    int base = "0".codeUnitAt(0);
+    int maxRand = ("9".codeUnitAt(0) - base) + 1;
+    Random random = new Random();
+
+    ///Randomly generates value from [maxRand], then adding base, which creates a UTF-16 encoded character to be converted into a
+    ///string of one character between 0-9. This string is then returned.
+    return String.fromCharCodes([random.nextInt(maxRand) + base]);
+  }
+
+  ///Generates a symbol when called
+  String _generateSymbol() {
+    if (!_symGen) return null;
+
+    ///Finds the integer value for the range between symbols !-.
+
+    ///(note) which includes symbols !"#$%&'()*+,=.
+    int base = "!".codeUnitAt(0);
+    int maxRand = (".".codeUnitAt(0) - base) + 1;
+    Random random = new Random();
+
+    ///Randomly generates value from [maxRand], then adding base, which creates a UTF-16 encoded character to be
+    ///converted into a string of one character between !-. . This string is then returned.
+    return String.fromCharCodes([random.nextInt(maxRand) + base]);
+  }
+
+  ///Toggles letter generation
+  void checkLetterGen(bool value) {
+    _letterGen = value;
+  }
+
+  ///Toggles number generation
+  void checkNumGen(bool value) {
+    _numGen = value;
+  }
+
+  ///Toggles symbol generation
+  void checkSymGen(bool value) {
+    _symGen = value;
+  }
+
+  ///Returns the generated value to be used by generator app
+  String getGeneratedValue() {
+    return _generatedValue;
+  }
+}