Move Login.vue to composition style

dashboard/src/components/Login.vue

@@ -1,95 +1,85 @@
-<script>
+<script setup>
 
+import { ref, onMounted } from 'vue';
 import { Button, PasswordInput, TextInput, fetcher } from 'pankow';
 import { API_ORIGIN } from '../constants.js';
 
-export default {
-  name: 'Login',
-  components: {
-    Button,
-    PasswordInput,
-    TextInput
-  },
-  data() {
-    return {
-      API_ORIGIN,
-      ready: false,
-      busy: false,
-      passwordError: null,
-      totpError: null,
-      internalError: null,
-      username: '',
-      password: '',
-      totpToken: '',
-      totpTokenRequired: false,
-      // coming from login.html template
-      name: window.cloudron.name,
-      note: window.cloudron.note,
-      iconUrl: window.cloudron.iconUrl,
-      footer: window.cloudron.footer,
-      submitUrl: window.cloudron.submitUrl
-    };
-  },
-  async mounted() {
-    // placed optionally in local storage by setupaccount.js
-    const autoLoginToken = localStorage.cloudronFirstTimeToken;
-    if (autoLoginToken) {
-      try {
-        const res = await fetch.post(this.submitUrl, { autoLoginToken });
-        localStorage.removeItem('cloudronFirstTimeToken');
+const ready = ref(false);
+const busy = ref(false);
+const passwordError = ref(null);
+const totpError = ref(null);
+const internalError = ref(null);
+const username = ref('');
+const password = ref('');
+const totpToken = ref('');
+const totpTokenRequired = ref(false);
 
-        if (res.body.redirectTo) window.location.href = res.body.redirectTo;
-        else console.log('login success but missing redirectTo in data:', res.body);
-      } catch (error) {
-        console.error('Failed to use autologin token', error);
+// coming from login.html template
+const name = window.cloudron.name;
+const note = window.cloudron.note;
+const iconUrl = window.cloudron.iconUrl;
+const footer = window.cloudron.footer;
+const submitUrl = window.cloudron.submitUrl;
+
+async function onSubmit() {
+  busy.value = true;
+  passwordError.value = false;
+  totpError.value = false;
+  internalError.value = false;
+
+  const body = {
+    username: username.value,
+    password: password.value,
+    totpToken: totpToken.value
+  };
+
+  try {
+    const res = await fetcher.post(submitUrl, body);
+    if (res.status === 410) {
+      // the oidc login session is old
+      window.location.reload();
+    } else if (res.status === 401) {
+      if (res.body.message.indexOf('totpToken') !== -1) {
+        totpError.value = totpTokenRequired.value; // only set on second try coming from login
+        totpTokenRequired.value = true;
+        totpToken.value = '';
+        setTimeout(() => document.getElementById('inputTotpToken').focus(), 0);
+      } else {
+        password.value = '';
+        passwordError.value = true;
+        document.getElementById('inputPassword').focus();
       }
     }
 
-    this.ready = true;
-  },
-  methods: {
-    async onSubmit() {
-      this.busy = true;
+    if (res.body.redirectTo) return window.location.href = res.body.redirectTo;
 
-      this.passwordError = false;
-      this.totpError = false;
-      this.internalError = false;
+    internalError.value = true;
+    console.error('login success but missing redirectTo in data:', res.body);
+  } catch (error) {
+    internalError.value = true;
+    console.error(error);
+  }
 
-      const body = {
-        username: this.username,
-        password: this.password,
-        totpToken: this.totpToken
-      };
+  busy.value = false;
+}
 
-      try {
-        const res = await fetcher.post(this.submitUrl, body);
-        if (res.status === 410) {
-          // the oidc login session is old
-          window.location.reload();
-        } else if (res.status === 401) {
-          if (res.body.message.indexOf('totpToken') !== -1) {
-            this.totpError = this.totpTokenRequired; // only set on second try coming from login
-            this.totpTokenRequired = true;
-            this.totpToken = '';
-            setTimeout(() => document.getElementById('inputTotpToken').focus(), 0);
-          } else {
-            this.password = '';
-            this.passwordError = true;
-            document.getElementById('inputPassword').focus();
-          }
-        }
+onMounted(async () => {
+  // placed optionally in local storage by setupaccount.js
+  const autoLoginToken = localStorage.cloudronFirstTimeToken;
+  if (autoLoginToken) {
+    try {
+      const res = await fetch.post(submitUrl, { autoLoginToken });
+      localStorage.removeItem('cloudronFirstTimeToken');
 
-        if (res.body.redirectTo) window.location.href = res.body.redirectTo;
-        else console.log('login success but missing redirectTo in data:', res.body);
-      } catch (error) {
-        this.internalError = true;
-        console.error('Login failed:', error);
-      }
-
-      this.busy = false;
+      if (res.body.redirectTo) window.location.href = res.body.redirectTo;
+      else console.log('login success but missing redirectTo in data:', res.body);
+    } catch (error) {
+      console.error('Failed to use autologin token', error);
     }
   }
-};
+
+  ready.value = true;
+});
 
 </script>