forked from SelfPrivacy/selfprivacy.org.app
557 lines
18 KiB
Dart
557 lines
18 KiB
Dart
import 'package:cubit_form/cubit_form.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||
import 'package:selfprivacy/config/brand_theme.dart';
|
||
import 'package:selfprivacy/config/text_themes.dart';
|
||
import 'package:selfprivacy/logic/cubit/forms/initializing/hetzner_form_cubit.dart';
|
||
import 'package:selfprivacy/logic/cubit/initializing/initializing_cubit.dart';
|
||
import 'package:selfprivacy/logic/cubit/providers/providers_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_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/ui/components/brand_text/brand_text.dart';
|
||
import 'package:selfprivacy/ui/components/progress_bar/progress_bar.dart';
|
||
import 'package:selfprivacy/ui/pages/rootRoute.dart';
|
||
import 'package:selfprivacy/utils/route_transitions/basic.dart';
|
||
|
||
class InitializingPage extends StatefulWidget {
|
||
const InitializingPage({Key key}) : super(key: key);
|
||
|
||
@override
|
||
_InitializingPageState createState() => _InitializingPageState();
|
||
}
|
||
|
||
class _InitializingPageState extends State<InitializingPage> {
|
||
PageController pageController = PageController(viewportFraction: 1);
|
||
|
||
@override
|
||
void dispose() {
|
||
pageController.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
var cubit = context.watch<InitializingCubit>();
|
||
|
||
return SafeArea(
|
||
child: Scaffold(
|
||
body: ListView(
|
||
children: [
|
||
Padding(
|
||
padding: brandPagePadding1,
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
BrandText.h4('Начало'),
|
||
BrandText.h1('SelfPrivacy'),
|
||
SizedBox(
|
||
height: 10,
|
||
),
|
||
RichText(
|
||
text: TextSpan(
|
||
children: [
|
||
TextSpan(
|
||
text:
|
||
'Для устойчивости и приватности требует много учёток. Полная инструкция на ',
|
||
style: body2Style,
|
||
),
|
||
BrandSpanButton.link(
|
||
text:
|
||
'https://selfprivacy.org/posts/getting_started/',
|
||
urlString:
|
||
'https://selfprivacy.org/posts/getting_started/',
|
||
),
|
||
],
|
||
),
|
||
),
|
||
SizedBox(height: 10),
|
||
ProgressBar(
|
||
steps: ['Server', 'DNS', 'Domain', 'User'],
|
||
// progress: cubit.state.progress,
|
||
activeIndex: cubit.state.progress,
|
||
),
|
||
SizedBox(height: 20),
|
||
],
|
||
),
|
||
),
|
||
Container(
|
||
height: 500,
|
||
child: PageView(
|
||
// physics: NeverScrollableScrollPhysics(),
|
||
controller: pageController,
|
||
children: [
|
||
_addCard(_stepOne(cubit)),
|
||
_addCard(_stepTwo(cubit)),
|
||
_addCard(_stepThree(cubit)),
|
||
_addCard(_stepFour(cubit)),
|
||
],
|
||
),
|
||
),
|
||
BrandButton.text(title: 'Настрою потом', onPressed: _goToMainPage),
|
||
SizedBox(height: 30),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
void _goToMainPage() {
|
||
Navigator.of(context).pushAndRemoveUntil(
|
||
materialRoute(RootPage()),
|
||
(predicate) => predicate == null,
|
||
);
|
||
}
|
||
|
||
Widget _stepOne(InitializingCubit initializingCubit) {
|
||
return BlocProvider(
|
||
create: (context) => HetznerFormCubit(initializingCubit),
|
||
child: Builder(builder: (context) {
|
||
var formCubit = context.watch<HetznerFormCubit>();
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Spacer(),
|
||
Image.asset('assets/images/logos/hetzner.png'),
|
||
SizedBox(height: 10),
|
||
BrandText.h2('Подключите сервер Hetzner'),
|
||
SizedBox(height: 10),
|
||
BrandText.body2(
|
||
'Здесь будут жить наши данные и SelfPrivacy-сервисы'),
|
||
Spacer(),
|
||
CubitFormTextField(
|
||
formFieldCubit: formCubit.apiKey,
|
||
textAlign: TextAlign.center,
|
||
keyboardType: TextInputType.number,
|
||
scrollPadding: EdgeInsets.only(bottom: 70),
|
||
decoration: InputDecoration(
|
||
hintText: 'Hetzner API Token',
|
||
),
|
||
),
|
||
SizedBox(height: 20),
|
||
BrandButton.rised(
|
||
onPressed:
|
||
formCubit.state.isSubmitting ? null : formCubit.trySubmit,
|
||
title: 'Подключить',
|
||
),
|
||
Spacer(),
|
||
SizedBox(height: 10),
|
||
BrandButton.text(
|
||
onPressed: () => _showModal(context, _HowHetzner()),
|
||
title: 'Как получить API Token',
|
||
),
|
||
],
|
||
);
|
||
}),
|
||
);
|
||
}
|
||
|
||
void _showModal(BuildContext context, Widget widget) {
|
||
showModalBottomSheet<void>(
|
||
context: context,
|
||
isScrollControlled: true,
|
||
backgroundColor: Colors.transparent,
|
||
builder: (BuildContext context) {
|
||
return widget;
|
||
},
|
||
);
|
||
}
|
||
|
||
Widget _stepTwo(InitializingCubit cubit) {
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Image.asset('assets/images/logos/cloudflare.png'),
|
||
BrandText.h2('Подключите CloudFlare DNS'),
|
||
SizedBox(height: 10),
|
||
BrandText.body2('Для управления DNS вашего домена'),
|
||
Expanded(
|
||
child: _MockForm(
|
||
hintText: 'CloudFlare API Token',
|
||
length: 64,
|
||
onPressed: () {
|
||
cubit.setCloudFlare('key');
|
||
pageController.animateToPage(
|
||
2,
|
||
curve: Curves.easeIn,
|
||
duration: Duration(milliseconds: 200),
|
||
);
|
||
},
|
||
),
|
||
),
|
||
SizedBox(height: 20),
|
||
BrandButton.text(
|
||
onPressed: () {},
|
||
title: 'Как получить API Token',
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _stepThree(InitializingCubit cubit) {
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
SizedBox(height: 10),
|
||
BrandText.h2('Введите домен:'),
|
||
Expanded(
|
||
child: _MockForm(
|
||
hintText: 'домен',
|
||
length: 10,
|
||
onPressed: () {
|
||
cubit.setDomain('domain');
|
||
pageController.animateToPage(
|
||
3,
|
||
curve: Curves.easeIn,
|
||
duration: Duration(milliseconds: 200),
|
||
);
|
||
},
|
||
),
|
||
),
|
||
SizedBox(height: 10),
|
||
BrandButton.text(
|
||
onPressed: () => _showModal(context, _HowHetzner()),
|
||
title: 'Как получить API Token',
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _stepFour(InitializingCubit cubit) {
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
SizedBox(height: 10),
|
||
Expanded(
|
||
child: Column(
|
||
children: [
|
||
TextField(
|
||
decoration: InputDecoration(
|
||
hintText: 'нинейм',
|
||
),
|
||
),
|
||
SizedBox(height: 10),
|
||
TextField(
|
||
obscureText: true,
|
||
decoration: InputDecoration(
|
||
hintText: 'пароль',
|
||
),
|
||
),
|
||
Spacer(),
|
||
BrandButton.rised(
|
||
onPressed: () {
|
||
cubit.setRootUser(
|
||
User(login: 'aa', password: 'bbb'),
|
||
);
|
||
_goToMainPage();
|
||
},
|
||
title: 'some text',
|
||
),
|
||
],
|
||
),
|
||
),
|
||
SizedBox(height: 10),
|
||
BrandButton.text(
|
||
onPressed: () => _showModal(context, _HowHetzner()),
|
||
title: 'Как получить API Token',
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _addCard(Widget child) {
|
||
return Padding(
|
||
padding: brandPagePadding2,
|
||
child: BrandCard(
|
||
child: child,
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
class _HowHetzner extends StatelessWidget {
|
||
const _HowHetzner({
|
||
Key key,
|
||
}) : super(key: key);
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return BrandModalSheet(
|
||
child: Padding(
|
||
padding: brandPagePadding2,
|
||
child: Column(
|
||
children: [
|
||
SizedBox(height: 40),
|
||
BrandText.h2('Как получить Hetzner API Token'),
|
||
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 _MockSuccess extends StatelessWidget {
|
||
// const _MockSuccess({Key key, this.type}) : super(key: key);
|
||
|
||
// final ProviderType type;
|
||
|
||
// @override
|
||
// Widget build(BuildContext context) {
|
||
// String text;
|
||
|
||
// switch (type) {
|
||
// case ProviderType.server:
|
||
// text = '1. Cервер подключен';
|
||
// break;
|
||
// case ProviderType.domain:
|
||
// text = '2. Домен настроен';
|
||
// break;
|
||
// case ProviderType.backup:
|
||
// text = '3. Резервное копирование настроенно';
|
||
// break;
|
||
// }
|
||
// return BrandCard(
|
||
// child: Row(
|
||
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
// children: [
|
||
// BrandText.h3(text),
|
||
// Icon(
|
||
// Icons.check,
|
||
// color: BrandColors.green1,
|
||
// ),
|
||
// ],
|
||
// ),
|
||
// );
|
||
// }
|
||
// }
|
||
|
||
class _MockForm extends StatefulWidget {
|
||
const _MockForm({
|
||
Key key,
|
||
@required this.hintText,
|
||
this.submitButtonText = 'Подключить',
|
||
@required this.onPressed,
|
||
@required this.length,
|
||
}) : super(key: key);
|
||
|
||
final String hintText;
|
||
final String submitButtonText;
|
||
final int length;
|
||
|
||
final VoidCallback onPressed;
|
||
|
||
@override
|
||
__MockFormState createState() => __MockFormState();
|
||
}
|
||
|
||
class __MockFormState extends State<_MockForm> {
|
||
String text = '';
|
||
bool _valid = true;
|
||
bool _touched = false;
|
||
|
||
onPressed() {
|
||
if (text.length == widget.length) {
|
||
setState(() {
|
||
_touched = true;
|
||
_valid = true;
|
||
widget.onPressed();
|
||
});
|
||
} else {
|
||
setState(() {
|
||
_touched = true;
|
||
_valid = false;
|
||
});
|
||
}
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
SizedBox(height: 20),
|
||
TextField(
|
||
onChanged: (value) {
|
||
if (_touched) {
|
||
if (value.length == widget.length) {
|
||
setState(() {
|
||
_valid = true;
|
||
text = value;
|
||
});
|
||
} else {
|
||
setState(() {
|
||
_valid = false;
|
||
text = value;
|
||
});
|
||
}
|
||
} else {
|
||
setState(() {
|
||
text = value;
|
||
});
|
||
}
|
||
},
|
||
decoration: InputDecoration(
|
||
hintText: widget.hintText,
|
||
errorText:
|
||
_valid ? null : 'Длинна должна быть ${widget.length} символа',
|
||
),
|
||
),
|
||
Spacer(),
|
||
BrandButton.rised(
|
||
onPressed: _valid ? onPressed : null,
|
||
title: widget.submitButtonText,
|
||
),
|
||
],
|
||
);
|
||
}
|
||
}
|
||
|
||
// Widget getCard(BuildContext context, ProviderModel model) {
|
||
// var cubit = context.watch<ProvidersCubit>();
|
||
// if (model.state == StateType.stable) {
|
||
// return _MockSuccess(type: model.type);
|
||
// }
|
||
// switch (model.type) {
|
||
// case ProviderType.server:
|
||
// return BrandCard(
|
||
// child: Column(
|
||
// crossAxisAlignment: CrossAxisAlignment.start,
|
||
// children: [
|
||
// Image.asset('assets/images/logos/hetzner.png'),
|
||
// SizedBox(height: 10),
|
||
// BrandText.h2('1. Подключите сервер Hetzner'),
|
||
// SizedBox(height: 10),
|
||
// BrandText.body2(
|
||
// 'Здесь будут жить наши данные и SelfPrivacy-сервисы'),
|
||
// _MockForm(
|
||
// hintText: 'Hetzner API Token',
|
||
// length: 48,
|
||
// onPressed: () {
|
||
// var provider = cubit.state.all
|
||
// .firstWhere((p) => p.type == ProviderType.server);
|
||
// cubit.connect(provider);
|
||
// },
|
||
// ),
|
||
// SizedBox(height: 20),
|
||
// BrandButton.text(
|
||
// onPressed: () => _showModal(context, _HowHetzner()),
|
||
// title: 'Как получить API Token',
|
||
// ),
|
||
// ],
|
||
// ),
|
||
// );
|
||
// break;
|
||
// case ProviderType.domain:
|
||
// return BrandCard(
|
||
// isBlocked: true,
|
||
// child: Column(
|
||
// crossAxisAlignment: CrossAxisAlignment.start,
|
||
// children: [
|
||
// Image.asset('assets/images/logos/namecheap.png'),
|
||
// SizedBox(height: 10),
|
||
// BrandText.h2('2. Настройте домен'),
|
||
// 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',
|
||
// length: 2,
|
||
// onPressed: () {},
|
||
// ),
|
||
// SizedBox(height: 20),
|
||
// BrandButton.text(
|
||
// onPressed: () {},
|
||
// title: 'Как настроить DNS CloudFlare',
|
||
// ),
|
||
// SizedBox(height: 10),
|
||
// Image.asset('assets/images/logos/cloudflare.png'),
|
||
// SizedBox(height: 10),
|
||
// ],
|
||
// ),
|
||
// );
|
||
// break;
|
||
// case ProviderType.backup:
|
||
// return BrandCard(
|
||
// isBlocked: true,
|
||
// child: Column(
|
||
// crossAxisAlignment: CrossAxisAlignment.start,
|
||
// children: [
|
||
// Image.asset('assets/images/logos/aws.png'),
|
||
// SizedBox(height: 10),
|
||
// BrandText.h2('4. Подключите Amazon AWS для бекапа'),
|
||
// SizedBox(height: 10),
|
||
// BrandText.body2(
|
||
// 'IaaS-провайдер, для бесплатного хранения резервных копии ваших данных в зашифрованном виде'),
|
||
// _MockForm(
|
||
// hintText: 'Amazon AWS Access Key',
|
||
// length: 2,
|
||
// onPressed: () {
|
||
// var provider = cubit.state.all
|
||
// .firstWhere((p) => p.type == ProviderType.backup);
|
||
// cubit.connect(provider);
|
||
// },
|
||
// ),
|
||
// SizedBox(height: 20),
|
||
// BrandButton.text(
|
||
// onPressed: () {},
|
||
// title: 'Как получить API Token',
|
||
// ),
|
||
// ],
|
||
// ),
|
||
// );
|
||
// }
|
||
|
||
// return null;
|
||
// }
|