Merge branch 'main' into fix/ux/response_editor

desk/src/components/global/LoginBox.vue

@@ -10,7 +10,7 @@
  />
  <Logo v-else class="mx-auto h-8" />
  </div>
- <div class="rounded-xl bg-white shadow-xl">
+ <div class="login-box rounded-xl bg-white">
  <div class="w-96 py-8 px-10">
  <div class="mb-6 text-center text-lg">
  {{ title }}
@@ -34,3 +34,10 @@ defineProps({
 
 const configStore = useConfigStore();
 </script>
+
+<style scoped>
+.login-box {
+ box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
+ rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+}
+</style>

desk/src/index.css

@@ -1,34 +1,2 @@
 @import "./assets/Inter/inter.css";
 @import "frappe-ui/src/style.css";
-
-@layer components {
- /* Works on Firefox */
- * {
- scrollbar-width: thin;
- scrollbar-color: #c0c6cc #ebeef0;
- }
-
- html {
- scrollbar-width: auto;
- }
-
- /* Works on Chrome, Edge, and Safari */
- *::-webkit-scrollbar-thumb {
- background: #c0c6cc;
- border-radius: 6px;
- }
-
- *::-webkit-scrollbar-track {
- width: 0px;
- }
-}
-
-.form-checkbox {
- height: 14px;
- width: 14px;
- border-radius: 4px;
-}
-
-.ProseMirror {
- outline: none;
-}

desk/src/pages/auth/Login.vue

@@ -1,66 +1,44 @@
 <template>
- <LoginBox
- v-if="!successMessage"
- :title="!forgot ? 'Log in to your account' : 'Reset your password'"
- >
+ <LoginBox v-if="!successMessage" title="Login to your account">
  <form class="space-y-4" @submit.prevent="login">
  <Input
+ v-model="email"
+ class="rounded-xl"
  required
- label="Email"
  :type="email !== 'Administrator' ? 'email' : 'text'"
- v-model="email"
- placeholder="[email protected]"
+ placeholder="Email"
  />
  <Input
- v-if="!forgot"
- label="Password"
- type="password"
- placeholder="•••••"
  v-model="password"
+ class="rounded-xl"
+ type="password"
+ placeholder="Password"
  name="password"
  autocomplete="current-password"
  required
  />
- <div class="mt-2 text-sm">
- <router-link v-if="forgot" to="/login">
- I remember my password
- </router-link>
- <router-link v-else to="/login/forgot">
- Forgot Password
- </router-link>
- </div>
- <ErrorMessage :error="errorMessage" class="mt-4" />
+ <ErrorMessage :message="errorMessage" />
  <Button
- appearance="primary"
- class="w-full"
+ class="w-full rounded-xl bg-gray-900 text-white hover:bg-gray-800"
+ label="Login"
  :disabled="state === 'RequestStarted'"
- @click="loginOrResetPassword"
  type="primary"
- >
- Submit
- </Button>
+ @click="login"
+ />
  <div>
- <template v-if="!forgot">
- <div class="mt-10 border-t text-center">
- <div class="-translate-y-1/2 transform">
- <span
- class="bg-white px-2 text-xs uppercase leading-8 tracking-wider text-gray-800"
- >
- Or
- </span>
- </div>
+ <div class="mt-8 border-t text-center">
+ <div class="-translate-y-1/2">
+ <span class="bg-white px-2 text-xs tracking-wider text-gray-700">
+ OR
+ </span>
  </div>
- <router-link
- class="text-center text-base"
- :to="`${
- this.$route.name === 'DeskLogin'
- ? ''
- : ''
- }/signup`"
- >
- <div>Sign up for a new account</div>
- </router-link>
- </template>
+ </div>
+ <router-link
+ class="text-center text-base"
+ :to="`${$route.name === 'DeskLogin' ? '' : ''}/signup`"
+ >
+ <div>Sign up for a new account</div>
+ </router-link>
  </div>
  </form>
  </LoginBox>
@@ -71,88 +49,49 @@
 </template>
 
 <script>
-import LoginBox from "@/components/global/LoginBox.vue"
-import { Input } from "frappe-ui"
-import { ref } from "vue"
-import { useAuthStore } from "@/stores/auth"
+import { ref } from "vue";
+import { ErrorMessage, Input } from "frappe-ui";
+import { useAuthStore } from "@/stores/auth";
+import LoginBox from "@/components/global/LoginBox.vue";
+import SuccessCard from "@/components/global/SuccessCard.vue";
 
 export default {
  name: "Login",
- props: {
- forgot: {
- default: false,
- },
- },
  components: {
- LoginBox,
+ ErrorMessage,
  Input,
+ LoginBox,
+ SuccessCard,
  },
  setup() {
  const authStore = useAuthStore();
- const state = ref(null) // Idle, Logging In, Login Error
- const email = ref(null)
- const password = ref(null)
- const errorMessage = ref(null)
- const successMessage = ref(null)
- const redirect_route = ref(null)
+ const state = ref(null); // Idle, Logging In, Login Error
+ const email = ref(null);
+ const password = ref(null);
+ const errorMessage = ref(null);
+ const successMessage = ref(null);
 
  return {
  authStore,
- state,
  email,
- password,
  errorMessage,
+ password,
+ state,
  successMessage,
- redirect_route,
- }
- },
- watch: {
- forgot() {
- this.errorMessage = null
- this.state = null
- this.password = null
- this.successMessage = null
- },
- },
- async mounted() {
- if (this.$route?.query?.route) {
- this.redirect_route = this.$route.query.route
- }
-
- if (this.authStore.isLoggedIn) this.redirect();
+ };
  },
  methods: {
- async loginOrResetPassword() {
- try {
- this.errorMessage = null
- this.state = "RequestStarted"
- if (!this.forgot) {
- await this.login()
- } else {
- await this.resetPassword()
- }
- } catch (error) {
- this.errorMessage = error.messages.join("\n")
- } finally {
- this.state = null
- }
- },
  async login() {
- if (this.email && this.password) {
- this.authStore.login(this.email, this.password)
- }
- },
- async resetPassword() {
- await this.authStore.resetPassword(this.email)
- this.successMessage = true
- },
- redirect() {
- if (this.redirect_route) {
- window.location.href = this.redirect_route
- } else {
- window.location.href = "/";
- }
+ if (!this.email || !this.password) return;
+
+ this.errorMessage = null;
+ this.state = "RequestStarted";
+
+ await this.authStore
+ .login(this.email, this.password)
+ .catch((error) => (this.errorMessage = error.message))
+ .finally(() => (this.state = null));
  },
  },
-}
+};
 </script>

desk/src/pages/auth/Signup.vue

@@ -4,49 +4,45 @@
  <form class="space-y-4" @submit.prevent="signup()">
  <Input
  v-model="email"
- label="Email"
+ class="rounded-xl"
  type="email"
- placeholder="[email protected]"
+ placeholder="Email"
  autocomplete="email"
  required
  />
  <Input
  v-model="firstName"
- label="First Name"
+ class="rounded-xl"
  type="text"
- placeholder="John"
+ placeholder="Firstname"
  required
  />
  <Input
  v-model="lastName"
- label="Last Name"
+ class="rounded-xl"
  type="text"
- placeholder="Doe"
+ placeholder="Lastname"
  required
  />
  <div>
  <Button
- appearance="primary"
- class="mt-4 w-full"
+ class="w-full rounded-xl bg-gray-900 text-white hover:bg-gray-800"
+ label="Signup"
  :loading="submitting"
  type="primary"
- >
- Submit
- </Button>
+ />
  </div>
  <div>
  <div class="mt-10 border-t text-center">
  <div class="-translate-y-1/2">
- <span
- class="bg-white px-2 text-xs uppercase leading-8 tracking-wider text-gray-800"
- >
- Or
+ <span class="bg-white px-2 text-xs tracking-wider text-gray-700">
+ OR
  </span>
  </div>
  </div>
  </div>
  <router-link class="text-center text-base" :to="{ name: 'Login' }">
- <div>Already have an account? Log in.</div>
+ <div>Already have an account? Login</div>
  </router-link>
  </form>
  </div>

desk/src/stores/auth.ts

@@ -40,6 +40,9 @@ export const useAuthStore = defineStore("auth", () => {
 
  const resLogin = createResource({
  url: URI_LOGIN,
+ onError() {
+ throw new Error("Invalid email or password");
+ },
  onSuccess() {
  router.replace({ path: "/" });
  },