danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

updated login form in settings

This commit is contained in:
RemixDev 2021-12-21 17:53:56 +01:00
parent b5c708abc7
commit 1dda7e5521
2 changed files with 90 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/components/pages/Settings.vue
View File

@ -2,85 +2,78 @@
<div class="fixed-footer"> <div class="fixed-footer">
<h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1> <h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1>
<div v-if="isLoggedIn" id="logged_in_info" ref="loggedInInfo">
<img
id="settings_picture"
ref="userpicture"
:src="pictureHref"
alt="Profile Picture"
class="w-32 h-32 rounded-full"
/>
<i18n path="settings.login.loggedIn" tag="p">
<template #username>
<strong id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
</template>
</i18n>
<p>{{userLicense}} | {{user.country}}</p>
<button class="btn btn-primary" @click="logout">
{{ $t('settings.login.logout') }}
</button>
<select v-if="accounts.length > 1" id="family_account" v-model="accountNum" @change="changeAccount">
<option v-for="(account, i) in accounts" :key="account" :value="i.toString()">
{{ account.name }}
</option>
</select>
</div>
<div class="settings-group"> <div class="settings-group">
<h3 class="settings-group__header"><i class="material-icons">person</i>{{ $t('settings.login.title') }}</h3> <h3 class="settings-group__header"><i class="material-icons">person</i>{{ $t('settings.login.title') }}</h3>
<div class="my-5 space-y-5"> <div v-if="isLoggedIn" id="logged_in_info" ref="loggedInInfo">
<div class="flex items-center"> <img
<input id="settings_picture"
id="login_input_arl" ref="userpicture"
ref="loginInput" :src="pictureHref"
:value="arl" alt="Profile Picture"
autocomplete="off" class="w-32 h-32 rounded-full"
placeholder="ARL" />
type="password" <div class="user_info">
/> <i18n path="settings.login.loggedIn" tag="p">
<button class="ml-2 btn btn-primary btn-only-icon" @click="copyARLtoClipboard"> <template #username>
<i class="material-icons">assignment</i> <strong id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
</template>
</i18n>
<p>{{userLicense}} | {{user.country}}</p>
<button class="btn btn-primary mt-3" @click="logout">
{{ $t('settings.login.logout') }}
</button> </button>
</div> </div>
<select v-if="accounts.length > 1" id="family_account" v-model="accountNum" @change="changeAccount">
<RouterLink :to="{ name: 'ARL' }" class="block"> <option v-for="(account, i) in accounts" :key="account" :value="i.toString()">
{{ $t('settings.login.arl.question') }} {{ account.name }}
</RouterLink> </option>
</select>
<!--
Uncomment when implemented
<a v-if="clientMode" class="block" href="#" @click="appLogin">
{{ $t('settings.login.login') }}
</a>
-->
<button class="btn btn-primary" style="width: 100%" @click="loginButton">
{{ $t('settings.login.arl.update') }}
</button>
</div> </div>
</div>
<div v-if="!isLoggedIn" class="settings-group"> <div v-else>
<h3 class="settings-group__header"> <form ref="loginWithCredentialsForm" @submit.prevent="loginWithCredentials">
<i class="material-icons">person</i>{{ $t('settings.loginWithCredentials.title') }} <label>
</h3> <span>{{ $t('settings.loginWithCredentials.email') }}</span>
<input type="text" name="email" placeholder="email@example.com" class="mb-6"/>
</label>
<label>
<span>{{ $t('settings.loginWithCredentials.password') }}</span>
<input type="password" name="password" placeholder="●●●●●●●●" class="mb-6"/>
</label>
<button class="btn btn-primary login-button" type="submit">{{ $t('settings.loginWithCredentials.login') }}</button>
</form>
</div>
<form ref="loginWithCredentialsForm" class="my-5 space-y-5" @submit.prevent="loginWithCredentials"> <BaseAccordion class="my-5 space-y-5">
<label> <template #title>
<span>{{ $t('settings.loginWithCredentials.email') }}</span> <span>{{ $t('settings.login.arl.title') }}</span>
<input type="text" name="email" /> </template>
</label> <div class="my-5 space-y-5">
<label> <div class="flex items-center">
<span>{{ $t('settings.loginWithCredentials.password') }}</span> <input
<input type="password" name="password" /> id="login_input_arl"
</label> ref="loginInput"
:value="arl"
autocomplete="off"
placeholder="ARL"
type="password"
/>
<button class="ml-2 btn btn-primary btn-only-icon" @click="copyARLtoClipboard">
<i class="material-icons">assignment</i>
</button>
</div>
<button class="btn btn-primary" type="submit">{{ $t('settings.loginWithCredentials.login') }}</button> <RouterLink :to="{ name: 'ARL' }" class="block">
</form> {{ $t('settings.login.arl.question') }}
</RouterLink>
<button class="btn btn-primary" style="width: 100%" @click="loginButton">
{{ $t('settings.login.arl.update') }}
</button>
</div>
</BaseAccordion>
</div> </div>
<div class="settings-group"> <div class="settings-group">
@ -1007,6 +1000,8 @@ export default {
const { email } = fromLoginForm('email') const { email } = fromLoginForm('email')
const { password } = fromLoginForm('password') const { password } = fromLoginForm('password')
if (!email || !password) return
toast(this.$t('toasts.loggingIn'), 'loading', false, 'login-toast') toast(this.$t('toasts.loggingIn'), 'loading', false, 'login-toast')
const { accessToken, arl } = await postToServer('loginWithCredentials', { const { accessToken, arl } = await postToServer('loginWithCredentials', {
@ -1017,6 +1012,7 @@ export default {
if (accessToken !== this.accessToken) this.dispatchAccessTocken({ accessToken }) if (accessToken !== this.accessToken) this.dispatchAccessTocken({ accessToken })
if (arl) this.login(arl) if (arl) this.login(arl)
else toast(this.$t('toasts.loginFailed'), 'close', true, 'login-toast')
}, },
appLogin() { appLogin() {
window.api.send('applogin') window.api.send('applogin')
@ -1075,11 +1071,21 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
#logged_in_info { #logged_in_info {
display: flex; display: grid;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: center;
height: 250px; grid-template-columns: 128px auto;
grid-template-rows: auto auto;
}
#logged_in_info .user_info {
padding-left: 24px;
}
#family_account {
margin-top: 24px;
grid-column: 1 / span 2;
} }
.locale-flag { .locale-flag {
@ -1166,4 +1172,12 @@ export default {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
} }
.login-button {
display: block;
margin-left: auto;
padding-left: 24px;
padding-right: 24px;
margin-top: 0px;
}
</style> </style>

1
src/lang/en.js
View File

@ -222,6 +222,7 @@ const en = {
title: 'Login', title: 'Login',
loggedIn: 'You are logged in as {username}', loggedIn: 'You are logged in as {username}',
arl: { arl: {
title: 'Use ARL instead',
question: 'How do I get my own ARL?', question: 'How do I get my own ARL?',
update: 'Update ARL' update: 'Update ARL'
}, },