Add Login Panel (#424)

* Add Dark Mode * Prettify dark mode toggler * New line * Styles improvements * Add Login Panel * Add .DS_Store to .gitignore * Change header background color * Remove commented lines * LoginPage.js => login.js * Design improvements * Add error message on incorrect login * Design improve * Design improvement #2 * Design improvements #3 * Design improvements #4 * Fix username * Move close button to the panel * Add icons * Remove .DS_Store files * Login functional improvement * Delete .DS_Store file * Remove image samples * Prettifying code * Resolving webpack errors * Add logout button * Add sign-in and sign-out icons * Fix logout * Login improvements * Add login on backend * Making oauth work too * fabrik_login_system -> isOAuth * Fix OAuth logic * Add password hashing * Change error message
Cloud-CV · Nov 6, 2018 · 6c183e9 · 6c183e9
1 parent 4b7e3ed
commit 6c183e9
Show file tree

Hide file tree

Showing 6 changed files with 449 additions and 41 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@ env/
 .coverage
 .coverage.*
 .cache
+.DS_Store
 
 # Django stuff:
 *.log

diff --git a/backendAPI/views.py b/backendAPI/views.py
@@ -6,19 +6,41 @@
 
 def check_login(request):
     try:
-        user = User.objects.get(username=request.user.username)
-        user_id = user.id
-        username = 'Anonymous'
+        if request.GET.get('isOAuth') == 'false':
+            username = request.GET['username']
+            password = request.GET['password']
+            user = User.objects.get(username=username)
+            user_id = user.id
 
-        is_authenticated = user.is_authenticated()
-        if (is_authenticated):
-            username = user.username
+            if not user.check_password(password):
+                return JsonResponse({
+                    'result': False,
+                    'error': 'Please enter valid credentials'
+                })
 
-        return JsonResponse({
-            'result': is_authenticated,
-            'user_id': user_id,
-            'username': username
-        })
+            is_authenticated = user.is_authenticated()
+            if (is_authenticated):
+                username = user.username
+
+            return JsonResponse({
+                'result': is_authenticated,
+                'user_id': user_id,
+                'username': username,
+            })
+        else:
+            user = User.objects.get(username=request.user.username)
+            user_id = user.id
+            username = 'Anonymous'
+
+            is_authenticated = user.is_authenticated()
+            if (is_authenticated):
+                username = user.username
+
+            return JsonResponse({
+                'result': is_authenticated,
+                'user_id': user_id,
+                'username': username
+            })
     except Exception as e:
         return JsonResponse({
             'result': False,

diff --git a/ide/static/css/login_style.css b/ide/static/css/login_style.css
@@ -0,0 +1,267 @@
+#sidebar {
+	z-index: 1000;
+}
+
+#sidebar-login-button {
+    background: rgb(205, 207, 210);
+    color: rgb(69, 80, 97);
+    text-align: center;
+    border-radius: 5px;
+    transition: 0.2s;
+    position: relative;
+}
+
+#sidebar-login-button:hover {
+	cursor: pointer;
+}
+
+#sidebar-login-button span {
+	position: absolute;
+	left: 9px;
+	font-size: 20px;
+	top: 7px;
+}
+
+#login-prepanel {
+	background: rgba(51, 51, 51, 0.7);
+
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	vertical-align: center;
+	padding: 70px 0;
+	transition: 0.2s;
+	z-index: -100;
+	opacity: 0;
+}
+
+.login-prepanel-enabled {
+	z-index: 100 !important;
+	opacity: 1 !important;
+}
+
+#login-panel-close {
+	position: absolute;
+	right: 5px;
+	top: 5px;
+	font-size: 25px;
+	color: white;
+}
+
+#login-panel-close:hover {
+	cursor: pointer;
+}
+
+@keyframes frames-logo-appear {
+	from {
+		top: 10px;
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+		top: 0px;
+	}
+}
+
+.login-panel {
+	position: relative;
+	width: 350px;
+	background: rgba(243, 243, 243, 0.99);
+	box-shadow: 0px 0px 2px 1px rgb(100, 100, 100);
+	margin: auto;
+	text-align: left;
+	z-index: 1000;
+	border-radius: 3px;
+
+	animation-name: frames-logo-appear;
+	animation-duration: 0.5s;
+	padding-bottom: 35px;
+}
+
+.login-panel-main {
+	padding: 20px;
+}
+
+
+.login-logo {
+	text-align: center;
+	background: rgb(71, 80, 97);
+	padding: 20px;
+	box-shadow: 0px 1px 1px 1px rgba(100, 100, 100, 0.3);
+}
+
+#login-logo {
+	position: relative;
+	transition: 0.5s;
+	max-height: 50px;
+	margin: 0 auto;
+	padding: 7px 0px 7px 0px;
+
+	animation-name: frames-logo-appear;
+	animation-duration: 0.5s;
+}
+
+.login-prepanel-enabled #login-logo {
+	top: 0px;
+	opacity: 1;
+}
+
+.login-button {
+	margin-bottom: 20px;
+	margin-top: 10px;
+	z-index: 100;
+}
+
+.login-button:hover {
+	opacity: 1;
+	cursor: pointer;
+}
+
+.login-button .btn-social {
+	box-shadow: none !important;
+	color: rgb(69, 80, 97);
+	background: rgb(205, 207, 210);
+}
+
+.login-button .btn-social:hover {
+	color: rgb(69, 80, 97);
+}
+
+.btn-social span {
+	border-right: none !important;
+}
+
+.extra-login {
+	margin-bottom: 10px !important;
+}
+
+#login-error-message {
+	position: relative;
+	background: rgba(221, 75, 57, 0.3);
+	border-radius: 4px;
+	border: 1px solid rgba(221, 75, 57, 0.8);
+	padding: 7px;
+	color: rgb(69, 80, 97);
+	display: none;
+	padding-left: 30px;
+}
+
+#login-error-message i {
+	color: rgba(221, 75, 57, 0.8);
+	position: absolute;
+	display: block;
+	left: 3px;
+	top: 5px;
+}
+
+#login-error-message-text {
+	display: inline;
+}
+
+#successful-login-notification {
+	position: fixed;
+	background: rgba(102, 187, 106, 0.3);
+	border-radius: 4px;
+	border: 1px solid rgba(102, 187, 106, 0.8);
+	padding: 9px;
+	color: rgb(69, 80, 97);
+	display: none;
+	right: 30px;
+	top: 30px;
+	padding-left: 30px;
+}
+
+#successful-login-notification i {
+	color: rgba(102, 187, 106, 0.8);
+	position: absolute;
+	left: 3px;
+	top: 6px;
+}
+
+.cut {
+	position: relative;
+	height: 2px;
+	background: black;
+	opacity: 0.1;
+	top: 75px;
+	margin-left: 40px;
+	margin-right: 40px;
+}
+
+.login-action-icon {
+	position: relative;
+	top: 5px;
+	font-size: 22px;
+	line-height: 10px;
+}
+
+#login-prepanel h5 {
+	position: relative;
+}
+
+.login-invalid {
+	position: absolute;
+	right: 20px;
+	top: 10px;
+	color: #ff7676;
+	opacity: 0;
+	transition: 0.3s;
+}
+
+.login-invalid-enabled {
+	right: 10px;
+	opacity: 1;
+}
+
+.login-panel input {
+	outline: none;
+	background: none;
+	border: none;
+	color: rgb(69, 80, 97);
+	font-size: 15px;
+}
+
+.login-prebtn {
+	display: inline;
+}
+
+.login-panel .col-md-6 {
+	padding-left: 0px;
+	padding-right: 5px;
+	margin-right: 3px;
+}
+
+.login-panel .col-md-5 {
+	padding-left: 0px;
+	padding-right: 0px;
+}
+
+.btn-social {
+	width: 153px !important;
+	opacity: 0.8;
+	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.6);
+	transition: 0.2s;
+}
+
+.btn-social:hover  {
+	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.6);
+}
+
+.img-fabrik-sample {
+	display: inline;
+}
+
+.sample-1 {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+}
+
+.sample-2 {
+	position: absolute;
+	top: 0px;
+	right: 10px;
+}
diff --git a/ide/static/js/content.js b/ide/static/js/content.js
@@ -1306,7 +1306,6 @@ class Content extends React.Component {
               urlModal={this.urlModal}
               updateHistoryModal={this.updateHistoryModal}
              />
-             <h5 className="sidebar-heading">LOGIN</h5>
              <Login setUserId={this.setUserId} setUserName={this.setUserName}></Login>
              <h5 className="sidebar-heading insert-layer-title">
               <input id="layer-search-input" placeholder="Search for layer"></input>