init

src/views/users/ProfileView.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { authClient } from '@/lib/auth-client.js'
+import SessionsList from '@/components/SessionsList.vue'
+import UserProfile from '@/components/UserProfile.vue'
+import PasswordChange from '@/components/PasswordChange.vue'
+
+const session = authClient.useSession()
+</script>
+
+<template>
+  <v-sheet rounded border class="pa-4 d-flex flex-column ga-4">
+    <div class="text-headline-medium text-uppercase">profile</div>
+
+    <user-profile :user="session.data?.user" />
+
+    <password-change />
+
+    <sessions-list />
+  </v-sheet>
+</template>
+
+<style scoped lang="scss"></style>

src/views/users/SignInView.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { authClient } from '@/lib/auth-client.js'
+
+const signInData = reactive({
+  email: 'vadim.olonin@gmail.com',
+  password: '',
+  rememberMe: true,
+  callbackURL: 'https://madsky.ru',
+})
+
+const signIn = async () => {
+  const { data, error } = await authClient.signIn.email({
+    email: signInData.email,
+    password: signInData.password,
+    rememberMe: signInData.rememberMe,
+    callbackURL: '/',
+  })
+
+  console.log(data)
+  console.log(error)
+}
+</script>
+
+<template>
+  <v-row>
+    <v-col cols="4" offset="4">
+      <div class="d-flex flex-column ga-2">
+        <div class="text-uppercase">sign in</div>
+        <v-text-field prepend-inner-icon="mdi-email" v-model="signInData.email" />
+        <v-text-field prepend-inner-icon="mdi-lock" v-model="signInData.password" />
+        <div class="d-flex ga-2 align-center">
+          <v-switch color="info" v-model="signInData.rememberMe" label="Remember me" />
+          <v-spacer />
+          <div>
+            <v-btn @click="signIn">login</v-btn>
+          </div>
+        </div>
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<style scoped lang="scss"></style>

src/views/users/SignUpView.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { authClient } from '@/lib/auth-client.js'
+import { reactive } from 'vue'
+
+const signUpData = reactive({
+  name: 'Vadim',
+  email: 'vadim.olonin@gmail.com',
+  password: '',
+})
+
+const signUp = async () => {
+  const { data, error } = await authClient.signUp.email({
+    name: signUpData.name,
+    email: signUpData.email,
+    password: signUpData.password,
+    // image: 'https://example.com/image.png',
+    callbackURL: 'https://madsky.ru',
+  })
+
+  console.log(data)
+  console.log(error)
+}
+</script>
+
+<template>
+  <v-row>
+    <v-col cols="4" offset="4">
+      <div class="d-flex flex-column ga-2">
+        <div class="text-uppercase">sign up</div>
+        <v-text-field placeholder="name" prepend-inner-icon="mdi-account" v-model="signUpData.name" />
+        <v-text-field placeholder="email" prepend-inner-icon="mdi-email" v-model="signUpData.email" />
+        <v-text-field placeholder="password" prepend-inner-icon="mdi-lock" v-model="signUpData.password" />
+        <div class="d-flex ga-2 align-center">
+          <div>
+            <v-btn @click="signUp">sign up</v-btn>
+          </div>
+          <v-spacer />
+          <router-link to="/verify-email" class="text-warning text-decoration-none"> Verify Email </router-link>
+        </div>
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<style scoped lang="scss"></style>

src/views/users/VerifyEmailView.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { authClient } from '@/lib/auth-client.js'
+import { reactive } from 'vue'
+
+const verifyData = reactive({
+  email: 'vadim.olonin@gmail.com',
+})
+
+const verify = async () => {
+  const { data, error } = await authClient.sendVerificationEmail({
+    email: verifyData.email,
+    callbackURL: 'https://madsky.ru',
+  })
+
+  console.log(data)
+  console.log(error)
+}
+</script>
+
+<template>
+  <v-row>
+    <v-col cols="4" offset="4">
+      <div class="d-flex flex-column ga-2">
+        <div class="text-uppercase">verify email</div>
+
+        <v-text-field placeholder="email" prepend-inner-icon="mdi-email" v-model="verifyData.email" />
+        <div>
+          <v-btn @click="verify">verify</v-btn>
+        </div>
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<style scoped lang="scss"></style>