[Page] [Form] Add with third-party logins form

devlive-community · Mar 25, 2024 · d3d04a4 · d3d04a4
1 parent 1aae3c7
commit d3d04a4
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 5 deletions.
diff --git a/src/data/Navigation.ts b/src/data/Navigation.ts
@@ -39,7 +39,8 @@ const createNavigation = (): void => {
     const formWithAction = createNavigationItem('form.common.formWithAction', undefined, '/forms/withAction', AudioWaveform, NavigationPosition.LEFT_TOP)
     const formWithSplitField = createNavigationItem('form.common.formWithSplitField', undefined, '/forms/withSplitField', AudioWaveform, NavigationPosition.LEFT_TOP)
     const formWithImage = createNavigationItem('form.common.formWithImage', undefined, '/forms/withImage', AudioWaveform, NavigationPosition.LEFT_TOP)
-    const formArray = [form, formWithAction, formWithSplitField, formWithImage]
+    const formWithThird = createNavigationItem('form.common.formWithThird', undefined, '/forms/withThird', AudioWaveform, NavigationPosition.LEFT_TOP)
+    const formArray = [form, formWithAction, formWithSplitField, formWithImage, formWithThird]
     const froms = createNavigationItem('form.common.form', formArray.length.toString(), '/forms', FormInput, NavigationPosition.LEFT_TOP,
         formArray, undefined, 'common.common.form')
     NavigationService.addNavigation(froms)

diff --git a/src/i18n/langs/en/Form.ts b/src/i18n/langs/en/Form.ts
@@ -8,14 +8,16 @@ export default {
         signInWithGithub: 'Sign in with Github',
         firstName: 'First Name',
         lastName: 'Last Name',
-        formWithImage: 'Form with Image'
+        formWithImage: 'Form with Image',
+        formWithThird: 'Forms with third-party logins'
     },
     tip: {
         formBasic: 'This is a basic form example',
         formWithAction: 'Here\'s an example of a form with an action function',
         formWithSplitField: 'Here\'s an example of a form with a split field',
         firstNameHolder: 'Please enter first name',
         lastNameHolder: 'Please enter last name',
-        formWithImage: 'Here\'s an example of a form with an image'
+        formWithImage: 'Here\'s an example of a form with an image',
+        formWithThird: 'Here\'s an example of a form with a third-party login'
     }
 }
diff --git a/src/i18n/langs/zhCn/Form.ts b/src/i18n/langs/zhCn/Form.ts
@@ -8,14 +8,16 @@ export default {
         signInWithGithub: '使用 Github 登录',
         firstName: '名',
         lastName: '姓',
-        formWithImage: '带图片的表单'
+        formWithImage: '带图片的表单',
+        formWithThird: '带第三方登录的表单'
     },
     tip: {
         formBasic: '这是一个表单的基础示例',
         formWithAction: '这是一个带有操作功能的表单示例',
         formWithSplitField: '这是一个带有分割字段的表单示例',
         firstNameHolder: '请输入名',
         lastNameHolder: '请输入姓',
-        formWithImage: '这是一个带有图片的表单示例'
+        formWithImage: '这是一个带有图片的表单示例',
+        formWithThird: '这是一个带有第三方登录的表单示例'
     }
 }
diff --git a/src/router/default.ts b/src/router/default.ts
@@ -96,6 +96,11 @@ const createFormRouter = (router: Router): void => {
                 name: 'withImage',
                 path: 'withImage',
                 component: () => import('@/views/pages/form/FormWithImage.vue')
+            },
+            {
+                name: 'withThird',
+                path: 'withThird',
+                component: () => import('@/views/pages/form/FormWithThird.vue')
             }
         ]
     })

diff --git a/src/views/pages/form/FormWithThird.vue b/src/views/pages/form/FormWithThird.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="container grid h-svh flex-col items-center justify-center bg-primary-foreground lg:max-w-none lg:px-0">
+    <div class="mx-auto flex w-full flex-col justify-center space-y-2 sm:w-[480px] lg:p-8">
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-2xl">{{ $t('form.common.formWithThird') }}</CardTitle>
+          <CardDescription>{{ $t('form.tip.formWithThird') }}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div class="grid gap-4">
+            <div class="grid gap-2">
+              <Label for="email">{{ $t('user.common.email') }}</Label>
+              <Input id="email" type="email" :placeholder="$t('user.tip.emailHolder')" required/>
+            </div>
+            <div class="grid gap-2">
+              <div class="flex items-center">
+                <Label for="password">{{ $t('user.common.password') }}</Label>
+                <a href="#" class="ml-auto inline-block text-sm underline">{{ $t('common.common.forgotPassword') }}?</a>
+              </div>
+              <Input id="password" type="password" required :placeholder="$t('user.tip.passwordHolder')"/>
+            </div>
+            <Button type="submit" class="w-full">{{ $t('common.common.signIn') }}</Button>
+            <Button variant="outline" class="w-full">{{ $t('form.common.signInWithGoogle') }}</Button>
+          </div>
+          <div class="relative my-4">
+            <div class="absolute inset-0 flex items-center">
+              <span class="w-full border-t"/>
+            </div>
+            <div class="relative flex justify-center text-xs uppercase">
+              <span class="bg-background px-2 text-muted-foreground">{{ $t('user.common.continueWith') }}</span>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <Button variant='outline' class="w-full">
+              <Github class="mr-2 h-4 w-4"/>
+              GitHub
+            </Button>
+            <Button variant='outline' class="w-full">
+              <Facebook class="mr-2 h-4 w-4"/>
+              Facebook
+            </Button>
+          </div>
+          <div class="mt-4 text-center text-sm">
+            {{ $t('common.tip.signInNoAccount') }}
+            <RouterLink to="#" class="underline">{{ $t('common.common.signUp') }}</RouterLink>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Facebook, Github } from 'lucide-vue-next'
+
+export default defineComponent({
+  name: 'FormWithThird',
+  components: {
+    Facebook, Github,
+    Button,
+    Input,
+    Label,
+    Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle
+  }
+})
+</script>