Skip to content

Commit 7404a0d

Browse files
SamuelTalletSamuelTallet
committed
Support Replica Set via URI #20 
1 parent 6d0aefd commit 7404a0d

File tree

6 files changed

+317
-178
lines changed

6 files changed

+317
-178
lines changed

‎source/Controllers/LoginController.php‎

Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
namespace Controllers;
44

5+
use Helpers\MongoDBHelper;
56
use Capsule\Response;
67

78
class LoginController extends Controller {
@@ -16,48 +17,61 @@ public static function ensureUserIsLogged() {
1617

1718
}
1819

19-
public function processFormData() : array {
20-
21-
$errors = [];
20+
private function processFormData() : array {
2221

22+
$requiredFields = [];
2323
$_SESSION['mpg'] = [];
2424

25-
if ( isset($_POST['user']) && !empty($_POST['user']) ) {
26-
$_SESSION['mpg']['mongodb_user'] = $_POST['user'];
27-
}
25+
if ( isset($_POST['uri']) ) {
2826

29-
if ( isset($_POST['password']) && !empty($_POST['password']) ) {
30-
$_SESSION['mpg']['mongodb_password'] = $_POST['password'];
31-
}
27+
if ( preg_match(MongoDBHelper::MDB_URI_REGEX, $_POST['uri']) ) {
28+
$_SESSION['mpg']['mongodb_uri'] = $_POST['uri'];
29+
} else {
30+
$requiredFields[] = 'URI';
31+
}
3232

33-
if ( isset($_POST['host']) && !empty($_POST['host']) ) {
34-
$_SESSION['mpg']['mongodb_host'] = $_POST['host'];
35-
} else {
36-
$errors[] = 'Host';
37-
}
33+
} elseif ( isset($_POST['host']) ) {
3834

39-
if ( isset($_POST['port']) && !empty($_POST['port']) ) {
40-
$_SESSION['mpg']['mongodb_port'] = $_POST['port'];
41-
}
42-
43-
if ( isset($_POST['database']) && !empty($_POST['database']) ) {
44-
$_SESSION['mpg']['mongodb_database'] = $_POST['database'];
35+
if ( isset($_POST['user']) && !empty($_POST['user']) ) {
36+
$_SESSION['mpg']['mongodb_user'] = $_POST['user'];
37+
}
38+
39+
if ( isset($_POST['password']) && !empty($_POST['password']) ) {
40+
$_SESSION['mpg']['mongodb_password'] = $_POST['password'];
41+
}
42+
43+
if ( !empty($_POST['host']) ) {
44+
$_SESSION['mpg']['mongodb_host'] = $_POST['host'];
45+
} else {
46+
$requiredFields[] = 'Host';
47+
}
48+
49+
if ( isset($_POST['port']) && !empty($_POST['port']) ) {
50+
$_SESSION['mpg']['mongodb_port'] = $_POST['port'];
51+
}
52+
53+
if ( isset($_POST['database']) && !empty($_POST['database']) ) {
54+
$_SESSION['mpg']['mongodb_database'] = $_POST['database'];
55+
}
56+
57+
} else {
58+
$requiredFields[] = 'URI or Host';
4559
}
4660

47-
return $errors;
61+
return $requiredFields;
4862

4963
}
5064

5165
public function renderViewAction() : Response {
5266

53-
if ( isset($_POST['login']) ) {
67+
if ( isset($_POST['uri']) || isset($_POST['host']) ) {
5468

55-
$errors = $this->processFormData();
69+
$requiredFields = $this->processFormData();
5670

57-
if ( count($errors) >= 1 ) {
71+
if ( count($requiredFields) >= 1 ) {
5872

5973
return new Response(200, $this->renderView('login', [
60-
'errors' => $errors
74+
'requiredFields' => $requiredFields
6175
]));
6276

6377
} else {

‎source/Helpers/MongoDBHelper.php‎

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,13 @@
66

77
class MongoDBHelper {
88

9+
/**
10+
* Regular expression for a MongoDB URI.
11+
*
12+
* @var string
13+
*/
14+
public const MDB_URI_REGEX = '/^mongodb(\+srv)?:\/\/.+$/';
15+
916
/**
1017
* Regular expression for a MongoDB ObjectID.
1118
*
@@ -40,24 +47,32 @@ private static function createClient() : Client {
4047
throw new \Exception('Session expired. Refresh browser.');
4148
}
4249

43-
$clientUri = 'mongodb://';
44-
45-
if ( isset($_SESSION['mpg']['mongodb_user'])
46-
&& isset($_SESSION['mpg']['mongodb_password'])
47-
) {
48-
$clientUri .= rawurlencode($_SESSION['mpg']['mongodb_user']) . ':';
49-
$clientUri .= rawurlencode($_SESSION['mpg']['mongodb_password']) . '@';
50-
}
51-
52-
$clientUri .= $_SESSION['mpg']['mongodb_host'];
53-
54-
if ( isset($_SESSION['mpg']['mongodb_port']) ) {
55-
$clientUri .= ':' . $_SESSION['mpg']['mongodb_port'];
56-
}
57-
// When it's not defined: port defaults to 27017.
50+
if ( isset($_SESSION['mpg']['mongodb_uri']) ) {
51+
52+
$clientUri = $_SESSION['mpg']['mongodb_uri'];
53+
54+
} else {
55+
56+
$clientUri = 'mongodb://';
57+
58+
if ( isset($_SESSION['mpg']['mongodb_user'])
59+
&& isset($_SESSION['mpg']['mongodb_password'])
60+
) {
61+
$clientUri .= rawurlencode($_SESSION['mpg']['mongodb_user']) . ':';
62+
$clientUri .= rawurlencode($_SESSION['mpg']['mongodb_password']) . '@';
63+
}
64+
65+
$clientUri .= $_SESSION['mpg']['mongodb_host'];
66+
67+
if ( isset($_SESSION['mpg']['mongodb_port']) ) {
68+
$clientUri .= ':' . $_SESSION['mpg']['mongodb_port'];
69+
}
70+
// When it's not defined: port defaults to 27017.
71+
72+
if ( isset($_SESSION['mpg']['mongodb_database']) ) {
73+
$clientUri .= '/' . $_SESSION['mpg']['mongodb_database'];
74+
}
5875

59-
if ( isset($_SESSION['mpg']['mongodb_database']) ) {
60-
$clientUri .= '/' . $_SESSION['mpg']['mongodb_database'];
6176
}
6277

6378
return new Client($clientUri);

‎static/css/mpg.login.css‎ renamed to ‎static/css/mpg-login.css‎

Lines changed: 73 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,25 @@
1+
/* Bootstrap reset */
2+
3+
.form-control:focus, .btn.focus, .btn:focus {
4+
5+
box-shadow: unset;
6+
7+
}
8+
9+
.input-group-text {
10+
11+
border: unset;
12+
13+
}
14+
115
/**
16+
* Shake effect.
17+
*
218
* @see https://teamtreehouse.com/community/shake-effect-with-javascript-only
319
*/
420

521
@keyframes shake {
22+
623
10%, 90% {
724
transform: translate3d(-1px, 0, 0);
825
}
@@ -18,14 +35,17 @@
1835
40%, 60% {
1936
transform: translate3d(4px, 0, 0);
2037
}
38+
2139
}
2240

23-
.apply-shake {
41+
.shake {
42+
2443
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
44+
2545
}
2646

2747
/**
28-
* Based on a snippet made by Mutiullah Samim.
48+
* Template based on a snippet created by Mutiullah Samim.
2949
*
3050
* @see https://bootsnipp.com/snippets/vl4R7
3151
*/
@@ -62,7 +82,7 @@ body {
6282

6383
}
6484

65-
.card-header-name {
85+
.mpg-card-header-title {
6686

6787
font-family: Ubuntu, ubuntu-medium;
6888

@@ -75,13 +95,59 @@ body {
7595
background-color: #5dad1d;
7696
color: white;
7797

78-
border: 0 !important;
98+
}
99+
100+
/**
101+
* Flip card.
102+
*
103+
* @see https://stackoverflow.com/questions/57512246/bootstrap-4-flip-card-on-click
104+
*/
105+
106+
.flip-card {
107+
108+
min-height: 190px;
109+
min-width: 322px;
110+
111+
perspective: 1000px;
112+
113+
transition: min-height 0.6s;
114+
115+
}
116+
117+
.flip-card.flipped {
118+
119+
min-height: 405px;
79120

80121
}
81122

82-
input:focus {
123+
.flip-card-inner {
124+
125+
transition: transform 0.6s;
126+
transform-style: preserve-3d;
83127

84-
outline: 0 0 0 0 !important;
85-
box-shadow: 0 0 0 0 !important;
128+
}
129+
130+
.flip-card.flipped .flip-card-inner {
131+
132+
transform: rotateY(180deg);
133+
134+
}
135+
136+
.flip-card-front, .flip-card-back {
86137

138+
position: absolute;
139+
backface-visibility: hidden;
140+
141+
}
142+
143+
.flip-card-back {
144+
145+
transform: rotateY(180deg);
146+
147+
}
148+
149+
.mpg-flip-card-button {
150+
151+
padding-left: 0;
152+
87153
}

‎static/js/mpg-login.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
2+
/**
3+
* MongoDB PHP GUI login namespace.
4+
*
5+
* @type {object}
6+
*/
7+
var MPGLogin = {};
8+
9+
/**
10+
* Event listeners sub-namespace.
11+
*
12+
* @type {object}
13+
*/
14+
MPGLogin.eventListeners = {};
15+
16+
/**
17+
* Adds an event listener on each "Flip card" button.
18+
*
19+
* @returns {void}
20+
*/
21+
MPGLogin.eventListeners.addFlipCardButtons = function() {
22+
23+
document.querySelectorAll('.mpg-flip-card-button').forEach(function(flipCardButton) {
24+
25+
flipCardButton.addEventListener('click', function(event) {
26+
27+
event.preventDefault();
28+
document.querySelector('.flip-card').classList.toggle('flipped');
29+
30+
});
31+
32+
});
33+
34+
};
35+
36+
/**
37+
* Adds an event listener on each required input field.
38+
*
39+
* @returns {void}
40+
*/
41+
MPGLogin.eventListeners.addRequiredInputs = function() {
42+
43+
document.querySelector('.card').addEventListener('animationend', function(event) {
44+
event.currentTarget.classList.remove('shake');
45+
});
46+
47+
document.querySelectorAll('input[required]').forEach(function(requiredInput) {
48+
49+
requiredInput.addEventListener('invalid', function(_event) {
50+
document.querySelector('.card').classList.add('shake');
51+
});
52+
53+
});
54+
55+
};
56+
57+
/**
58+
* Adds an event listener on each form.
59+
*
60+
* @returns {void}
61+
*/
62+
MPGLogin.eventListeners.addForms = function() {
63+
64+
document.querySelectorAll('form').forEach(function(form) {
65+
66+
form.addEventListener('submit', function(event) {
67+
68+
event.preventDefault();
69+
70+
/**
71+
* TODO: Submit form if credentials are good.
72+
* @see https://github.com/SamuelTS/MongoDB-PHP-GUI/issues/21
73+
*/
74+
event.currentTarget.submit();
75+
76+
});
77+
78+
});
79+
80+
};
81+
82+
// When document is ready:
83+
window.addEventListener('DOMContentLoaded', function(_event) {
84+
85+
MPGLogin.eventListeners.addFlipCardButtons();
86+
MPGLogin.eventListeners.addRequiredInputs();
87+
MPGLogin.eventListeners.addForms();
88+
89+
});

0 commit comments

Comments
 (0)