JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: adds satellite selection through tab control on the forget password page.

Browse Source 
ticket: https://github.com/storj/storj/issues/5164
Change-Id: I1e0cefe75883a12c7b26ad42b7c44fddb7e93d10
This commit is contained in:
Malcolm Bouzi 2022-12-15 09:50:10 -05:00 committed by Storj Robot
parent 0e3e588718
commit 9535444dcd
1 changed files with 38 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/satellite/src/views/ForgotPassword.vue
View File

@ -22,17 +22,28 @@
<div class="forgot-area__content-area__container__title-area">
<h1 class="forgot-area__content-area__container__title-area__title">Reset Password</h1>
<div class="forgot-area__expand" @click.stop="toggleDropdown">
<span class="forgot-area__expand__value">{{ satelliteName }}</span>
<button
id="resetDropdown"
type="button"
aria-haspopup="listbox"
aria-roledescription="satellites-dropdown"
:aria-expanded="isDropdownShown"
class="forgot-area__expand__value"
>
{{ satelliteName }}
</button>
<BottomArrowIcon />
<div v-if="isDropdownShown" v-click-outside="closeDropdown" class="forgot-area__expand__dropdown">
<div class="forgot-area__expand__dropdown__item" @click.stop="closeDropdown">
<ul v-if="isDropdownShown" v-click-outside="closeDropdown" role="listbox" tabindex="-1" class="forgot-area__expand__dropdown">
<li class="forgot-area__expand__dropdown__item" @click.stop="closeDropdown">
<SelectedCheckIcon />
<span class="forgot-area__expand__dropdown__item__name">{{ satelliteName }}</span>
</div>
<a v-for="sat in partneredSatellites" :key="sat.id" class="forgot-area__expand__dropdown__item" :href="sat.address + '/forgot-password'">
{{ sat.name }}
</a>
</div>
</li>
<li v-for="sat in partneredSatellites" :key="sat.id">
<a class="forgot-area__expand__dropdown__item" :href="sat.address + '/forgot-password'">
{{ sat.name }}
</a>
</li>
</ul>
</div>
</div>
<p class="forgot-area__content-area__container__message">If you’ve forgotten your account password, you can reset it here. Make sure you’re signing in to the right satellite.</p>
@ -211,6 +222,9 @@ export default class ForgotPassword extends Vue {
* Sends recovery password email.
*/
public async onSendConfigurations(): Promise<void> {
let activeElement = document.activeElement;
if (activeElement && activeElement.id === 'resetDropdown') return;
if (this.isLoading || !this.validateFields()) {
return;
}
@ -220,6 +234,11 @@ export default class ForgotPassword extends Vue {
return;
}
if (this.isDropdownShown) {
this.isDropdownShown = false;
return;
}
this.isLoading = true;
try {
@ -304,6 +323,8 @@ export default class ForgotPassword extends Vue {
margin-right: 10px;
font-family: 'font_regular', sans-serif;
font-weight: 700;
background: none;
border: none;
}
&__dropdown {
@ -316,6 +337,7 @@ export default class ForgotPassword extends Vue {
box-shadow: 0 8px 34px rgb(161 173 185 / 41%);
border-radius: 6px;
min-width: 250px;
list-style-type: none;
&__item {
display: flex;
@ -340,6 +362,10 @@ export default class ForgotPassword extends Vue {
background-color: #f2f2f6;
}
}
&__item:focus-visible {
outline: -webkit-focus-ring-color auto 1px;
}
}
}
@ -396,6 +422,10 @@ export default class ForgotPassword extends Vue {
line-height: 18px;
color: #0149ff;
}
&__link:focus {
text-decoration: underline !important;
}
}
}