mirrors/mCaptcha
1
0
Fork 0
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2025-03-14 13:08:27 +03:00
Code Issues Projects Releases Packages Wiki Activity

settings page styling

Browse source
This commit is contained in:
realaravinth 2021-07-21 14:46:31 +05:30
parent b603208d48
commit 2c2f79e1cd
No known key found for this signature in database
GPG key ID: AD9F0F08E855ED88
9 changed files with 184 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
templates/_vars.scss
View file

@ -32,3 +32,11 @@ $blue-link: rgb(3, 102, 214);
$form-content-width: 90%;
$form-input-height: 40px;
@mixin light-text-icon-filter {
filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(325deg)
brightness(105%) contrast(101%);
opacity: 0.8;
}
$red: #d10028;

4
templates/components/showPassword/index.html
View file

@ -1,6 +1,6 @@
<span class="show-password-container">
<img class="show-password--show" src="<.=
crate::FILES.get("./static/cache/img/svg/eye.svg").unwrap() .>" alt="" />
crate::FILES.get("./static/cache/img/svg/eye.svg").unwrap() .>" alt="Show Password" />
<img class="show-password--hide" src="<.=
crate::FILES.get("./static/cache/img/svg/eye-off.svg").unwrap() .>" alt="" />
crate::FILES.get("./static/cache/img/svg/eye-off.svg").unwrap() .>" alt="Hide Password" />
</span>

2
templates/components/showPassword/main.scss
View file

@ -38,6 +38,8 @@ $img-width: #{$form-input-height * $img-height};
position: relative;
top: -#{$form-input-height * ($img-height * 1.15)};
left: #{$form-content-width * 0.99};
display: block;
margin-bottom: -30px;
}
.show-password-container:hover {

1
templates/mobile.ts
View file

@ -19,6 +19,7 @@ import './mobile.scss';
import './auth/css/mobile.scss';
import './components/details-footer/mobile.scss';
import './panel/css/mobile.scss';
import './panel/settings/mobile.scss';
import './panel/header/taskbar/mobile.scss';
import './panel/navbar/mobile.scss';
import './panel/help-banner/mobile.scss';

10
templates/panel/help-banner/main.scss
View file

@ -29,18 +29,8 @@
margin-top: 40px;
}
li.help-text__instructions::marker {
background-color: $violet;
width: 30px;
height: 30px;
border-radius: 50%;
align-items: center;
justify-content: center;
}
.help-text__instructions {
font-size: 19px;
font-weight: 500;
padding: 10px;
margin: auto;
}

7
templates/panel/help-banner/mobile.scss
View file

@ -20,4 +20,11 @@
.help-text {
flex-direction: column;
justify-content: normal;
padding: 10px;
margin: 20px auto;
}
.help-text__instructions {
width: 86%;
}

90
templates/panel/settings/index.html
View file

@ -17,39 +17,71 @@
<h1 class="form__title">
<.= PAGE .>
</h1>
<form action="<.= crate::V1_API_ROUTES.account.update_email .>" method="post">
<label class="sitekey-form__label" for="description">
<form class="settings__form "
action="<.= crate::V1_API_ROUTES.account.update_email .>"
method="post">
<label class="settings-form__label" for="email">
Email
<input
class="sitekey-form__input"
type="email"
name="email"
id="email"
<. if let Some(email) = email { .>
<. if !email.trim().is_empty() { .>
value="<.= email .>"
<. } .>
<. } .>
/>
<input
class="settings-form__input"
type="email"
name="email"
id="email"
<. if let Some(email) = email { .>
<. if !email.trim().is_empty() { .>
value="<.= email .>"
<. } .>
<. } .>
/>
</label>
<button class="settings__submit-btn" type="submit">Update</button>
</form>
<form
class="settings__form"
action="<.= crate::V1_API_ROUTES.account.update_secret .>"
method="post">
<label class="settings-form__label" for="secret">
<div class="settings__label-group">
Secret
<. include!("../../components/clipboard/index.html"); .>
</div>
<input
class="settings-form__input"
type="password"
name="secret-password"
readonly='readonly'
id="secret"
value="<.= secret .>"
/>
<. include!("../../components/showPassword/index.html"); .>
</label>
<button class="sitekey-form__submit" type="submit">Update</button>
<button class="settings__submit-btn" type="submit">
Refresh
<img
class="settings__refresh-sitekey"
src="<.=crate::FILES.get("./static/cache/img/svg/refresh.svg").unwrap() .>"
alt="Refresh Secret"
/>
</button>
</form>
<label class="sitekey-form__label" for="secret">
Cooldown Duratoin(in seconds)
<input
class="sitekey-form__input"
type="password"
name="secret-password"
id="secret"
value="<.= secret .>"
/>
<. include!("../../components/showPassword/index.html"); .>
<. include!("../../components/clipboard/index.html"); .>
</label>
<a class="settings__delete-account-link" href="<.= crate::PAGES.panel.sitekey.add .>">
<button class="settings__delete-account-btn" type="submit">Delete Account</button>
</a>
<form
class="settings__form"
action="<.= crate::V1_API_ROUTES.account.update_secret .>"
method="post">
<label class="settings-form__label--danger" for="delete-account">
<b>Delete your account</b>
<button id="delete-account" class="settings__submit-btn--danger" type="submit">
Delete Account
<img
class="settings__delete-account-icon"
src="<.=crate::FILES.get("./static/cache/img/svg/trash.svg").unwrap() .>"
alt="Delete Account"
/>
</button>
</label>
</form>
</div>
</div>
<!-- end of container -->

85
templates/panel/settings/main.scss
View file

@ -14,17 +14,98 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import '../../components/clipboard/copy';
@import '../../components/forms';
@import '../../components/button';
.settings__secret-copy {
@include copy-icon;
}
.settings__secret-copy:hover .settings__secret-copy-done:hover {
.settings__secret-copy:hover,
.settings__secret-copy-done:hover {
@include copy-icon-hover;
}
.settings__secret-copy-done {
@include copy-done-icon;
}
.settings-form__input {
@include form-input;
width: 100%;
}
.settings-form__label {
@include form-label;
width: 100%;
display: flex;
flex-direction: column;
}
.settings-form__label--danger {
color: $red;
}
.settings__label-group {
display: flex;
width: 15%;
align-items: center;
align-content: center;
}
.settings__secret-copy-container {
width: 20%;
display: flex;
align-items: center;
align-content: center;
}
.label-text {
margin: auto;
}
.settings__submit-btn {
align-self: end;
display: flex;
text-align: center;
display: inline;
align-content: center;
align-items: center;
vertical-align: middle;
margin: auto 0;
}
.settings__form {
display: flex;
width: 90%;
flex-direction: column;
}
.settings__delete-account-icon {
margin: auto;
@include light-text-icon-filter;
}
.settings__refresh-sitekey {
@include light-text-icon-filter;
margin: auto;
}
.settings__submit-btn {
@include violet-button;
margin-top: 20px;
}
.settings__submit-btn:hover {
cursor: pointer;
}
.settings__submit-btn--danger {
@include violet-button;
background-color: $red;
width: 200px;
margin-top: 20px;
display: flex;
padding: 10px;
}

20
templates/panel/settings/mobile.scss Normal file
View file

@ -0,0 +1,20 @@
/*
* Copyright (C) 2021 Aravinth Manivannan <realaravinth@batsense.net>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
.settings__form {
margin: 10px 0;
}