Skip to content

Commit

Permalink
Fix UI styling issues in mfa.php and UI.php
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndrewPoppe
AndrewPoppe committed Nov 28, 2023
1 parent 6cba9b4 commit 71e621a
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 41 deletions.
5 changes: 4 additions & 1 deletion src/classes/UI.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,10 @@ public function ShowParticipantHeader(string $title)
left: 0;
width: 100%;
}
}
}
.rcpro-hr-big {
margin: 2rem 0;
}
</style>
</head>
<body>
Expand Down
105 changes: 66 additions & 39 deletions src/mfa.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,19 +118,17 @@

<div id="emailMFAContainer" class="mfaOptionContainer" style="display: <?= $showEmail ? 'block' : 'none' ?>;">
<div style="text-align: center;">
<h4>
<div class="row align-items-center">
<div class="col-2">
<span class="fa-layers fa-fw fa-2x text-rcpro">
<i class="fa-solid fas fa-envelope"></i>
</span>
</div>
<div class="col">
<?= $module->framework->tt("mfa_text7") ?>
</div>
<div class="row align-items-center mfa-option-title">
<div class="col-2">
<span class="fa-layers fa-fw fa-2x text-rcpro">
<i class="fa-solid fas fa-envelope"></i>
</span>
</div>
<div class="col">
<?= $module->framework->tt("mfa_text7") ?>
</div>
</h4>
<span style="font-size: large;">
</div>
<span class="mfa-option-subtitle">
<?= $resend ? $module->framework->tt("mfa_resend1") : $module->framework->tt("mfa_text1") ?>
<strong>
<?= $participantEmail ?>
Expand Down Expand Up @@ -158,9 +156,9 @@ class="form-control <?= (!empty($mfa_err)) ? 'is-invalid' : ''; ?>" required pat
<input type="hidden" name="redcap_csrf_token" value="<?= $module->framework->getCSRFToken() ?>">
<input type="hidden" name="emailMfa" value="true">
</form>
<hr>
<hr class="<?= $isMobileDevice ? 'rcpro-hr-big' : '' ?>">
<div style="text-align: center;">
<?= $module->framework->tt('mfa_resend2') ?> <a href="<?= $module->getUrl("src/mfa.php?resend=true", true); ?>">
<?= $module->framework->tt('mfa_resend2') ?><?= $isMobileDevice ? '<br>' : ' '?><a href="<?= $module->getUrl("src/mfa.php?resend=true", true); ?>">
<?= $module->framework->tt('mfa_resend3') ?>
</a>
</div>
Expand All @@ -172,8 +170,7 @@ class="form-control <?= (!empty($mfa_err)) ? 'is-invalid' : ''; ?>" required pat
style="display: <?= $showAuthenticatorApp ? 'block' : 'none' ?>;">
<?php if ( $mfaAuthenticatorAppEnabled ) { ?>
<div style="text-align: center;">
<h4>
<div class="row align-items-center">
<div class="row align-items-center mfa-option-title">
<div class="col-2">
<span class="fa-layers fa-fw fa-2x" style="color: #900000;">
<i class="fa-solid fa-mobile-screen" data-fa-transform="grow-4"></i>
Expand All @@ -184,8 +181,7 @@ class="form-control <?= (!empty($mfa_err)) ? 'is-invalid' : ''; ?>" required pat
<?= $module->framework->tt("mfa_text4") ?>
</div>
</div>
</h4>
<span style="font-size: large;">
<span class="mfa-option-subtitle">
<?= $module->framework->tt("mfa_text5") ?>
</span>
</div>
Expand All @@ -212,9 +208,9 @@ class="form-control <?= (!empty($mfa_err)) ? 'is-invalid' : ''; ?>" required pat
<input type="hidden" name="redcap_csrf_token" value="<?= $module->framework->getCSRFToken() ?>">
<input type="hidden" name="authApp" value="true">
</form>
<hr>
<hr class="<?= $isMobileDevice ? 'rcpro-hr-big' : '' ?>">
<div style="text-align: center;">
<?= $module->framework->tt('mfa_info25') ?>
<?= $module->framework->tt('mfa_info25') ?><?= $isMobileDevice ? '<br>' : ' '?>
<a href="javascript:;" onclick="window.rcpro.showMFAInfo();return false;">
<?= $showFullAuthenticatorAppInfo ? $module->framework->tt('mfa_info1') : $module->framework->tt('mfa_info24') ?>
</a>
Expand All @@ -233,8 +229,8 @@ class="form-control <?= (!empty($mfa_err)) ? 'is-invalid' : ''; ?>" required pat
<?= $module->tt("mfa_text10") ?>
</p>
</div>
<div class="container" style="border-collapse: collapse;">
<div class="row align-items-center p-2 mfa-option" onclick="window.rcpro.chooseAuthenticatorAppMFA();">
<div class="container-lg" style="border-collapse: collapse;">
<div class="row align-items-center p-3 mfa-option" onclick="window.rcpro.chooseAuthenticatorAppMFA();">
<div class="col-2">
<span class="fa-layers fa-fw fa-2x text-rcpro">
<i class="fa-solid fa-mobile-screen" data-fa-transform="grow-4"></i>
Expand All @@ -247,13 +243,13 @@ class="form-control <?= (!empty($mfa_err)) ? 'is-invalid' : ''; ?>" required pat
<?= $module->framework->tt('mfa_text11') ?>
</strong>
<br>
<span style="font-size: small;">
<span class="method-description">
<?= $module->framework->tt('mfa_text13') ?>
</span>
</span>
</div>
</div>
<div class="row align-items-center p-2 mfa-option" onclick="window.rcpro.chooseEmailMFA();">
<div class="row align-items-center p-3 mfa-option" onclick="window.rcpro.chooseEmailMFA();">
<div class="col-2">
<span class="fa-layers fa-fw fa-2x text-rcpro">
<i class="fa-solid fas fa-envelope"></i>
Expand All @@ -265,7 +261,7 @@ class="form-control <?= (!empty($mfa_err)) ? 'is-invalid' : ''; ?>" required pat
<?= $module->framework->tt('mfa_text12') ?>
</strong>
<br>
<span style="font-size: small;">
<span class="method-description">
<?= $module->framework->tt('mfa_text14') ?>
</span>
</span>
Expand All @@ -281,27 +277,29 @@ class="form-control <?= (!empty($mfa_err)) ? 'is-invalid' : ''; ?>" required pat
</div>

<style>
.wrapper {
width: 540px;
.method-description {
font-size: 1.75rem;
line-height: 0.5;
}

div.mfaOptionContainer {
margin: 5%;
}

img#rcpro-logo {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
.mfa-option-subtitle {
font-size: 2rem;
margin-bottom: 10%;
}

.mfa-option {
cursor: pointer;
border: 1px solid #e1e1e1;
border-bottom: none;
line-height: 1;
}

.mfa-option:hover {
background-color: #f7f6f6;
}

.mfa-option:last-child {
border-bottom: 1px solid #e1e1e1;
}
Expand All @@ -320,11 +318,6 @@ class="form-control <?= (!empty($mfa_err)) ? 'is-invalid' : ''; ?>" required pat
;
}

div.mfaOptionContainer {
width: 360px;
margin: auto;
}

button.btn-mfa-control {
width: 100%;
}
Expand Down Expand Up @@ -383,6 +376,40 @@ class="form-control <?= (!empty($mfa_err)) ? 'is-invalid' : ''; ?>" required pat
-webkit-animation: fa-spin 0.5s infinite linear;
animation: fa-spin 0.5s infinite linear;
}

/* Large Device (non-mobile) */
@media screen and (min-aspect-ratio: 13/9) {
.wrapper {
width: 540px;
}

img#rcpro-logo {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
}
.method-description {
font-size: small;
}

.mfa-option {
line-height: 1.5;
}

div.mfaOptionContainer {
width: 360px;
margin: auto;
}

.mfa-option-title {
font-size: 1.5rem;
}
.mfa-option-subtitle {
font-size: large;
}
}

</style>
<script src="<?= $module->framework->getUrl('lib/jQuery/jquery-3.7.1.min.js', true) ?>"></script>
<?php
Expand Down
2 changes: 1 addition & 1 deletion src/settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ class="form-check-input <?php echo (!empty($prevent_email_login_err)) ? 'is-inva
<?php }
if ( $showMfa ) {
$mfaChecked = $settings["mfa"] ? "checked" : "";
$mfaAuthenticatorAppChecked = $mfaAuthenticatorAppEnabled ? "checked" : "";
$mfaAuthenticatorAppChecked = $settings["mfa-authenticator-app"] ? "checked" : "";
?>
<div class="card">
<div class="card-header">
Expand Down

0 comments on commit 71e621a

Please sign in to comment.