commit eec36bdd27afb89b64aed04b9d0f300e36cdbb3b
parent 3da9137515feaf4a77c610d64dc514ee6ef40156
Author: n0tr1v <n0tr1v@protonmail.com>
Date: Sun, 4 Dec 2022 22:27:45 -0500
improve UI/UX
Diffstat:
3 files changed, 17 insertions(+), 12 deletions(-)
diff --git a/pkg/web/handlers/handlers.go b/pkg/web/handlers/handlers.go
@@ -964,6 +964,7 @@ func ForgotPasswordHandler(c echo.Context) error {
data.Username = c.Request().PostFormValue("username")
captchaID := c.Request().PostFormValue("captcha_id")
captchaInput := c.Request().PostFormValue("captcha")
+ data.GpgMode = utils.DoParseBool(c.Request().PostFormValue("gpg_mode"))
if err := hutils.CaptchaVerifyString(c, captchaID, captchaInput); err != nil {
data.ErrCaptcha = err.Error()
@@ -983,8 +984,6 @@ func ForgotPasswordHandler(c echo.Context) error {
return c.Render(http.StatusOK, "forgot-password", data)
}
- data.GpgMode = utils.DoParseBool(c.Request().PostFormValue("gpg_mode"))
-
if data.GpgMode {
data.ToBeSignedMessage = generatePgpToBeSignedTokenMessage(user.ID, user.GPGPublicKey)
diff --git a/pkg/web/public/css/style.css b/pkg/web/public/css/style.css
@@ -40,22 +40,28 @@ input[type=text], input[type=password], input[type=number], input[type=email], i
.censored { background-color: black; color: black; padding: 0 3px; }
.censored:hover { background-color: black; color: white; }
-input.transparent-input.is-invalid {
+input.transparent-input.is-invalid, textarea.transparent-input.is-invalid {
border: 1px solid rgba(200, 0, 0, 0.8) !important;
}
-input.transparent-input {
+input.transparent-input, textarea.transparent-input {
background-color: rgba(50, 50, 50, 0.8) !important;
border: 1px solid rgba(200, 255, 255, 0.8) !important;
color: #ccc !important;
}
-input.transparent-input:hover {
+input.transparent-input:hover, textarea.transparent-input:hover {
background-color: rgba(50, 50, 50, 0.8) !important;
border: 1px solid rgba(100, 200, 255, 0.8) !important;
}
-input.transparent-input::placeholder {
+input.transparent-input::placeholder, textarea.transparent-input::placeholder {
color: #aaa !important;
}
+textarea.transparent-input {
+ white-space: pre;
+ overflow-wrap: normal;
+ overflow-x: scroll;
+}
+
.bg-label {
border-radius: 3px;
background-color: rgba(50, 50, 50, 0.7) !important;
diff --git a/pkg/web/public/views/pages/forgot-password.gohtml b/pkg/web/public/views/pages/forgot-password.gohtml
@@ -94,11 +94,11 @@
</div>
<div class="form-group">
<span class="bg-label">
- <input id="gpg_mode_decrypt" name="gpg_mode" value="0" type="radio" checked />
+ <input id="gpg_mode_decrypt" name="gpg_mode" value="0" type="radio"{{ if not .Data.GpgMode }} checked{{ end }} />
<label for="gpg_mode_decrypt">Decrypt code</label>
</span>
<span class="bg-label ml-2">
- <input id="gpg_mode_sign" name="gpg_mode" value="1" type="radio" />
+ <input id="gpg_mode_sign" name="gpg_mode" value="1" type="radio"{{ if .Data.GpgMode }} checked{{ end }} />
<label for="gpg_mode_sign">Sign message</label>
</span>
</div>
@@ -130,11 +130,11 @@
{{ t "Please sign the following message with your private key and send the signature" . }}<br />
<code>gpg --armor --detach-sign file</code>
</label>
- <input name="to_be_signed_message" id="to_be_signed_message" value="{{ .Data.ToBeSignedMessage }}" type="text" class="form-control" style="font-family: SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;" readonly />
+ <input name="to_be_signed_message" id="to_be_signed_message" value="{{ .Data.ToBeSignedMessage }}" type="text" class="transparent-input form-control" style="font-family: SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;" readonly />
</div>
<div class="form-group">
<label for="signed_message" class="bg-label">{{ t "Message detached signature" . }}</label>
- <textarea name="signed_message" id="signed_message" rows="10" class="form-control{{ if .Data.ErrorSignedMessage }} is-invalid{{ end }}" style="font-family: SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;" autofocus>{{ .Data.SignedMessage }}</textarea>
+ <textarea name="signed_message" id="signed_message" rows="10" class="transparent-input form-control{{ if .Data.ErrorSignedMessage }} is-invalid{{ end }}" style="font-family: SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;" autofocus>{{ .Data.SignedMessage }}</textarea>
{{ if .Data.ErrorSignedMessage }}
<div class="invalid-feedback">{{ .Data.ErrorSignedMessage }}</div>
{{ end }}
@@ -142,11 +142,11 @@
{{ else }}
<div class="form-group">
<label for="encrypted_message" class="bg-label">{{ t "Please decrypt the following message with your private key and send the required code" . }}</label>
- <textarea name="encrypted_message" id="encrypted_message" rows="10" class="form-control" style="font-family: SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;" readonly>{{ .Data.EncryptedMessage }}</textarea>
+ <textarea name="encrypted_message" id="encrypted_message" rows="10" class="transparent-input form-control" style="font-family: SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;" readonly>{{ .Data.EncryptedMessage }}</textarea>
</div>
<div class="form-group">
<label for="pgp_code" class="bg-label">{{ t "Your decrypted code" . }}</label>
- <input name="pgp_code" id="pgp_code" value="{{ .Data.Code }}" type="text" class="form-control{{ if .Data.ErrorCode }} is-invalid{{ end }}" autofocus />
+ <input name="pgp_code" id="pgp_code" value="{{ .Data.Code }}" type="text" class="transparent-input form-control{{ if .Data.ErrorCode }} is-invalid{{ end }}" autofocus />
{{ if .Data.ErrorCode }}
<div class="invalid-feedback">{{ .Data.ErrorCode }}</div>
{{ end }}
