Skip to content

Commit 3895f24

Browse files
jsun1590jsun1590
authored
Merge pull request #111 from codersforcauses/i43-sign_up_page
I43 sign up page
2 parents 12696e7 + ce4fdfe commit 3895f24

34 files changed

Lines changed: 867 additions & 77 deletions

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
.env
22
data/
3-
.DS_Store
3+
.DS_Store
4+
client/node_modules/
5+
.yarn

‎client/.eslintrc.js‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,10 @@ module.exports = {
44
es2021: true,
55
jest: true,
66
},
7-
extends: [
8-
'plugin:vue/essential',
9-
'standard',
10-
'prettier',
11-
'plugin:cypress/recommended',
12-
],
7+
extends: ['standard', '@nuxtjs', 'prettier', 'plugin:cypress/recommended'],
138
parserOptions: {
149
ecmaVersion: 'latest',
1510
sourceType: 'module',
1611
},
1712
plugins: ['vue', 'cypress'],
18-
rules: {
19-
'vue/multi-word-component-names': [
20-
'error',
21-
{
22-
ignores: ['default'],
23-
},
24-
],
25-
},
2613
};

‎client/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ build/Release
3737
# Dependency directories
3838
node_modules/
3939
jspm_packages/
40+
.yarn
4041

4142
# TypeScript v1 declaration files
4243
typings/

‎client/.yarnrc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎client/components/Auth/AuthFooter.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div class="flex justify-center my-5">
3+
<nuxt-img src="shapes.svg" class="w-72" alt="Shapes" />
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'AuthFooter',
10+
};
11+
</script>

‎client/components/Auth/AuthForm.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div
3+
class="flex flex-col items-center w-11/12 max-w-lg bg-green drop-shadow-lg"
4+
>
5+
<slot></slot>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: 'AuthForm',
12+
};
13+
</script>

‎client/components/Auth/AuthHeader.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div>
3+
<div class="flex justify-center mt-10 mb-6">
4+
<nuxt-img src="branding/logo.svg" class="w-16" alt="Elucidate Logo" />
5+
</div>
6+
<div
7+
v-if="pageTitle !== ''"
8+
class="flex items-center justify-center my-5 mr-10"
9+
>
10+
<font-awesome-layers class="fa-2x mx-3">
11+
<font-awesome-icon :icon="['fas', 'circle']" class="text-green" />
12+
<font-awesome-icon :icon="['fas', 'user']" class="text-lg text-white" />
13+
</font-awesome-layers>
14+
<p class="text-3xl italic">{{ pageTitle }}</p>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
name: 'AuthHeader',
22+
props: {
23+
pageTitle: {
24+
type: String,
25+
default: '',
26+
},
27+
},
28+
};
29+
</script>

‎client/components/Auth/InputField.vue‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<template>
2+
<div>
3+
<label class="font-semibold">{{ fieldName }}</label>
4+
<ValidationProvider v-slot="{ errors, touched }" :vid="id" :rules="rules">
5+
<div class="relative flex items-center -mt-2">
6+
<input
7+
v-if="fieldType != 'dropdown'"
8+
v-model="inputValue"
9+
:name="fieldName"
10+
:type="showText ? 'text' : fieldType"
11+
class="w-full h-10 px-2 my-3 drop-shadow-lg"
12+
/>
13+
<div
14+
v-if="fieldType == 'password'"
15+
class="absolute right-0 top-auto bottom-auto left-auto w-10"
16+
@mouseenter="toggleShowText"
17+
@mouseleave="toggleShowText"
18+
>
19+
<font-awesome-icon
20+
:icon="['fas', 'fa-eye']"
21+
class="w-6 mx-2"
22+
:class="showText ? 'text-blue2' : 'text-gray-400'"
23+
/>
24+
</div>
25+
<select
26+
v-if="fieldType == 'dropdown'"
27+
v-model="inputValue"
28+
:name="fieldName"
29+
class="w-full h-10 px-5 my-3 drop-shadow-lg"
30+
>
31+
<option selected disabled value="">Please Choose Grade...</option>
32+
<option
33+
v-for="(option, index) in fieldOptions"
34+
:key="index"
35+
:value="option"
36+
v-text="option"
37+
/>
38+
</select>
39+
</div>
40+
<span v-if="touched" class="text-red">{{ errors[0] }}</span>
41+
</ValidationProvider>
42+
</div>
43+
</template>
44+
45+
<script>
46+
// Validation
47+
// ---------------------------------------
48+
import { ValidationProvider, extend } from 'vee-validate';
49+
import { required, email, min } from 'vee-validate/dist/rules';
50+
51+
extend('email', {
52+
...email,
53+
message: 'Invalid email address',
54+
});
55+
56+
extend('required', {
57+
...required,
58+
message: 'This field is required',
59+
});
60+
61+
extend('min', {
62+
...min,
63+
message: '{_field_} must have at least {length} characters',
64+
});
65+
66+
extend('password', {
67+
params: ['target'],
68+
validate(value, { target }) {
69+
return value === target;
70+
},
71+
message: 'Password confirmation does not match',
72+
});
73+
// ---------------------------------------
74+
75+
export default {
76+
name: 'InputField',
77+
components: {
78+
ValidationProvider,
79+
},
80+
props: {
81+
fieldName: {
82+
type: String,
83+
default: 'Field',
84+
},
85+
fieldType: {
86+
type: String,
87+
default: 'text',
88+
},
89+
isPassword: Boolean,
90+
fieldOptions: {
91+
type: Array,
92+
default: undefined,
93+
},
94+
id: {
95+
type: String,
96+
default: undefined,
97+
},
98+
rules: {
99+
type: String,
100+
default: undefined,
101+
},
102+
},
103+
data: () => ({
104+
showText: false,
105+
inputValue: '',
106+
}),
107+
methods: {
108+
toggleShowText: function () {
109+
this.showText = !this.showText;
110+
},
111+
},
112+
};
113+
</script>

‎client/components/Input/ButtonElement.vue‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
<template>
2-
<span>
2+
<nuxt-link v-if="to !== undefined" :to="to">
3+
<button
4+
v-if="type === 'primary'"
5+
:class="`text-white bg-primary ${commonBtnStyles}`"
6+
>
7+
<slot></slot>
8+
</button>
9+
10+
<button
11+
v-else
12+
:class="`bg-white text-primary border border-solid border-primary ${commonBtnStyles}`"
13+
>
14+
<slot></slot>
15+
</button>
16+
</nuxt-link>
17+
<span v-else>
318
<button
419
v-if="type === 'primary'"
520
:class="`text-white bg-primary ${commonBtnStyles}`"
@@ -19,15 +34,19 @@
1934
<script>
2035
export default {
2136
name: 'ButtonElement',
22-
data: () => ({
23-
commonBtnStyles:
24-
'h-10 w-32 rounded-md hover:shadow-lg transition-shadow duration-200 ease-in-out',
25-
}),
2637
props: {
38+
to: {
39+
type: String,
40+
default: undefined,
41+
},
2742
type: {
2843
type: String,
2944
default: 'primary',
3045
},
3146
},
47+
data: () => ({
48+
commonBtnStyles:
49+
'h-10 w-32 rounded-md hover:shadow-lg transition-shadow duration-200 ease-in-out',
50+
}),
3251
};
3352
</script>

‎client/components/Section/NavBar.vue‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,23 @@
22
<nav class="flex items-center justify-between h-20 bg-white shadow-xl">
33
<div class="flex items-center text-gray-600">
44
<NuxtLink to="/" class="h-12 ml-32 -mt-2">
5-
<nuxt-img src="branding/logo_full.png" class="h-12 max-w-none"
6-
/></NuxtLink>
5+
<nuxt-img
6+
src="branding/logo_full.png"
7+
class="h-12"
8+
alt="Elucidate Logo Full"
9+
/>
10+
</NuxtLink>
711
<NuxtLink to="/" class="mx-4">Home</NuxtLink>
812
<NuxtLink to="/quiz" class="mx-4">Quiz</NuxtLink>
913
<NuxtLink to="/about" class="mx-4">About</NuxtLink>
1014
</div>
1115
<div class="flex items-center">
12-
<InputSearchBar class="mr-24" />
13-
<InputButtonElement type="primary" class="mr-3"
14-
>Log in</InputButtonElement
16+
<SearchBar class="mr-24" />
17+
<ButtonElement to="/login-page" type="primary" class="mr-3"
18+
>Log in</ButtonElement
1519
>
16-
<InputButtonElement type="secondary" class="mr-10"
17-
>Sign up</InputButtonElement
20+
<ButtonElement to="/signup" type="secondary" class="mr-10"
21+
>Sign up</ButtonElement
1822
>
1923
</div>
2024
</nav>

0 commit comments

Comments
 (0)