feat(ops-web/auth): add remember-me with session/local storage split
Persistent logins land in localStorage, ephemeral ones in sessionStorage, and we recall the last username + remember preference on the login form. Also propagate the indigo brand color through the antd ConfigProvider theme token so the side nav and avatar match the redesigned login.
This commit is contained in:
@@ -72,11 +72,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { StarOutlined, EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { OpsApiError } from "@/lib/http";
|
||||
import { readLoginPreference } from "@/lib/storage";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import AnimatedCharacters from "@/components/login-animation/AnimatedCharacters.vue";
|
||||
|
||||
@@ -89,7 +90,7 @@ const primaryColor = ref('#4f46e5');
|
||||
const submitting = ref(false);
|
||||
const showPassword = ref(false);
|
||||
const isTyping = ref(false);
|
||||
const remember = ref(false);
|
||||
const remember = ref(true);
|
||||
const errorMessage = ref<string | null>(null);
|
||||
|
||||
const formState = reactive({
|
||||
@@ -97,6 +98,14 @@ const formState = reactive({
|
||||
password: "",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const pref = readLoginPreference();
|
||||
remember.value = pref.remember;
|
||||
if (pref.lastUsername) {
|
||||
formState.username = pref.lastUsername;
|
||||
}
|
||||
});
|
||||
|
||||
async function handleSubmit(): Promise<void> {
|
||||
if (submitting.value) {
|
||||
return;
|
||||
@@ -111,7 +120,7 @@ async function handleSubmit(): Promise<void> {
|
||||
submitting.value = true;
|
||||
|
||||
try {
|
||||
await authStore.login(formState.username.trim(), formState.password);
|
||||
await authStore.login(formState.username.trim(), formState.password, remember.value);
|
||||
const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/admin-users";
|
||||
await router.replace(redirect);
|
||||
} catch (error) {
|
||||
|
||||
Reference in New Issue
Block a user