diff --git a/.idea/libraries/Dart_Packages.xml b/.idea/libraries/Dart_Packages.xml
index f17be9f..a4019a6 100644
--- a/.idea/libraries/Dart_Packages.xml
+++ b/.idea/libraries/Dart_Packages.xml
@@ -86,6 +86,13 @@
+
+
+
+
+
+
+
@@ -93,6 +100,13 @@
+
+
+
+
+
+
+
@@ -317,6 +331,8 @@
+
+
diff --git a/justMUSIC/assets/images/hide_icon.png b/justMUSIC/assets/images/hide_icon.png
new file mode 100644
index 0000000..ee30f3e
Binary files /dev/null and b/justMUSIC/assets/images/hide_icon.png differ
diff --git a/justMUSIC/assets/images/show_icon.png b/justMUSIC/assets/images/show_icon.png
new file mode 100644
index 0000000..ee083c5
Binary files /dev/null and b/justMUSIC/assets/images/show_icon.png differ
diff --git a/justMUSIC/lib/components/login_button.dart b/justMUSIC/lib/components/login_button.dart
index 9e421e8..fd82842 100644
--- a/justMUSIC/lib/components/login_button.dart
+++ b/justMUSIC/lib/components/login_button.dart
@@ -1,6 +1,5 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
class LoginButton extends StatefulWidget {
const LoginButton({Key? key}) : super(key: key);
@@ -15,6 +14,7 @@ class _LoginButtonState extends State {
return ElevatedButton(
onPressed: () {},
style: ButtonStyle(
+ backgroundColor: MaterialStateProperty.all(Color(0xFF1C1C1C)),
overlayColor:
MaterialStateProperty.all(Color(0xffD3C2FF).withOpacity(0.2)),
shape: MaterialStateProperty.all(RoundedRectangleBorder(
@@ -39,7 +39,7 @@ class _LoginButtonState extends State {
),
child: Container(
padding: EdgeInsets.only(top: 20, bottom: 20),
- constraints: BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
+ constraints: BoxConstraints(maxWidth: 600, minHeight: 50.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
diff --git a/justMUSIC/lib/screens/login_screen.dart b/justMUSIC/lib/screens/login_screen.dart
index 7bc1a33..8676ef7 100644
--- a/justMUSIC/lib/screens/login_screen.dart
+++ b/justMUSIC/lib/screens/login_screen.dart
@@ -1,5 +1,7 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
+import 'package:flutter_signin_button/button_list.dart';
+import 'package:flutter_signin_button/button_view.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:justmusic/values/constants.dart';
@@ -13,43 +15,300 @@ class LoginScreen extends StatefulWidget {
}
class _LoginScreenState extends State {
+ bool passenable = true;
+ final _focusNode = FocusNode();
+ final _formKey = GlobalKey();
+
@override
Widget build(BuildContext context) {
- return Scaffold(
- backgroundColor: bgColor,
- body: Align(
- child: Column(
- children: [
- Expanded(
+ return GestureDetector(
+ onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
+ child: Scaffold(
+ resizeToAvoidBottomInset: false,
+ backgroundColor: bgColor,
+ body: Align(
+ child: SizedBox(
+ height: double.infinity,
+ width: 600,
child: Column(
- children: [
- Text(
- "Te revoilà!",
- style: GoogleFonts.plusJakartaSans(
- color: Colors.white,
- fontWeight: FontWeight.w500,
- fontSize: 38),
- ),
- SizedBox(
- height: 10,
- ),
- SizedBox(
- width: 230,
- child: Text(
- "Bon retour parmis nous tu nous as manqué!",
- style: GoogleFonts.plusJakartaSans(
- color: Colors.white,
- fontWeight: FontWeight.w300,
- fontSize: 20),
- textAlign: TextAlign.center,
- ),
- ),
- LoginButton()
- ],
- ))
- ],
- ),
- ),
- );
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Expanded(
+ child: Padding(
+ padding: EdgeInsets.only(left: 40, right: 40),
+ child: Form(
+ key: _formKey,
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.center,
+ children: [
+ Expanded(
+ flex: 5,
+ child: Padding(
+ padding: EdgeInsets.only(bottom: 60),
+ child: Column(
+ mainAxisAlignment:
+ MainAxisAlignment.end,
+ children: [
+ Text(
+ "Te revoilà!",
+ style:
+ GoogleFonts.plusJakartaSans(
+ color: Colors.white,
+ fontWeight:
+ FontWeight.w600,
+ fontSize: 38),
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ SizedBox(
+ width: 230,
+ child: Text(
+ "Bon retour parmis nous tu nous as manqué!",
+ style:
+ GoogleFonts.plusJakartaSans(
+ color: Colors.white,
+ fontWeight:
+ FontWeight.w400,
+ fontSize: 20),
+ textAlign: TextAlign.center,
+ ),
+ ),
+ ],
+ ),
+ ),
+ ),
+ Expanded(
+ flex: 4,
+ child: Column(
+ crossAxisAlignment:
+ CrossAxisAlignment.end,
+ children: [
+ TextFormField(
+ validator: (value) {
+ if (value == null ||
+ value.isEmpty) {
+ return 'TODO';
+ }
+ return null;
+ },
+ cursorColor: primaryColor,
+ keyboardType:
+ TextInputType.emailAddress,
+ style:
+ GoogleFonts.plusJakartaSans(
+ color: primaryColor),
+ decoration: InputDecoration(
+ focusedBorder: OutlineInputBorder(
+ borderSide: BorderSide(
+ width: 1,
+ color:
+ strokeTextField),
+ borderRadius: BorderRadius.all(
+ Radius.circular(10))),
+ contentPadding:
+ EdgeInsets.only(
+ top: 0,
+ bottom: 0,
+ left: defaultPadding),
+ fillColor: bgTextField,
+ filled: true,
+ focusColor: Color.fromRGBO(
+ 255, 255, 255, 0.30),
+ enabledBorder: OutlineInputBorder(
+ borderSide: BorderSide(
+ width: 1,
+ color:
+ strokeTextField),
+ borderRadius: BorderRadius.all(
+ Radius.circular(10))),
+ hintText: 'Email',
+ hintStyle:
+ GoogleFonts.plusJakartaSans(color: strokeTextField)),
+ ),
+ SizedBox(
+ height: 18,
+ ),
+ TextFormField(
+ obscureText: passenable,
+ validator: (value) {
+ if (value == null ||
+ value.isEmpty) {
+ return 'TODO';
+ }
+ return null;
+ },
+ cursorColor: primaryColor,
+ keyboardType:
+ TextInputType.emailAddress,
+ style:
+ GoogleFonts.plusJakartaSans(
+ color: primaryColor),
+ decoration: InputDecoration(
+ focusedBorder:
+ OutlineInputBorder(
+ borderSide: BorderSide(
+ width: 1,
+ color:
+ strokeTextField),
+ borderRadius:
+ BorderRadius.all(
+ Radius.circular(
+ 10))),
+ contentPadding: EdgeInsets.only(
+ top: 0,
+ bottom: 0,
+ left: defaultPadding),
+ fillColor: bgTextField,
+ filled: true,
+ focusColor: Color.fromRGBO(
+ 255, 255, 255, 0.30),
+ enabledBorder:
+ OutlineInputBorder(
+ borderSide: BorderSide(
+ width: 1,
+ color:
+ strokeTextField),
+ borderRadius:
+ BorderRadius.all(
+ Radius.circular(
+ 10))),
+ hintText: 'Mot de passe',
+ hintStyle:
+ GoogleFonts.plusJakartaSans(
+ color: strokeTextField),
+ suffixIcon: Container(
+ padding: EdgeInsets.only(
+ right: 10),
+ margin: EdgeInsets.all(5),
+ height: 3,
+ child: InkWell(
+ onTap: () {
+ setState(() {
+ if (passenable) {
+ passenable = false;
+ } else {
+ passenable = true;
+ }
+ });
+ }, // Image tapped
+ splashColor: Colors
+ .white10, // Splash color over image
+ child: Image(
+ image: passenable
+ ? AssetImage(
+ "assets/images/show_icon.png")
+ : AssetImage(
+ "assets/images/hide_icon.png"),
+ height: 2,
+ ),
+ )),
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(top: 10),
+ child: Text(
+ "Mot de passe oublié?",
+ style:
+ GoogleFonts.plusJakartaSans(
+ color: Colors.white),
+ ),
+ ),
+ SizedBox(
+ height: defaultPadding,
+ ),
+ SizedBox(
+ width: 600,
+ child: LoginButton()),
+ ],
+ )),
+ Expanded(
+ flex: 3,
+ child: Padding(
+ padding: EdgeInsets.only(top: 20),
+ child: Column(
+ mainAxisAlignment:
+ MainAxisAlignment.start,
+ crossAxisAlignment:
+ CrossAxisAlignment.center,
+ children: [
+ Row(
+ mainAxisAlignment:
+ MainAxisAlignment
+ .spaceEvenly,
+ children: [
+ Container(
+ color: Color(0xFF3D3D3D),
+ width: 100,
+ height: 1,
+ ),
+ Padding(
+ padding:
+ const EdgeInsets.only(
+ left:
+ defaultPadding,
+ right:
+ defaultPadding),
+ child: Text(
+ 'Ou',
+ style: GoogleFonts
+ .plusJakartaSans(
+ color:
+ Colors.white,
+ fontWeight:
+ FontWeight
+ .bold),
+ ),
+ ),
+ Container(
+ width: 100,
+ height: 1,
+ color: Color(0xFF3D3D3D),
+ ),
+ ],
+ ),
+ SizedBox(height: defaultPadding),
+ SignInButton(
+ Buttons.Google,
+ text: "Login with Google",
+ onPressed: () {},
+ ),
+ Padding(
+ padding:
+ EdgeInsets.only(top: 20),
+ child: RichText(
+ textAlign: TextAlign.center,
+ text: TextSpan(
+ text: 'Pas encore inscrit?',
+ style: GoogleFonts
+ .plusJakartaSans(
+ color: Colors.white,
+ fontWeight:
+ FontWeight.w400,
+ fontSize: 13),
+ children: [
+ TextSpan(
+ text: " S’inscire",
+ style: GoogleFonts
+ .plusJakartaSans(
+ fontSize: 13,
+ fontWeight:
+ FontWeight
+ .w400,
+ color:
+ primaryColor)),
+ ],
+ ),
+ ),
+ )
+ ],
+ ),
+ ))
+ ],
+ ))))
+ ],
+ )),
+ ),
+ ));
}
}
diff --git a/justMUSIC/lib/values/constants.dart b/justMUSIC/lib/values/constants.dart
index 29cfecb..50d327a 100644
--- a/justMUSIC/lib/values/constants.dart
+++ b/justMUSIC/lib/values/constants.dart
@@ -9,6 +9,8 @@ const grayColor = Color(0xFF242424);
const profileBttnColor = Color(0xFF232323);
const warningBttnColor = Color(0xFF141414);
const disabledBttnColor = Color(0xFF1F1B2E);
+const bgTextField = Color(0xFF1C1B23);
+const strokeTextField = Color(0xFF373546);
// All constants important too us
diff --git a/justMUSIC/pubspec.lock b/justMUSIC/pubspec.lock
index 557e273..9975bfb 100644
--- a/justMUSIC/pubspec.lock
+++ b/justMUSIC/pubspec.lock
@@ -83,11 +83,25 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.2"
+ flutter_signin_button:
+ dependency: "direct main"
+ description:
+ name: flutter_signin_button
+ url: "https://pub.dartlang.org"
+ source: hosted
+ version: "2.0.0"
flutter_test:
dependency: "direct dev"
description: flutter
source: sdk
version: "0.0.0"
+ font_awesome_flutter:
+ dependency: transitive
+ description:
+ name: font_awesome_flutter
+ url: "https://pub.dartlang.org"
+ source: hosted
+ version: "9.2.0"
google_fonts:
dependency: "direct main"
description:
diff --git a/justMUSIC/pubspec.yaml b/justMUSIC/pubspec.yaml
index 28319e9..381fbc8 100644
--- a/justMUSIC/pubspec.yaml
+++ b/justMUSIC/pubspec.yaml
@@ -39,6 +39,7 @@ dependencies:
google_fonts: ^4.0.4
gradiantbutton: ^0.0.1
smooth_corner: ^1.1.0
+ flutter_signin_button: ^2.0.0
dev_dependencies:
flutter_test: