|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+<template>
|
|
|
2
|
+ <ion-page>
|
|
|
3
|
+ <ion-header>
|
|
|
4
|
+ <ion-toolbar>
|
|
|
5
|
+ <ion-buttons slot="start">
|
|
|
6
|
+ <ion-back-button></ion-back-button>
|
|
|
7
|
+ </ion-buttons>
|
|
|
8
|
+ <ion-title>
|
|
|
9
|
+ Reset Password
|
|
|
10
|
+ </ion-title>
|
|
|
11
|
+ </ion-toolbar>
|
|
|
12
|
+ </ion-header>
|
|
|
13
|
+ <ion-content class='ion-padding'>
|
|
|
14
|
+
|
|
|
15
|
+ <ion-input label="Email" label-placement="floating" v-model="email" fill="outline" type="email" placeholder="Example, hello@gmail.com"></ion-input>
|
|
|
16
|
+ <ion-button @click="resetPasswordBtn">Reset Password</ion-button>
|
|
|
17
|
+ <ion-input label="Username" ref="username" label-placement="floating" fill="outline" placeholder="Example, john"
|
|
|
18
|
+ ></ion-input>
|
|
|
19
|
+ <ion-input label="Password" label-placement='floating' fill='outline' ref="password" type="password" placeholder="Password"></ion-input>
|
|
|
20
|
+ <ion-input label="Password Confirmation" label-placement='floating' fill='outline' ref="password2" type="password" placeholder="Password Confirmation"></ion-input>
|
|
|
21
|
+ <ion-text color="danger" v-if="formError">{{ formError }}</ion-text>
|
|
|
22
|
+ <ion-button @click="signup" class=' ion-margin-top'>Signup</ion-button>
|
|
|
23
|
+ </ion-content>
|
|
|
24
|
+ </ion-page>
|
|
|
25
|
+</template>
|
|
|
26
|
+
|
|
|
27
|
+<script setup lang="ts">
|
|
|
28
|
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonList, IonSearchbar, IonLabel,
|
|
|
29
|
+IonItem, IonBackButton, IonProgressBar, IonButtons, IonInfiniteScroll,
|
|
|
30
|
+ IonInfiniteScrollContent, InfiniteScrollCustomEvent, IonInput, toastController, useIonRouter } from '@ionic/vue';
|
|
|
31
|
+import { defineComponent, onMounted } from 'vue';
|
|
|
32
|
+import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
|
|
|
33
|
+import { searchMat, callUrl,restSignup, resetPassword } from '@/composable/settings';
|
|
|
34
|
+
|
|
|
35
|
+import { ref } from 'vue';
|
|
|
36
|
+import SearchItem from '@/components/SearchItem.vue';
|
|
|
37
|
+
|
|
|
38
|
+const results = ref();
|
|
|
39
|
+const is_empty = ref(false);
|
|
|
40
|
+const processing = ref(false)
|
|
|
41
|
+let next_url = null
|
|
|
42
|
+
|
|
|
43
|
+const username = ref(null)
|
|
|
44
|
+const password = ref(null)
|
|
|
45
|
+const password2 = ref(null)
|
|
|
46
|
+const email = ref(null)
|
|
|
47
|
+const input = ref(null)
|
|
|
48
|
+const ionRouter = useIonRouter();
|
|
|
49
|
+const formError = ref(null)
|
|
|
50
|
+
|
|
|
51
|
+
|
|
|
52
|
+const resetPasswordBtn = async() => {
|
|
|
53
|
+ console.log("reset password")
|
|
|
54
|
+ try{
|
|
|
55
|
+ const data = await resetPassword(email.value)
|
|
|
56
|
+ console.info(data)
|
|
|
57
|
+ }catch(error) {
|
|
|
58
|
+ console.info(error)
|
|
|
59
|
+ }
|
|
|
60
|
+}
|
|
|
61
|
+const signup = async () => {
|
|
|
62
|
+ clearError(username)
|
|
|
63
|
+ clearError(email)
|
|
|
64
|
+ clearError(password)
|
|
|
65
|
+ clearError(password2)
|
|
|
66
|
+ formError.value = null
|
|
|
67
|
+ try {
|
|
|
68
|
+ console.log("username = ", username.value.$el.value)
|
|
|
69
|
+ const data = await restSignup(username.value.$el.value, email.value.$el.value, password.value.$el.value, password2.value.$el.value)
|
|
|
70
|
+ console.log(data)
|
|
|
71
|
+ await presentToast("Sign up successful", "top")
|
|
|
72
|
+ ionRouter.navigate('/tabs/tab4', 'forward', 'replace');
|
|
|
73
|
+ }catch( err ) {
|
|
|
74
|
+ console.log("-- error --")
|
|
|
75
|
+ console.log(err)
|
|
|
76
|
+ for(const [k,v] of Object.entries(err.response.data)) {
|
|
|
77
|
+ if( k == "username" ){
|
|
|
78
|
+ showError(username, v[0])
|
|
|
79
|
+ }
|
|
|
80
|
+ if( k == "email" ){
|
|
|
81
|
+ showError(email, v[0])
|
|
|
82
|
+ }
|
|
|
83
|
+ if( k == "password1" ){
|
|
|
84
|
+ showError(password, v[0])
|
|
|
85
|
+ }
|
|
|
86
|
+ if( k == "password2" ){
|
|
|
87
|
+ showError(password2, v[0])
|
|
|
88
|
+ }
|
|
|
89
|
+ if( k == "non_field_errors" ) {
|
|
|
90
|
+ formError.value = v[0]
|
|
|
91
|
+ }
|
|
|
92
|
+ }
|
|
|
93
|
+ }
|
|
|
94
|
+}
|
|
|
95
|
+
|
|
|
96
|
+const showError = (obj, error) => {
|
|
|
97
|
+ obj.value.$el.errorText = error
|
|
|
98
|
+ obj.value.$el.classList.add('ion-invalid')
|
|
|
99
|
+ obj.value.$el.classList.add('ion-touched');
|
|
|
100
|
+}
|
|
|
101
|
+const clearError = (obj) => {
|
|
|
102
|
+ obj.value.$el.classList.remove("ion-valid")
|
|
|
103
|
+ obj.value.$el.classList.remove("ion-invalid")
|
|
|
104
|
+}
|
|
|
105
|
+
|
|
|
106
|
+const validateEmail = (email) => {
|
|
|
107
|
+ return email.match(
|
|
|
108
|
+ /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
|
|
|
109
|
+ );
|
|
|
110
|
+ }
|
|
|
111
|
+
|
|
|
112
|
+ const validate = (ev) => {
|
|
|
113
|
+ const value = ev.target.value;
|
|
|
114
|
+
|
|
|
115
|
+ input.value.$el.classList.remove('ion-valid');
|
|
|
116
|
+ input.value.$el.classList.remove('ion-invalid');
|
|
|
117
|
+
|
|
|
118
|
+ if (value === '') return;
|
|
|
119
|
+
|
|
|
120
|
+ validateEmail(value)
|
|
|
121
|
+ ? input.value.$el.classList.add('ion-valid')
|
|
|
122
|
+ : input.value.$el.classList.add('ion-invalid');
|
|
|
123
|
+ }
|
|
|
124
|
+
|
|
|
125
|
+const markTouched = () => {
|
|
|
126
|
+ input.value.$el.classList.add('ion-touched');
|
|
|
127
|
+}
|
|
|
128
|
+const markTouched2 = () => {
|
|
|
129
|
+ username.value.$el.classList.add('ion-touched');
|
|
|
130
|
+}
|
|
|
131
|
+const presentToast = async (msg, position: 'top' | 'middle' | 'bottom') => {
|
|
|
132
|
+ console.log("present toast")
|
|
|
133
|
+ const toast = await toastController.create({
|
|
|
134
|
+ message: msg,
|
|
|
135
|
+ duration: 3000,
|
|
|
136
|
+ position: position,
|
|
|
137
|
+ positionAnchor: "header",
|
|
|
138
|
+ color: "success"
|
|
|
139
|
+ });
|
|
|
140
|
+
|
|
|
141
|
+ await toast.present();
|
|
|
142
|
+}
|
|
|
143
|
+</script>
|