imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#216 done by using return-to URL mechanism

Browse Source
This commit is contained in:
Cindy Chang
2024-06-11 11:57:33 +08:00
parent 444b7d6975
commit aa1dbfabf2
4 changed files with 46 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/Login/index.vue
View File

@@ -9,25 +9,33 @@
<span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
<IconMember class="h-5 w-5 fill-current"/>
</span>
<input type="text" id="account" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username" @change="changeHandler($event)"/>
<input type="text" id="account" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 "
:class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username"
@change="changeHandler($event)"/>
</label>
<label for="passwordt" class="relative block">
<p class="text-sm font-normal mb-2">Password</p>
<span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
<IconLockKey class="h-5 w-5 fill-current"/>
</span>
<input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"/>
<span class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer" v-show="auth.password" @click="showPassword = !showPassword">
<input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon"
class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 "
:class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"/>
<span class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer" v-show="auth.password"
@click="showPassword = !showPassword">
<IconEyeOpen class="h-5 w-5" v-if="showPassword"/>
<IconEyeClose class="h-5 w-5" v-else/>
</span>
</label>
<p class="my-4 text-danger">
<span v-show="isInvalid">
<IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>Incorrect account or password.
<IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>
Incorrect account or password.
</span>
</p>
<button type="submit" class="w-full btn btn-lg" :class="this.isDisabled ? 'btn-disable' : 'btn-c-primary'" :disabled="isDisabledButton">
<button id="login_btn_main_btn" type="submit" class="w-full btn btn-lg"
:class="this.isDisabled ? 'btn-disable' : 'btn-c-primary'"
:disabled="isDisabledButton">
Log in
</button>
</form>
@@ -37,7 +45,7 @@
</template>
<script>
import { storeToRefs } from 'pinia';
import { storeToRefs, mapActions } from 'pinia';
import loginStore from '@/stores/login.js';
import IconMember from '@/components/icons/IconMember.vue';
import IconLockKey from '@/components/icons/IconLockKey.vue';
@@ -93,6 +101,11 @@ export default {
this.isInvalid = false;
}
},
...mapActions(loginStore, ['setRememberedReturnToUrl']),
},
created() {
// 考慮到使用者可能在未登入的情況下貼入一個頁面網址連結過來瀏覽器
this.setRememberedReturnToUrl(this.$route.query['return-to']);
},
};
</script>