Skip to content

Commit 07fd29d

Browse files
CubeRomanMagellanMagellan
CubeRomanMagellan
and
Magellan
authored
SK-604: Update UI for Login_Sign up flow (#100)
* SK-567: flutter sdk development (#90) * create monorepo * add api * remove client old api * add tokens management * rename sama_chat_api to sama_sdk * SK-578: share to image (#91) * create monorepo * add api * remove client old api * add tokens management * rename sama_chat_api to sama_sdk * add image share to support * fix Popup with Send Image after share again --------- Co-authored-by: Magellan <magellan@connectycube.com> * add check for deleted user opponent (#93) Co-authored-by: Magellan <magellan@connectycube.com> * add MediaAttachmentBloc to menu (#95) Co-authored-by: Magellan <magellan@connectycube.com> * SK-589: implement ability to take a photo (#92) * create monorepo * add api * remove client old api * add tokens management * rename sama_chat_api to sama_sdk * add image share to support * add image_picker * add camera picker * update agpVersion --------- Co-authored-by: Magellan <magellan@connectycube.com> * SK-587: Hard back does not work (#94) * add pop invoke * minor fix didPop * add swipe ios impl --------- Co-authored-by: Magellan <magellan@connectycube.com> * fix app routing (#96) Co-authored-by: Magellan <magellan@connectycube.com> * add blocking (#97) Co-authored-by: Magellan <magellan@connectycube.com> * add auto complete (#98) Co-authored-by: Magellan <magellan@connectycube.com> * fix reply bubble (#99) Co-authored-by: Magellan <magellan@connectycube.com> * update login page --------- Co-authored-by: Magellan <magellan@connectycube.com>
1 parent 6c1d80a commit 07fd29d

2 files changed

Lines changed: 115 additions & 141 deletions

File tree

‎sama_chat_client/lib/src/features/login/view/login_form.dart‎

Lines changed: 51 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import 'package:go_router/go_router.dart';
66

77
import '../../../navigation/constants.dart';
88
import '../../../shared/ui/colors.dart';
9+
import '../../../shared/ui/view/text_field_form.dart';
910
import '../bloc/login_bloc.dart';
1011
import '../models/models.dart';
1112

@@ -105,20 +106,6 @@ class LoginFormState extends State<LoginForm> {
105106
const Padding(padding: EdgeInsets.all(8)),
106107
_EmailInput(),
107108
const Padding(padding: EdgeInsets.all(4)),
108-
Row(
109-
children: [
110-
Checkbox(
111-
checkColor: white,
112-
activeColor: whiteAluminum,
113-
value: loginWithNewUser,
114-
onChanged: (checked) {
115-
setState(() {
116-
loginWithNewUser = checked ?? true;
117-
});
118-
}),
119-
const Text('* Sign in automatically')
120-
],
121-
),
122109
] else ...[
123110
const Padding(padding: EdgeInsets.all(4)),
124111
Align(
@@ -170,40 +157,16 @@ class _UsernameInput extends StatelessWidget {
170157
return BlocBuilder<LoginBloc, LoginState>(
171158
buildWhen: (previous, current) => previous.username != current.username,
172159
builder: (context, state) {
173-
return Container(
174-
padding: const EdgeInsets.all(4),
175-
decoration: const BoxDecoration(
176-
borderRadius: BorderRadius.all(Radius.circular(12)),
177-
color: gainsborough,
178-
),
179-
child: TextField(
180-
key: const Key('loginForm_usernameInput_textField'),
181-
keyboardType: TextInputType.text,
160+
return TextFieldForm(
182161
onChanged: (username) =>
183162
context.read<LoginBloc>().add(LoginUsernameChanged(username)),
184-
decoration: InputDecoration(
185-
border: InputBorder.none,
186-
label: const Row(
187-
children: [
188-
Icon(
189-
Icons.person_outlined,
190-
size: 16,
191-
color: dullGray,
192-
),
193-
Text(
194-
'Username',
195-
style: TextStyle(color: dullGray, fontSize: 16),
196-
)
197-
],
198-
),
199-
errorText: state.username.displayError != null
200-
? state.username.displayError == UsernameValidationError.short
201-
? 'User name is too short'
202-
: null
203-
: null,
204-
),
205-
),
206-
);
163+
iconData: Icons.person_outlined,
164+
hint: 'Username',
165+
error: state.username.displayError != null
166+
? state.username.displayError == UsernameValidationError.short
167+
? 'User name is too short'
168+
: null
169+
: null);
207170
},
208171
);
209172
}
@@ -224,68 +187,41 @@ class _PasswordInputState extends State<_PasswordInput> {
224187
return BlocBuilder<LoginBloc, LoginState>(
225188
buildWhen: (previous, current) => previous.password != current.password,
226189
builder: (context, state) {
227-
return Container(
228-
padding: const EdgeInsets.all(4),
229-
decoration: const BoxDecoration(
230-
borderRadius: BorderRadius.all(
231-
Radius.circular(12),
232-
),
233-
color: gainsborough,
234-
),
235-
child: TextField(
236-
key: const Key('loginForm_passwordInput_textField'),
190+
return TextFieldForm(
237191
keyboardType: TextInputType.visiblePassword,
238192
onChanged: (password) =>
239193
context.read<LoginBloc>().add(LoginPasswordChanged(password)),
194+
iconData: Icons.lock_outline,
240195
obscureText: isPasswordInvisible,
241-
obscuringCharacter: '*',
242-
enableSuggestions: false,
243-
autocorrect: false,
244-
decoration: InputDecoration(
245-
border: InputBorder.none,
246-
label: const Row(
247-
children: [
248-
Icon(
249-
Icons.lock_outline,
250-
size: 16,
251-
color: dullGray,
252-
),
253-
Text(
254-
'Password',
255-
style: TextStyle(color: dullGray, fontSize: 16),
256-
)
257-
],
258-
),
259-
errorText: state.password.displayError != null
260-
? state.password.displayError == PasswordValidationError.short
261-
? 'Password is too short'
262-
: state.password.displayError ==
263-
PasswordValidationError.long
264-
? 'Password is too long'
265-
: state.password.displayError ==
266-
PasswordValidationError.unavailableSymbols
267-
? 'Password contains not allowed symbols'
268-
: null
269-
: null,
270-
suffixIcon: Padding(
271-
padding: const EdgeInsets.only(right: 8),
272-
child: IconButton(
273-
onPressed: () {
274-
setState(() {
275-
isPasswordInvisible = !isPasswordInvisible;
276-
});
277-
},
278-
icon: Icon(
279-
isPasswordInvisible
280-
? Icons.visibility_off_outlined
281-
: Icons.visibility_outlined,
282-
color: dullGray,
283-
),
196+
suffix: Padding(
197+
padding: const EdgeInsets.only(right: 8),
198+
child: IconButton(
199+
onPressed: () {
200+
setState(() {
201+
isPasswordInvisible = !isPasswordInvisible;
202+
});
203+
},
204+
icon: Icon(
205+
isPasswordInvisible
206+
? Icons.visibility_off_outlined
207+
: Icons.visibility_outlined,
208+
color: dullGray,
209+
size: 20,
284210
),
285211
),
286212
),
287-
),
288-
);
213+
hint: 'Password',
214+
error: state.password.displayError != null
215+
? state.password.displayError == PasswordValidationError.short
216+
? 'Password is too short'
217+
: state.password.displayError ==
218+
PasswordValidationError.long
219+
? 'Password is too long'
220+
: state.password.displayError ==
221+
PasswordValidationError.unavailableSymbols
222+
? 'Password contains not allowed symbols'
223+
: null
224+
: null);
289225
},
290226
);
291227
}
@@ -297,46 +233,19 @@ class _EmailInput extends StatelessWidget {
297233
return BlocBuilder<LoginBloc, LoginState>(
298234
buildWhen: (previous, current) => previous.email != current.email,
299235
builder: (context, state) {
300-
return Container(
301-
padding: const EdgeInsets.all(4),
302-
decoration: const BoxDecoration(
303-
borderRadius: BorderRadius.all(
304-
Radius.circular(12),
305-
),
306-
color: gainsborough,
307-
),
308-
child: TextField(
309-
keyboardType: TextInputType.emailAddress,
236+
return TextFieldForm(
310237
onChanged: (email) =>
311238
context.read<LoginBloc>().add(LoginEmailChanged(email)),
312-
enableSuggestions: false,
313-
autocorrect: false,
314-
decoration: InputDecoration(
315-
border: InputBorder.none,
316-
label: const Row(
317-
children: [
318-
Icon(
319-
Icons.email_outlined,
320-
size: 16,
321-
color: dullGray,
322-
),
323-
Padding(padding: EdgeInsets.all(4)),
324-
Text(
325-
'Email',
326-
style: TextStyle(color: dullGray, fontSize: 16),
327-
)
328-
],
329-
),
330-
errorText: state.email.displayError != null
331-
? state.email.displayError == EmailValidationError.empty
332-
? 'Email is too short'
333-
: state.email.displayError ==
334-
EmailValidationError.incorrect
335-
? 'The format of the email address is incorrect'
336-
: null
337-
: null),
338-
),
339-
);
239+
iconData: Icons.email_outlined,
240+
keyboardType: TextInputType.emailAddress,
241+
hint: 'Email',
242+
error: state.email.displayError != null
243+
? state.email.displayError == EmailValidationError.empty
244+
? 'Email is too short'
245+
: state.email.displayError == EmailValidationError.incorrect
246+
? 'The format of the email address is incorrect'
247+
: null
248+
: null);
340249
},
341250
);
342251
}
@@ -374,7 +283,7 @@ class _LoginButton extends StatelessWidget {
374283
isSignInValid || isSignUpValid ? white : gainsborough),
375284
shape: WidgetStatePropertyAll<RoundedRectangleBorder>(
376285
RoundedRectangleBorder(
377-
borderRadius: BorderRadius.circular(12.0),
286+
borderRadius: BorderRadius.circular(22),
378287
),
379288
),
380289
),
@@ -386,7 +295,8 @@ class _LoginButton extends StatelessWidget {
386295
);
387296
}
388297
: null,
389-
child: Text(isSignup ? 'Create account' : 'Login'),
298+
child: Text(isSignup ? 'Create account' : 'Login',
299+
style: const TextStyle(fontSize: 16)),
390300
),
391301
);
392302
},

‎sama_chat_client/lib/src/shared/ui/view/text_field_form.dart‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import 'package:flutter/material.dart';
2+
3+
import '../colors.dart';
4+
5+
class TextFieldForm extends StatelessWidget {
6+
final ValueChanged<String>? onChanged;
7+
final IconData iconData;
8+
final String hint;
9+
final TextInputType? keyboardType;
10+
final String? error;
11+
final Widget? suffix;
12+
final bool? obscureText;
13+
14+
const TextFieldForm(
15+
{super.key,
16+
required this.onChanged,
17+
required this.iconData,
18+
required this.hint,
19+
this.keyboardType,
20+
this.error,
21+
this.suffix,
22+
this.obscureText});
23+
24+
@override
25+
Widget build(BuildContext context) {
26+
return Container(
27+
padding: const EdgeInsets.all(4),
28+
height: 55,
29+
decoration: const BoxDecoration(
30+
borderRadius: BorderRadius.all(Radius.circular(28)),
31+
color: gainsborough,
32+
),
33+
child: TextField(
34+
keyboardType: keyboardType,
35+
style: const TextStyle(fontSize: 17),
36+
autocorrect: false,
37+
enableSuggestions: false,
38+
obscuringCharacter: '*',
39+
obscureText: obscureText ?? false,
40+
onChanged: (username) => onChanged,
41+
decoration: InputDecoration(
42+
border: InputBorder.none,
43+
contentPadding: const EdgeInsets.only(left: 12.0),
44+
isDense: true,
45+
label: Row(
46+
spacing: 10,
47+
children: [
48+
Icon(
49+
iconData,
50+
size: 26,
51+
color: dullGray,
52+
),
53+
Text(
54+
hint,
55+
style: const TextStyle(color: dullGray, fontSize: 16),
56+
)
57+
],
58+
),
59+
errorText: error,
60+
suffixIcon: suffix ?? const SizedBox(),
61+
),
62+
));
63+
}
64+
}

0 commit comments

Comments
 (0)